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>
This commit is contained in:
Amanda Johnston
2024-04-15 14:38:11 -05:00
committed by GitHub
parent 67ec7455a8
commit 6e45fef869
7 changed files with 5 additions and 5 deletions

View File

@@ -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>
`,

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB