Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(item): migrate tests to playwright #25479

Merged
merged 37 commits into from
Jun 29, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
886a7da
test(item): migrate tests to playwright
sean-perkins May 31, 2022
319cc8e
chore(): fix text selector
sean-perkins May 31, 2022
d064a1a
chore(): update datetime values
sean-perkins Jun 1, 2022
167a15a
test(item): tweak tests to work with playwright and run faster
sean-perkins Jun 15, 2022
0efc72f
Merge remote-tracking branch 'origin/main' into FW-1214
sean-perkins Jun 15, 2022
092c94a
chore(): remove flaky test
sean-perkins Jun 15, 2022
67c313a
chore(): add updated snapshots
Ionitron Jun 15, 2022
2b7a028
test(item): update alignment test to use static date values for datetime
sean-perkins Jun 15, 2022
7cd2b4f
fix(): resize ion content viewport for horizontal scroll
sean-perkins Jun 15, 2022
2c24eb4
chore(): add updated snapshots
Ionitron Jun 15, 2022
4948ca2
docs(): resizeViewportWidth typo
sean-perkins Jun 15, 2022
dbac5ad
Merge remote-tracking branch 'origin/FW-1214' into FW-1214
sean-perkins Jun 15, 2022
8f2cf4c
test(item): remove datetime from alignment tests
sean-perkins Jun 15, 2022
d716987
chore(): prettier formatting
sean-perkins Jun 15, 2022
857c010
test(): item inputs test tweaks
sean-perkins Jun 15, 2022
7b80e0c
chore(): add updated snapshots
Ionitron Jun 15, 2022
96a37f9
test(): re-add standalone test
sean-perkins Jun 15, 2022
e0ec59b
Merge remote-tracking branch 'origin/main' into FW-1214
sean-perkins Jun 18, 2022
fadec82
chore(): remove reference screenshots
sean-perkins Jun 18, 2022
7a6e702
chore(): add updated snapshots
Ionitron Jun 18, 2022
3ec59bf
chore(): prettier + lint
sean-perkins Jun 21, 2022
c0bad05
Merge remote-tracking branch 'origin/main' into FW-1214
sean-perkins Jun 24, 2022
998722f
test(): remove delayed input
sean-perkins Jun 24, 2022
09289eb
chore(): add updated snapshots
Ionitron Jun 24, 2022
a379f40
chore(): prettier
sean-perkins Jun 24, 2022
7d30baf
Merge remote-tracking branch 'origin/main' into FW-1214
sean-perkins Jun 24, 2022
98b87b4
chore(): remove screenshots without button color set
sean-perkins Jun 27, 2022
d1840cc
chore(): add updated snapshots
Ionitron Jun 27, 2022
19543d2
chore(): wait for changes
sean-perkins Jun 27, 2022
727a100
chore(): add updated snapshots
Ionitron Jun 27, 2022
e56b149
chore(): re-add reference screenshots
sean-perkins Jun 27, 2022
f78cb97
test(): wait for datetime elements to be ready
sean-perkins Jun 28, 2022
4f2a748
chore(): clear reference screenshots
sean-perkins Jun 28, 2022
6ae6158
chore(): add updated snapshots
Ionitron Jun 28, 2022
91a93c6
chore(): add accordion ref screenshot from main
sean-perkins Jun 28, 2022
7d42ee5
Merge branch 'main' into FW-1214
sean-perkins Jun 28, 2022
dbef1ca
Merge branch 'main' into FW-1214
averyjohnston Jun 29, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
14 changes: 0 additions & 14 deletions core/src/components/item/test/a11y/e2e.ts

This file was deleted.

15 changes: 15 additions & 0 deletions core/src/components/item/test/a11y/item.e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('item: axe', () => {
test('should not have accessibility violations', async ({ page }) => {
await page.goto(`/src/components/item/test/a11y`);

const results = await new AxeBuilder({ page })
// TODO(FW-404): Re-enable rule once select is updated to avoid nested-interactive
.disableRules('nested-interactive')
.analyze();
expect(results.violations).toEqual([]);
});
});
19 changes: 0 additions & 19 deletions core/src/components/item/test/alignment/e2e.ts

This file was deleted.

24 changes: 0 additions & 24 deletions core/src/components/item/test/alignment/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,6 @@
<ion-content>
<ion-list>
<ion-list-header>Leading Icons</ion-list-header>
<ion-item>
<ion-icon slot="start" name="time"></ion-icon>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-icon slot="start" name="radio-button-off"></ion-icon>
<ion-input placeholder="Choose Starting Point"></ion-input>
Expand All @@ -44,10 +40,6 @@

<ion-list>
<ion-list-header>Default Labels</ion-list-header>
<ion-item>
<ion-label>Time</ion-label>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label>From</ion-label>
<ion-input placeholder="Choose Starting Point"></ion-input>
Expand All @@ -63,10 +55,6 @@

