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

[OS-pedrolourenco]

Issue number: internal

---

What is the current behavior?

This PR is a follow-up of this one: #30117

What is the new behavior?

• 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
• No

Other information

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 17, 2025 3:56pm

[thetaPC]

The PR also needs:

• a test test, not feat, since you're adding a test
• not be redundant, the component is already mentioned in the scope so no need to mention it again. The same goes for the type.

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

[thetaPC]

Snapshots should always aim to be as small as possible. That's why the original test was using tabBar instead of content. Since we want to capture the box shadow, then create a container that has padding and use the container for the snapshot instead for both tests. Here's some pseudo code:

.container {
   padding: 20px 10px;
}

<ion-content>
   <div class="container">
      <ion-tab-bar>
   </div>
</ion-content>

const container = page.locator('.container');

await expect(container).toHaveScreenshot...

[OS-pedrolourenco]

Done. The compact snapshots look a bit strange though.
By the way, I ended up not using the container in your suggestion seen as though it had no effect on the snapshots.

[thetaPC]

This is because I used pseudo code as in my code is only semi complete so:

1. Please use the proper syntax
2. Add the suggested code to the correct locations
3. use the container

.container {
   padding: 20px 10px;
}

<ion-content>
   <div class="container">
      <ion-tab-bar> // not complete, use proper syntax
   </div>
</ion-content>

const container = page.locator('.container');

await expect(container).toHaveScreenshot... // not complete, use proper syntax

[OS-pedrolourenco]

I hope I have addressed your concern with my latest commit. The only adjustment I had to do was to manually set the container dimensions on the compact tab bar test since, with only the padding attribute set up, the container shown in the snapshot did not fit the tab bar for some reason and was hiding it instead:

If you have any suggestion for better working around this, please let me know.

[thetaPC]

I went ahead and made the appropriate changes since it seems that my comments regarding using proper syntax is not being understood well. I would highly recommend reviewing my changes since it showcases how tests should be written for Ionic. Thanks!

[thetaPC]

This is because I used pseudo code as in my code is only semi complete so:

1. Please use the proper syntax
2. Add the suggested code to the correct locations
3. use the container

.container {
   padding: 20px 10px;
}

<ion-content>
   <div class="container">
      <ion-tab-bar> // not complete, use proper syntax
   </div>
</ion-content>

const container = page.locator('.container');

await expect(container).toHaveScreenshot... // not complete, use proper syntax

[thetaPC]

LGTM, assigning to Brandy for a second check. Once she gives an approval, then this PR can be merged.

[brandyscarney]

We should remove ion-content as this is not needed

[brandyscarney]

Approving with the removal of ion-content 🙂