test(picker, picker-column): migrate to generators (#27352)
Issue number: N/A --------- <!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> <!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. --> <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Picker and picker column tests use legacy syntax ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Picker and picker column tests use generator syntax ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
@ -1,19 +0,0 @@
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
import { testPickerColumn } from '../test.utils';
|
||||
|
||||
test.describe('picker-column', () => {
|
||||
test.describe('single column', () => {
|
||||
test('should not have any visual regressions', async ({ page }) => {
|
||||
await page.goto('/src/components/picker-column/test/standalone');
|
||||
await testPickerColumn(page, '#single-column-button', 'single');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('multiple columns', () => {
|
||||
test('should not have any visual regressions', async ({ page }) => {
|
||||
await page.goto('/src/components/picker-column/test/standalone');
|
||||
await testPickerColumn(page, '#multiple-column-button', 'multiple');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,22 @@
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
import { testPickerColumn } from '../test.utils';
|
||||
|
||||
configs().forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('picker-column'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/src/components/picker-column/test/standalone', config);
|
||||
});
|
||||
test.describe('single column', () => {
|
||||
test('should not have any visual regressions', async ({ page }) => {
|
||||
await testPickerColumn(page, screenshot, '#single-column-button', 'single');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('multiple columns', () => {
|
||||
test('should not have any visual regressions', async ({ page }) => {
|
||||
await testPickerColumn(page, screenshot, '#multiple-column-button', 'multiple');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
@ -1,13 +1,19 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import type { E2EPage } from '@utils/test/playwright';
|
||||
import type { E2EPage, ScreenshotFn } from '@utils/test/playwright';
|
||||
|
||||
/**
|
||||
* Visual regression tests for picker-column.
|
||||
* @param page - The page to run the tests on.
|
||||
* @param screenshot - The screenshot function to generate unique screenshot names
|
||||
* @param buttonSelector - The selector for the button that opens the picker.
|
||||
* @param description - The description to amend to the screenshot names (typically 'single' or 'multiple').
|
||||
*/
|
||||
export async function testPickerColumn(page: E2EPage, buttonSelector: string, description: string) {
|
||||
export async function testPickerColumn(
|
||||
page: E2EPage,
|
||||
screenshot: ScreenshotFn,
|
||||
buttonSelector: string,
|
||||
description: string
|
||||
) {
|
||||
const ionPickerDidPresentSpy = await page.spyOnEvent('ionPickerDidPresent');
|
||||
|
||||
await page.click(buttonSelector);
|
||||
@ -15,7 +21,7 @@ export async function testPickerColumn(page: E2EPage, buttonSelector: string, de
|
||||
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(page).toHaveScreenshot(`picker-${description}-column-initial-${page.getSnapshotSettings()}.png`);
|
||||
await expect(page).toHaveScreenshot(screenshot(`picker-${description}-column-initial`));
|
||||
|
||||
// TODO FW-3403
|
||||
/*
|
||||
|
||||