test(note): add ionic theme coverage and consolidate font scaling tests

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

@@ -1,7 +1,10 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('note: font scaling'), () => {
     test('should scale text on larger font sizes', async ({ page }) => {
       await page.setContent(
@@ -12,102 +15,24 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           }
         </style>
 
-        <ion-note>Note</ion-note>
-      `,
-        config
-      );
-
-      const note = page.locator('ion-note');
-
-      await expect(note).toHaveScreenshot(screenshot(`note-scale`));
-    });
-    test('should scale text in an item on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-item>
-          <ion-note slot="end">Note</ion-note>
-        </ion-item>
-      `,
-        config
-      );
-
-      const note = page.locator('ion-note');
-
-      await expect(note).toHaveScreenshot(screenshot(`note-item-scale`));
-    });
-    test('should scale text in an item divider on larger font sizes', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
+        <div class="container">
+          <ion-note>Note</ion-note>
 
-        <ion-item-divider>
-          <ion-note slot="end">Note</ion-note>
-        </ion-item-divider>
-      `,
-        config
-      );
-
-      const note = page.locator('ion-note');
-
-      await expect(note).toHaveScreenshot(screenshot(`note-item-divider-scale`));
-    });
-    test('should wrap label to the next line without truncating', async ({ page }) => {
-      await page.setContent(
-        `
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-list>
           <ion-item>
-            <ion-note slot="start">123</ion-note>
-            <ion-label>Label</ion-label>
+            <ion-note slot="end">Note</ion-note>
           </ion-item>
 
-          <ion-item>
-            <ion-label>Label</ion-label>
-            <ion-note slot="end">123</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-note slot="start">123</ion-note>
-            <ion-label>Really really long label</ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">123</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-note slot="start">123</ion-note>
-            <ion-label>Really really long label</ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">123</ion-note>
-          </ion-item>
-        </ion-list>
+          <ion-item-divider>
+            <ion-note slot="end">Note</ion-note>
+          </ion-item-divider>
+        </div>
       `,
         config
       );
 
-      const list = page.locator('ion-list');
+      const container = page.locator('.container');
 
-      await expect(list).toHaveScreenshot(screenshot(`note-wrapping-label-scale`));
+      await expect(container).toHaveScreenshot(screenshot(`note-scale`));
     });
   });
 });

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

@@ -2,9 +2,9 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * Note has no custom RTL logic
+ * This behavior does not vary across directions.
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('note: rendering'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.setContent(
@@ -87,7 +87,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
       await page.setContent(
         `
         <ion-item-divider>
-          <ion-note slot="start">End Note</ion-note>
+          <ion-note slot="end">End Note</ion-note>
         </ion-item-divider>
       `,
         config