diff --git a/core/src/components/title/test/basic/index.html b/core/src/components/title/test/basic/index.html index d27214ccd1c..283bee1fd66 100644 --- a/core/src/components/title/test/basic/index.html +++ b/core/src/components/title/test/basic/index.html @@ -16,7 +16,7 @@ -
+
Settings @@ -38,7 +38,7 @@ Title - Subtitle + Subtitle @@ -80,8 +80,9 @@ diff --git a/core/src/components/title/test/basic/title.e2e.ts b/core/src/components/title/test/basic/title.e2e.ts index ea5869d29d3..2482e70baab 100644 --- a/core/src/components/title/test/basic/title.e2e.ts +++ b/core/src/components/title/test/basic/title.e2e.ts @@ -1,14 +1,85 @@ import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { +configs({ modes: ['ionic-md', 'md', 'ios'] }).forEach(({ title, screenshot, config }) => { test.describe(title('title: basic'), () => { test('should not have visual regressions', async ({ page }) => { - await page.goto('/src/components/title/test/basic', config); - const wrapper = page.locator('#header-wrapper'); + await page.setContent( + ` + + +
+ + + Settings + + + + + + Browse + + Cancel + + + + + + + + + + Title + Subtitle + + + + + + + + + + Choose a contact to add to Favorites + + + Contacts + + Cancel + + + + + + + + Choose multiple contacts to add to your Favorites so this just goes on and on and on + + + + + Groups + + Contacts + + Cancel + + + +
+ `, + config + ); + + const container = page.locator('#container'); - // only screenshot the headers to avoid unnecessary blank space from ion-content - await expect(wrapper).toHaveScreenshot(screenshot(`title-basic`)); + await expect(container).toHaveScreenshot(screenshot(`title-basic`)); }); }); }); diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b220962c05e Binary files /dev/null and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..455f0f0e1cb Binary files /dev/null and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5ef52695343 Binary files /dev/null and b/core/src/components/title/test/basic/title.e2e.ts-snapshots/title-basic-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/title/test/color/title.e2e.ts b/core/src/components/title/test/color/title.e2e.ts new file mode 100644 index 00000000000..c478c2618e1 --- /dev/null +++ b/core/src/components/title/test/color/title.e2e.ts @@ -0,0 +1,32 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across directions. + */ +configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('title: color'), () => { + test('should not have visual regressions', async ({ page }) => { + await page.setContent( + ` + + + Primary + + + Tertiary + + + Warning + + + `, + config + ); + + const header = page.locator('ion-header'); + + await expect(header).toHaveScreenshot(screenshot(`title-color`)); + }); + }); +}); diff --git a/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..8ec5bd9abd2 Binary files /dev/null and b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..0a29dce1009 Binary files /dev/null and b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1c8a129d48f Binary files /dev/null and b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..67d962bba82 Binary files /dev/null and b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d74a7d136d4 Binary files /dev/null and b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5f16e7efa43 Binary files /dev/null and b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..656a4e87a69 Binary files /dev/null and b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..10b82357b65 Binary files /dev/null and b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..23ec2e4af72 Binary files /dev/null and b/core/src/components/title/test/color/title.e2e.ts-snapshots/title-color-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/title/test/title.spec.ts b/core/src/components/title/test/title.spec.ts new file mode 100644 index 00000000000..ff6ba9fbc88 --- /dev/null +++ b/core/src/components/title/test/title.spec.ts @@ -0,0 +1,89 @@ +import { newSpecPage } from '@stencil/core/testing'; + +import { ToolbarTitle } from '../title'; + +describe('title: classes', () => { + it('should add the default size class when size is not set', async () => { + const page = await newSpecPage({ + components: [ToolbarTitle], + html: `Title`, + }); + + expect(page.root!.classList.contains('title-default')).toBe(true); + }); + + it('should add the size class when size is set', async () => { + const page = await newSpecPage({ + components: [ToolbarTitle], + html: `TitleTitle`, + }); + + const [large, small] = Array.from(page.body.querySelectorAll('ion-title')); + expect(large.classList.contains('title-large')).toBe(true); + expect(small.classList.contains('title-small')).toBe(true); + }); + + it('should add the color classes when color is set', async () => { + const page = await newSpecPage({ + components: [ToolbarTitle], + html: `Title`, + }); + + expect(page.root!.classList.contains('ion-color')).toBe(true); + expect(page.root!.classList.contains('ion-color-primary')).toBe(true); + }); + + it('should add the rtl class when the document is rtl', async () => { + const page = await newSpecPage({ + components: [ToolbarTitle], + html: `Title`, + direction: 'rtl', + }); + + expect(page.root!.classList.contains('title-rtl')).toBe(true); + }); + + /** + * The iOS collapsing header and page transition look up this + * element and measure it, so it must keep its class. + */ + it('should render the inner title element', async () => { + const page = await newSpecPage({ + components: [ToolbarTitle], + html: `Title`, + }); + + expect(page.root!.shadowRoot!.querySelector('.toolbar-title')).not.toBeNull(); + }); +}); + +describe('title: style event', () => { + it('should emit the size class when it first connects', async () => { + const page = await newSpecPage({ + components: [ToolbarTitle], + html: '', + }); + + const ionStyle = jest.fn(); + page.body.addEventListener('ionStyle', (ev: Event) => ionStyle((ev as CustomEvent).detail)); + + await page.setContent(`Title`); + + expect(ionStyle).toHaveBeenCalledWith({ 'title-large': true }); + }); + + it('should emit the size class when size changes', async () => { + const page = await newSpecPage({ + components: [ToolbarTitle], + html: `Title`, + }); + + const ionStyle = jest.fn(); + page.root!.addEventListener('ionStyle', (ev: Event) => ionStyle((ev as CustomEvent).detail)); + + page.root!.setAttribute('size', 'large'); + await page.waitForChanges(); + + expect(ionStyle).toHaveBeenCalledWith({ 'title-large': true }); + }); +});