test(picker-internal): re-enable basic screenshot test (#27768)

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. -->

Test was skipped due to flakiness

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Re-enabled test
- Removes directions tests because behavior does not vary across text
directions
- Updated screenshot to screenshot individual picker instead of the
entire page

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## 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:
Liam DeBeasi
2023-07-10 14:42:49 -04:00
committed by GitHub
parent 096d9cc931
commit e7353946a1
14 changed files with 10 additions and 17 deletions

View File

@ -53,7 +53,7 @@
<div class="grid">
<div class="grid-item">
<h2>Inline</h2>
<ion-picker-internal>
<ion-picker-internal id="inline">
<ion-picker-column-internal id="first"></ion-picker-column-internal>
<ion-picker-column-internal id="second"></ion-picker-column-internal>
</ion-picker-internal>

View File

@ -1,25 +1,18 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
// TODO: FW-3020
configs().forEach(({ title, screenshot, config }) => {
test.describe(title('picker-internal: rendering'), () => {
test.skip('inline pickers should not have visual regression', async ({ page }) => {
await page.goto(`/src/components/picker-internal/test/basic`, config);
await page.setIonViewport();
await expect(page).toHaveScreenshot(screenshot(`picker-internal-inline-diff`), {
fullPage: true,
});
});
});
});
/**
* This behavior does not vary across modes.
* This behavior does not vary across directions.
*/
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('picker-internal: rendering'), () => {
test('inline pickers should not have visual regression', async ({ page }) => {
await page.goto(`/src/components/picker-internal/test/basic`, config);
await expect(page.locator('#inline')).toHaveScreenshot(screenshot(`picker-internal-inline-diff`));
});
});
test.describe(title('picker-internal: overlay rendering'), () => {
test('popover: should not have visual regression', async ({ page }) => {
await page.goto(`/src/components/picker-internal/test/basic`, config);

Binary file not shown.

Before

Width:  |  Height:  |  Size: 132 KiB

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 153 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 147 KiB

After

Width:  |  Height:  |  Size: 14 KiB