Merge remote-tracking branch 'origin/main' into sync-6.4-11-30

core/playwright.config.ts

@@ -87,7 +87,7 @@ const config: PlaywrightTestConfig = {
        * Increases the maximum allowed pixel difference to account
        * for slight browser rendering inconsistencies.
        */
-      maxDiffPixelRatio: 0.01
+      maxDiffPixelRatio: 0.005
     }
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */

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

@@ -74,7 +74,7 @@ test.describe('input: basic', () => {
       // Verifies that the parent item receives .item-has-focus when the input is focused.
       await expect(item).toHaveClass(/item-has-focus/);
       // Validates the display of an input with an ion-item using lines="full" when focused.
-      expect(await item.screenshot()).toMatchSnapshot(
+      expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(
         `input-with-lines-full-focused-${page.getSnapshotSettings()}.png`
       );
     });
@@ -102,7 +102,7 @@ test.describe('input: basic', () => {
       await expect(item).toHaveClass(/item-has-focus/);
 
       // Validates the display of an input with an ion-item using lines="inset" when focused.
-      expect(await item.screenshot()).toMatchSnapshot(
+      expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(
         `input-with-lines-inset-focused-${page.getSnapshotSettings()}.png`
       );
     });
@@ -130,7 +130,7 @@ test.describe('input: basic', () => {
       await expect(item).toHaveClass(/item-has-focus/);
 
       // Validates the display of an input with an ion-item using lines="none" when focused.
-      expect(await item.screenshot()).toMatchSnapshot(
+      expect(await item.screenshot({ animations: 'disabled' })).toMatchSnapshot(
         `input-with-lines-none-focused-${page.getSnapshotSettings()}.png`
       );
     });

core/src/components/item/test/reorder/item.e2e.ts

@@ -9,6 +9,8 @@ test.describe('item: reorder', () => {
 
     await page.click('text=Edit');
 
+    await page.waitForChanges();
+
     expect(await page.screenshot()).toMatchSnapshot(`item-reorder-diff-${page.getSnapshotSettings()}.png`);
   });
 });

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