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(action-sheet): migrate to playwright #25523

Merged
merged 16 commits into from
Jun 24, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
151 changes: 151 additions & 0 deletions core/src/components/action-sheet/test/basic/action-sheet.e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
import { expect } from '@playwright/test';
import type { Locator } from '@playwright/test';
import { test } from '@utils/test/playwright';
import type { E2EPage } from '@utils/test/playwright';

test.describe('action sheet: basic', () => {
let actionSheetFixture: ActionSheetFixture;
test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/action-sheet/test/basic`);
actionSheetFixture = new ActionSheetFixture(page);
});
test.describe('action sheet: data', () => {
test('should return data', async ({ page }, testInfo) => {
test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');

await actionSheetFixture.open('#buttonData');

const buttonOption = page.locator('ion-action-sheet button#option');
await buttonOption.click();

await ionActionSheetDidDismiss.next();
expect(ionActionSheetDidDismiss).toHaveReceivedEventDetail({ data: { type: '1' } });
});
test('should return cancel button data', async ({ page }, testInfo) => {
test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
const ionActionSheetDidDismiss = await page.spyOnEvent('ionActionSheetDidDismiss');

await actionSheetFixture.open('#buttonData');

const buttonOption = page.locator('ion-action-sheet button.action-sheet-cancel');
await buttonOption.click();

await ionActionSheetDidDismiss.next();
expect(ionActionSheetDidDismiss).toHaveReceivedEventDetail({ data: { type: 'cancel' }, role: 'cancel' });
});
});
test.describe('action sheet: attributes', () => {
test('should set htmlAttributes', async ({ page }, testInfo) => {
test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
await actionSheetFixture.open('#basic');

const actionSheet = page.locator('ion-action-sheet');
expect(actionSheet).toHaveAttribute('data-testid', 'basic-action-sheet');
});
});
test.describe('action sheet: variants', () => {
test('should open basic action sheet', async () => {
await actionSheetFixture.open('#basic');
await actionSheetFixture.screenshot('basic');

/**
* We want to test that the dismiss method
* actually works, but we do not need to test
* it every time. As a result, we only
* call dismiss in this test.
*/
await actionSheetFixture.dismiss();
});
test('should open cancel only action sheet', async () => {
await actionSheetFixture.open('#cancelOnly');
await actionSheetFixture.screenshot('cancel-only');
});
test('should open custom action sheet', async () => {
await actionSheetFixture.open('#custom');
await actionSheetFixture.screenshot('custom');
});
test('should open scrollable action sheet', async () => {
await actionSheetFixture.open('#scrollableOptions');
await actionSheetFixture.screenshot('scrollable-options');
});
test('should open scrollable action sheet without cancel', async () => {
await actionSheetFixture.open('#scrollWithoutCancel');
await actionSheetFixture.screenshot('scroll-without-cancel');
});
test('should open custom backdrop action sheet', async ({ page }, testInfo) => {
test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
await actionSheetFixture.open('#customBackdrop');

const backdrop = page.locator('ion-action-sheet ion-backdrop');
expect(backdrop).toHaveCSS('opacity', '1');
});
test('should open alert from action sheet', async ({ page }, testInfo) => {
test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
const ionAlertDidPresent = await page.spyOnEvent('ionAlertDidPresent');
await actionSheetFixture.open('#alertFromActionSheet');

await page.locator('#open-alert').click();

await ionAlertDidPresent.next();
});
test('should not dismiss action sheet when backdropDismiss: false', async ({ page }, testInfo) => {
test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
await actionSheetFixture.open('#noBackdropDismiss');

const actionSheet = page.locator('ion-action-sheet');
await actionSheet.locator('ion-backdrop').click();

expect(actionSheet).toBeVisible();
});
});
test.describe('action sheet: focus trap', () => {
test('it should trap focus in action sheet', async ({ page, browserName }, testInfo) => {
test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';

await actionSheetFixture.open('#basic');
const buttons = page.locator('ion-action-sheet button');

await page.keyboard.press(tabKey);
await expect(buttons.nth(0)).toBeFocused();

await page.keyboard.press(`Shift+${tabKey}`);
await expect(buttons.nth(4)).toBeFocused();

await page.keyboard.press(tabKey);
await expect(buttons.nth(0)).toBeFocused();
});
});
});

class ActionSheetFixture {
readonly page: E2EPage;

private actionSheet!: Locator;

constructor(page: E2EPage) {
this.page = page;
}

async open(selector: string) {
const ionActionSheetDidPresent = await this.page.spyOnEvent('ionActionSheetDidPresent');
await this.page.locator(selector).click();
await ionActionSheetDidPresent.next();
this.actionSheet = this.page.locator('ion-action-sheet');
expect(this.actionSheet).toBeVisible();
}

async dismiss() {
const ionActionSheetDidDismiss = await this.page.spyOnEvent('ionActionSheetDidDismiss');
await this.actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.dismiss());
await ionActionSheetDidDismiss.next();
expect(this.actionSheet).not.toBeVisible();
}

async screenshot(modifier: string) {
expect(await this.actionSheet.screenshot()).toMatchSnapshot(
`action-sheet-${modifier}-diff-${this.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.
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.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
164 changes: 0 additions & 164 deletions core/src/components/action-sheet/test/basic/e2e.ts

This file was deleted.

1 change: 1 addition & 0 deletions core/src/components/action-sheet/test/basic/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@
buttons: [
{
text: 'Open Alert',
id: 'open-alert',
handler: async () => {
const alert = Object.assign(document.createElement('ion-alert'), {
header: 'Alert from Action Sheet',
Expand Down
7 changes: 0 additions & 7 deletions core/src/components/action-sheet/test/spec/e2e.ts

This file was deleted.

Loading