diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 63da409066233468cc63ac8aeef8264537e973d0..afd8e0988aefbe0b1ca99e4c39cd79373d9d5445 100644 --- a/.gitlab-ci.yml +++ b/.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}" diff --git a/examples/ts/signature-extension/README.md b/examples/ts/signature-extension/README.md index 74001ccd154e171b15627e013b32f616dd1800ec..553302ca08455bf22a826ca0ac11a101564b35be 100644 --- a/examples/ts/signature-extension/README.md +++ b/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 diff --git a/examples/ts/signature-extension/__tests__/assets/fixture.ts b/examples/ts/signature-extension/__tests__/assets/fixture.ts new file mode 100644 index 0000000000000000000000000000000000000000..effcb9cd98c4ba8d0abf7fcc8dbdde65fa57ba9c --- /dev/null +++ b/examples/ts/signature-extension/__tests__/assets/fixture.ts @@ -0,0 +1,35 @@ +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); + }, +}); diff --git a/examples/ts/signature-extension/__tests__/index.spec.ts b/examples/ts/signature-extension/__tests__/index.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..3314b06bd73466ad6f406e541eeee9b96cf8c9fb --- /dev/null +++ b/examples/ts/signature-extension/__tests__/index.spec.ts @@ -0,0 +1,38 @@ +import { test } from "./assets/fixture"; +import { expect } from "@playwright/test"; + +test.describe('Signature extension tests', () => { + test('Should be able to sign transction using key chain extension.', async ({ page, extensionId, context }) => { + page.setViewportSize({ width: 500, height: 700 }); + 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('guest4test1'); + const privateKeyInput = page.getByPlaceholder('Private Key '); + await privateKeyInput.fill('5KdYfc7id78M2xfo3Lr9YcBJygK3vXA6oP1dNMetQYvMYvN6XZJ'); + const submitButton = page.getByTestId('submit-button'); + await submitButton.click(); + await page.getByText('Skip').waitFor(); + await page.goto('localhost:1234', { waitUntil: 'load' }); + const keyChainButton = page.getByText('Use Keychain'); + const popupPromise = context.waitForEvent('page'); + await keyChainButton.click(); + const popup = await popupPromise; + const popupSubmitButton = popup.getByText('Confirm'); + await popupSubmitButton.waitFor(); + await popupSubmitButton.click(); + await page.waitForTimeout(500); + const result = await page.waitForSelector('#tx-result'); + const tx = JSON.parse(await result.textContent() as string); + expect(tx.signatures).toHaveLength(1); + }); +}); \ No newline at end of file diff --git a/examples/ts/signature-extension/common-data.ts b/examples/ts/signature-extension/common-data.ts index daf510fe26124eff9bd9c642a9bb5e7f57a0eb13..7f6906ab4d334becf8c809244f7be4771a21e244 100644 --- a/examples/ts/signature-extension/common-data.ts +++ b/examples/ts/signature-extension/common-data.ts @@ -1,5 +1,5 @@ -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 = { diff --git a/examples/ts/signature-extension/package.json b/examples/ts/signature-extension/package.json index 284f6fb5868d16036d01503327bbb2bbefa59dc6..dd73e617ec900286afa8159cc423028e00384ea3 100644 --- a/examples/ts/signature-extension/package.json +++ b/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" } diff --git a/examples/ts/signature-extension/playwright.config.ts b/examples/ts/signature-extension/playwright.config.ts new file mode 100644 index 0000000000000000000000000000000000000000..e592b7159f5d2c421cedd23d4de1e8ad9e30c52d --- /dev/null +++ b/examples/ts/signature-extension/playwright.config.ts @@ -0,0 +1,16 @@ +import { defineConfig, devices } from '@playwright/test'; + +export default defineConfig({ + testDir: './__tests__', + + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + ], + + webServer: { + command: 'npm run test:manual' + } +}); diff --git a/examples/ts/signature-extension/test/index.html b/examples/ts/signature-extension/test/index.html index 558c0f36e77d633465561798aafca3d30004027c..259c7749d4d3889eeda52b3fb96b6bc800b22476 100644 --- a/examples/ts/signature-extension/test/index.html +++ b/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(); diff --git a/ts/package.json b/ts/package.json index 036380df805aaaf350ba49fa80d8a99191f98d75..fb86c6c14163fa369cf4e3d0b50dcd7477cd39c0 100644 --- a/ts/package.json +++ b/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": { ".": {