L2-311: Registration e2e in CI pipeline (#558)

# Motivation

Registration e2e tests working in the CI pipeline.

# Changes

* Added "internet_identity" project to `dfx.json`.
* Proxy Internet Identity to localhost:8087.
* Added IDENTITY_SERVICE_URL when building NNS Dapp for e2e tests.
* Deploy of NNS Dapp for e2e tests all in Svelte.

# Tests

* Enable registration e2e test.

.github/workflows/build.yml

@@ -94,9 +94,11 @@ jobs:
           dfx start --background
           dfx canister --no-wallet create --all
 
+      # IDENTITY_SERVICE_URL needs to match `e2e-tests/test.js`
+      # REDIRECT_TO_LEGACY=never build and deploys only Svelte
       - name: Deploy
         run: |
-          DEPLOY_ENV=local dfx deploy --no-wallet --network local
+          REDIRECT_TO_LEGACY=never DEPLOY_ENV=local IDENTITY_SERVICE_URL=http://localhost:8087 dfx deploy --no-wallet --network local --argument '(null)'
 
       - name: Build proxy
         working-directory: proxy
@@ -111,6 +113,7 @@ jobs:
 
           # wipe the screenshots, they will be re-committed
           rm -rf screenshots
+          set -o pipefail
           npm run test | tee -a wdio.log
 
       - name: Stop replica

dfx.json

@@ -6,6 +6,12 @@
       "candid": "rs/nns-dapp.did",
       "wasm": "nns-dapp.wasm",
       "build": "./build.sh"
+    },
+    "internet_identity": {
+      "type": "custom",
+      "wasm": "internet_identity.wasm",
+      "candid": "internet_identity.did",
+      "build": "curl -sSL https://github.com/dfinity/internet-identity/releases/download/release-initial/internet_identity_dev.wasm -o internet_identity.wasm"
     }
   },
   "networks": {

e2e-tests/package.json

@@ -12,7 +12,7 @@
     "@wdio/local-runner": "^7.16.13",
     "@wdio/mocha-framework": "^7.16.13",
     "@wdio/spec-reporter": "^7.16.13",
-    "chromedriver": "^97.0.0",
+    "chromedriver": "^98.0.0",
     "prettier": "^2.5.0",
     "proxy": "file:../proxy",
     "ts-node": "^10.4.0",

e2e-tests/specs/example.e2e.ts

@@ -5,13 +5,21 @@
  */
 function waitForLoad(browser) {
   // Check that the page has completely loaded, and we are not in the intermediate service worker bootstrap page:
-  return browser.waitUntil(() => browser.execute(() => {
-    // We do not want the service worker bootstrap page, so:
-    const serviceWorkerTitlePattern = /Content Validation Bootstrap/i;
-    const isServiceWorkerBootstrapPage = !!document.title.match(serviceWorkerTitlePattern);
-    // Check that the page has loaded and that it isn't the intermediate bootstrap page.
-    return (document.readyState === 'complete') && !isServiceWorkerBootstrapPage;
-  }), {timeout: 60_000});
+  return browser.waitUntil(
+    () =>
+      browser.execute(() => {
+        // We do not want the service worker bootstrap page, so:
+        const serviceWorkerTitlePattern = /Content Validation Bootstrap/i;
+        const isServiceWorkerBootstrapPage = !!document.title.match(
+          serviceWorkerTitlePattern
+        );
+        // Check that the page has loaded and that it isn't the intermediate bootstrap page.
+        return (
+          document.readyState === "complete" && !isServiceWorkerBootstrapPage
+        );
+      }),
+    { timeout: 60_000 }
+  );
 }
 
 describe("landing page", () => {
@@ -47,22 +55,22 @@ describe("landing page", () => {
 
   // DO NOT RUN ON CI PIPELINE
   // TODO: Enable for CI Pipeline
-  xit("register and back to dashboard", async () => {
+  it("register and back to dashboard", async () => {
     await browser.url("/v2/");
 
+    await waitForLoad(browser);
+
     await browser.$("h1").waitForExist();
 
     // Click Login Button
-    await browser.$("button").click();
+    // We have the button from the TEST ENVIRONMENT banner
+    await browser.$("main button").waitForExist();
+    await browser.$("main button").click();
 
     // REGISTRATION
-  
+
     // Internet Identity
-    // TODO: Deploy II canisters to localhost and proxy them.
-    // How do we do this when they are in another repo? Do we have a repository of docker images?
-    // TODO: Create docker image of NNS Dapp with IDENTITY_SERVICE_URL pointing to II proxy
-    // https://qjdve-lqaaa-aaaaa-aaaeq-cai.nnsdapp.dfinity.network/#authorize
-    const iiURL = "https://qjdve-lqaaa-aaaaa-aaaeq-cai.nnsdapp.dfinity.network/#authorize"
+    const iiURL = `${process.env.II_URL}/#authorize`;
     await browser.switchWindow(iiURL);
     const registerButton = await browser.$("#registerButton");
     await registerButton.waitForExist({ timeout: 10_000 });
@@ -73,7 +81,7 @@ describe("landing page", () => {
     await registerAlias.waitForExist();
     await registerAlias.setValue("My Device");
 
-    await browser.$("button[type=\"submit\"]").click();
+    await browser.$('button[type="submit"]').click();
 
     // Captcha Page
     const captchaInput = await browser.$("#captchaInput");
@@ -102,25 +110,27 @@ describe("landing page", () => {
     const skipButton = await browser.$("#displayWarningRemindLater");
     await skipButton.waitForExist();
     await skipButton.click();
-    
+
     // Confirm Redirect Page
     const proceedButton = await browser.$("#confirmRedirect");
     await proceedButton.waitForExist();
     await proceedButton.click();
 
-    await browser.switchWindow("Network Nervous System");
-
-    await browser.$("h1").waitForExist();
+    await browser.switchWindow(process.env.NNS_DAPP_URL);
+
+    // At this point it's still the login page
+    // We wait for the header of the dashboard
+    await browser.$('header').waitForExist({ timeout: 20_000 });
     const title = await browser.$("h1");
+    const titleText = await title.getText();
+
+    expect(titleText).toBe("Accounts");
+
+    // remove spinner to make screenshots deterministic
+    const spinner = await browser.$('main section svg');
+    await spinner.waitForExist();
+    await browser.execute(() => document.querySelector('main section svg').remove());
 
-
-    await browser.waitUntil(
-      async () => {
-        return (await title.getText()) === "Accounts";
-      },
-      { timeout: 20_000 }
-    );
-
     await browser["screenshot"]("home-page");
     // TODO: Deploy Ledger and Governance canisters and proxy them
     // How do we do this when they are in another repo? Do we have a repository of docker images?

e2e-tests/test.js

@@ -12,18 +12,21 @@ const fs = require("fs");
  * Read the values from dfx.json and canister_ids.json
  */
 const CANISTER_IDS_PATH = `${__dirname}/../.dfx/local/canister_ids.json`;
-let canister_id;
+let nns_canister_id;
+let ii_canister_id;
 try {
   const canister_ids = JSON.parse(fs.readFileSync(CANISTER_IDS_PATH, "utf8"));
-  canister_id = canister_ids["nns-dapp"].local;
+  nns_canister_id = canister_ids["nns-dapp"].local;
+  ii_canister_id = canister_ids["internet_identity"].local;
 } catch (e) {
   console.log(
     `Could not read 'nns-dapp' local canister ID from ${CANISTER_IDS_PATH}`
   );
   throw e;
 }
 
-console.log(`Using canister ID: ${canister_id}`);
+console.log(`NNS Dapp using canister ID: ${nns_canister_id}`);
+console.log(`II using canister id: ${ii_canister_id}`);
 
 const DFX_JSON_PATH = `${__dirname}/../dfx.json`;
 let replica_host;
@@ -47,6 +50,8 @@ console.log(`Using replica host: ${replica_host}`);
  * hence we set it as the `NNS_DAPP_URL` environment variable which is read by
  * wdio.conf.js..
  */
+const II_PORT = 8087;
+const II_URL = `http://localhost:${II_PORT}`;
 const NNS_DAPP_PORT = 8086;
 const NNS_DAPP_URL = `http://localhost:${NNS_DAPP_PORT}`;
 
@@ -55,7 +60,8 @@ const child_process = require("child_process");
 const proxy = child_process.spawn("proxy", [
   "--replica-host",
   replica_host,
-  `${canister_id}:${NNS_DAPP_PORT}`,
+  `${nns_canister_id}:${NNS_DAPP_PORT}`,
+  `${ii_canister_id}:${II_PORT}`,
 ]);
 
 proxy.stdout.on("data", (data) => {
@@ -70,14 +76,29 @@ proxy.stdout.on("close", (code) => {
  * Start the tests
  */
 const wdio = child_process.spawn("npm", ["run", "wdio"], {
-  env: { ...process.env, NNS_DAPP_URL: NNS_DAPP_URL },
+  env: { ...process.env, NNS_DAPP_URL, II_URL },
 });
 
 wdio.stdout.on("data", (data) => {
   console.log(`wdio: ${data}`);
 });
 
+wdio.stderr.on("data", (data) => {
+  console.log(`wdio error: ${data}`);
+});
+
 wdio.stdout.on("close", (code) => {
   console.log(`wdio returned with ${code}`);
   proxy.kill();
 });
+
+wdio.on('exit', (code, signal) => {
+  if (code > 0) {
+    // bubble up error from wdio tests
+    throw new Error(`End-to-end tests returned with ${code}`);
+  } else if (signal) {
+    console.error('Child was killed with signal', signal);
+  } else {
+    console.log('Child exited okay');
+  }
+})

e2e-tests/wdio.conf.ts

@@ -1,7 +1,5 @@
 import { existsSync, mkdirSync } from "fs";
 
-console.log(process.env);
-
 export const config: WebdriverIO.Config = {
   baseUrl: process.env.NNS_DAPP_URL || "http://localhost:8080",
 

internet_identity.did

@@ -0,0 +1,2 @@
+// needed to deploy II to local replica
+service : () -> {}