Merge remote-tracking branch 'origin/main' into chore/sync-with-main

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.12](https://github.com/ionic-team/ionic-framework/compare/v6.1.11...v6.1.12) (2022-06-29)
+
+
+### Bug Fixes
+
+* **angular:** warn devs that standalone components are not supported ([#25516](https://github.com/ionic-team/ionic-framework/issues/25516)) ([c53785c](https://github.com/ionic-team/ionic-framework/commit/c53785c0c786113f3516c09fa512687ecb84c717))
+* **datetime:** add dev warnings when setting out of bounds value ([#25513](https://github.com/ionic-team/ionic-framework/issues/25513)) ([5dfaf63](https://github.com/ionic-team/ionic-framework/commit/5dfaf63c6582811b61339a6fa50cf551cd8724d0))
+
+
+
+
+
 ## [6.1.11](https://github.com/ionic-team/ionic-framework/compare/v6.1.10...v6.1.11) (2022-06-22)
 
 

LICENSE

@@ -1,23 +1,21 @@
-Copyright 2015-present Drifty Co.
-http://drifty.com/
-
 MIT License
 
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
+Copyright (c) 2015-present Drifty Co.
 
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

angular/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.12](https://github.com/ionic-team/ionic/compare/v6.1.11...v6.1.12) (2022-06-29)
+
+
+### Bug Fixes
+
+* **angular:** warn devs that standalone components are not supported ([#25516](https://github.com/ionic-team/ionic/issues/25516)) ([c53785c](https://github.com/ionic-team/ionic/commit/c53785c0c786113f3516c09fa512687ecb84c717))
+
+
+
+
+
 ## [6.1.11](https://github.com/ionic-team/ionic/compare/v6.1.10...v6.1.11) (2022-06-22)
 
 **Note:** Version bump only for package @ionic/angular

angular/package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.11",
+  "version": "6.1.12",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.1.11",
+      "version": "6.1.12",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.11",
+        "@ionic/core": "^6.1.12",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.11.tgz",
-      "integrity": "sha512-hMYZ+Iqvv2a8Qj3HCbtnI4DDIplMvr7x1Jk3aljNsvYQeyVLXxXvyNfpBzVuJxF7lJeGMlq9cY5XWUXh2gQnIA==",
+      "version": "6.1.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.12.tgz",
+      "integrity": "sha512-CISprIpbGJHMjxsx0OAQ6grnsbBuhcImaiL5rRBI7MtncIW56nge4IO064n86bwhxRqvoXCA6EGq9D1S5Cn45g==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -7939,9 +7939,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.11.tgz",
-      "integrity": "sha512-hMYZ+Iqvv2a8Qj3HCbtnI4DDIplMvr7x1Jk3aljNsvYQeyVLXxXvyNfpBzVuJxF7lJeGMlq9cY5XWUXh2gQnIA==",
+      "version": "6.1.12",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.12.tgz",
+      "integrity": "sha512-CISprIpbGJHMjxsx0OAQ6grnsbBuhcImaiL5rRBI7MtncIW56nge4IO064n86bwhxRqvoXCA6EGq9D1S5Cn45g==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",

angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.11",
+  "version": "6.1.12",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.1.11",
+    "@ionic/core": "^6.1.12",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },

core/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.12](https://github.com/ionic-team/ionic/compare/v6.1.11...v6.1.12) (2022-06-29)
+
+
+### Bug Fixes
+
+* **datetime:** add dev warnings when setting out of bounds value ([#25513](https://github.com/ionic-team/ionic/issues/25513)) ([5dfaf63](https://github.com/ionic-team/ionic/commit/5dfaf63c6582811b61339a6fa50cf551cd8724d0))
+
+
+
+
+
 ## [6.1.11](https://github.com/ionic-team/ionic/compare/v6.1.10...v6.1.11) (2022-06-22)
 
 

core/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.11",
+  "version": "6.1.12",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.1.11",
+      "version": "6.1.12",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.16.0",

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.11",
+  "version": "6.1.12",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

core/src/components.d.ts

@@ -1866,6 +1866,10 @@ export namespace Components {
          */
         "numericInput": boolean;
         "scrollActiveItemIntoView": () => Promise<void>;
+        /**
+          * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
+         */
+        "setValue": (value?: string | number | undefined) => Promise<void>;
         /**
           * The selected option in the picker.
          */

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

@@ -1,14 +0,0 @@
-import { AxePuppeteer } from '@axe-core/puppeteer';
-import { newE2EPage } from '@stencil/core/testing';
-
-test('item: axe', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/a11y?ionic:_testing=true',
-  });
-
-  const results = await new AxePuppeteer(page)
-    // TODO(FW-404): Re-enable rule once select is updated to avoid nested-interactive
-    .disableRules('nested-interactive')
-    .analyze();
-  expect(results.violations.length).toEqual(0);
-});

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

@@ -0,0 +1,15 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: axe', () => {
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/item/test/a11y`);
+
+    const results = await new AxeBuilder({ page })
+      // TODO(FW-404): Re-enable rule once select is updated to avoid nested-interactive
+      .disableRules('nested-interactive')
+      .analyze();
+    expect(results.violations).toEqual([]);
+  });
+});

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

@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('item: alignment', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/alignment?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('item: alignment-rtl', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/alignment?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/item/test/alignment/index.html

@@ -25,10 +25,6 @@
       <ion-content>
         <ion-list>
           <ion-list-header>Leading Icons</ion-list-header>
-          <ion-item>
-            <ion-icon slot="start" name="time"></ion-icon>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-icon slot="start" name="radio-button-off"></ion-icon>
             <ion-input placeholder="Choose Starting Point"></ion-input>
@@ -44,10 +40,6 @@
 
         <ion-list>
           <ion-list-header>Default Labels</ion-list-header>
-          <ion-item>
-            <ion-label>Time</ion-label>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-label>From</ion-label>
             <ion-input placeholder="Choose Starting Point"></ion-input>
@@ -63,10 +55,6 @@
 
         <ion-list>
           <ion-list-header>Fixed Labels</ion-list-header>
-          <ion-item>
-            <ion-label position="fixed">Time</ion-label>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-label position="fixed">From</ion-label>
             <ion-input placeholder="Choose Starting Point"></ion-input>
@@ -82,10 +70,6 @@
 
         <ion-list>
           <ion-list-header>Floating Labels</ion-list-header>
-          <ion-item>
-            <ion-label position="floating">Time</ion-label>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-label position="floating">From</ion-label>
             <ion-input></ion-input>
@@ -101,10 +85,6 @@
 
         <ion-list>
           <ion-list-header>Stacked Labels</ion-list-header>
-          <ion-item>
-            <ion-label position="stacked">Time</ion-label>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-label position="stacked">From</ion-label>
             <ion-input placeholder="Choose Starting Point"></ion-input>
@@ -120,10 +100,6 @@
 
         <ion-list>
           <ion-list-header>End Labels</ion-list-header>
-          <ion-item>
-            <ion-label slot="end">Time</ion-label>
-            <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
-          </ion-item>
           <ion-item>
             <ion-label slot="end">From</ion-label>
             <ion-input placeholder="Choose Starting Point"></ion-input>

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

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: alignment', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/item/test/alignment`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`item-alignment-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('item: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('item: basic-rtl', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/item/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`item-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('item: buttons', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/buttons?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -0,0 +1,18 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: buttons', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    /**
+     * This test validates that in iOS mode the arrow indicators are
+     * added to the end of the ion-item row.
+     *
+     * In MD mode, these arrow indicators are not present.
+     */
+    await page.goto(`/src/components/item/test/buttons`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`item-buttons-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('item: colors', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/colors?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: colors', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/item/test/colors`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`item-colors-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,96 +0,0 @@
-import type { E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('item: counter', () => {
-  describe('custom formatter', () => {
-    let page: E2EPage;
-
-    beforeEach(async () => {
-      page = await newE2EPage({
-        url: '/src/components/item/test/counter?ionic:_testing=true',
-      });
-    });
-
-    it('should format on load', async () => {
-      const itemCounter = await page.find('#customFormatter >>> .item-counter');
-
-      expect(itemCounter.textContent).toBe('20 characters left');
-    });
-
-    it('should format on input', async () => {
-      const input = await page.find('#customFormatter ion-input');
-
-      await input.click();
-      await input.type('abcde');
-
-      await page.waitForChanges();
-
-      const itemCounter = await page.find('#customFormatter >>> .item-counter');
-
-      expect(itemCounter.textContent).toBe('15 characters left');
-    });
-
-    it('should format after changing the counterFormatter', async () => {
-      let itemCounter = await page.find('#customFormatter >>> .item-counter');
-
-      expect(itemCounter.textContent).toBe('20 characters left');
-
-      await page.$eval('#customFormatter', (el: any) => {
-        el.counterFormatter = () => {
-          return 'test label';
-        };
-      });
-      await page.waitForChanges();
-
-      itemCounter = await page.find('#customFormatter >>> .item-counter');
-
-      expect(itemCounter.textContent).toBe('test label');
-    });
-
-    describe('when an exception occurs', () => {
-      const logs = [];
-
-      beforeEach(async () => {
-        page = await newE2EPage({
-          html: `
-          <ion-item counter="true"">
-            <ion-input maxlength="20" value=""></ion-input>
-          </ion-item>`,
-        });
-
-        page.on('console', (ev) => {
-          if (ev.type() === 'error') {
-            logs.push(ev.text());
-          }
-        });
-
-        const itemCounter = await page.find('ion-item >>> .item-counter');
-
-        expect(itemCounter.textContent).toBe('0 / 20');
-
-        await page.$eval('ion-item', (el: any) => {
-          el.counterFormatter = () => {
-            throw new Error('This is an expected error');
-          };
-        });
-        await page.waitForChanges();
-      });
-
-      it('should default the formatting to length / maxlength', async () => {
-        const input = await page.find('ion-input');
-
-        await input.click();
-        await input.type('abcde');
-
-        const itemCounter = await page.find('ion-item >>> .item-counter');
-
-        expect(itemCounter.textContent).toBe('5 / 20');
-      });
-
-      it('should log an error', () => {
-        expect(logs.length).toBeGreaterThan(0);
-        expect(logs[0]).toMatch('[Ionic Error]: Exception in provided `counterFormatter`.');
-      });
-    });
-  });
-});

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

@@ -3,10 +3,50 @@ import { test } from '@utils/test/playwright';
 
 test.describe('item: counter', () => {
   test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/item/test/counter`);
+    await page.goto('/src/components/item/test/counter');
 
     await page.setIonViewport();
 
     expect(await page.screenshot()).toMatchSnapshot(`item-counter-diff-${page.getSnapshotSettings()}.png`);
   });
+
+  test.describe('custom formatter', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/item/test/counter');
+    });
+
+    test('should format on load', async ({ page }) => {
+      const itemCounter = page.locator('#customFormatter .item-counter');
+
+      expect(await itemCounter.textContent()).toBe('20 characters left');
+    });
+
+    test('should format on input', async ({ page }) => {
+      const input = page.locator('#customFormatter ion-input');
+
+      await input.click();
+      await input.type('abcde');
+
+      await page.waitForChanges();
+
+      const itemCounter = page.locator('#customFormatter .item-counter');
+
+      expect(await itemCounter.textContent()).toBe('15 characters left');
+    });
+
+    test('should format after changing the counterFormatter', async ({ page }) => {
+      const itemCounter = page.locator('#customFormatter .item-counter');
+
+      expect(await itemCounter.textContent()).toBe('20 characters left');
+
+      await page.$eval('#customFormatter', (el: any) => {
+        el.counterFormatter = () => {
+          return 'test label';
+        };
+      });
+      await page.waitForChanges();
+
+      expect(await itemCounter.textContent()).toBe('test label');
+    });
+  });
 });

core/src/components/item/test/css-variables/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('item: CSS variables', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/css-variables?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/item/test/css-variables/item.e2e.ts

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: CSS variables', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/item/test/css-variables`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`item-css-vars-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('item: disabled', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/disabled?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('item: disabled-rtl', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/disabled?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: disabled state', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/item/test/disabled`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`item-disabled-diff-${page.getSnapshotSettings()}.png`);
+  });
+});

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('item: dividers', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item/test/dividers?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('item: dividers', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/item/test/dividers`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`item-dividers-diff-${page.getSnapshotSettings()}.png`);
+  });
+});