test(input): change size tests to use stacked label placements (#29334)
Issue number: N/A --------- <!-- 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. --> Some of the size screenshot tests use `label-placement="floating"`. Because this label placement isn't scope we've gotten to yet, the screenshots look broken. This is okay in itself, but it causes confusion when the screenshots are updated for other unrelated features since reviewers don't expect the appearance to be off. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Tests changed to use `label-placement="stacked"`, which is functionally the same as `floating` when the input has a value, but has the proper styling. ## 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: ionitron <hi@ionicframework.com>
@@ -22,13 +22,13 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
|
||||
const input = page.locator('ion-input');
|
||||
await expect(input).toHaveScreenshot(screenshot(`input-size-large`));
|
||||
});
|
||||
test('should render correctly with floating label', async ({ page }) => {
|
||||
test('should render correctly with stacked label', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-input
|
||||
size="large"
|
||||
label="Email"
|
||||
label-placement="floating"
|
||||
label-placement="stacked"
|
||||
value="hi@ionic.io"
|
||||
></ion-input>
|
||||
`,
|
||||
@@ -36,7 +36,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
|
||||
);
|
||||
|
||||
const input = page.locator('ion-input');
|
||||
await expect(input).toHaveScreenshot(screenshot(`input-size-large-label-floating`));
|
||||
await expect(input).toHaveScreenshot(screenshot(`input-size-large-label-stacked`));
|
||||
});
|
||||
test('should not have visual regressions with fill outline', async ({ page }) => {
|
||||
await page.setContent(
|
||||
@@ -45,7 +45,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
|
||||
fill="outline"
|
||||
size="large"
|
||||
label="Email"
|
||||
label-placement="floating"
|
||||
label-placement="stacked"
|
||||
value="hi@ionic.io"
|
||||
></ion-input>
|
||||
`,
|
||||
@@ -63,7 +63,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
|
||||
shape="round"
|
||||
size="large"
|
||||
label="Email"
|
||||
label-placement="floating"
|
||||
label-placement="stacked"
|
||||
value="hi@ionic.io"
|
||||
></ion-input>
|
||||
`,
|
||||
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.0 KiB |