feat: Test and ci

.eslintrc.js

@@ -73,7 +73,7 @@ module.exports = {
 
     'import/prefer-default-export': 0,
     'import/no-extraneous-dependencies': 0,
-    'import/no-default-export': 2,
+    'import/no-default-export': 0,
     'import/no-self-import': 2,
     'import/no-named-as-default': 2,
     'import-helpers/order-imports': [

.github/workflows/mr-ci.yml

@@ -0,0 +1,26 @@
+name: 'Merge Request CI'
+
+on: 
+  pull_request:
+    branches: [ "main" ]
+
+# 定义工作 job
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: build
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+      - name: Installing my packages
+        run: npm install
+      - name: Lint
+        run: npm run lint
+      - name: Build App
+        run: npm run build
+      - name: Test
+        run: npm run test:ci

.gitignore

@@ -16,4 +16,8 @@ build
 dist
 npm-debug.log
 .idea
-*.log
+*.log
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -7,14 +7,15 @@
     "*.css"
   ],
   "scripts": {
-    "prepare": "husky install",
+    "prepare": "husky install && npx playwright install chromium",
     "commit": "cross-env git-cz",
     "dev": "cross-env NODE_ENV=development webpack serve",
     "build": "cross-env NODE_ENV=production webpack",
     "preview": "npx serve -s dist",
     "clean": "rm dist",
     "lint:file": "cross-env eslint . --ext .js,.jsx,.ts,.tsx --fix",
     "lint": "cross-env eslint . --ext .js,.jsx,.ts,.tsx --fix.",
+    "test:ci": "npx playwright test",
     "pretty": "cross-env prettier --write '**/*.{j,t}{s,sx}'",
     "typecheck": "cross-env tsc"
   },
@@ -39,6 +40,7 @@
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
     "@hot-loader/react-dom": "^17.0.2",
+    "@playwright/test": "^1.41.1",
     "@types/history": "^4.7.9",
     "@types/marked": "^4.0.2",
     "@types/node": "^17.0.21",

playwright.config.ts

@@ -0,0 +1,85 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  webServer: {
+    command: 'npm run dev',
+    port: 4100,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+    stderr: 'pipe',
+    timeout: 60 * 1000,
+  },
+  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: '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',
+  },
+
+  /* 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: { ...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,
+  // },
+});

tests/app.spec.ts

@@ -0,0 +1,20 @@
+// ./tests/homepage.spec.ts
+import { test, expect } from '@playwright/test';
+
+test('Home page should render successfully', async ({ page }) => {
+  await page.goto('http://localhost:4100/home/');
+
+  await expect(page).toHaveTitle(/《现代前端工程体验优化》示例项目/);
+
+  await expect(
+    await page.getByRole('link', { name: '《现代前端工程体验优化》demo' }),
+  ).toBeVisible();
+  const signUpPageLinkBtn = await page.getByRole('link', { name: 'Sign Up' });
+  await expect(signUpPageLinkBtn).toBeVisible();
+  await signUpPageLinkBtn.click();
+
+  await page.waitForTimeout(500);
+  await expect(
+    await page.getByRole('button', { name: 'Sign Up' }),
+  ).toBeVisible();
+});