Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(drawer): add drawer ui-test #59

Merged
merged 1 commit into from
Sep 25, 2024
Merged

test(drawer): add drawer ui-test #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions tests/drawer/xdesign.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { expect, test } from '@playwright/test'

test.describe('drawer组件xdesign规范', () => {
test('基本用法--UI截图', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('drawer#basic-usage')
const demo = page.locator('#basic-usage')
await demo.getByRole('button', { name: '抽屉组件' }).click()
const body = demo.locator('.tiny-drawer__box')
await expect(body).toBeInViewport()
await expect(body).toHaveScreenshot('basic-usage.png')
})

test('帮助提示--UI截图', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('drawer#tips-props')
const demo = page.locator('#tips-props')
await demo.getByRole('button', { name: '展开抽屉' }).click()
const body = demo.locator('.tiny-drawer__box')
await expect(body).toBeInViewport()
await expect(body).toHaveScreenshot('tips-props.png')
})
Comment on lines +14 to +22
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider reducing duplication in test cases.

This test case follows a similar structure to the first one, which is good for consistency. However, there's duplication in the error handling setup and verification steps across all test cases.

Consider extracting these common steps into helper functions to reduce duplication and improve maintainability. For example:

async function setupTest(page, url) {
  page.on('pageerror', (exception) => expect(exception).toBeNull());
  await page.goto(url);
}

async function verifyDrawerVisibility(demo) {
  const body = demo.locator('.tiny-drawer__box');
  await expect(body).toBeInViewport();
  return body;
}

Then, you can use these helpers in each test case:

test('帮助提示--UI截图', async ({ page }) => {
  await setupTest(page, 'drawer#tips-props');
  const demo = page.locator('#tips-props');
  await demo.getByRole('button', { name: '展开抽屉' }).click();
  const body = await verifyDrawerVisibility(demo);
  await expect(body).toHaveScreenshot('tips-props.png');
});

This approach would make the tests more DRY and easier to maintain.


test('底部插槽--UI截图', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('drawer#footer-slot')
const demo = page.locator('#footer-slot')
await demo.getByRole('button', { name: '底部插槽示例' }).click()
const body = demo.locator('.tiny-drawer__box')
await expect(body).toBeInViewport()
await expect(body).toHaveScreenshot('footer-slot.png')
})
Comment on lines +24 to +32
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Refactor test cases to improve maintainability and reduce duplication.

This test case, like the previous two, follows a consistent structure, which is commendable. However, the duplication across all three test cases suggests an opportunity for a more comprehensive refactoring.

Consider implementing a parameterized test approach:

interface TestCase {
  name: string;
  url: string;
  buttonText: string;
  screenshotName: string;
}

const testCases: TestCase[] = [
  { name: '基本用法', url: 'drawer#basic-usage', buttonText: '抽屉组件', screenshotName: 'basic-usage.png' },
  { name: '帮助提示', url: 'drawer#tips-props', buttonText: '展开抽屉', screenshotName: 'tips-props.png' },
  { name: '底部插槽', url: 'drawer#footer-slot', buttonText: '底部插槽示例', screenshotName: 'footer-slot.png' },
];

testCases.forEach(({ name, url, buttonText, screenshotName }) => {
  test(`${name}--UI截图`, async ({ page }) => {
    await setupTest(page, url);
    const demo = page.locator(`#${url.split('#')[1]}`);
    await demo.getByRole('button', { name: buttonText }).click();
    const body = await verifyDrawerVisibility(demo);
    await expect(body).toHaveScreenshot(screenshotName);
  });
});

This approach would significantly reduce code duplication, make adding new test cases easier, and improve overall maintainability of the test suite.


})
Binary file added tests/drawer/xdesign.spec.ts-snapshots/basic-usage-chromium-win32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tests/drawer/xdesign.spec.ts-snapshots/footer-slot-chromium-win32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tests/drawer/xdesign.spec.ts-snapshots/tips-props-chromium-win32.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.