Extend signature extension example by signing transction with key chain extension playwright test

.gitlab-ci.yml

@@ -274,6 +274,7 @@ test_wax_wasm_examples:
   variables:
     SOURCE_DIR: "${CI_PROJECT_DIR}/ts"
     PACKAGE_TGZ_PATH: "${BUILT_PACKAGE_PATH}"
+    GIT_SUBMODULE_STRATEGY: "normal"
 
   script:
     - cd "${SOURCE_DIR}"

examples/ts/signature-extension/README.md

@@ -8,7 +8,7 @@ This example presents different ways of implementing 3rd party apps authorizatio
 To test this example:
 
 1. Install keychain extension
-2. Import `guest4test` posting key to your wallet
+2. Import `guest4test1` active key to your wallet
 3. Install dependencies: `pnpm install`
-4. Run parcel: `pnpm test`
+4. Run parcel: `pnpm test:manual`
 5. Goto [http://localhost:1234](http://localhost:1234), sign the transaction and check logs

examples/ts/signature-extension/__tests__/assets/fixture.ts

+import { chromium, test as base, type BrowserContext } from "@playwright/test";
+import path, { dirname } from "path";
+import { fileURLToPath } from "url";
+
+export const test = base.extend<{
+  context: BrowserContext,
+  extensionId: string
+}>({
+  context: async ({}, use) => {
+    const __dirname = dirname(fileURLToPath(import.meta.url));
+    const pathToExtension = path.join(__dirname, "../extensions/Hive-Keychain");
+
+    const browserContext = await chromium.launchPersistentContext('', {
+      headless: false,
+      args: [
+        `--disable-extensions-except=${pathToExtension}`,
+        `--load-extension=${pathToExtension}`,
+        '--headless=chromium'
+      ],
+      ignoreDefaultArgs: ['--disable-component-extensions-with-background-pages'],
+    });
+
+    await use(browserContext);
+
+    await browserContext.close();
+  },
+  extensionId: async ({ context }, use) => {
+    let [background] = context.serviceWorkers();
+    if (!background)
+      background = await context.waitForEvent('serviceworker');
+
+    const extensionId = background.url().split('/')[2];
+    await use(extensionId);
+  },
+});

examples/ts/signature-extension/__tests__/index.spec.ts

+import { test } from "./assets/fixture";
+import { expect, Page } from "@playwright/test";
+
+test.describe('Signature extension tests', () => {
+  test('Should be able to sign transction using key chain extension.', async ({ page, extensionId, context, baseDirectoryPath, testedAccountAuthorityData}) => {
+    page.setViewportSize({ width: 500, height: 700 });
+
+    //////////////// Import settings begin (containing mirrornet endpoint configuration)
+
+    const settingFilePath = baseDirectoryPath + '/' + 'settings.kc';
+
+    console.log(`Attempting to import settings from: ${settingFilePath}`);
+
+    await page.goto(`chrome-extension://${extensionId}/import-preferences.html`, { waitUntil: 'load' });
+
+    page.once('filechooser', async fileChooser => {
+      await fileChooser.setFiles(settingFilePath);
+      }
+    );
+
+    await page.getByRole('button', { name: 'Choose a file' }).click();
+
+    await page.getByRole('button', { name: 'Import' }).click();
+
+    //////////////// Import settings end
+
+    await page.goto(`chrome-extension://${extensionId}/popup.html`, { waitUntil: 'load' });
+    const input = page.getByPlaceholder('New Password');
+    const confirm = page.getByPlaceholder('Confirm');
+    await input.fill('Password123');
+    await confirm.fill('Password123');
+    const checkbox = page.locator('#accept-terms-and-condition-inner-input');
+    await checkbox.click();
+
+    const button = page.getByTestId('signup-button');
+    await button.click();
+    const useButton = page.getByTestId('add-by-keys-button');
+    await useButton.click();
+    const usernameInput = page.getByPlaceholder('Username');
+    await usernameInput.fill(testedAccountAuthorityData.accountName);
+    const privateKeyInput = page.getByPlaceholder('Private Key ');
+    await privateKeyInput.fill(testedAccountAuthorityData.privateKey);
+
+    const submitButton = page.getByTestId('submit-button');
+    await submitButton.click();
+    const skip = page.getByText('Skip');
+
+    await skip.waitFor();
+    await skip.click();
+
+    /// Regular keychain setup completed
+
+    const testPage: Page = page;
+
+    await testPage.goto('localhost:1234', {  waitUntil: 'load' });
+
+    /// uncomment to allow debugging and recording while playwright performs actions
+    //await page.pause();
+
+    console.log("Acquiring a popupPromise");
+
+    const popupPromise = context.waitForEvent('page');
+
+    const keyChainButton = testPage.getByRole('button', {name: 'Use Keychain'});
+    await keyChainButton.waitFor();
+
+    console.log("Attempting to press 'Use keychain'");
+
+     await keyChainButton.focus();
+     await keyChainButton.click({delay: 750});
+
+     console.log("Awaiting popupPromise");
+
+    const popup = await popupPromise;
+    console.log("new popup detected");
+    console.log("Looking for Confirm button");
+    const popupSubmitButton = popup.getByRole('button', {name: 'Confirm'});
+    await popupSubmitButton.waitFor();
+    console.log("Attempting to click Confirm button");
+    await popupSubmitButton.focus();
+    await popupSubmitButton.click({delay: 750});
+
+    console.log("Attempting to wait for form close");
+    await popup.waitForEvent('close');
+
+    console.log("waitForTimeout(500);");
+    await testPage.waitForTimeout(500);
+
+    console.log("waitForSelector");
+
+    const keyMatchState = await testPage.waitForSelector("#key-matching-result");
+    const keyMatchText = await keyMatchState.textContent() as string;
+
+    const result = await testPage.waitForSelector('#tx-result');
+    const tx = JSON.parse(await result.textContent() as string);
+
+    //await page.pause();
+
+    expect(tx.signatures).toHaveLength(1);
+    expect(keyMatchText).toBe('Decoded and signing key match. Remote endpoint accepted transaction authority. Transaction has been signed using: HF26 serialization form');
+  });
+});
\ No newline at end of file

examples/ts/signature-extension/common-data.ts

-export const accountName = "guest4test";
-export const publicKey = "STM8XQJiRBND7q6Cu1kxyRgLVLU3y1B5iGFU5VAqSpaAK38YFGZP8";
+export const accountName = "guest4test1";
+export const publicKey = "STM8gQN2KodMgmVqTEY372XzZyEUpceKpLWU6igr39MF3D7Qv3Rqo";
 export const privateKey = process.env.PRIVATE_KEY as string;
 
 export const voteData = {

examples/ts/signature-extension/package.json

@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "test": "parcel test/index.html"
+    "build": "tsc",
+    "test": "../../../ts/npm-common-config/scripts/bash/npm-helpers/npm_download_browser_extensions.sh \"${HOME}/preinstalled_browser_extensions\" && ln -sf \"${HOME}/preinstalled_browser_extensions\" ./__tests__/extensions && playwright test --max-failures 1",
+    "test:manual": "parcel test/index.html"
   },
   "dependencies": {
     "@hiveio/wax": "file:../../../ts",
@@ -13,8 +15,11 @@
   "devDependencies": {
     "@parcel/config-default": "^2.13.3",
     "@parcel/transformer-typescript-tsc": "^2.13.3",
+    "@playwright/test": "1.50.1",
+    "@types/node": "^22.13.9",
     "buffer": "^5.5.0||^6.0.0",
     "parcel": "^2.13.3",
     "process": "^0.11.10"
-  }
+  },
+  "packageManager": "pnpm@10.0.0+sha512.b8fef5494bd3fe4cbd4edabd0745df2ee5be3e4b0b8b08fa643aa3e4c6702ccc0f00d68fa8a8c9858a735a0032485a44990ed2810526c875e416f001b17df12b"
 }

