Adding snapshot tests for shadow feature

Author: OS-pedrolourenco

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

@@ -6,6 +6,45 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('tab-bar: expand'), () => {
+    test.describe(title('full'), () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            :root {
+              background: #ccc7c7;
+            }
+          </style>
+
+            <ion-content>
+              <ion-tab-bar expand="full">
+                <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>
+            </ion-content>
+        `,
+          config
+        );
+
+        // Used the `ion-content` element to take the screenshot because the `ion-tab-bar`element would not be visible otherwise
+        const content = page.locator('ion-content');
+
+        await expect(content).toHaveScreenshot(screenshot(`tab-bar-expand-full`));
+      });
+    });
+
     test.describe(title('compact'), () => {
       test('should not have visual regressions', async ({ page }) => {
         await page.setContent(
@@ -16,29 +55,32 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screensh
             }
           </style>
 
-          <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>
+          <ion-content>
+            <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>
+          </ion-content>
         `,
           config
         );
 
-        const tabBar = page.locator('ion-tab-bar');
+        // Used the `ion-content` element to take the screenshot because the `ion-tab-bar`element would not be visible otherwise
+        const content = page.locator('ion-content');
 
-        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-expand-compact`));
+        await expect(content).toHaveScreenshot(screenshot(`tab-bar-expand-compact`));
       });
     });
   });