test(tab-bar): add snapshot for box shadow (#30134)

Issue number: internal

---------

<!-- 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. -->
This PR is a follow-up of this one:
https://github.com/ionic-team/ionic-framework/pull/30117

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- This PR adds a snapshot test and modifies the existing one in order to
test the change done in the previous PR.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## 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: Maria Hutt <maria@ionic.io>

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

@@ -6,39 +6,82 @@ 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>
+            .container {
+              padding: 20px 10px;
+            }
+          </style>
+
+          <div class="container">
+            <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>
+          </div>
+          `,
+          config
+        );
+
+        const container = page.locator('.container');
+
+        await expect(container).toHaveScreenshot(screenshot(`tab-bar-expand-full`));
+      });
+    });
+
     test.describe(title('compact'), () => {
       test('should not have visual regressions', async ({ page }) => {
         await page.setContent(
           `
           <style>
-            :root {
+            .container {
-              background: #ccc7c7;
+              padding: 20px 10px;
+              /* Size is needed because tab bar compact has position absolute and will not capture correctly. */
+              width: 225px;
+              height: 96px;
             }
           </style>
 
-          <ion-tab-bar expand="compact">
+          <div class="container">
-            <ion-tab-button tab="1">
+            <ion-tab-bar expand="compact">
-              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-tab-button tab="1">
-              <ion-label>Label</ion-label>
+                <ion-icon name="triangle-outline"></ion-icon>
-            </ion-tab-button>
+                <ion-label>Label</ion-label>
-  
+              </ion-tab-button>
-            <ion-tab-button tab="2">
+
-              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-tab-button tab="2">
-              <ion-label>Label</ion-label>
+                <ion-icon name="triangle-outline"></ion-icon>
-            </ion-tab-button>
+                <ion-label>Label</ion-label>
-  
+              </ion-tab-button>
-            <ion-tab-button tab="3">
+
-              <ion-icon name="triangle-outline"></ion-icon>
+              <ion-tab-button tab="3">
-              <ion-label>Label</ion-label>
+                <ion-icon name="triangle-outline"></ion-icon>
-            </ion-tab-button>
+                <ion-label>Label</ion-label>
-          </ion-tab-bar>
+              </ion-tab-button>
-        `,
+            </ion-tab-bar>
+          </div>
+          `,
           config
         );
 
-        const tabBar = page.locator('ion-tab-bar');
+        const container = page.locator('.container');
 
-        await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-expand-compact`));
+        await expect(container).toHaveScreenshot(screenshot(`tab-bar-expand-compact`));
       });
     });
   });