test(select): add fill snapshots

Author: thetaPC

core/src/components/select/test/fill/select.e2e.ts

@@ -1,14 +1,14 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('select: fill'), () => {
-    test.describe('select: fill solid', () => {
+    test.describe('select: fill outline', () => {
       test('should not have visual regressions', async ({ page }) => {
         await page.setContent(
           `
           <ion-select
-            fill="solid"
+            fill="outline"
             label="Fruit"
             value="apple"
           >
@@ -19,13 +19,21 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-solid`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-outline`));
       });
-      test('should render correctly with floating label', async ({ page }) => {
+      test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(
           `
+          <style>
+            ion-select {
+              --border-radius: 10px !important;
+              --padding-start: 50px !important;
+              --padding-end: 50px !important;
+            }
+          </style>
           <ion-select
-            fill="solid"
+            shape="round"
+            fill="outline"
             label="Fruit"
             label-placement="floating"
             value="apple"
@@ -37,13 +45,20 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-solid-label-floating`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline-custom`));
       });
-      test('should not have visual regressions with shaped solid', async ({ page }) => {
+    });
+  });
+});
+
+
+configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: fill'), () => {
+    test.describe('select: fill solid', () => {
+      test('should not have visual regressions', async ({ page }) => {
         await page.setContent(
           `
           <ion-select
-            shape="round"
             fill="solid"
             label="Fruit"
             value="apple"
@@ -55,20 +70,12 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-solid`));
       });
-      test('padding and border radius should be customizable', async ({ page }) => {
+      test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(
           `
-          <style>
-            ion-select {
-              --border-radius: 10px !important;
-              --padding-start: 50px !important;
-              --padding-end: 50px !important;
-            }
-          </style>
           <ion-select
-            shape="round"
             fill="solid"
             label="Fruit"
             label-placement="floating"
@@ -81,15 +88,14 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid-custom`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-solid-label-floating`));
       });
-    });
-    test.describe('select: fill outline', () => {
-      test('should not have visual regressions', async ({ page }) => {
+      test('should not have visual regressions with shaped solid', async ({ page }) => {
         await page.setContent(
           `
           <ion-select
-            fill="outline"
+            shape="round"
+            fill="solid"
             label="Fruit"
             value="apple"
           >
@@ -100,13 +106,21 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-outline`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid`));
       });
-      test('should render correctly with floating label', async ({ page }) => {
+      test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(
           `
+          <style>
+            ion-select {
+              --border-radius: 10px !important;
+              --padding-start: 50px !important;
+              --padding-end: 50px !important;
+            }
+          </style>
           <ion-select
-            fill="outline"
+            shape="round"
+            fill="solid"
             label="Fruit"
             label-placement="floating"
             value="apple"
@@ -118,16 +132,17 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-outline-label-floating`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid-custom`));
       });
-
-      test('should not have visual regressions with shaped outline', async ({ page }) => {
+    });
+    test.describe('select: fill outline', () => {
+      test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(
           `
           <ion-select
-            shape="round"
             fill="outline"
             label="Fruit"
+            label-placement="floating"
             value="apple"
           >
             <ion-select-option value="apple">Apple</ion-select-option>
@@ -137,23 +152,16 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-outline-label-floating`));
       });
-      test('padding and border radius should be customizable', async ({ page }) => {
+
+      test('should not have visual regressions with shaped outline', async ({ page }) => {
         await page.setContent(
           `
-          <style>
-            ion-select {
-              --border-radius: 10px !important;
-              --padding-start: 50px !important;
-              --padding-end: 50px !important;
-            }
-          </style>
           <ion-select
             shape="round"
             fill="outline"
             label="Fruit"
-            label-placement="floating"
             value="apple"
           >
             <ion-select-option value="apple">Apple</ion-select-option>
@@ -163,7 +171,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline-custom`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline`));
       });
     });
   });