test(toggle): add tests for ionic theme

ionic-team · Aug 22, 2024 · 8c4870a · 8c4870a
1 parent 7fe9dbe
commit 8c4870a
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 22 deletions.
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts b/core/src/components/toggle/test/color/toggle.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: color'), () => {
     test('should apply color when checked', async ({ page }) => {
       await page.setContent(

diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+configs({ palettes: ['light', 'dark'], modes: ['ios', 'md', 'ionic-md']}).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: enable-on-off-labels'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.setContent(

diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts b/core/src/components/toggle/test/item/toggle.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({modes: ['ios', 'md', 'ionic-md']}).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: item'), () => {
     test('should render correctly in list', async ({ page }) => {
       await page.setContent(
@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
   });
 });
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: item color contrast'), () => {
     test('label should have correct contrast when used in an item', async ({ page }) => {
       await page.setContent(
@@ -89,7 +89,9 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`toggle-stacked-label-in-item`));
     });
   });
+});
 
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, config }) => {
   test.describe(title('toggle: ionChange'), () => {
     test('clicking padded space within item should click the toggle', async ({ page }) => {
       await page.setContent(

diff --git a/core/src/components/toggle/test/label/toggle.e2e.ts b/core/src/components/toggle/test/label/toggle.e2e.ts
@@ -169,3 +169,33 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screen
     });
   });
 });
+
+configs({modes: ['ionic-md']}).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: start placement'), () => {
+    test('should render the label in the start position', async ({ page }) => {
+      await page.setContent(
+        `
+         <ion-toggle label-placement="start">Label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-start-justify-start`));
+    });
+  });
+
+  test.describe(title('toggle: end placement'), () => {
+    test('should render the label in the end position', async ({ page }) => {
+      await page.setContent(
+        `
+         <ion-toggle label-placement="end">Label</ion-toggle>
+       `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-end-justify-start`));
+    });
+  });
+});
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts b/core/src/components/toggle/test/sizes/toggle.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({modes: ['ios', 'md', 'ionic-md']}).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: sizes'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/toggle/test/sizes`, config);

diff --git a/core/src/components/toggle/test/states/toggle.e2e.ts b/core/src/components/toggle/test/states/toggle.e2e.ts
@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: states'), () => {
     test('should render disabled toggle correctly', async ({ page }) => {
       await page.setContent(
@@ -40,3 +40,25 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * Focused and Pressed states are only available in the Ionic theme
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: states (ionic theme)'), () => {
+    test('should render focused and pressed states correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-toggle class="ion-focused">Label</ion-toggle>
+        <ion-toggle class="ion-focused" checked>Label</ion-toggle>
+        <ion-toggle class="ion-activated">Label</ion-toggle>
+        <ion-toggle class="ion-activated" checked>Label</ion-toggle>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-states`));
+    });
+  });
+});
diff --git a/core/src/components/toggle/test/theme-ionic/index.html b/core/src/components/toggle/test/theme-ionic/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" theme="ionic">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Toggle - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Toggle - Basic</ion-title>
+          <ion-buttons slot="primary">
+            <ion-toggle aria-label="Enable Notifications"></ion-toggle>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+
+
+      <ion-content id="content" class="ion-padding">
+        <div class="grid">
+            <ion-toggle>
+              This is a very very very very very very very very very very very very very very 
+              very very very very very very very very very very very very long text
+            </ion-toggle>
+
+          <h1>Placement</h1>
+            <ion-toggle label-placement="start">
+              Label Placement = Start
+            </ion-toggle>
+
+            <ion-toggle label-placement="end">
+              Label Placement = End
+            </ion-toggle>
+
+          <h1>States</h1>
+            <ion-toggle>Unchecked</ion-toggle>
+
+
+            <ion-toggle checked="true">Checked</ion-toggle>
+
+
+            <ion-toggle class="ion-focused">Focused</ion-toggle>
+
+
+            <ion-toggle class="ion-activated" checked="true">Pressed, Checked</ion-toggle>
+
+
+            <ion-toggle class="ion-activated">Pressed, Unchecked</ion-toggle>
+
+
+            <ion-toggle disabled="true">Disabled, Unchecked</ion-toggle>
+
+
+            <ion-toggle disabled="true" checked="true">Disabled, Checked</ion-toggle>
+
+
+          <h1>EnableOnOffLabels = true</h1>
+            <ion-toggle enable-on-off-labels="true" checked>Checked</ion-toggle>
+
+
+            <ion-toggle enable-on-off-labels="true">Unchecked</ion-toggle>
+
+
+          <h1>Colors</h1>
+            <ion-toggle color="success" checked>Success</ion-toggle>
+
+
+            <ion-toggle color="danger" checked>Danger</ion-toggle>
+
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/toggle/toggle.native.scss b/core/src/components/toggle/toggle.native.scss
@@ -12,6 +12,18 @@
     overflow: hidden;
 }
 
+:host(.in-item) .label-text-wrapper {
+    @include margin($toggle-item-label-margin-top, null, $toggle-item-label-margin-bottom, null);
+}
+
+:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {
+    @include margin($toggle-item-label-margin-top, null, $form-control-label-margin, null);
+}
+
+:host(.in-item.toggle-label-placement-stacked) .native-wrapper {
+    @include margin(null, null, $toggle-item-label-margin-bottom, null);
+}
+
 // Toggle Justify
 // --------------------------------------------------
 
@@ -137,19 +149,3 @@
 :host(.toggle-label-placement-end) .label-text-wrapper {
     @include margin(null, 0, null, $form-control-label-margin);
 }
-
-// Input Label
-// ----------------------------------------------------------------
-
-:host(.in-item) .label-text-wrapper {
-    @include margin($toggle-item-label-margin-top, null, $toggle-item-label-margin-bottom, null);
-}
-
-:host(.in-item.toggle-label-placement-stacked) .label-text-wrapper {
-    @include margin($toggle-item-label-margin-top, null, $form-control-label-margin, null);
-}
-
-:host(.in-item.toggle-label-placement-stacked) .native-wrapper {
-    @include margin(null, null, $toggle-item-label-margin-bottom, null);
-}
-