Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-11 23:26:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add e2e (#528)

Browse Source 
* chore: add e2e
This commit is contained in:
zuomeng wang
2022-11-10 20:51:06 +08:00
committed by GitHub
parent 4516f99fb9
commit b58c3fd8fb
8 changed files with 234 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/playwright.yml
+44
View File
@@ -0,0 +1,44 @@
name: Playwright Tests
on:
push:
branches: [pathfinder]
pull_request:
branches: [pathfinder]
jobs:
test:
timeout-minutes: 60
runs-on: self-hosted
steps:
- uses: actions/checkout@v3
- uses: pnpm/action-setup@v2
with:
version: 'latest'
- uses: actions/setup-node@v3
with:
node-version: 16
registry-url: https://npm.pkg.github.com
scope: '@toeverything'
cache: 'pnpm'
- run: node scripts/module-resolve/ci.js
- name: Install dependencies
run: pnpm install --no-frozen-lockfile
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_GITHUB_AUTH_TOKEN }}
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: pnpm dlx playwright test
- uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
.gitignore
+3
View File
@@ -48,3 +48,6 @@ Thumbs.db
out/
module-resolve.js
/test-results/
/playwright-report/
/playwright/.cache/
.vscode/settings.json
Vendored
+2 -1
View File
@@ -2,5 +2,6 @@
"eslint.packageManager": "pnpm",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "file"
"editor.formatOnSaveMode": "file",
"cSpell.words": ["testid"]
}
package.json
+6 -4
View File
@@ -7,14 +7,16 @@
"build": "pnpm -r build",
"export": "pnpm --filter @pathfinder/app export",
"start": "pnpm --filter @pathfinder/app start",
"lint": "pnpm --filter @pathfinder/app lint"
"lint": "pnpm --filter @pathfinder/app lint",
"test:e2e": "playwright test"
},
"dependencies": {},
"devDependencies": {
"prettier": "^2.7.1",
"@playwright/test": "^1.27.1",
"@types/node": "18.7.18",
"eslint": "8.22.0",
"eslint-config-next": "12.3.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1"
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^2.7.1"
}
}
packages/app/src/components/theme-mode-switch/index.tsx
+3
View File
@@ -9,6 +9,7 @@ export const ThemeModeSwitch = () => {
const [firstTrigger, setFirstTrigger] = useState(false);
return (
<StyledThemeModeSwitch
data-testid="change-theme-container"
onMouseEnter={() => {
setIsHover(true);
if (!firstTrigger) {
@@ -20,6 +21,7 @@ export const ThemeModeSwitch = () => {
}}
>
<StyledSwitchItem
data-testid="change-theme-light"
active={mode === 'light'}
isHover={isHover}
firstTrigger={firstTrigger}
@@ -30,6 +32,7 @@ export const ThemeModeSwitch = () => {
<SunIcon />
</StyledSwitchItem>
<StyledSwitchItem
data-testid="change-theme-dark"
active={mode === 'dark'}
isHover={isHover}
firstTrigger={firstTrigger}
playwright.config.ts
+109
View File
@@ -0,0 +1,109 @@
import type { PlaywrightTestConfig } from '@playwright/test';
import { devices } from '@playwright/test';
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// require('dotenv').config();
/**
* See https://playwright.dev/docs/test-configuration.
*/
const config: PlaywrightTestConfig = {
testDir: './tests',
/* Maximum time one test can run for. */
timeout: 30 * 1000,
expect: {
/**
* Maximum time expect() should wait for the condition to be met.
* For example in `await expect(locator).toHaveText();`
*/
timeout: 5000,
},
/* 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: 'list',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
actionTimeout: 0,
/* Base URL to use in actions like `await page.goto('/')`. */
// baseURL: 'http://localhost:3000',
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
/* Record video when failure */
// video: 'retain-on-failure',
},
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
},
},
{
name: 'firefox',
use: {
...devices['Desktop Firefox'],
},
},
{
name: 'webkit',
use: {
...devices['Desktop Safari'],
},
},
/* 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: {
// channel: 'msedge',
// },
// },
// {
// name: 'Google Chrome',
// use: {
// channel: 'chrome',
// },
// },
],
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
// outputDir: 'test-results/',
/* Run your local dev server before starting the tests */
webServer: {
command: 'npm run dev',
port: 3000,
},
};
export default config;
pnpm-lock.yaml
Generated
+19
View File
@@ -4,12 +4,16 @@ importers:
.:
specifiers:
'@playwright/test': ^1.27.1
'@types/node': 18.7.18
eslint: 8.22.0
eslint-config-next: 12.3.1
eslint-config-prettier: ^8.5.0
eslint-plugin-prettier: ^4.2.1
prettier: ^2.7.1
devDependencies:
'@playwright/test': 1.27.1
'@types/node': 18.7.18
eslint: 8.22.0
eslint-config-next: 12.3.1_eslint@8.22.0
eslint-config-prettier: 8.5.0_eslint@8.22.0
@@ -853,6 +857,15 @@ packages:
fastq: 1.13.0
dev: true
/@playwright/test/1.27.1:
resolution: {integrity: sha512-mrL2q0an/7tVqniQQF6RBL2saskjljXzqNcCOVMUjRIgE6Y38nCNaP+Dc2FBW06bcpD3tqIws/HT9qiMHbNU0A==}
engines: {node: '>=14'}
hasBin: true
dependencies:
'@types/node': 18.7.18
playwright-core: 1.27.1
dev: true
/@popperjs/core/2.11.6:
resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
dev: false
@@ -2577,6 +2590,12 @@ packages:
engines: {node: '>=8.6'}
dev: true
/playwright-core/1.27.1:
resolution: {integrity: sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q==}
engines: {node: '>=14'}
hasBin: true
dev: true
/postcss/8.4.14:
resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
engines: {node: ^10 || ^12 || >=14}
tests/theme.spec.ts
+48
View File
@@ -0,0 +1,48 @@
import { test, expect, type Page } from '@playwright/test';
test.beforeEach(async ({ page }) => {
await page.goto('http://localhost:3000');
});
test.describe('Change Theme', () => {
test('default white', async ({ page }) => {
const root = page.locator('html');
const themeMode = await root.evaluate(element =>
window.getComputedStyle(element).getPropertyValue('--affine-theme-mode')
);
await expect(themeMode).toBe('light');
const lightButton = page.locator('[data-testid=change-theme-light]');
const buttonPositionTop = await lightButton.evaluate(
element => window.getComputedStyle(element).top
);
await expect(buttonPositionTop).toBe('0px');
});
test('change theme to dark', async ({ page }) => {
const changeThemeContainer = page.locator(
'[data-testid=change-theme-container]'
);
const box = await changeThemeContainer.boundingBox();
await expect(box?.x).not.toBeUndefined();
await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
await page.waitForTimeout(3000);
const darkButton = page.locator('[data-testid=change-theme-dark]');
const darkButtonPositionTop = await darkButton.evaluate(
element => element.getBoundingClientRect().y
);
await expect(darkButtonPositionTop).toBe(box?.y);
await page.mouse.click((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
const root = page.locator('html');
const themeMode = await root.evaluate(element =>
window.getComputedStyle(element).getPropertyValue('--affine-theme-mode')
);
await expect(themeMode).toBe('dark');
});
});