Support/add more discover tests (LedgerHQ#611)

* ci: use a free port for the dummy app server and use env to mock the manifest

* removed redundant comment

* moved dummy app to test folder

* fixed eslint issue with dummy app

* added step to test desktop composite

* added more steps to discover tests

* forced click of sign continue button

* fixed shell line in gh action

* fixed pnpm filter

* fixed sign tx function

* removed dummy live app

* moved dummy app to test folder

* fixed eslint issue with dummy app

* added step to test desktop composite

* added more steps to discover tests

* forced click of sign continue button

* fixed shell line in gh action

* fixed pnpm filter

* fixed sign tx function

* removed dummy live app

* chore: regen lockfile

* ci: cleanup shared git folder before checkout

* adding dummy live app back in

* Revert "ci: cleanup shared git folder before checkout"

This reverts commit 1a366a6.

* removed screenshots and finished test flow

* updated pnpm lock

* updated pnpm.lock

* added cross env

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* added build step to the generate screenshots

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* update screenshots (macos-latest)

* reverted to develop screenshots

* added wait for loader

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* trigger ci

* updated pnpm.lock

* updated pnpm.lock to develop

* updated pnpm.lock

* fixed typo in discover test

* update screenshots (ubuntu-latest)

* update screenshots (macos-latest)

* update screenshots (windows-latest)

* removing old screenshots

* regenerated lock file

* removed unnecessary screenshots from PR

* trigger ci

* looking for first bitcoin 1 legacy

* trigger ci to see if tests are still stable

* removing addDependencies for postcss to see if it still works

* added some details to the readme

* Adding postcss-loader step back in

Co-authored-by: elbywan <[email protected]>
Co-authored-by: Team Live <[email protected]>

.pnpmfile.cjs

@@ -148,6 +148,11 @@ function readPackage(pkg, context) {
       addDependencies("react-native-locale", {
         fbjs: "*",
       }),
+      addDependencies("postcss-loader", {
+        "postcss-flexbugs-fixes": "*",
+        "postcss-preset-env": "*",
+        "postcss-normalize": "*",
+      }),
       addPeerDependencies("any-observable", {
         rxjs: "*",
       }),

apps/ledger-live-desktop/.gitignore

@@ -120,6 +120,7 @@ src/renderer/generated/
 tests/coverage/
 tests/artifacts/*
 !tests/artifacts/.gitkeep
+tests/utils/dummy-live-app/build
 
 # Yalc
 .yalc

apps/ledger-live-desktop/tests/models/DiscoverPage.ts

@@ -11,6 +11,8 @@ export class DiscoverPage {
   readonly selectBtcAsset: Locator;
   readonly selectBtcAccount: Locator;
   readonly disclaimerCheckbox: Locator;
+  readonly signContinueButton: Locator;
+  readonly confirmText: Locator;
 
   constructor(page: Page) {
     this.page = page;
@@ -21,8 +23,12 @@ export class DiscoverPage {
     this.requestAccountButton = page.locator("data-test-id=request-single-account-button");
     this.selectAccountTitle = page.locator("text=Choose a crypto asset)");
     this.selectBtcAsset = page.locator("text=Bitcoin").first();
-    this.selectBtcAccount = page.locator("text=Bitcoin 1 (legacy)");
+    this.selectBtcAccount = page.locator("text=Bitcoin 1 (legacy)").first();
     this.disclaimerCheckbox = page.locator("data-test-id=dismiss-disclaimer");
+    this.signContinueButton = page.locator("text=Continue");
+    this.confirmText = page.locator(
+      "text=Please confirm the operation on your device to finalize it",
+    );
   }
 
   async openTestApp() {
@@ -47,7 +53,23 @@ export class DiscoverPage {
   }
 
   async verifyAddress() {
-    await this.clickWebviewElement("[data-test-id=verify-address-button]]");
+    await this.clickWebviewElement("[data-test-id=verify-address-button]");
+  }
+
+  async listCurrencies() {
+    await this.clickWebviewElement("[data-test-id=list-currencies-button]");
+  }
+
+  async signTransaction() {
+    await this.clickWebviewElement("[data-test-id=sign-transaction-button]");
+  }
+
+  async continueToSignTransaction() {
+    await this.signContinueButton.click({force: true});
+  }
+
+  async waitForConfirmationScreenToBeDisplayed() {
+    await this.confirmText.waitFor({state: "visible"});
   }
 
   async clickWebviewElement(elementName: string) {

apps/ledger-live-desktop/tests/models/Modal.ts

@@ -58,4 +58,8 @@ export class Modal {
   async close() {
     await this.closeButton.click();
   }
+
+  async waitForModalToDisappear() {
+    await this.container.waitFor({state: "detached"})
+  }
 }

apps/ledger-live-desktop/tests/specs/services/discover.spec.ts

@@ -3,6 +3,8 @@ import { expect } from "@playwright/test";
 import { DiscoverPage } from "../../models/DiscoverPage";
 import { Layout } from "../../models/Layout";
 import { Drawer } from "tests/models/Drawer";
+import { Modal } from "tests/models/Modal";
+import { DeviceAction } from "tests/models/DeviceAction";
 import * as server from "../../utils/serve-dummy-app";
 
 // Comment out to disable recorder
@@ -43,7 +45,9 @@ test("Discover", async ({ page }) => {
 
   const discoverPage = new DiscoverPage(page);
   const drawer = new Drawer(page);
+  const modal = new Modal(page);
   const layout = new Layout(page);
+  const deviceAction = new DeviceAction(page);
 
   await test.step("Navigate to catalog", async () => {
     await layout.goToDiscover();
@@ -52,7 +56,7 @@ test("Discover", async ({ page }) => {
 
   await test.step("Open Test App", async () => {
     await discoverPage.openTestApp();
-    await expect.soft(page).toHaveScreenshot("open-test-app.png");
+    await expect.soft(drawer.content).toContainText("External Application");
   });
 
   await test.step("Accept Live App Disclaimer", async () => {
@@ -67,22 +71,51 @@ test("Discover", async ({ page }) => {
     await expect.soft(page).toHaveScreenshot("live-app-list-all-accounts.png");
   });
 
-  await test.step("Request Account modal - open", async () => {
+  await test.step("Request Account drawer - open", async () => {
     await discoverPage.requestAccount();
-    await expect.soft(page).toHaveScreenshot("live-app-request-account-modal-1.png");
+    await expect.soft(page).toHaveScreenshot("live-app-request-account-drawer.png");
   });
 
   await test.step("Request Account - select asset", async () => {
     await discoverPage.selectAsset();
-    await expect.soft(page).toHaveScreenshot("live-app-request-account-modal-2.png");
+    await expect.soft(page).toHaveScreenshot("live-app-request-account-select-account.png");
   });
 
   await test.step("Request Account - select BTC", async () => {
     await discoverPage.selectAccount();
-    await expect.soft(page).toHaveScreenshot("live-app-request-account-modal-3.png");
+    await expect.soft(page).toHaveScreenshot("live-app-request-account-output.png");
   });
 
-  await test.step("Request Account - single account output", async () => {
-    await expect.soft(page).toHaveScreenshot("live-app-request-single-account-output.png");
+  await test.step("List currencies", async () => {
+    await discoverPage.listCurrencies();
+    await expect.soft(page).toHaveScreenshot("live-app-list-currencies.png");
+  });
+
+  await test.step("Verify Address - modal", async () => {
+    await discoverPage.verifyAddress();
+    await deviceAction.openApp();
+    await expect.soft(page).toHaveScreenshot("live-app-verify-address.png");
+  });
+
+  await test.step("Verify Address - address output", async () => {
+    await modal.waitForModalToDisappear();
+    await expect.soft(page).toHaveScreenshot("live-app-verify-address-output.png");
+  });
+
+  await test.step("Sign Transaction - info modal", async () => {
+    await discoverPage.signTransaction();
+    await expect.soft(page).toHaveScreenshot("live-app-sign-transaction-info.png");
+  });
+
+  await test.step("Sign Transaction - confirmation modal", async () => {
+    await discoverPage.continueToSignTransaction();
+    await layout.waitForLoadingSpinnerToHaveDisappeared();
+    await discoverPage.waitForConfirmationScreenToBeDisplayed();
+    await expect.soft(page).toHaveScreenshot("live-app-sign-transaction-confirm.png");
+  });
+
+  await test.step("Sign Transaction - signature output", async () => {
+    await modal.waitForModalToDisappear();
+    await expect.soft(page).toHaveScreenshot("live-app-sign-transaction-output.png");
   });
 });

apps/ledger-live-desktop/tests/utils/dummy-live-app/README.md

@@ -0,0 +1,19 @@
+# Ledger Live Dummy Platform App
+
+The purpose of this app is to allow automated front end testing of Ledger Live Platform apps, and verify that Ledger Live correctly:
+- handles the rendering of external Live Apps
+- handles calls of the Live SDK from external Live apps
+
+The app is a simple [Create React App](https://github.com/facebook/create-react-app) which uses the [Ledger Live App SDK](https://www.npmjs.com/package/@ledgerhq/live-app-sdk). It has some buttons that have hardcoded responses that can be triggered from the playwright tests, thus allowing us to check the UI. This means the app isn't suitable for manual testing or full E2E testing since it is not dynamic, and does not make calls to external services or the Nano itself.
+
+## How to run locally for development
+
+Run `pnpm --filter="dummy-live-app" start`.
+
+## Quick script to build the app from scratch
+
+To use the Dummy app in the Playwright tests, you must install and build the dependencies and source code for the dummy app. To do this run the following from the root folder of this monorepo:
+
+`pnpm clean && pnpm --filter="dummy-live-app" i && pnpm --filter="dummy-live-app" build`
+
+Then run `pnpm --filter="dummy-live-app" serve`

apps/ledger-live-desktop/tests/utils/dummy-live-app/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "dummy-live-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@ledgerhq/live-app-sdk": "^0.5.0",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "5.0.0",
+    "typescript": "^4.4.2"
+  },
+  "scripts": {
+    "start": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts start",
+    "build": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts build",
+    "test": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "cross-env": "^7.0.3"
+  }
+}

apps/ledger-live-desktop/tests/utils/dummy-live-app/public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Ledger Live App created using create-react-app"
+    />
+    <title>Ledger Live App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

apps/ledger-live-desktop/tests/utils/dummy-live-app/src/App.css

@@ -0,0 +1,34 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 10vmin;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.button-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+.output-container {
+  background-color: black;
+  text-align: start;
+  overflow: scroll;
+  /* margin: 10; */
+  font-size: 12px;
+  width: 90%;
+}