test(tabs): migrate placement tests (#26376)

core/src/components/tabs/test/basic/e2e.ts

@@ -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();
-});

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();
+  });
+});

core/src/components/tabs/test/placements/e2e.ts

@@ -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();
-});

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(`
+      <ion-tabs>
+        <ion-tab tab="one">My Content</ion-tab>
+        <ion-tab-bar slot="top">
+          <ion-tab-button tab="one">One</ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    `);
+
+    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(`
+      <ion-tabs>
+        <ion-tab tab="one">My Content</ion-tab>
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button tab="one">One</ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    `);
+
+    const tabs = page.locator('ion-tabs');
+    expect(await tabs.screenshot()).toMatchSnapshot(`tabs-tab-bar-bottom-${page.getSnapshotSettings()}.png`);
+  });
+});