diff --git a/core/src/components/tabs/test/basic/e2e.ts b/core/src/components/tabs/test/basic/e2e.ts deleted file mode 100644 index fbf247dc5d..0000000000 --- a/core/src/components/tabs/test/basic/e2e.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('tabs: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/tabs/test/basic?ionic:_testing=true', - }); - - let compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); - - const button2 = await page.find('.e2eTabTwoButton'); - await button2.click(); - compare = await page.compareScreenshot(`tab two`); - expect(compare).toMatchScreenshot(); - - const button3 = await page.find('.e2eTabThreeButton'); - await button3.click(); - compare = await page.compareScreenshot(`tab three, disabled`); - expect(compare).toMatchScreenshot(); - - const button4 = await page.find('.e2eTabFourButton'); - await button4.click(); - compare = await page.compareScreenshot(`tab four`); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/tabs/test/basic/tabs.e2e.ts b/core/src/components/tabs/test/basic/tabs.e2e.ts new file mode 100644 index 0000000000..464fc3a842 --- /dev/null +++ b/core/src/components/tabs/test/basic/tabs.e2e.ts @@ -0,0 +1,38 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('tabs: basic', () => { + test('should show correct tab when clicking the tab button', async ({ page, skip }) => { + skip.rtl(); + skip.mode('ios'); + await page.goto('/src/components/tabs/test/basic'); + + const tabOne = page.locator('ion-tab[tab="tab-one"]'); + const tabTwo = page.locator('ion-tab[tab="schedule"]'); + + // The tab button for tab 3 is disabled so this is never visible + const tabThree = page.locator('ion-tab[tab="tab-three"]'); + + // Tab Four renders a nested web component + const tabFour = page.locator('ion-tab[tab="tab-four"] page-one'); + + await expect(tabOne).toBeVisible(); + await expect(tabTwo).toBeHidden(); + await expect(tabThree).toBeHidden(); + await expect(tabFour).toBeHidden(); + + await page.click('ion-tab-button[tab="schedule"]'); + + await expect(tabOne).toBeHidden(); + await expect(tabTwo).toBeVisible(); + await expect(tabThree).toBeHidden(); + await expect(tabFour).toBeHidden(); + + await page.click('ion-tab-button[tab="tab-four"]'); + + await expect(tabOne).toBeHidden(); + await expect(tabTwo).toBeHidden(); + await expect(tabThree).toBeHidden(); + await expect(tabFour).toBeVisible(); + }); +}); diff --git a/core/src/components/tabs/test/placements/e2e.ts b/core/src/components/tabs/test/placements/e2e.ts deleted file mode 100644 index 7fc437bf78..0000000000 --- a/core/src/components/tabs/test/placements/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('tab: placements', async () => { - const page = await newE2EPage({ - url: '/src/components/tabs/test/placements?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/tabs/test/placements/tabs.e2e.ts b/core/src/components/tabs/test/placements/tabs.e2e.ts new file mode 100644 index 0000000000..db0228b224 --- /dev/null +++ b/core/src/components/tabs/test/placements/tabs.e2e.ts @@ -0,0 +1,40 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('tabs: placement', () => { + test.beforeEach(async ({ page, skip }) => { + skip.rtl(); + skip.mode('ios'); + + await page.setViewportSize({ + width: 300, + height: 200, + }); + }); + test('should show tab bar at the top of tabs', async ({ page }) => { + await page.setContent(` + + My Content + + One + + + `); + + const tabs = page.locator('ion-tabs'); + expect(await tabs.screenshot()).toMatchSnapshot(`tabs-tab-bar-top-${page.getSnapshotSettings()}.png`); + }); + test('should show tab bar at the bottom of tabs', async ({ page }) => { + await page.setContent(` + + My Content + + One + + + `); + + const tabs = page.locator('ion-tabs'); + expect(await tabs.screenshot()).toMatchSnapshot(`tabs-tab-bar-bottom-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b22f770e11 Binary files /dev/null and b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..d18e8a0a61 Binary files /dev/null and b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0a824b087d Binary files /dev/null and b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-bottom-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Chrome-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a9193c4fa2 Binary files /dev/null and b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..801f9f21fa Binary files /dev/null and b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Safari-linux.png b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ac913b0138 Binary files /dev/null and b/core/src/components/tabs/test/placements/tabs.e2e.ts-snapshots/tabs-tab-bar-top-md-ltr-Mobile-Safari-linux.png differ