From 2b664820b28160ed911fe38bfefe0d5941ddb1e8 Mon Sep 17 00:00:00 2001 From: xiamiao1121 <74885998+xiamiao1121@users.noreply.github.com> Date: Fri, 30 Aug 2024 09:45:38 +0800 Subject: [PATCH] =?UTF-8?q?feat(hi-ui):=20=E6=94=AF=E6=8C=81=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E5=8C=96=E6=B5=8B=E8=AF=95=20(#2982)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .github/workflows/auto-test.yml | 47 +++++++++++++ hi-test/.gitignore | 5 ++ hi-test/package.json | 14 ++++ hi-test/playwright.config.ts | 80 ++++++++++++++++++++++ hi-test/tests/form/basic.spec.ts | 30 ++++++++ hi-test/tests/form/label-placement.spec.ts | 20 ++++++ hi-test/tests/form/validate.spec.ts | 37 ++++++++++ hi-test/yarn.lock | 41 +++++++++++ package.json | 3 +- 9 files changed, 276 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/auto-test.yml create mode 100644 hi-test/.gitignore create mode 100644 hi-test/package.json create mode 100644 hi-test/playwright.config.ts create mode 100644 hi-test/tests/form/basic.spec.ts create mode 100644 hi-test/tests/form/label-placement.spec.ts create mode 100644 hi-test/tests/form/validate.spec.ts create mode 100644 hi-test/yarn.lock diff --git a/.github/workflows/auto-test.yml b/.github/workflows/auto-test.yml new file mode 100644 index 000000000..c31d068f3 --- /dev/null +++ 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 new file mode 100644 index 000000000..68c5d18f0 --- /dev/null +++ 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 new file mode 100644 index 000000000..22760f402 --- /dev/null +++ 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 new file mode 100644 index 000000000..8da8473bd --- /dev/null +++ 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 new file mode 100644 index 000000000..e50554665 --- /dev/null +++ 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 new file mode 100644 index 000000000..5a8792b39 --- /dev/null +++ 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 new file mode 100644 index 000000000..d3efdcf9e --- /dev/null +++ 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 new file mode 100644 index 000000000..b48cf4482 --- /dev/null +++ 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" + +fsevents@2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + +playwright-core@1.46.1: + 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== + +playwright@1.46.1: + 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 index 5a320d0ef..025e71ae1 100644 --- 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",