diff --git a/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e-legacy.ts b/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e-legacy.ts deleted file mode 100644 index c42c3c1a89..0000000000 --- a/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e-legacy.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('picker-column-internal', () => { - test.beforeEach(async ({ page }) => { - await page.goto('/src/components/picker-column-internal/test/basic'); - }); - - test('should render a picker item for each item', async ({ page }) => { - const columns = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty)'); - await expect(columns).toHaveCount(24); - }); - - test('should render 6 empty picker items', async ({ page }) => { - const columns = page.locator('ion-picker-column-internal .picker-item-empty'); - await expect(columns).toHaveCount(6); - }); - - test('should not have an active item when value is not set', async ({ page }) => { - const activeColumn = page.locator('ion-picker-column-internal .picker-item-active'); - await expect(activeColumn).toHaveCount(0); - }); - - test('should have an active item when value is set', async ({ page }) => { - await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { - el.value = '12'; - }); - await page.waitForChanges(); - - const activeColumn = page.locator('ion-picker-column-internal .picker-item-active'); - - expect(activeColumn).not.toBeNull(); - }); - - // TODO FW-3616 - test.skip('scrolling should change the active item', async ({ page, skip }) => { - skip.browser('firefox', 'https://bugzilla.mozilla.org/show_bug.cgi?id=1766890'); - - await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { - el.scrollTop = 801; - }); - await page.waitForChanges(); - - const activeColumn = page.locator('ion-picker-column-internal .picker-item-active'); - - expect(await activeColumn?.innerText()).toEqual('23'); - }); - - test('should not emit ionChange when the value is modified externally', async ({ page, skip }) => { - skip.browser('firefox', 'https://bugzilla.mozilla.org/show_bug.cgi?id=1766890'); - - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { - el.value = '12'; - }); - - expect(ionChangeSpy).not.toHaveReceivedEvent(); - }); - - // TODO FW-3616 - test.skip('should emit ionChange when the picker is scrolled', async ({ page, skip }) => { - skip.browser('firefox', 'https://bugzilla.mozilla.org/show_bug.cgi?id=1766890'); - - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { - el.scrollTo(0, el.scrollHeight); - }); - await page.waitForChanges(); - - await ionChangeSpy.next(); - - expect(ionChangeSpy).toHaveReceivedEvent(); - }); -}); diff --git a/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts b/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts new file mode 100644 index 0000000000..5bda52a79a --- /dev/null +++ b/core/src/components/picker-column-internal/test/basic/picker-column-internal.e2e.ts @@ -0,0 +1,81 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('picker-column-internal'), () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/picker-column-internal/test/basic', config); + }); + + test('should render a picker item for each item', async ({ page }) => { + const columns = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty)'); + await expect(columns).toHaveCount(24); + }); + + test('should render 6 empty picker items', async ({ page }) => { + const columns = page.locator('ion-picker-column-internal .picker-item-empty'); + await expect(columns).toHaveCount(6); + }); + + test('should not have an active item when value is not set', async ({ page }) => { + const activeColumn = page.locator('ion-picker-column-internal .picker-item-active'); + await expect(activeColumn).toHaveCount(0); + }); + + test('should have an active item when value is set', async ({ page }) => { + await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { + el.value = '12'; + }); + await page.waitForChanges(); + + const activeColumn = page.locator('ion-picker-column-internal .picker-item-active'); + + expect(activeColumn).not.toBeNull(); + }); + + // TODO FW-3616 + test.skip('scrolling should change the active item', async ({ page, skip }) => { + skip.browser('firefox', 'https://bugzilla.mozilla.org/show_bug.cgi?id=1766890'); + + await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { + el.scrollTop = 801; + }); + await page.waitForChanges(); + + const activeColumn = page.locator('ion-picker-column-internal .picker-item-active'); + + expect(await activeColumn?.innerText()).toEqual('23'); + }); + + test('should not emit ionChange when the value is modified externally', async ({ page, skip }) => { + skip.browser('firefox', 'https://bugzilla.mozilla.org/show_bug.cgi?id=1766890'); + + const ionChangeSpy = await page.spyOnEvent('ionChange'); + + await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { + el.value = '12'; + }); + + expect(ionChangeSpy).not.toHaveReceivedEvent(); + }); + + // TODO FW-3616 + test.skip('should emit ionChange when the picker is scrolled', async ({ page, skip }) => { + skip.browser('firefox', 'https://bugzilla.mozilla.org/show_bug.cgi?id=1766890'); + + const ionChangeSpy = await page.spyOnEvent('ionChange'); + + await page.locator('#default').evaluate((el: HTMLIonPickerColumnInternalElement) => { + el.scrollTo(0, el.scrollHeight); + }); + await page.waitForChanges(); + + await ionChangeSpy.next(); + + expect(ionChangeSpy).toHaveReceivedEvent(); + }); + }); +}); diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts deleted file mode 100644 index ea5f2d761b..0000000000 --- a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts +++ /dev/null @@ -1,130 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('picker-column-internal: disabled', () => { - test('should not have visual regressions', async ({ page }) => { - await page.setContent(` - - - - - - `); - - const picker = page.locator('ion-picker-internal'); - await expect(picker).toHaveScreenshot(`picker-internal-disabled-${page.getSnapshotSettings()}.png`); - }); - test('all picker items should be enabled by default', async ({ page }) => { - await page.setContent(` - - - - - - `); - - const pickerItems = page.locator( - 'ion-picker-column-internal .picker-item:not(.picker-item-empty, .picker-item-disabled)' - ); - - expect(await pickerItems.count()).toBe(3); - }); - test('disabled picker item should not be interactive', async ({ page }) => { - await page.setContent(` - - - - - - `); - - const disabledItem = page.locator('ion-picker-column-internal .picker-item.picker-item-disabled'); - await expect(disabledItem).not.toBeEnabled(); - }); - test('disabled picker item should not be considered active', async ({ page }) => { - await page.setContent(` - - - - - - `); - - const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]'); - await expect(disabledItem).not.toHaveClass(/picker-item-active/); - }); - test('setting the value to a disabled item should not cause that item to be active', async ({ page }) => { - await page.setContent(` - - - - - - `); - - const pickerColumn = page.locator('ion-picker-column-internal'); - await pickerColumn.evaluate((el: HTMLIonPickerColumnInternalElement) => (el.value = 'b')); - - await page.waitForChanges(); - - const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]'); - await expect(disabledItem).toHaveClass(/picker-item-disabled/); - await expect(disabledItem).not.toHaveClass(/picker-item-active/); - }); - test('defaulting the value to a disabled item should not cause that item to be active', async ({ page }) => { - await page.setContent(` - - - - - - `); - - const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]'); - await expect(disabledItem).toHaveClass(/picker-item-disabled/); - await expect(disabledItem).not.toHaveClass(/picker-item-active/); - }); -}); diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index a18e0d73a0..0000000000 Binary files a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 2e375ce1e6..0000000000 Binary files a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-rtl-Mobile-Safari-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index d0ee7f1a14..0000000000 Binary files a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 5af0c5c78b..0000000000 Binary files a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 9bc1de9abe..0000000000 Binary files a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-rtl-Mobile-Safari-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 6490b419a0..0000000000 Binary files a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts new file mode 100644 index 0000000000..9629f4345d --- /dev/null +++ b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts @@ -0,0 +1,161 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions. + */ +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('picker-column-internal: disabled rendering'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const picker = page.locator('ion-picker-internal'); + await expect(picker).toHaveScreenshot(screenshot(`picker-internal-disabled`)); + }); + }); +}); + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('picker-column-internal: disabled'), () => { + test('all picker items should be enabled by default', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const pickerItems = page.locator( + 'ion-picker-column-internal .picker-item:not(.picker-item-empty, .picker-item-disabled)' + ); + + expect(await pickerItems.count()).toBe(3); + }); + test('disabled picker item should not be interactive', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const disabledItem = page.locator('ion-picker-column-internal .picker-item.picker-item-disabled'); + await expect(disabledItem).not.toBeEnabled(); + }); + test('disabled picker item should not be considered active', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]'); + await expect(disabledItem).not.toHaveClass(/picker-item-active/); + }); + test('setting the value to a disabled item should not cause that item to be active', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const pickerColumn = page.locator('ion-picker-column-internal'); + await pickerColumn.evaluate((el: HTMLIonPickerColumnInternalElement) => (el.value = 'b')); + + await page.waitForChanges(); + + const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]'); + await expect(disabledItem).toHaveClass(/picker-item-disabled/); + await expect(disabledItem).not.toHaveClass(/picker-item-active/); + }); + test('defaulting the value to a disabled item should not cause that item to be active', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]'); + await expect(disabledItem).toHaveClass(/picker-item-disabled/); + await expect(disabledItem).not.toHaveClass(/picker-item-active/); + }); + }); +}); diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e-legacy.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Safari-linux.png rename to core/src/components/picker-column-internal/test/disabled/picker-column-internal.e2e.ts-snapshots/picker-internal-disabled-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/picker-internal/test/a11y/picker-internal.e2e-legacy.ts b/core/src/components/picker-internal/test/a11y/picker-internal.e2e-legacy.ts deleted file mode 100644 index 1c7949a6ee..0000000000 --- a/core/src/components/picker-internal/test/a11y/picker-internal.e2e-legacy.ts +++ /dev/null @@ -1,13 +0,0 @@ -import AxeBuilder from '@axe-core/playwright'; -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('picker-internal: a11y', () => { - test('should not have accessibility violations', async ({ page }) => { - await page.goto(`/src/components/picker-internal/test/a11y`); - - const results = await new AxeBuilder({ page }).analyze(); - - expect(results.violations).toEqual([]); - }); -}); diff --git a/core/src/components/picker-internal/test/a11y/picker-internal.e2e.ts b/core/src/components/picker-internal/test/a11y/picker-internal.e2e.ts new file mode 100644 index 0000000000..3a3cd6a3aa --- /dev/null +++ b/core/src/components/picker-internal/test/a11y/picker-internal.e2e.ts @@ -0,0 +1,15 @@ +import AxeBuilder from '@axe-core/playwright'; +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs().forEach(({ title, config }) => { + test.describe(title('picker-internal: a11y'), () => { + test('should not have accessibility violations', async ({ page }) => { + await page.goto(`/src/components/picker-internal/test/a11y`, config); + + const results = await new AxeBuilder({ page }).analyze(); + + expect(results.violations).toEqual([]); + }); + }); +}); diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index a2c7cfc698..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 0e72b812ff..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index a2894ba6ff..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 40607a0620..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 57e5456067..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 94ad924a3b..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 74ccf48313..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 63012ccfa6..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 03dd81e01c..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 60666d9501..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 395df37e79..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index d4ffa1fd69..0000000000 Binary files a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts similarity index 76% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts index 116b39252e..519122ec56 100644 --- a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts +++ b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts @@ -1,21 +1,88 @@ import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; +import { configs, test } from '@utils/test/playwright'; -test.describe('picker-internal', () => { - // TODO: FW-3020 - test.skip('inline pickers should not have visual regression', async ({ page }) => { - await page.goto(`/src/components/picker-internal/test/basic`); +// TODO: FW-3020 +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('picker-internal: rendering'), () => { + test.skip('inline pickers should not have visual regression', async ({ page }) => { + await page.goto(`/src/components/picker-internal/test/basic`, config); - await page.setIonViewport(); + await page.setIonViewport(); - await expect(page).toHaveScreenshot(`picker-internal-inline-diff-${page.getSnapshotSettings()}.png`, { - fullPage: true, + await expect(page).toHaveScreenshot(screenshot(`picker-internal-inline-diff`), { + fullPage: true, + }); }); }); +}); - test.describe('picker-internal: focus', () => { +/** + * This behavior does not vary across modes. + */ +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('picker-internal: overlay rendering'), () => { + test('popover: should not have visual regression', async ({ page }) => { + await page.goto(`/src/components/picker-internal/test/basic`, config); + + const button = page.locator('#popover'); + const didPresent = await page.spyOnEvent('ionPopoverDidPresent'); + const pickerInternal = page.locator('ion-popover ion-picker-internal'); + + await button.click(); + await didPresent.next(); + + await expect(pickerInternal).toBeVisible(); + + const popoverContent = page.locator('ion-popover .ion-delegate-host'); + + await expect(popoverContent).toHaveScreenshot(screenshot(`picker-internal-popover-diff`), { + /** + * Animations must be enabled to capture the screenshot. + * By default, animations are disabled with toHaveScreenshot, + * and when capturing the screenshot will call animation.finish(). + * This will cause the popover to close and the screenshot capture + * to be invalid. + */ + animations: 'allow', + }); + }); + + test('modal: should not have visual regression', async ({ page }) => { + await page.goto('/src/components/picker-internal/test/basic', config); + + const button = page.locator('#modal'); + const didPresent = await page.spyOnEvent('ionModalDidPresent'); + const pickerInternal = page.locator('ion-modal ion-picker-internal'); + + await button.click(); + await didPresent.next(); + + await expect(pickerInternal).toBeVisible(); + + const modalContent = page.locator('ion-modal .ion-delegate-host'); + + await expect(modalContent).toHaveScreenshot(screenshot(`picker-internal-modal-diff`), { + /** + * Animations must be enabled to capture the screenshot. + * By default, animations are disabled with toHaveScreenshot, + * and when capturing the screenshot will call animation.finish(). + * This will cause the modal to close and the screenshot capture + * to be invalid. + */ + animations: 'allow', + }); + }); + }); +}); + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('picker-internal: focus'), () => { test.beforeEach(async ({ page }) => { - await page.setContent(` + await page.setContent( + ` @@ -39,7 +106,9 @@ test.describe('picker-internal', () => { { text: 'Artichoke', value: 'artichoke' }, ]; - `); + `, + config + ); }); test('tabbing should correctly move focus between columns', async ({ page }) => { @@ -71,58 +140,4 @@ test.describe('picker-internal', () => { await expect(firstColumn).toBeFocused(); }); }); - - test.describe('within overlay:', () => { - test('popover: should not have visual regression', async ({ page }) => { - await page.goto(`/src/components/picker-internal/test/basic`); - - const button = page.locator('#popover'); - const didPresent = await page.spyOnEvent('ionPopoverDidPresent'); - const pickerInternal = page.locator('ion-popover ion-picker-internal'); - - await button.click(); - await didPresent.next(); - - await expect(pickerInternal).toBeVisible(); - - const popoverContent = page.locator('ion-popover .ion-delegate-host'); - - await expect(popoverContent).toHaveScreenshot(`picker-internal-popover-diff-${page.getSnapshotSettings()}.png`, { - /** - * Animations must be enabled to capture the screenshot. - * By default, animations are disabled with toHaveScreenshot, - * and when capturing the screenshot will call animation.finish(). - * This will cause the popover to close and the screenshot capture - * to be invalid. - */ - animations: 'allow', - }); - }); - - test('modal: should not have visual regression', async ({ page }) => { - await page.goto('/src/components/picker-internal/test/basic'); - - const button = page.locator('#modal'); - const didPresent = await page.spyOnEvent('ionModalDidPresent'); - const pickerInternal = page.locator('ion-modal ion-picker-internal'); - - await button.click(); - await didPresent.next(); - - await expect(pickerInternal).toBeVisible(); - - const modalContent = page.locator('ion-modal .ion-delegate-host'); - - await expect(modalContent).toHaveScreenshot(`picker-internal-modal-diff-${page.getSnapshotSettings()}.png`, { - /** - * Animations must be enabled to capture the screenshot. - * By default, animations are disabled with toHaveScreenshot, - * and when capturing the screenshot will call animation.finish(). - * This will cause the modal to close and the screenshot capture - * to be invalid. - */ - animations: 'allow', - }); - }); - }); }); diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Safari-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Safari-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-inline-diff-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Safari-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-modal-diff-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/picker-internal/test/basic/picker-internal.e2e-legacy.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Safari-linux.png rename to core/src/components/picker-internal/test/basic/picker-internal.e2e.ts-snapshots/picker-internal-popover-diff-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/picker-internal/test/keyboard-entry/picker-internal.e2e-legacy.ts b/core/src/components/picker-internal/test/keyboard-entry/picker-internal.e2e-legacy.ts deleted file mode 100644 index 710c0f6937..0000000000 --- a/core/src/components/picker-internal/test/keyboard-entry/picker-internal.e2e-legacy.ts +++ /dev/null @@ -1,123 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; -import type { E2ELocator } from '@utils/test/playwright/page/utils/locator'; - -test.describe('picker-internal: keyboard entry', () => { - test('should scroll to and update the value prop for a single column', async ({ page }) => { - await page.setContent(` - - - - - - `); - - const column = page.locator('ion-picker-column-internal'); - const ionChange = await page.spyOnEvent('ionChange'); - await column.focus(); - - await page.keyboard.press('Digit2'); - - await expect(ionChange).toHaveReceivedEventDetail({ text: '02', value: 2 }); - await expect(column).toHaveJSProperty('value', 2); - }); - - test('should scroll to and update the value prop for multiple columns', async ({ page }) => { - await page.setContent(` - - - - - - - `); - - const firstColumn = page.locator('ion-picker-column-internal#first'); - const secondColumn = page.locator('ion-picker-column-internal#second'); - const highlight = page.locator('ion-picker-internal .picker-highlight'); - const firstIonChange = await (firstColumn as E2ELocator).spyOnEvent('ionChange'); - const secondIonChange = await (secondColumn as E2ELocator).spyOnEvent('ionChange'); - - const box = await highlight.boundingBox(); - if (box !== null) { - await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2); - } - - await expect(firstColumn).toHaveClass(/picker-column-active/); - await expect(secondColumn).toHaveClass(/picker-column-active/); - - await page.keyboard.press('Digit2'); - - await expect(firstIonChange).toHaveReceivedEventDetail({ text: '02', value: 2 }); - await expect(firstColumn).toHaveJSProperty('value', 2); - - await page.keyboard.press('Digit2+Digit4'); - - await expect(secondIonChange).toHaveReceivedEventDetail({ text: '24', value: 24 }); - await expect(secondColumn).toHaveJSProperty('value', 24); - }); - - test('should select 00', async ({ page }) => { - await page.setContent(` - - - - - - `); - - const column = page.locator('ion-picker-column-internal'); - const ionChange = await page.spyOnEvent('ionChange'); - await column.focus(); - - await page.keyboard.press('Digit0'); - - await expect(ionChange).toHaveReceivedEventDetail({ text: '00', value: 12 }); - await expect(column).toHaveJSProperty('value', 12); - }); -}); diff --git a/core/src/components/picker-internal/test/keyboard-entry/picker-internal.e2e.ts b/core/src/components/picker-internal/test/keyboard-entry/picker-internal.e2e.ts new file mode 100644 index 0000000000..e9b0239fa6 --- /dev/null +++ b/core/src/components/picker-internal/test/keyboard-entry/picker-internal.e2e.ts @@ -0,0 +1,137 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; +import type { E2ELocator } from '@utils/test/playwright/page/utils/locator'; + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { + test.describe(title('picker-internal: keyboard entry'), () => { + test('should scroll to and update the value prop for a single column', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const column = page.locator('ion-picker-column-internal'); + const ionChange = await page.spyOnEvent('ionChange'); + await column.focus(); + + await page.keyboard.press('Digit2'); + + await expect(ionChange).toHaveReceivedEventDetail({ text: '02', value: 2 }); + await expect(column).toHaveJSProperty('value', 2); + }); + + test('should scroll to and update the value prop for multiple columns', async ({ page }) => { + await page.setContent( + ` + + + + + + + `, + config + ); + + const firstColumn = page.locator('ion-picker-column-internal#first'); + const secondColumn = page.locator('ion-picker-column-internal#second'); + const highlight = page.locator('ion-picker-internal .picker-highlight'); + const firstIonChange = await (firstColumn as E2ELocator).spyOnEvent('ionChange'); + const secondIonChange = await (secondColumn as E2ELocator).spyOnEvent('ionChange'); + + const box = await highlight.boundingBox(); + if (box !== null) { + await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2); + } + + await expect(firstColumn).toHaveClass(/picker-column-active/); + await expect(secondColumn).toHaveClass(/picker-column-active/); + + await page.keyboard.press('Digit2'); + + await expect(firstIonChange).toHaveReceivedEventDetail({ text: '02', value: 2 }); + await expect(firstColumn).toHaveJSProperty('value', 2); + + await page.keyboard.press('Digit2+Digit4'); + + await expect(secondIonChange).toHaveReceivedEventDetail({ text: '24', value: 24 }); + await expect(secondColumn).toHaveJSProperty('value', 24); + }); + + test('should select 00', async ({ page }) => { + await page.setContent( + ` + + + + + + `, + config + ); + + const column = page.locator('ion-picker-column-internal'); + const ionChange = await page.spyOnEvent('ionChange'); + await column.focus(); + + await page.keyboard.press('Digit0'); + + await expect(ionChange).toHaveReceivedEventDetail({ text: '00', value: 12 }); + await expect(column).toHaveJSProperty('value', 12); + }); + }); +});