test(select): add color snapshots

Author: thetaPC

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

@@ -1,51 +1,56 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input: color'), () => {
-    test.describe('input: fill none', () => {
+    test.describe('input: fill outline', () => {
       test('should set label and highlight color on expand', async ({ page }) => {
         await page.setContent(
           `
-          <ion-select label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
+          <ion-select fill="outline" label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
             <ion-select-option value="apple">Apple</ion-select-option>
           </ion-select>
         `,
           config
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-color`));
+        await expect(select).toHaveScreenshot(screenshot(`select-outline-color`));
       });
     });
-    test.describe('input: fill solid', () => {
+  });
+});
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('input: color'), () => {
+    test.describe('input: fill none', () => {
       test('should set label and highlight color on expand', async ({ page }) => {
         await page.setContent(
           `
-          <ion-select fill="solid" label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
+          <ion-select label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
             <ion-select-option value="apple">Apple</ion-select-option>
           </ion-select>
         `,
           config
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-solid-color`));
+        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-color`));
       });
     });
-    test.describe('input: fill outline', () => {
+    test.describe('input: fill solid', () => {
       test('should set label and highlight color on expand', async ({ page }) => {
         await page.setContent(
           `
-          <ion-select fill="outline" label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
+          <ion-select fill="solid" label="Label" class="select-expanded" value="apple" class="ion-focused" color="danger">
             <ion-select-option value="apple">Apple</ion-select-option>
           </ion-select>
         `,
           config
         );
 
         const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-outline-color`));
+        await expect(select).toHaveScreenshot(screenshot(`select-solid-color`));
       });
     });
   });