examples/ts/signature-extension/playwright.config.ts

+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './__tests__',
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  webServer: {
+    command: 'npm run test:manual'
+  }
+});

examples/ts/signature-extension/test/index.html

@@ -19,8 +19,8 @@
     const txResult = document.getElementById('tx-result');
 
     (async()=> {
-      const keychainProvider = KeychainProvider.for(accountName, "posting");
-      const peakVaultProvider = PeakVaultProvider.for(accountName, "posting");
+      const keychainProvider = KeychainProvider.for(accountName, "active");
+      const peakVaultProvider = PeakVaultProvider.for(accountName, "active");
 
       const chain = await createHiveChain();
 

ts/package.json

@@ -23,7 +23,8 @@
     "examples:vue-webpack": "cd ../examples/ts/vue-webpack && pnpm install && pnpm run build && cd ../../../ts",
     "examples:vue-vite": "cd ../examples/ts/vue-vite && pnpm install && pnpm run test && pnpm run build && cd ../../../ts",
     "examples:react-vite": "cd ../examples/ts/react-vite && pnpm install && pnpm run test && pnpm run build && cd ../../../ts",
-    "examples:nuxt-app": "cd ../examples/ts/nuxt-app && pnpm install && pnpm run test && pnpm run build && cd ../../../ts"
+    "examples:nuxt-app": "cd ../examples/ts/nuxt-app && pnpm install && pnpm run test && pnpm run build && cd ../../../ts",
+    "examples:signature-extension": "cd ../examples/ts/signature-extension && pnpm install && pnpm run build && pnpm run test && cd ../../../ts"
   },
   "exports": {
     ".": {