Skip to content

Commit

Permalink
Merge pull request #275 from Outblock:243-feature-end-to-end-testing
Browse files Browse the repository at this point in the history
Introduce e2e testing
  • Loading branch information
tombeckenham authored Dec 16, 2024
2 parents d296b71 + dabcd94 commit ca2a651
Show file tree
Hide file tree
Showing 11 changed files with 188 additions and 5 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,7 @@ src/background/utils/firebase.config.json
dist.rar
dist.7z
.cursorrules
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
33 changes: 33 additions & 0 deletions e2e/wallet.test.ts
Original file line number Diff line number Diff line change
@@ -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();
});
7 changes: 6 additions & 1 deletion eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,12 @@ export default [

// Test files specific config
{
files: ['**/*.test.{js,jsx,ts,tsx}', '**/*.spec.{js,jsx,ts,tsx}'],
files: ['e2e/**/*', 'playwright.config.ts', 'vitest.config.ts'],
languageOptions: {
parserOptions: {
project: './tsconfig.test.json',
},
},
rules: {
'no-restricted-globals': 'off',
'@typescript-eslint/no-explicit-any': 'off',
Expand Down
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
"format": "prettier .",
"icon": "npx iconfont-h5",
"test": "vitest",
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui",
"test:unit": "vitest",
"pub": "node build/release.js",
"prepare": "husky",
"preinstall": "npx only-allow pnpm",
Expand Down Expand Up @@ -142,6 +145,7 @@
},
"devDependencies": {
"@eslint/js": "^9.15.0",
"@playwright/test": "^1.49.0",
"@svgr/webpack": "^5.5.0",
"@types/chrome": "^0.0.281",
"@types/events": "^3.0.3",
Expand Down
74 changes: 74 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { defineConfig, devices } from '@playwright/test';

/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './tests',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: process.env.CI ? 1 : undefined,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
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('/')`. */
// baseURL: 'http://127.0.0.1:3000',

/* 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'],
// Chrome extension testing configuration
},
},

/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },

/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],

/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
});
38 changes: 38 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/ui/views/AddWelcome/Sync/SyncQr.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ const SyncQr = ({
};

createWeb3Wallet();
}, []);
}, [_subscribeToEvents, currentNetwork, onSessionConnected, sendRequest]);

return (
<>
Expand Down
1 change: 1 addition & 0 deletions src/ui/views/Sync/SyncQr.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,7 @@ const SyncQr = ({ handleClick, savedUsername, confirmMnemonic, setUsername }) =>
}
};
createWeb3Wallet();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return (
Expand Down
11 changes: 8 additions & 3 deletions src/ui/views/WelcomePage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,16 @@ const WelcomePage = () => {
margin: '24px 0 44px',
}}
>
{/* {chrome.i18n.getMessage('appDescription')} {' '} */}
{chrome.i18n.getMessage('A_crypto_wallet_on_Flow')}
<Typography sx={{ color: 'primary.light', display: 'inline' }}>
<Box
component="span"
sx={{
color: 'primary.light',
display: 'inline',
}}
>
<span> {chrome.i18n.getMessage('Explorers_Collectors_and_Gamers')}</span>
</Typography>
</Box>
</Typography>

<Button
Expand Down
7 changes: 7 additions & 0 deletions tsconfig.test.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"extends": "./tsconfig.json",
"include": ["e2e/**/*", "playwright.config.ts", "vitest.config.ts"],
"compilerOptions": {
"types": ["@playwright/test"]
}
}
12 changes: 12 additions & 0 deletions vitest.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { defineConfig } from 'vitest/config';

export default defineConfig({
test: {
exclude: [
'**/node_modules/**',
'**/dist/**',
'**/e2e/**',
'**/.{idea,git,cache,output,temp}/**',
],
},
});

0 comments on commit ca2a651

Please sign in to comment.