test(item): migrate inputs test to generators (#27416)
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. -->
I missed the `inputs` tests when migration `ion-item` to generators.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- The item input tests use the generator syntax.
a6f8563f31
- I removed the RTL checks for the disabled state screenshots since that
behavior does not vary across directions.
## 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. -->
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 26 KiB |
@ -1,30 +1,34 @@
|
|||||||
import type { Locator } from '@playwright/test';
|
import type { Locator } from '@playwright/test';
|
||||||
import { expect } from '@playwright/test';
|
import { expect } from '@playwright/test';
|
||||||
import type { EventSpy } from '@utils/test/playwright';
|
import type { EventSpy } from '@utils/test/playwright';
|
||||||
import { test } from '@utils/test/playwright';
|
import { configs, test } from '@utils/test/playwright';
|
||||||
|
|
||||||
test.describe('item: inputs', () => {
|
configs().forEach(({ title, screenshot, config }) => {
|
||||||
|
test.describe(title('item: inputs'), () => {
|
||||||
|
test('should not have visual regressions', async ({ page }) => {
|
||||||
|
await page.goto(`/src/components/item/test/inputs`, config);
|
||||||
|
|
||||||
|
await page.setIonViewport();
|
||||||
|
await expect(page).toHaveScreenshot(screenshot(`item-inputs`));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||||
|
test.describe(title('disabled state rendering'), () => {
|
||||||
let ionPopoverDidPresent: EventSpy;
|
let ionPopoverDidPresent: EventSpy;
|
||||||
let ionPopoverDidDismiss: EventSpy;
|
let ionPopoverDidDismiss: EventSpy;
|
||||||
let formData: EventSpy;
|
|
||||||
|
|
||||||
let popover: Locator;
|
let popover: Locator;
|
||||||
|
|
||||||
test.beforeEach(async ({ page }) => {
|
test.beforeEach(async ({ page }) => {
|
||||||
await page.goto(`/src/components/item/test/inputs`);
|
await page.goto(`/src/components/item/test/inputs`, config);
|
||||||
|
|
||||||
ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
|
ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
|
||||||
ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
|
ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
|
||||||
formData = await page.spyOnEvent('formData');
|
|
||||||
|
|
||||||
popover = page.locator('ion-popover#optionsPopover');
|
popover = page.locator('ion-popover#optionsPopover');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should not have visual regressions', async ({ page }) => {
|
|
||||||
await page.setIonViewport();
|
|
||||||
await expect(page).toHaveScreenshot(`item-inputs-${page.getSnapshotSettings()}.png`);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('disabled controls should not have visual regressions', async ({ page }) => {
|
test('disabled controls should not have visual regressions', async ({ page }) => {
|
||||||
await page.click('#popover-trigger');
|
await page.click('#popover-trigger');
|
||||||
await ionPopoverDidPresent.next();
|
await ionPopoverDidPresent.next();
|
||||||
@ -37,12 +41,27 @@ test.describe('item: inputs', () => {
|
|||||||
await ionPopoverDidDismiss.next();
|
await ionPopoverDidDismiss.next();
|
||||||
|
|
||||||
await page.setIonViewport();
|
await page.setIonViewport();
|
||||||
await expect(page).toHaveScreenshot(`item-inputs-disabled-${page.getSnapshotSettings()}.png`);
|
await expect(page).toHaveScreenshot(screenshot(`item-inputs-disabled`));
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||||
|
test.describe(title('form data'), () => {
|
||||||
|
let ionPopoverDidPresent: EventSpy;
|
||||||
|
let ionPopoverDidDismiss: EventSpy;
|
||||||
|
let formData: EventSpy;
|
||||||
|
|
||||||
|
let popover: Locator;
|
||||||
|
|
||||||
test.describe('form data', () => {
|
test.beforeEach(async ({ page }) => {
|
||||||
test.beforeEach(async ({ skip }) => {
|
await page.goto(`/src/components/item/test/inputs`, config);
|
||||||
skip.rtl();
|
|
||||||
|
ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
|
||||||
|
ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
|
||||||
|
formData = await page.spyOnEvent('formData');
|
||||||
|
|
||||||
|
popover = page.locator('ion-popover#optionsPopover');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('initial form data should be empty', async ({ page }) => {
|
test('initial form data should be empty', async ({ page }) => {
|
||||||
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |