test(chip): break tests up (#27464)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Chip tests currently take screenshots are entire pages with lots of
chips. This makes it hard to understand what exactly is being tested.
Additionally, there are redundant configurations are being tested.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Broke the chip tests up into the following checks:

1. Basic rendering. This checks rendering across text directions.
2. Outline rendering
3. Solid + Color rendering
4. Solid + Outline rendering
5. Disabled state rendering
6. Customization/CSS Variable rendering

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

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

@@ -1,19 +1,84 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * Chip rendering does not vary across modes.
+   */
   test.describe(title('chip: rendering'), () => {
     test('should not have visual regressions', async ({ page }) => {
-      await page.goto('/src/components/chip/test/basic', config);
+      await page.setContent(
+        `
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+          <ion-label>Chip</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>`,
+        config
+      );
 
-      await page.setIonViewport();
+      const chip = page.locator('ion-chip');
 
-      await expect(page).toHaveScreenshot(screenshot(`chip-basic`));
+      await expect(chip).toHaveScreenshot(screenshot(`chip-basic`));
     });
   });
 });
 
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * This behavior does not vary across modes/directions.
+   */
+  test.describe(title('chip: outline'), () => {
+    test('should render default outline chip', async ({ page }) => {
+      await page.setContent(
+        `<ion-chip outline="true">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Icon</ion-label>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-outline`));
+    });
+  });
+  /**
+   * This behavior does not vary across modes/directions.
+   */
+  test.describe(title('chip: color'), () => {
+    test('should render solid color chip', async ({ page }) => {
+      await page.setContent(
+        `<ion-chip color="tertiary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Tertiary with Icon</ion-label>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-solid-color`));
+    });
+    test('should render outline color chip', async ({ page }) => {
+      await page.setContent(
+        `<ion-chip outline="true" color="tertiary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Tertiary with Icon</ion-label>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-outline-color`));
+    });
+  });
+
   test.describe(title('chip: descenders'), () => {
     test('should not clip descenders in item', async ({ page }) => {
       test.info().annotations.push({

core/src/components/chip/test/states/chip.e2e.ts

@@ -1,14 +1,43 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * This behavior does not vary across modes/directions.
+   */
   test.describe(title('chip: states'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto('/src/components/chip/test/states', config);
+    test('should render disabled state', async ({ page }) => {
+      await page.setContent(
+        `<ion-chip disabled="true">
+          <ion-label>Disabled</ion-label>
+        </ion-chip>`,
+        config
+      );
 
-      await page.setIonViewport();
+      const chip = page.locator('ion-chip');
 
-      await expect(page).toHaveScreenshot(screenshot(`chip-states`));
+      await expect(chip).toHaveScreenshot(screenshot(`chip-disabled`));
+    });
+    test('should custom chip', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          ion-chip {
+            --background: green;
+            --color: black;
+
+            opacity: 1;
+          }
+        </style>
+        <ion-chip disabled="true">
+          <ion-label>Custom</ion-label>
+        </ion-chip>`,
+        config
+      );
+
+      const chip = page.locator('ion-chip');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-custom`));
     });
   });
 });