feat(hi-ui): 支持自动化测试 (#2982)

* feat: 自动化测试 * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test * chore: test --------- Co-authored-by: xiamiao <[email protected]>
XiaoMi · Aug 30, 2024 · 2b66482 · 2b66482
1 parent 6a609a1
commit 2b66482
Show file tree

Hide file tree

Showing 9 changed files with 276 additions and 1 deletion.
diff --git a/.github/workflows/auto-test.yml b/.github/workflows/auto-test.yml
@@ -0,0 +1,47 @@
+name: auto-test
+
+on:
+  push
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Setup Node.js 18.20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.20.x
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: |
+          cd hi-test
+          yarn install
+          yarn playwright install
+      # - name: Cache dependencies
+      # - name: Install dependencies
+      #   run: |
+      #     yarn config set strict-ssl false
+      #     yarn
+
+      - name: Setup Node.js 14.21.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 14.21.x
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: |
+          yarn config set strict-ssl false
+          yarn
+
+
+      - name: Test
+        run: |
+          yarn run auto-test
+
diff --git a/hi-test/.gitignore b/hi-test/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/hi-test/package.json b/hi-test/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "hi-test",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "@playwright/test": "^1.46.1",
+    "@types/node": "^22.5.0"
+
+  },
+  "scripts": {
+    "prestart": "cd ../ && yarn storybook"
+  }
+}
diff --git a/hi-test/playwright.config.ts b/hi-test/playwright.config.ts
@@ -0,0 +1,80 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  timeout: 300000,
+  /* 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: 'yarn prestart',
+    port: 6006,
+    // url: 'http://127.0.0.1:3000',
+    // reuseExistingServer: !process.env.CI,
+  },
+})
diff --git a/hi-test/tests/form/basic.spec.ts b/hi-test/tests/form/basic.spec.ts
@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test'
+
+test('has title', async ({ page }) => {
+  await page.goto('http://localhost:6006/?path=/story/data-input-form--basic')
+
+  await expect(page).toHaveTitle(/Basic/)
+
+  await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .getByRole('textbox')
+    .first()
+    .fill('123')
+
+  await expect(
+    page.frameLocator('iframe[title="storybook-preview-iframe"]').getByText('max is 100')
+  ).toBeVisible()
+
+  await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .getByRole('textbox')
+    .nth(1)
+    .clear()
+
+  // 测试是否弹出警告 testInput2 is required
+  await expect(
+    page
+      .frameLocator('iframe[title="storybook-preview-iframe"]')
+      .getByText('testInput2 is required')
+  ).toBeVisible()
+})
diff --git a/hi-test/tests/form/label-placement.spec.ts b/hi-test/tests/form/label-placement.spec.ts
@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('label placement', async ({ page }) => {
+  await page.goto('http://localhost:6006/?path=/story/data-input-form--label-placement')
+
+  const input1 = await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .getByRole('textbox')
+    .first()
+    .boundingBox()
+
+  const label1 = await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .getByText('编码：')
+    .first()
+    .boundingBox()
+
+  const dis = input1?.x && label1?.x ? input1.x - label1.x : 0
+  expect(dis).toBeGreaterThan(0) // Assuming you want to check if the distance is greater than 0
+})
diff --git a/hi-test/tests/form/validate.spec.ts b/hi-test/tests/form/validate.spec.ts
@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test'
+
+test('validate', async ({ page }) => {
+  await page.goto('http://localhost:6006/?path=/story/data-input-form--validate')
+
+  // const input1 = await page
+  //   .frameLocator('iframe[title="storybook-preview-iframe"]')
+  //   .getByRole('textbox')
+  //   .first()
+  //   .boundingBox()
+
+  await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .getByRole('button', { name: '提交' })
+    .click()
+
+  await expect(
+    page.frameLocator('iframe[title="storybook-preview-iframe"]').getByText('请输入名称')
+  ).toBeVisible()
+
+  await expect(
+    page.frameLocator('iframe[title="storybook-preview-iframe"]').getByText('必须是正数')
+  ).toBeVisible()
+
+  await expect(
+    page.frameLocator('iframe[title="storybook-preview-iframe"]').getByText('请选择门店')
+  ).toBeVisible()
+
+  await expect(
+    page.frameLocator('iframe[title="storybook-preview-iframe"]').getByText('请选择区域')
+  ).toBeVisible()
+
+  await page
+    .frameLocator('iframe[title="storybook-preview-iframe"]')
+    .getByRole('button', { name: '清除校验信息' })
+    .click()
+})
diff --git a/hi-test/yarn.lock b/hi-test/yarn.lock
@@ -0,0 +1,41 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@playwright/test@^1.46.1":
+  version "1.46.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.46.1.tgz#a8dfdcd623c4c23bb1b7ea588058aad41055c188"
+  integrity sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==
+  dependencies:
+    playwright "1.46.1"
+
+"@types/node@^22.5.0":
+  version "22.5.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.5.0.tgz#10f01fe9465166b4cab72e75f60d8b99d019f958"
+  integrity sha512-DkFrJOe+rfdHTqqMg0bSNlGlQ85hSoh2TPzZyhHsXnMtligRWpxUySiyw8FY14ITt24HVCiQPWxS3KO/QlGmWg==
+  dependencies:
+    undici-types "~6.19.2"
+
+[email protected]:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+[email protected]:
+  version "1.46.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.46.1.tgz#28f3ab35312135dda75b0c92a3e5c0e7edb9cc8b"
+  integrity sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==
+
+[email protected]:
+  version "1.46.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.46.1.tgz#ea562bc48373648e10420a10c16842f0b227c218"
+  integrity sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==
+  dependencies:
+    playwright-core "1.46.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
diff --git a/package.json b/package.json
@@ -33,7 +33,8 @@
     "publish": "changeset publish --registry=https://registry.npmjs.org/",
     "deploy": "gh-pages -t -d dist-github --git \"$(which git)\"",
     "pregenerate-docs": "yarn turbo run auto-generate --filter @hi-ui/icons",
-    "generate-docs": "yarn turbo run generate-docs --filter @hi-ui/hi-docs"
+    "generate-docs": "yarn turbo run generate-docs --filter @hi-ui/hi-docs",
+    "auto-test": "cd ./hi-test && yarn playwright test"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.16",