<ion-list>
<ion-list-header>Fixed Labels</ion-list-header>
<ion-item>
<ion-label position="fixed">Time</ion-label>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="fixed">From</ion-label>
<ion-input placeholder="Choose Starting Point"></ion-input>
Expand All @@ -82,10 +70,6 @@

<ion-list>
<ion-list-header>Floating Labels</ion-list-header>
<ion-item>
<ion-label position="floating">Time</ion-label>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="floating">From</ion-label>
<ion-input></ion-input>
Expand All @@ -101,10 +85,6 @@

<ion-list>
<ion-list-header>Stacked Labels</ion-list-header>
<ion-item>
<ion-label position="stacked">Time</ion-label>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label position="stacked">From</ion-label>
<ion-input placeholder="Choose Starting Point"></ion-input>
Expand All @@ -120,10 +100,6 @@

<ion-list>
<ion-list-header>End Labels</ion-list-header>
<ion-item>
<ion-label slot="end">Time</ion-label>
<ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
</ion-item>
<ion-item>
<ion-label slot="end">From</ion-label>
<ion-input placeholder="Choose Starting Point"></ion-input>
Expand Down
12 changes: 12 additions & 0 deletions core/src/components/item/test/alignment/item.e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('item: alignment', () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/item/test/alignment`);

await page.setIonViewport();

expect(await page.screenshot()).toMatchSnapshot(`item-alignment-diff-${page.getSnapshotSettings()}.png`);
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 0 additions & 19 deletions core/src/components/item/test/basic/e2e.ts

This file was deleted.

12 changes: 12 additions & 0 deletions core/src/components/item/test/basic/item.e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('item: basic', () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/item/test/basic`);

await page.setIonViewport();

expect(await page.screenshot()).toMatchSnapshot(`item-diff-${page.getSnapshotSettings()}.png`);
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 0 additions & 10 deletions core/src/components/item/test/buttons/e2e.ts

This file was deleted.

18 changes: 18 additions & 0 deletions core/src/components/item/test/buttons/item.e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('item: buttons', () => {
test('should not have visual regressions', async ({ page }) => {
/**
* This test validates that in iOS mode the arrow indicators are
* added to the end of the ion-item row.
*
* In MD mode, these arrow indicators are not present.
*/
await page.goto(`/src/components/item/test/buttons`);

await page.setIonViewport();

expect(await page.screenshot()).toMatchSnapshot(`item-buttons-diff-${page.getSnapshotSettings()}.png`);
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 0 additions & 10 deletions core/src/components/item/test/colors/e2e.ts

This file was deleted.

12 changes: 12 additions & 0 deletions core/src/components/item/test/colors/item.e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('item: colors', () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/item/test/colors`);

await page.setIonViewport();

expect(await page.screenshot()).toMatchSnapshot(`item-colors-diff-${page.getSnapshotSettings()}.png`);
});
});
96 changes: 0 additions & 96 deletions core/src/components/item/test/counter/e2e.ts

This file was deleted.

42 changes: 41 additions & 1 deletion core/src/components/item/test/counter/item.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,50 @@ import { test } from '@utils/test/playwright';

test.describe('item: counter', () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/item/test/counter`);
await page.goto('/src/components/item/test/counter');

await page.setIonViewport();

expect(await page.screenshot()).toMatchSnapshot(`item-counter-diff-${page.getSnapshotSettings()}.png`);
});

test.describe('custom formatter', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/src/components/item/test/counter');
});

test('should format on load', async ({ page }) => {
const itemCounter = page.locator('#customFormatter .item-counter');

expect(await itemCounter.textContent()).toBe('20 characters left');
});

test('should format on input', async ({ page }) => {
const input = page.locator('#customFormatter ion-input');

await input.click();
await input.type('abcde');

await page.waitForChanges();

const itemCounter = page.locator('#customFormatter .item-counter');

expect(await itemCounter.textContent()).toBe('15 characters left');
});

test('should format after changing the counterFormatter', async ({ page }) => {
const itemCounter = page.locator('#customFormatter .item-counter');

expect(await itemCounter.textContent()).toBe('20 characters left');

await page.$eval('#customFormatter', (el: any) => {
el.counterFormatter = () => {
return 'test label';
};
});
await page.waitForChanges();

expect(await itemCounter.textContent()).toBe('test label');
});
});
});
10 changes: 0 additions & 10 deletions core/src/components/item/test/css-variables/e2e.ts

This file was deleted.

12 changes: 12 additions & 0 deletions core/src/components/item/test/css-variables/item.e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('item: CSS variables', () => {
test('should not have visual regressions', async ({ page }) => {
await page.goto(`/src/components/item/test/css-variables`);

await page.setIonViewport();

expect(await page.screenshot()).toMatchSnapshot(`item-css-vars-diff-${page.getSnapshotSettings()}.png`);
});
});
Loading