feat(tab-button): add the shape property and styles for the ionic theme #30057
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
github-actions
bot
added
package: core
| import { configs, test } from '@utils/test/playwright'; | ||
| import type { E2EPage, E2EPageOptions, ScreenshotFn } from '@utils/test/playwright'; | ||
|
|
||
| class TabButtonFixture { |
There was a problem hiding this comment.
This file was created based on toast/test/shape/toast.e2e.ts which also has a fixture and it made sense for me to have one here in order to access the same page and elements on every test.
| /** | ||
| * This behavior does not vary across directions. | ||
| */ | ||
| configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screenshot, title }) => { |
There was a problem hiding this comment.
All the screenshots are wrong. They do not match the HTML test page. Please fix.
There was a problem hiding this comment.
I have since fixed those screenshots. However, the basic tab-bar tests were also failing. On the one hand, it makes sense since the default button corners have changed. On the other hand, I do not understand how the border color could have changed:
Perhaps it's related to design tokens?
There was a problem hiding this comment.
I also just noticed that the snapshots for the "darwin" OS for the tab-button are wrong but somehow the tests pass locally and on the PR checks 😕
There was a problem hiding this comment.
darwin snapshots are from tests that were run on your local computer. Those snapshots may vary based on the computer, for example snapshots on a Windows device will most likely not be the same as a Mac device. So they're not considered the true source and are not allowed to be pushed to the repro.
In order to make sure snapshots are always being generated correctly to the same environment as the CI, we run the tests within Docker: npm run test.e2e.docker. You'll know that the snapshots are correct when they have the linux keyword within the file.
Make sure you are using that command to run the tests. You can also use npm run test.e2e.docker.update-snapshots to update the true snapshots locally.
In order to fix this PR, I suggest running:
npm run test.e2e.docker tab-bar tab-button. This command will run all the tests that have the keywords tab-bar or tab-bar.- Review the failing tests:
npx playwright show-report - It's extremely important that you understand why the tests are failing. They should only be failing for
ionictheme and anything related to the tab button radius. - If you feel confident, then update the snapshots:
npm run test.e2e.docker.update-snapshots tab-button tab-bar. You might not need to update both components so adjust the command as needed.
There was a problem hiding this comment.
I see! That makes a more sense! Thanks for the context!
I noticed yesterday or the day before that I was running snapshot tests incorrectly and started using Docker like you mentioned. What I wasn't aware was that those "darwin" files were leftovers from running the tests incorrectly. I will remove them then.
By the way, did you get a chance to look at my first comment regarding the unexpected change in border color for the tab-button?
There was a problem hiding this comment.
I did, that's why I said to make sure you review the failing tests. I'm not seeing a change of color. The tests are failing for another reason.
There was a problem hiding this comment.
As I said before, the remaining tab-bar tests are failing due to the default border corners now being different. But, besides that, I also find it odd that the border color for the tab-button in the image I sent here has also changed to a different shade of blue. As such, I am raising a flag before updating the snapshots that might be incorrect.
There was a problem hiding this comment.
After looking into it a bit more I can indeed confirm that the color change was caused by the change in design tokens here. Thus, I conclude that, in general, snapshot tests do not check for color changes since these tests did not break with Bernardo's PR. I will then proceed with updating the snapshots.
Issue number: internal
What is the current behavior?
Tab button does not have a shape property.
What is the new behavior?
Does this introduce a breaking change?
Other information