From e96e17531d7136e285b950b68762f74955a8d7eb Mon Sep 17 00:00:00 2001 From: Tom Beckenham <34339192+tombeckenham@users.noreply.github.com> Date: Wed, 11 Dec 2024 13:38:57 +1100 Subject: [PATCH] Refactor test configuration and structure: - Updated ESLint configuration to include e2e tests. - Changed Playwright test directory from './tests' to './e2e'. - Adjusted TypeScript configuration to include e2e files. - Removed obsolete test files: example.spec.ts and wallet.spec.ts. Closes #243 --- .github/workflows/test.yml | 81 ++++++++++++++++++++++++++++++++++++++ e2e/wallet.test.ts | 33 ++++++++++++++++ eslint.config.mjs | 2 +- playwright.config.ts | 22 +++++------ tests/example.spec.ts | 18 --------- tests/wallet.spec.ts | 43 -------------------- tsconfig.test.json | 2 +- 7 files changed, 126 insertions(+), 75 deletions(-) create mode 100644 .github/workflows/test.yml create mode 100644 e2e/wallet.test.ts delete mode 100644 tests/example.spec.ts delete mode 100644 tests/wallet.spec.ts diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..a1f2224 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,81 @@ +name: Test + +on: + push: + branches: [main, develop] + pull_request: + branches: [main, develop] + +jobs: + test: + runs-on: ubuntu-latest + + services: + flow-emulator: + image: gcr.io/flow-container-registry/emulator:latest + ports: + - 3569:3569 + options: >- + --health-cmd "curl -f http://localhost:3569/v1/blocks/latest" + --health-interval 10s + --health-timeout 5s + --health-retries 5 + + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '22' + + - uses: pnpm/action-setup@v2 + with: + version: '9' + + - name: Install dependencies + run: pnpm install + + - name: Build test version + run: pnpm run build:test + env: + NODE_ENV: test + + - name: Install Playwright Browsers + run: pnpm exec playwright install --with-deps chromium + + - name: Run Playwright tests + run: pnpm run test:e2e + env: + NODE_ENV: test + + - uses: actions/upload-artifact@v4 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 + + lint: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '22' + + - uses: pnpm/action-setup@v2 + with: + version: '9' + + - name: Install dependencies + run: pnpm install + + - name: Run ESLint + run: pnpm run lint + + - name: Check formatting + run: pnpm run format diff --git a/e2e/wallet.test.ts b/e2e/wallet.test.ts new file mode 100644 index 0000000..0861729 --- /dev/null +++ b/e2e/wallet.test.ts @@ -0,0 +1,33 @@ +import path from 'path'; + +import { test, expect, chromium } from '@playwright/test'; + +test('Load extension', async () => { + // Get path to extension + const pathToExtension = path.join(__dirname, '../dist'); + + // Launch browser with extension + const context = await chromium.launchPersistentContext('/tmp/test-user-data-dir', { + headless: false, + args: [`--disable-extensions-except=${pathToExtension}`, `--load-extension=${pathToExtension}`], + }); + + // for manifest v3: + let [background] = context.serviceWorkers(); + if (!background) background = await context.waitForEvent('serviceworker'); + + // Get extension ID from service worker URL + const extensionId = background.url().split('/')[2]; + + // Create a new page and navigate to extension + const page = await context.newPage(); + + // Navigate and wait for network to be idle + await page.goto(`chrome-extension://${extensionId}/index.html#/welcome`); + + // Wait for the welcome page to be fully loaded + await page.waitForSelector('.welcomeBox', { state: 'visible' }); + + // Cleanup + await context.close(); +}); diff --git a/eslint.config.mjs b/eslint.config.mjs index f9fcd4b..f112151 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -86,7 +86,7 @@ export default [ // Test files specific config { - files: ['**/*.test.{js,jsx,ts,tsx}', '**/*.spec.{js,jsx,ts,tsx}', 'playwright.config.ts'], + files: ['e2e/**/*', 'playwright.config.ts'], languageOptions: { parserOptions: { project: './tsconfig.test.json', diff --git a/playwright.config.ts b/playwright.config.ts index a05d8b5..4362fbc 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -22,7 +22,7 @@ export default defineConfig({ /* Opt out of parallel tests on CI. */ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: 'html', + reporter: process.env.CI ? 'github' : 'html', /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Base URL to use in actions like `await page.goto('/')`. */ @@ -30,23 +30,21 @@ export default defineConfig({ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', + video: process.env.CI ? 'on-first-retry' : 'off', + screenshot: process.env.CI ? 'only-on-failure' : 'off', }, /* Configure projects for major browsers */ projects: [ { name: 'chromium', - use: { ...devices['Desktop Chrome'] }, - }, - - { - name: 'firefox', - use: { ...devices['Desktop Firefox'] }, - }, - - { - name: 'webkit', - use: { ...devices['Desktop Safari'] }, + use: { + ...devices['Desktop Chrome'], + // Chrome extension testing configuration + contextOptions: { + extensionPath: './dist', + }, + }, }, /* Test against mobile viewports. */ diff --git a/tests/example.spec.ts b/tests/example.spec.ts deleted file mode 100644 index 54a906a..0000000 --- a/tests/example.spec.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { test, expect } from '@playwright/test'; - -test('has title', async ({ page }) => { - await page.goto('https://playwright.dev/'); - - // Expect a title "to contain" a substring. - await expect(page).toHaveTitle(/Playwright/); -}); - -test('get started link', async ({ page }) => { - await page.goto('https://playwright.dev/'); - - // Click the get started link. - await page.getByRole('link', { name: 'Get started' }).click(); - - // Expects page to have a heading with the name of Installation. - await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible(); -}); diff --git a/tests/wallet.spec.ts b/tests/wallet.spec.ts deleted file mode 100644 index 314a7d5..0000000 --- a/tests/wallet.spec.ts +++ /dev/null @@ -1,43 +0,0 @@ -import path from 'path'; - -import { test, expect, chromium } from '@playwright/test'; - -test.describe('Extension Tests', () => { - test('extension is loaded', async () => { - // Get path to extension - const pathToExtension = path.join(__dirname, '../dist'); - - // Launch browser with extension - const context = await chromium.launchPersistentContext('/tmp/test-user-data-dir', { - headless: false, - args: [ - `--disable-extensions-except=${pathToExtension}`, - `--load-extension=${pathToExtension}`, - ], - }); - - // for manifest v3: - let [background] = context.serviceWorkers(); - if (!background) background = await context.waitForEvent('serviceworker'); - - // Get extension ID from service worker URL - const extensionId = background.url().split('/')[2]; - - // Create a new page and navigate to extension - const page = await context.newPage(); - - // Navigate and wait for network to be idle - await page.goto(`chrome-extension://${extensionId}/index.html#/welcome`); - - // Wait for the welcome page to be fully loaded - await page.waitForSelector('.welcomeBox', { state: 'visible' }); - - // Check for welcome page elements - await expect(page.getByText('Welcome to Flow Wallet')).toBeVisible(); - await expect(page.getByText('Create a new wallet')).toBeVisible(); - await expect(page.getByText('Sync with Mobile App')).toBeVisible(); - - // Cleanup - await context.close(); - }); -}); diff --git a/tsconfig.test.json b/tsconfig.test.json index 8183471..a6a5327 100644 --- a/tsconfig.test.json +++ b/tsconfig.test.json @@ -1,6 +1,6 @@ { "extends": "./tsconfig.json", - "include": ["tests/**/*", "playwright.config.ts"], + "include": ["e2e/**/*", "playwright.config.ts"], "compilerOptions": { "types": ["@playwright/test"] }