diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts b/core/src/components/footer/test/basic/footer.e2e-legacy.ts deleted file mode 100644 index 6bf045399e..0000000000 --- a/core/src/components/footer/test/basic/footer.e2e-legacy.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('footer: basic', () => { - test.describe('footer: rendering', () => { - test('should not have visual regressions with basic footer', async ({ page }) => { - await page.setContent(` - - - Footer - Default - - - `); - - const footer = page.locator('ion-footer'); - await expect(footer).toHaveScreenshot(`footer-diff-${page.getSnapshotSettings()}.png`); - }); - }); - - test.describe('footer: feature rendering', () => { - test.beforeEach(({ skip }) => { - skip.rtl(); - }); - - test('should not have visual regressions with no border', async ({ page }) => { - await page.setContent(` - - - Footer - No Border - - - `); - - const footer = page.locator('ion-footer'); - await expect(footer).toHaveScreenshot(`footer-no-border-diff-${page.getSnapshotSettings()}.png`); - }); - - test('should not have visual regressions with translucent footer', async ({ page, skip }) => { - skip.mode('md', 'Translucent effect is only available in iOS mode.'); - - await page.setContent(` - -
- -
- - Footer - Translucent - - - `); - - const footer = page.locator('ion-footer'); - await expect(footer).toHaveScreenshot(`footer-translucent-diff-${page.getSnapshotSettings()}.png`); - }); - }); -}); diff --git a/core/src/components/footer/test/basic/footer.e2e.ts b/core/src/components/footer/test/basic/footer.e2e.ts new file mode 100644 index 0000000000..9f68212627 --- /dev/null +++ b/core/src/components/footer/test/basic/footer.e2e.ts @@ -0,0 +1,73 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs().forEach(({ title, screenshot, config }) => { + test.describe(title('footer: rendering'), () => { + test('should not have visual regressions with basic footer', async ({ page }) => { + await page.setContent( + ` + + + Footer - Default + + + `, + config + ); + + const footer = page.locator('ion-footer'); + await expect(footer).toHaveScreenshot(screenshot(`footer-diff`)); + }); + }); +}); + +/** + * This behavior does not vary + * across directions. + */ +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('footer: feature rendering'), () => { + test('should not have visual regressions with no border', async ({ page }) => { + await page.setContent( + ` + + + Footer - No Border + + + `, + config + ); + + const footer = page.locator('ion-footer'); + await expect(footer).toHaveScreenshot(screenshot(`footer-no-border-diff`)); + }); + }); +}); + +/** + * This behavior only exists on + * iOS mode and does not vary across directions. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('footer: translucent'), () => { + test('should not have visual regressions with translucent footer', async ({ page }) => { + await page.setContent( + ` + +
+ +
+ + Footer - Translucent + + + `, + config + ); + + const footer = page.locator('ion-footer'); + await expect(footer).toHaveScreenshot(screenshot(`footer-translucent-diff`)); + }); + }); +}); diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-diff-md-rtl-Mobile-Safari-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/basic/footer.e2e-legacy.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/fade/footer.e2e-legacy.ts b/core/src/components/footer/test/fade/footer.e2e-legacy.ts deleted file mode 100644 index 762f8c9585..0000000000 --- a/core/src/components/footer/test/fade/footer.e2e-legacy.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('footer: fade', () => { - test.beforeEach(({ skip }) => { - skip.rtl(); - }); - - test('should not have visual regressions with fade footer', async ({ page, skip }) => { - skip.mode('md', 'Translucent effect is only available in iOS mode.'); - - await page.goto('/src/components/footer/test/fade'); - - const footer = page.locator('ion-footer'); - await expect(footer).toHaveScreenshot(`footer-fade-blurred-diff-${page.getSnapshotSettings()}.png`); - - const content = page.locator('ion-content'); - await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0)); - await page.waitForChanges(); - - await expect(footer).toHaveScreenshot(`footer-fade-not-blurred-diff-${page.getSnapshotSettings()}.png`); - }); -}); diff --git a/core/src/components/footer/test/fade/footer.e2e.ts b/core/src/components/footer/test/fade/footer.e2e.ts new file mode 100644 index 0000000000..460a40bf8e --- /dev/null +++ b/core/src/components/footer/test/fade/footer.e2e.ts @@ -0,0 +1,22 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * Fade effect is only available in iOS mode. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('footer: fade'), () => { + test('should not have visual regressions with fade footer', async ({ page }) => { + await page.goto('/src/components/footer/test/fade', config); + + const footer = page.locator('ion-footer'); + await expect(footer).toHaveScreenshot(screenshot(`footer-fade-blurred-diff`)); + + const content = page.locator('ion-content'); + await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0)); + await page.waitForChanges(); + + await expect(footer).toHaveScreenshot(screenshot(`footer-fade-not-blurred-diff`)); + }); + }); +}); diff --git a/core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/fade/footer.e2e-legacy.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts b/core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts deleted file mode 100644 index d6d6e18fa2..0000000000 --- a/core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('footer: scroll-target', () => { - test.beforeEach(({ skip }) => { - skip.rtl(); - }); - - /** - * This test suite verifies that the fade effect for iOS is working correctly - * when the `ion-footer` is using a custom scroll target with the `.ion-content-scroll-host` - * selector. - */ - test('should not have visual regressions with custom scroll target footer', async ({ page, skip }) => { - skip.mode('md', 'Translucent effect is only available in iOS mode.'); - - await page.goto('/src/components/footer/test/scroll-target'); - - const footer = page.locator('ion-footer'); - await expect(footer).toHaveScreenshot(`footer-fade-scroll-target-blurred-diff-${page.getSnapshotSettings()}.png`); - - const scrollTarget = page.locator('#scroll-target'); - await scrollTarget.evaluate((el: HTMLDivElement) => (el.scrollTop = el.scrollHeight)); - await page.waitForChanges(); - - await expect(footer).toHaveScreenshot( - `footer-fade-scroll-target-not-blurred-diff-${page.getSnapshotSettings()}.png` - ); - }); -}); diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts b/core/src/components/footer/test/scroll-target/footer.e2e.ts new file mode 100644 index 0000000000..560f900538 --- /dev/null +++ b/core/src/components/footer/test/scroll-target/footer.e2e.ts @@ -0,0 +1,27 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * Translucent effect is only available in iOS mode. + */ +configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('footer: scroll-target'), () => { + /** + * This test suite verifies that the fade effect for iOS is working correctly + * when the `ion-footer` is using a custom scroll target with the `.ion-content-scroll-host` + * selector. + */ + test('should not have visual regressions with custom scroll target footer', async ({ page }) => { + await page.goto('/src/components/footer/test/scroll-target', config); + + const footer = page.locator('ion-footer'); + await expect(footer).toHaveScreenshot(screenshot(`footer-fade-scroll-target-blurred-diff`)); + + const scrollTarget = page.locator('#scroll-target'); + await scrollTarget.evaluate((el: HTMLDivElement) => (el.scrollTop = el.scrollHeight)); + await page.waitForChanges(); + + await expect(footer).toHaveScreenshot(screenshot(`footer-fade-scroll-target-not-blurred-diff`)); + }); + }); +}); diff --git a/core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/scroll-target/footer.e2e-legacy.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts b/core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts deleted file mode 100644 index 9054515b89..0000000000 --- a/core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { expect } from '@playwright/test'; -import { test } from '@utils/test/playwright'; - -test.describe('footer: with tabs', () => { - test('should not have extra padding when near a tab bar', async ({ page }, testInfo) => { - test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.'); - - await page.goto('/src/components/footer/test/with-tabs'); - - const footer = page.locator('[tab="tab-one"] ion-footer'); - await expect(footer).toHaveScreenshot(`footer-with-tabs-${page.getSnapshotSettings()}.png`); - }); -}); diff --git a/core/src/components/footer/test/with-tabs/footer.e2e.ts b/core/src/components/footer/test/with-tabs/footer.e2e.ts new file mode 100644 index 0000000000..6b3b73b33c --- /dev/null +++ b/core/src/components/footer/test/with-tabs/footer.e2e.ts @@ -0,0 +1,16 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This does not test LTR vs. RTL layout. + */ +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('footer: with tabs'), () => { + test('should not have extra padding when near a tab bar', async ({ page }) => { + await page.goto('/src/components/footer/test/with-tabs', config); + + const footer = page.locator('[tab="tab-one"] ion-footer'); + await expect(footer).toHaveScreenshot(screenshot(`footer-with-tabs`)); + }); + }); +}); diff --git a/core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/footer/test/with-tabs/footer.e2e-legacy.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Safari-linux.png rename to core/src/components/footer/test/with-tabs/footer.e2e.ts-snapshots/footer-with-tabs-md-ltr-Mobile-Safari-linux.png