diff --git a/core/src/components/header/test/a11y/e2e.ts b/core/src/components/header/test/a11y/e2e.ts deleted file mode 100644 index 59305da702..0000000000 --- a/core/src/components/header/test/a11y/e2e.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { AxePuppeteer } from '@axe-core/puppeteer'; -import { newE2EPage } from '@stencil/core/testing'; - -test('header: axe', async () => { - const page = await newE2EPage({ - url: '/src/components/header/test/a11y?ionic:_testing=true', - }); - - const results = await new AxePuppeteer(page).analyze(); - expect(results.violations.length).toEqual(0); -}); diff --git a/core/src/components/header/test/a11y/header.e2e.ts b/core/src/components/header/test/a11y/header.e2e.ts new file mode 100644 index 0000000000..f948f7dbd1 --- /dev/null +++ b/core/src/components/header/test/a11y/header.e2e.ts @@ -0,0 +1,34 @@ +import AxeBuilder from '@axe-core/playwright'; +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('header: a11y', () => { + test.beforeEach(async ({ skip }) => { + skip.rtl(); + skip.mode('md'); + }); + + test('should not have accessibility violations', async ({ page }) => { + await page.goto(`/src/components/header/test/a11y`); + + const headers = page.locator('ion-header'); + await expect(headers.first()).toHaveAttribute('role', 'banner'); + await expect(headers.last()).toHaveAttribute('role', 'none'); + + const results = await new AxeBuilder({ page }).analyze(); + expect(results.violations).toEqual([]); + }); + + test('should allow for custom role', async ({ page }) => { + /** + * Note: This example should not be used in production. + * This only serves to check that `role` can be customized. + */ + await page.setContent(` + + `); + const header = page.locator('ion-header'); + + await expect(header).toHaveAttribute('role', 'heading'); + }); +}); diff --git a/core/src/components/header/test/basic/e2e.ts b/core/src/components/header/test/basic/e2e.ts deleted file mode 100644 index 9a1f4c86d5..0000000000 --- a/core/src/components/header/test/basic/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('header: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/header/test/basic?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/header/test/basic/header.e2e.ts b/core/src/components/header/test/basic/header.e2e.ts new file mode 100644 index 0000000000..0a536794ff --- /dev/null +++ b/core/src/components/header/test/basic/header.e2e.ts @@ -0,0 +1,78 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('header: basic', () => { + test.describe('header: rendering', () => { + test('should not have visual regressions with basic header', async ({ page }) => { + await page.setContent(` + + + Header - Default + + + `); + + const header = page.locator('ion-header'); + expect(await header.screenshot()).toMatchSnapshot(`header-diff-${page.getSnapshotSettings()}.png`); + }); + }); + + test.describe('header: feature rendering', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + }); + + test('should not have visual regressions with no border', async ({ page }) => { + await page.setContent(` + + + Header - No Border + + + `); + + const header = page.locator('ion-header'); + expect(await header.screenshot()).toMatchSnapshot(`header-no-border-diff-${page.getSnapshotSettings()}.png`); + }); + + test('should not have visual regressions with translucent header', async ({ page, skip }) => { + skip.mode('md', 'Translucent effect is only available in iOS mode.'); + skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.'); + + await page.setContent(` + +
+ +
+ + Header - Translucent + + + `); + + const header = page.locator('ion-header'); + expect(await header.screenshot()).toMatchSnapshot(`header-translucent-diff-${page.getSnapshotSettings()}.png`); + }); + + test('should not have visual regressions with translucent header with color', async ({ page, skip }) => { + skip.mode('md', 'Translucent effect is only available in iOS mode.'); + skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.'); + + await page.setContent(` + +
+ +
+ + Header - Translucent + + + `); + + const header = page.locator('ion-header'); + expect(await header.screenshot()).toMatchSnapshot( + `header-translucent-color-diff-${page.getSnapshotSettings()}.png` + ); + }); + }); +}); diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3e8aa22e58 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..55ea7993f9 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..737efe5fe2 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3e8aa22e58 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..55ea7993f9 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..737efe5fe2 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3a9b1e9e37 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..03a66cbbfa Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a125e85d27 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3b24c3fe30 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2a35f36947 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..4e720ee658 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2a6c287d9b Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6b4bb7d693 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8b85c3eb67 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9098a8dc06 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..453c1db49d Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..156f85760e Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-no-border-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..458edf7720 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..36a70e3537 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-color-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3e4ac2c41b Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..29073b5256 Binary files /dev/null and b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-translucent-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/basic/index.html b/core/src/components/header/test/basic/index.html index 41c454785c..2fbfa476b0 100644 --- a/core/src/components/header/test/basic/index.html +++ b/core/src/components/header/test/basic/index.html @@ -15,20 +15,13 @@ + + + Header + + - - - Header - Default - - - -
- - - - Header - No Border - - +

Content

 diff --git a/core/src/components/header/test/condense/header.e2e.ts b/core/src/components/header/test/condense/header.e2e.ts index 3312a06ead..f0a1f6ab43 100644 --- a/core/src/components/header/test/condense/header.e2e.ts +++ b/core/src/components/header/test/condense/header.e2e.ts @@ -7,24 +7,37 @@ test.describe('header: condense', () => { skip.rtl(); await page.goto('/src/components/header/test/condense'); - const header = page.locator('#collapsibleHeader'); + const largeTitleHeader = page.locator('#largeTitleHeader'); + const smallTitleHeader = page.locator('#smallTitleHeader'); const content = page.locator('ion-content'); - await expect(header).toHaveAttribute('aria-hidden', 'true'); + await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true'); - await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom()); - await page.waitForChanges(); + expect(await largeTitleHeader.screenshot({ animations: 'disabled' })).toMatchSnapshot( + `header-condense-large-title-initial-diff-${page.getSnapshotSettings()}.png` + ); + + await content.evaluate(async (el: HTMLIonContentElement) => { + await el.scrollToBottom(); + }); + await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive'); + + expect(await smallTitleHeader.screenshot({ animations: 'disabled' })).toMatchSnapshot( + `header-condense-large-title-collapsed-diff-${page.getSnapshotSettings()}.png` + ); /** * Playwright can't do .not.toHaveAttribute() because a value is expected, * and toHaveAttribute can't accept a value of type null. */ - const ariaHidden = await header.getAttribute('aria-hidden'); + const ariaHidden = await smallTitleHeader.getAttribute('aria-hidden'); expect(ariaHidden).toBeNull(); - await content.evaluate((el: HTMLIonContentElement) => el.scrollToTop()); - await page.waitForChanges(); + await content.evaluate(async (el: HTMLIonContentElement) => { + await el.scrollToTop(); + }); + await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive'); - await expect(header).toHaveAttribute('aria-hidden', 'true'); + await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true'); }); }); diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2821b49e47 Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bc54f9aad1 Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6fa282afe0 Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-collapsed-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ea15d1c95b Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..45a3125cf5 Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e7a957e4f5 Binary files /dev/null and b/core/src/components/header/test/condense/header.e2e.ts-snapshots/header-condense-large-title-initial-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/condense/index.html b/core/src/components/header/test/condense/index.html index dfcf35d00f..f5cfea1635 100644 --- a/core/src/components/header/test/condense/index.html +++ b/core/src/components/header/test/condense/index.html @@ -12,79 +12,74 @@ -
- + +
+ +
- Mailboxes + Header - + - Mailboxes + Header -
-
-
-
-
-
-
-
-
+
+

Content

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor, + massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi + cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque + ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio. + Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu + porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium + tortor. +

+

+ Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero + nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis. + Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida + vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu + scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum, + imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus + velit ornare nunc, dapibus varius turpis leo ut magna. +

+

+ Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc + bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies + non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit + sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget + justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus, + accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus + magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus. + Curabitur non ipsum et ex vestibulum congue. +

+

+ Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at + nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id + in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean + elementum est nec arcu ultricies dignissim. +

+

+ Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a + fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus + rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis + ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere. +

- Updated Just Now + Footer
diff --git a/core/src/components/header/test/fade/e2e.ts b/core/src/components/header/test/fade/e2e.ts deleted file mode 100644 index 792198d8ae..0000000000 --- a/core/src/components/header/test/fade/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('header: fade', async () => { - const page = await newE2EPage({ - url: '/src/components/header/test/fade?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/header/test/fade/header.e2e.ts b/core/src/components/header/test/fade/header.e2e.ts new file mode 100644 index 0000000000..8828ec222e --- /dev/null +++ b/core/src/components/header/test/fade/header.e2e.ts @@ -0,0 +1,28 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('header: fade', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + }); + + test('should not have visual regressions with fade header', async ({ page, skip }) => { + skip.mode('md', 'Translucent effect is only available in iOS mode.'); + skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.'); + + await page.goto('/src/components/header/test/fade'); + + const header = page.locator('ion-header'); + expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot( + `header-fade-not-blurred-diff-${page.getSnapshotSettings()}.png` + ); + + const content = page.locator('ion-content'); + await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0)); + await page.waitForChanges(); + + expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot( + `header-fade-blurred-diff-${page.getSnapshotSettings()}.png` + ); + }); +}); diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c0cba2652f Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6fa282afe0 Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a52551bf64 Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b8adb33f0b Binary files /dev/null and b/core/src/components/header/test/fade/header.e2e.ts-snapshots/header-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/fade/index.html b/core/src/components/header/test/fade/index.html index 5a84e0b6e9..771c848f2d 100644 --- a/core/src/components/header/test/fade/index.html +++ b/core/src/components/header/test/fade/index.html @@ -12,74 +12,69 @@ -
+
+ +
- Mailboxes + Header -
-
-
-
-
-
-
-
-
+
+

Content

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor, + massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi + cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque + ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio. + Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu + porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium + tortor. +

+

+ Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero + nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis. + Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida + vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu + scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum, + imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus + velit ornare nunc, dapibus varius turpis leo ut magna. +

+

+ Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc + bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies + non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit + sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget + justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus, + accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus + magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus. + Curabitur non ipsum et ex vestibulum congue. +

+

+ Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at + nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id + in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean + elementum est nec arcu ultricies dignissim. +

+

+ Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a + fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus + rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis + ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere. +

- Updated Just Now + Footer
diff --git a/core/src/components/header/test/img.jpg b/core/src/components/header/test/img.jpg new file mode 100644 index 0000000000..d7bd6ebe62 Binary files /dev/null and b/core/src/components/header/test/img.jpg differ diff --git a/core/src/components/header/test/scroll-target/e2e.ts b/core/src/components/header/test/scroll-target/e2e.ts deleted file mode 100644 index 3a460e6b93..0000000000 --- a/core/src/components/header/test/scroll-target/e2e.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; -import type { E2EPage } from '@stencil/core/testing'; -import { scrollToBottom } from '@utils/test'; - -describe('ion-header: custom scroll target', () => { - let page: E2EPage; - - beforeEach(async () => { - page = await newE2EPage({ - url: '/src/components/header/test/scroll-target?ionic:_testing=true&ionic:mode=ios', - }); - }); - - it('should match existing visual screenshots', async () => { - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); - }); - - describe('large title', () => { - it('should display the large title initially', async () => { - const largeHeader = await page.find('ion-header[collapse="condense"]'); - const collapseHeader = await page.find('ion-header[collapse="fade"]'); - - expect(largeHeader.className).not.toContain('header-collapse-condense-inactive'); - expect(collapseHeader.className).toContain('header-collapse-condense-inactive'); - }); - - describe('when the scroll container has overflow', () => { - it('should display the collapsed title on scroll', async () => { - const screenshotCompares = []; - - screenshotCompares.push(await page.compareScreenshot('large title expanded')); - - const largeHeader = await page.find('ion-header[collapse="condense"]'); - const collapseHeader = await page.find('ion-header[collapse="fade"]'); - - await scrollToBottom(page, '#scroll-target'); - await page.waitForChanges(); - - expect(largeHeader.className).toContain('header-collapse-condense-inactive'); - expect(collapseHeader.className).not.toContain('header-collapse-condense-inactive'); - - screenshotCompares.push(await page.compareScreenshot('large title collapsed')); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } - }); - }); - }); -}); diff --git a/core/src/components/header/test/scroll-target/header.e2e.ts b/core/src/components/header/test/scroll-target/header.e2e.ts new file mode 100644 index 0000000000..be0194c58c --- /dev/null +++ b/core/src/components/header/test/scroll-target/header.e2e.ts @@ -0,0 +1,33 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('header: scroll-target', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + }); + + /** + * This test suite verifies that the fade effect for iOS is working correctly + * when the `ion-header` is using a custom scroll target with the `.ion-content-scroll-host` + * selector. + */ + test('should not have visual regressions with custom scroll target header', async ({ page, skip }) => { + skip.mode('md', 'Translucent effect is only available in iOS mode.'); + skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.'); + + await page.goto('/src/components/header/test/scroll-target'); + + const header = page.locator('ion-header'); + expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot( + `header-scroll-target-not-blurred-diff-${page.getSnapshotSettings()}.png` + ); + + const scrollTarget = page.locator('#scroll-target'); + await scrollTarget.evaluate((el: HTMLDivElement) => (el.scrollTop = el.scrollHeight)); + await page.waitForChanges(); + + expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot( + `header-scroll-target-blurred-diff-${page.getSnapshotSettings()}.png` + ); + }); +}); diff --git a/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0185835e1c Binary files /dev/null and b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c35ed9c3e9 Binary files /dev/null and b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a52551bf64 Binary files /dev/null and b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b8adb33f0b Binary files /dev/null and b/core/src/components/header/test/scroll-target/header.e2e.ts-snapshots/header-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/header/test/scroll-target/index.html b/core/src/components/header/test/scroll-target/index.html index 9224c9ea2c..418451c1b1 100644 --- a/core/src/components/header/test/scroll-target/index.html +++ b/core/src/components/header/test/scroll-target/index.html @@ -13,48 +13,6 @@ - -