test(checkbox): migrate tests to Playwright (#25647)

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

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

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

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

core/src/components/checkbox/test/basic/index.html

@@ -44,7 +44,7 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>Secondary</ion-label>
+          <ion-label>Secondary, disabled</ion-label>
           <ion-checkbox disabled checked color="secondary"></ion-checkbox>
         </ion-item>
 
@@ -64,7 +64,7 @@
         </ion-item>
 
         <ion-item>
-          <ion-label>Dark</ion-label>
+          <ion-label>Dark, --size</ion-label>
           <ion-checkbox checked color="dark" style="--size: 100px"></ion-checkbox>
         </ion-item>
 
@@ -83,11 +83,6 @@
           <ion-checkbox checked color="medium" slot="start"></ion-checkbox>
         </ion-item>
 
-        <ion-item>
-          <ion-label>Dark</ion-label>
-          <ion-checkbox checked color="dark" slot="start" style="--size: 100px"></ion-checkbox>
-        </ion-item>
-
         <ion-item>
           <ion-label>Checkmark width</ion-label>
           <ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7"></ion-checkbox>
@@ -109,33 +104,5 @@
         </ion-item>
       </ion-content>
     </ion-app>
-
-    <script>
-      const inputs = document.querySelectorAll('ion-checkbox');
-
-      for (var i = 0; i < inputs.length; i++) {
-        const input = inputs[i];
-
-        input.addEventListener('ionBlur', function () {
-          console.log('Listen ionBlur: fired');
-        });
-
-        input.addEventListener('ionFocus', function () {
-          console.log('Listen ionFocus: fired');
-        });
-
-        input.addEventListener('ionChange', function (ev) {
-          console.log('Listen ionChange: fired', ev.detail);
-        });
-
-        input.addEventListener('click', function () {
-          console.log('Listen click: fired');
-        });
-      }
-
-      const clickItem = () => {
-        console.log('Item click: fired');
-      };
-    </script>
   </body>
 </html>

core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts

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

core/src/components/checkbox/test/indeterminate/e2e.ts

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

core/src/components/checkbox/test/indeterminate/index.html

@@ -23,45 +23,6 @@
       </ion-header>
 
       <ion-content id="content">
-        <ion-list-header>
-          <ion-label> Native </ion-label>
-        </ion-list-header>
-
-        <div class="ion-padding-start">
-          <!-- Default to unchecked -->
-          <label for="unchecked">Unchecked</label>
-          <input name="unchecked" id="unchecked" type="checkbox" />
-          <br />
-
-          <!-- Default to checked -->
-          <label for="checked">Checked</label>
-          <input name="checked" id="checked" type="checkbox" checked />
-          <br />
-
-          <!-- Default to indeterminate -->
-          <label for="indeterminate">Indeterminate</label>
-          <input name="indeterminate" id="indeterminate" type="checkbox" class="indeterminate" />
-          <br />
-
-          <!-- Default to checked / indeterminate -->
-          <label for="both">Checked / Indeterminate</label>
-          <input name="both" id="both" type="checkbox" checked class="indeterminate" />
-          <br />
-        </div>
-
-        <ion-list-header>
-          <ion-label> Ionic </ion-label>
-        </ion-list-header>
-        <ion-item>
-          <ion-label>Unchecked</ion-label>
-          <ion-checkbox slot="end"></ion-checkbox>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Checked</ion-label>
-          <ion-checkbox slot="end" checked></ion-checkbox>
-        </ion-item>
-
         <ion-item>
           <ion-label>Indeterminate</ion-label>
           <ion-checkbox slot="end" indeterminate></ion-checkbox>

core/src/components/checkbox/test/standalone/checkbox.e2e.ts

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

core/src/components/checkbox/test/standalone/e2e.ts

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