test(picker): clean up tests (#27433)
Issue number: N/A --------- <!-- 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. --> There are several redundant tests I missed during my generator pass. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. -->feb1f6c138- The isOpen tests are testing that you can open/close the modal by triggering the `isOpen` property. I combined the two tests into 1 test since they are doing the same thing: Checking that the modal opens when `isOpen` is `true` and closes when `isOpen` is false. This also avoids the 500ms timeout of the 2nd test which should speed up execution.f14b15beca- Removed the "standalone" screenshot in favor of just checking that the overlay is visible. Rendering of the contents of the overlay are not dependent on `ion-app` being present. ## 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,22 +1,20 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
import { testPickerColumn } from '../test.utils';
|
||||
|
||||
configs().forEach(({ title, screenshot, config }) => {
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('picker-column'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
test('should present picker without ion-app', 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');
|
||||
});
|
||||
const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
|
||||
|
||||
const picker = page.locator('ion-picker');
|
||||
|
||||
await page.click('#single-column-button');
|
||||
|
||||
await ionPickerDidPresent.next();
|
||||
|
||||
await expect(picker).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 11 KiB |
@ -6,29 +6,19 @@ import { configs, test } from '@utils/test/playwright';
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('picker: isOpen'), () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
test('should open and close the picker', async ({ page }) => {
|
||||
await page.goto('/src/components/picker/test/is-open', config);
|
||||
});
|
||||
|
||||
test('should open the picker', async ({ page }) => {
|
||||
const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
|
||||
const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss');
|
||||
const picker = page.locator('ion-picker');
|
||||
|
||||
await page.click('#default');
|
||||
|
||||
await ionPickerDidPresent.next();
|
||||
await expect(picker).toBeVisible();
|
||||
});
|
||||
|
||||
test('should open the picker then close after a timeout', async ({ page }) => {
|
||||
const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
|
||||
const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss');
|
||||
const picker = page.locator('ion-picker');
|
||||
|
||||
await page.click('#timeout');
|
||||
|
||||
await ionPickerDidPresent.next();
|
||||
await expect(picker).toBeVisible();
|
||||
await picker.evaluate((el: HTMLIonPickerElement) => (el.isOpen = false));
|
||||
|
||||
await ionPickerDidDismiss.next();
|
||||
await expect(picker).toBeHidden();
|
||||
|
||||