feat(tab-button): add the shape property and styles for the ionic theme #30057
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" dir="ltr"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <title>Tab Button - Shape</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> | ||
| <link rel="stylesheet" href="../../../../../css/ionic.bundle.css" /> | ||
| <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" /> | ||
| <script src="../../../../../scripts/testing/scripts.js"></script> | ||
| <script nomodule src="../../../../../dist/ionic/ionic.js"></script> | ||
| <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <ion-app> | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-title>Tab Button - Shape</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content> | ||
| <ion-text> (Only available for ionic theme) </ion-text> | ||
|
|
||
| <ion-tab-bar> | ||
| <ion-tab-button> | ||
| <ion-label>Default Shape</ion-label> | ||
| <ion-icon aria-hidden="true" name="triangle-outline"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button id="soft-tab-button" shape="soft"> | ||
| <ion-label>Soft Shape</ion-label> | ||
| <ion-icon aria-hidden="true" name="triangle-outline"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button id="round-tab-button" shape="round"> | ||
| <ion-label>Round Shape</ion-label> | ||
| <ion-icon aria-hidden="true" name="triangle-outline"></ion-icon> | ||
| </ion-tab-button> | ||
|
|
||
| <ion-tab-button id="rect-tab-button" shape="rectangular"> | ||
| <ion-label>Rectangular Shape</ion-label> | ||
| <ion-icon aria-hidden="true" name="triangle-outline"></ion-icon> | ||
| </ion-tab-button> | ||
| </ion-tab-bar> | ||
| </ion-content> | ||
|
|
||
| <style> | ||
| ion-tab-bar { | ||
| background: #d4d4d4; | ||
| } | ||
| </style> | ||
| </ion-app> | ||
| </body> | ||
| </html> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import { expect } from '@playwright/test'; | ||
| import { configs, test } from '@utils/test/playwright'; | ||
| import type { E2EPage, E2EPageOptions, ScreenshotFn } from '@utils/test/playwright'; | ||
|
|
||
| class TabButtonFixture { | ||
| readonly page: E2EPage; | ||
|
|
||
| constructor(page: E2EPage) { | ||
| this.page = page; | ||
| } | ||
|
|
||
| async goto(config: E2EPageOptions) { | ||
| const { page } = this; | ||
| await page.goto(`/src/components/tab-button/test/shape`, config); | ||
| } | ||
|
|
||
| async screenshot(screenshotModifier: string, screenshot: ScreenshotFn, buttonId: string) { | ||
| const { page } = this; | ||
|
|
||
| const screenshotString = screenshot(`tab-button-${screenshotModifier}`); | ||
| const tabButton = page.locator(buttonId); | ||
|
|
||
| await expect(tabButton).toHaveScreenshot(screenshotString); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * 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: 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.
In order to make sure snapshots are always being generated correctly to the same environment as the CI, we run the tests within Docker: Make sure you are using that command to run the tests. You can also use In order to fix this PR, I suggest running:
There was a problem hiding this comment. I see! That makes a more sense! Thanks for the context! 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. |
||
| test.describe(title('tab-button: shape'), () => { | ||
| let tabButtonFixture: TabButtonFixture; | ||
|
|
||
| test.beforeEach(async ({ page }) => { | ||
| tabButtonFixture = new TabButtonFixture(page); | ||
| await tabButtonFixture.goto(config); | ||
| }); | ||
|
|
||
| test('should render a soft tab button', async () => { | ||
| await tabButtonFixture.screenshot('shape-soft', screenshot, '#soft-tab-button'); | ||
| }); | ||
|
|
||
| test('should render a round tab button', async () => { | ||
| await tabButtonFixture.screenshot('shape-round', screenshot, '#round-tab-button'); | ||
| }); | ||
|
|
||
| test('should render a rectangular tab button', async () => { | ||
| await tabButtonFixture.screenshot('shape-rectangular', screenshot, '#rect-tab-button'); | ||
| }); | ||
| }); | ||
| }); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why was a fixture created?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.