Add issuer and RP expect in VC e2e flow (#2416)

* Add issuer and RP expect in VC e2e flow

* Add params to call

* Fix other call

* Use known dapps

src/frontend/src/flows/verifiableCredentials/allowCredentials.ts

@@ -108,7 +108,7 @@ const allowCredentialsTemplate = ({
           <div class="c-card__label">
             <h3>${copy.issued_by}</h3>
           </div>
-          <h2 class="t-title">${originDapp.name}</h2>
+          <h2 class="t-title" data-role="issuer">${originDapp.name}</h2>
         </div>
       </div>
     </div>
@@ -136,7 +136,7 @@ const allowCredentialsTemplate = ({
           <div class="c-card__label">
             <h3>${copy.relying_party}</h3>
           </div>
-          <h2 class="t-title">${relyingDapp.name}</h2>
+          <h2 class="t-title" data-role="relying-party">${relyingDapp.name}</h2>
         </div>
       </div>
     </div>

src/frontend/src/test-e2e/constants.ts

@@ -1,3 +1,4 @@
+import { KnownDapp } from "$src/flows/dappsExplorer/dapps";
 import { readCanisterId } from "@dfinity/internet-identity-vite-plugins/utils";
 
 // XXX: this is not exactly a constant (since it might change on every node eval) but in
@@ -9,6 +10,11 @@ export const TEST_APP_CANONICAL_URL = `https://${testAppCanisterId}.icp0.io`;
 export const TEST_APP_CANONICAL_URL_RAW = `https://${testAppCanisterId}.raw.icp0.io`;
 export const TEST_APP_CANONICAL_URL_LEGACY = `https://${testAppCanisterId}.ic0.app`;
 export const TEST_APP_NICE_URL = "https://nice-name.com";
+export const KNOWN_TEST_DAPP = new KnownDapp({
+  name: "Test Dapp",
+  website: "https://nice-name.com",
+  logo: "no-such-logo",
+});
 
 export const ISSUER_APP_URL = `https://${issuerAppCanisterId}.icp0.io`;
 export const ISSUER_APP_URL_LEGACY = `https://${issuerAppCanisterId}.ic0.app`;

src/frontend/src/test-e2e/verifiableCredentials/alternativeOrigins.test.ts

@@ -5,6 +5,7 @@ import {
   II_URL,
   ISSUER_APP_URL,
   ISSUER_CUSTOM_ORIGIN_NICE_URL,
+  KNOWN_TEST_DAPP,
   TEST_APP_CANONICAL_URL,
   TEST_APP_NICE_URL,
 } from "$src/test-e2e/constants";
@@ -62,6 +63,8 @@ test("Can issue credential with alternative RP derivation origin", async () => {
       vcTestApp,
       browser,
       authConfig,
+      relyingParty: TEST_APP_CANONICAL_URL,
+      issuer: ISSUER_APP_URL,
     });
     const alias = JSON.parse(alias_);
 
@@ -86,6 +89,9 @@ test("Can issue credential with alternative RP derivation origin", async () => {
       vcTestApp: vcTestAppAlt,
       browser,
       authConfig,
+      relyingParty: TEST_APP_NICE_URL,
+      issuer: ISSUER_APP_URL,
+      knownDapps: [KNOWN_TEST_DAPP],
     });
 
     const aliasAlt = JSON.parse(aliasAlt_);
@@ -123,6 +129,9 @@ test("Cannot issue credential with bad alternative RP derivation origin", async
       vcTestApp: vcTestAppAlt,
       browser,
       authConfig,
+      relyingParty: TEST_APP_NICE_URL,
+      issuer: ISSUER_APP_URL,
+      knownDapps: [KNOWN_TEST_DAPP],
     });
 
     expect(result.result).toBe("aborted");
@@ -188,6 +197,9 @@ test("Can issue credential with alternative issuer derivation origin", async ()
       vcTestApp,
       browser,
       authConfig,
+      relyingParty,
+      issuer,
+      knownDapps: [KNOWN_TEST_DAPP],
     });
   });
 }, 300_000);

src/frontend/src/test-e2e/verifiableCredentials/index.test.ts

@@ -5,6 +5,7 @@ import {
   II_URL,
   ISSUER_APP_URL,
   ISSUER_APP_URL_LEGACY,
+  KNOWN_TEST_DAPP,
   TEST_APP_CANONICAL_URL,
   TEST_APP_CANONICAL_URL_LEGACY,
 } from "$src/test-e2e/constants";
@@ -110,6 +111,9 @@ testConfigs.forEach(({ relyingParty, issuer, authType }) => {
             vcTestApp,
             browser,
             authConfig,
+            relyingParty,
+            issuer,
+            knownDapps: [KNOWN_TEST_DAPP],
           });
 
           // Perform a basic check on the alias

src/frontend/src/test-e2e/verifiableCredentials/utils.ts

@@ -18,6 +18,7 @@ import {
 
 import { II_URL } from "$src/test-e2e/constants";
 
+import { KnownDapp } from "$src/flows/dappsExplorer/dapps";
 import { nonNullish } from "@dfinity/utils";
 
 // Open the issuer demo, authenticate and register as an employee
@@ -113,6 +114,9 @@ export const getVCPresentation = async (args: {
   vcTestApp: VcTestAppView;
   browser: WebdriverIO.Browser;
   authConfig: AuthConfig;
+  relyingParty: string;
+  issuer: string;
+  knownDapps?: KnownDapp[];
 }): Promise<{ alias: string; credential: string }> => {
   const result = await getVCPresentation_(args);
   if (result.result === "aborted") {
@@ -129,10 +133,16 @@ export const getVCPresentation_ = async ({
   vcTestApp,
   browser,
   authConfig: { setupAuth, finalizeAuth },
+  relyingParty,
+  issuer,
+  knownDapps = [],
 }: {
   vcTestApp: VcTestAppView;
   browser: WebdriverIO.Browser;
   authConfig: AuthConfig;
+  relyingParty: string;
+  issuer: string;
+  knownDapps?: KnownDapp[];
 }): Promise<
   | { result: "ok"; alias: string; credential: string }
   | { result: "aborted"; reason: string }
@@ -148,6 +158,15 @@ export const getVCPresentation_ = async ({
     return { result: "aborted", reason };
   }
 
+  // II will show the issuer and relying party name if they are known dapps.
+  const issuerName: string =
+    knownDapps.find((dapp) => dapp.hasOrigin(issuer))?.name ?? issuer;
+  const rpName: string =
+    knownDapps.find((dapp) => dapp.hasOrigin(relyingParty))?.name ??
+    relyingParty;
+
+  expect(await vcAllow.getIssuer()).toBe(issuerName);
+  expect(await vcAllow.getRelyingParty()).toBe(rpName);
   expect(await vcAllow.hasUserNumberInput()).toBe(false);
 
   await vcAllow.allow();

src/frontend/src/test-e2e/views.ts

@@ -618,6 +618,14 @@ export class VcAllowView extends View {
   async hasUserNumberInput(): Promise<boolean> {
     return await this.browser.$('[data-role="anchor-input"]').isExisting();
   }
+
+  async getRelyingParty(): Promise<string> {
+    return await this.browser.$('[data-role="relying-party"]').getText();
+  }
+
+  async getIssuer(): Promise<string> {
+    return await this.browser.$('[data-role="issuer"]').getText();
+  }
 }
 
 export class IssuerAppView extends View {