test(tab-bar): add expand tests

Author: thetaPC

core/src/components/tab-bar/test/expand/tab-bar.e2e.ts

@@ -0,0 +1,39 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior only applies to the `ionic` theme.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-bar: expand'), () => {
+    test.describe(title('compact'), () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar expand="compact">
+            <ion-tab-button tab="1">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="2">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="3">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+
+        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-expand-compact`));
+      });
+    });
+  });
+});

core/src/components/tab-bar/test/expand/tab-bar.e2e.ts-snapshots/tab-bar-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png

@@ -0,0 +1,100 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior only applies to the `ionic` theme.
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-bar: shape'), () => {
+    test.describe(title('soft'), () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar shape="soft">
+            <ion-tab-button tab="1">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="2">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="3">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+
+        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-shape-soft`));
+      });
+    });
+
+    test.describe(title('round'), () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar shape="round">
+            <ion-tab-button tab="1">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="2">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="3">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+
+        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-shape-round`));
+      });
+    });
+
+    test.describe(title('rectangular'), () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar shape="rectangular">
+            <ion-tab-button tab="1">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="2">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+  
+            <ion-tab-button tab="3">
+              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-label>Label</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+
+        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-shape-rectangular`));
+      });
+    });
+  });
+});