test(many): fix failing tests that CI was not reporting (#29485)
Code checks were passing even though these tests were failing because the docker script was not exiting with the correct exit code. This PR fixes the tests so that they pass, then PR https://github.com/ionic-team/ionic-framework/pull/29425 can be merged so CI will properly fail again when tests fail. --------- Co-authored-by: Sean Perkins <sean.perkins@outsystems.com>
Brandy Carney
@ -3,10 +3,11 @@ import { configs, test } from '@utils/test/playwright';
|
||||
|
||||
configs().forEach(({ config, title }) => {
|
||||
test.describe(title('accordion: a11y'), () => {
|
||||
test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
|
||||
// TODO(FW-1764): remove skip once issue is resolved
|
||||
// TODO(ROU-8157): remove skip once the keyboard navigation is working again
|
||||
test.skip('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
|
||||
// TODO(ROU-5358): remove skip once issue is resolved
|
||||
skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
|
||||
// TODO (FW-2979)
|
||||
// TODO (ROU-5437)
|
||||
skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
|
||||
|
||||
await page.goto(`/src/components/accordion/test/a11y`, config);
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Accordion - Basic</title>
|
||||
<title>Accordion - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
@ -119,6 +119,7 @@
|
||||
outline: none;
|
||||
text-align: left;
|
||||
padding: 20px 16px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.custom-accordion-content {
|
||||
|
||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, screenshot, t
|
||||
test('should update the active item', async ({ page }) => {
|
||||
const breadcrumbItems = page.locator('ion-breadcrumb');
|
||||
|
||||
const addItemButton = page.locator('ion-button#add-btn');
|
||||
const addItemButton = page.locator('#add-btn');
|
||||
|
||||
await expect(breadcrumbItems).toHaveCount(4);
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
await page.goto('/src/components/datetime/test/position', config);
|
||||
const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
|
||||
|
||||
const openDateTimeBtn = page.locator('ion-button#open-datetime');
|
||||
const openDateTimeBtn = page.locator('#open-datetime');
|
||||
await openDateTimeBtn.click();
|
||||
|
||||
await ionPopoverDidPresent.next();
|
||||
|
||||
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
@ -74,7 +74,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
|
||||
|
||||
await ionLoadingDidPresent.next();
|
||||
|
||||
const button = page.locator('ion-loading ion-button');
|
||||
const button = page.locator('ion-loading button');
|
||||
|
||||
if (browserName === 'webkit') {
|
||||
await page.keyboard.down('Alt');
|
||||
|
||||
@ -29,7 +29,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
test('should trap focus', async ({ page, skip, browserName }) => {
|
||||
skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content');
|
||||
// TODO (FW-2979)
|
||||
// TODO (ROU-5437)
|
||||
skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
|
||||
const ionDidOpen = await page.spyOnEvent('ionDidOpen');
|
||||
|
||||
|
||||
@ -24,7 +24,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
|
||||
await modal.evaluate((modal: HTMLIonModalElement) => {
|
||||
modal.remove();
|
||||
document.querySelector('ion-button')?.insertAdjacentElement('afterend', modal);
|
||||
document.querySelector('button')?.insertAdjacentElement('afterend', modal);
|
||||
});
|
||||
await page.waitForChanges();
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
test.describe('pushing a new page', () => {
|
||||
test('should render the pushed component', async ({ page }) => {
|
||||
const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
|
||||
const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
|
||||
const pageOne = page.locator('page-one');
|
||||
const pageTwo = page.locator('page-two');
|
||||
|
||||
@ -32,7 +32,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
});
|
||||
|
||||
test('should render the back button', async ({ page }) => {
|
||||
const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
|
||||
const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
|
||||
const pageTwoBackButton = page.locator('page-two ion-back-button');
|
||||
|
||||
await pageTwoButton.click();
|
||||
@ -45,7 +45,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
test('back button should pop to the previous page', async ({ page }) => {
|
||||
const pageOne = page.locator('page-one');
|
||||
const pageTwo = page.locator('page-two');
|
||||
const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
|
||||
const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
|
||||
const pageTwoBackButton = page.locator('page-two ion-back-button');
|
||||
|
||||
await pageTwoButton.click();
|
||||
@ -65,8 +65,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
const pageTwo = page.locator('page-two');
|
||||
const pageThree = page.locator('page-three');
|
||||
|
||||
const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
|
||||
const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
|
||||
const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
|
||||
const pageThreeButton = page.locator('button:has-text("Go to Page Three")');
|
||||
|
||||
await pageTwoButton.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
@ -16,8 +16,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
const pageOne = page.locator('page-one');
|
||||
const pageTwo = page.locator('page-two');
|
||||
|
||||
const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
|
||||
const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
|
||||
const pageTwoButton = page.locator('button:has-text("Go to Page 2")');
|
||||
const pageTwoTwoButton = page.locator('button:has-text("Go to Page 2.2")');
|
||||
|
||||
await pageTwoButton.click();
|
||||
await page.waitForChanges();
|
||||
@ -35,7 +35,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await expect(pageTwoOne).toHaveCount(1);
|
||||
await expect(pageTwoTwo).toBeVisible();
|
||||
|
||||
const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
|
||||
const pageThreeButton = page.locator('button:has-text("Go to Page 3")');
|
||||
|
||||
await pageThreeButton.click();
|
||||
await page.waitForChanges();
|
||||
@ -49,8 +49,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
|
||||
test.describe('back button', () => {
|
||||
test('should work with nested ion-nav', async ({ page }) => {
|
||||
const pageTwoButton = page.locator('ion-button:has-text("Go to Page 2")');
|
||||
const pageTwoTwoButton = page.locator('ion-button:has-text("Go to Page 2.2")');
|
||||
const pageTwoButton = page.locator('button:has-text("Go to Page 2")');
|
||||
const pageTwoTwoButton = page.locator('button:has-text("Go to Page 2.2")');
|
||||
|
||||
await pageTwoButton.click();
|
||||
await page.waitForChanges();
|
||||
@ -61,7 +61,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await pageTwoTwoButton.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
const pageThreeButton = page.locator('ion-button:has-text("Go to Page 3")');
|
||||
const pageThreeButton = page.locator('button:has-text("Go to Page 3")');
|
||||
const pageThreeBackButton = page.locator('page-three ion-back-button');
|
||||
|
||||
await pageThreeButton.click();
|
||||
|
||||
@ -24,8 +24,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
const pageOne = page.locator('page-one');
|
||||
const pageTwo = page.locator('page-two');
|
||||
|
||||
const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
|
||||
const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
|
||||
const pageOneButton = page.locator('button:has-text("Go to Page One")');
|
||||
const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
|
||||
|
||||
await pageOneButton.click();
|
||||
await page.waitForChanges();
|
||||
@ -45,7 +45,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
});
|
||||
|
||||
test('should render the back button', async ({ page }) => {
|
||||
const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
|
||||
const pageOneButton = page.locator('button:has-text("Go to Page One")');
|
||||
const pageOneBackButton = page.locator('page-one ion-back-button');
|
||||
|
||||
await pageOneButton.click();
|
||||
@ -59,7 +59,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
const pageRoot = page.locator('page-root');
|
||||
const pageOne = page.locator('page-one');
|
||||
|
||||
const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
|
||||
const pageOneButton = page.locator('button:has-text("Go to Page One")');
|
||||
const pageOneBackButton = page.locator('page-one ion-back-button');
|
||||
|
||||
await pageOneButton.click();
|
||||
@ -80,9 +80,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
const pageTwo = page.locator('page-two');
|
||||
const pageThree = page.locator('page-three');
|
||||
|
||||
const pageOneButton = page.locator('ion-button:has-text("Go to Page One")');
|
||||
const pageTwoButton = page.locator('ion-button:has-text("Go to Page Two")');
|
||||
const pageThreeButton = page.locator('ion-button:has-text("Go to Page Three")');
|
||||
const pageOneButton = page.locator('button:has-text("Go to Page One")');
|
||||
const pageTwoButton = page.locator('button:has-text("Go to Page Two")');
|
||||
const pageThreeButton = page.locator('button:has-text("Go to Page Three")');
|
||||
|
||||
await pageOneButton.click();
|
||||
await page.waitForChanges();
|
||||
|
||||
@ -105,7 +105,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
);
|
||||
});
|
||||
|
||||
test('tabbing should correctly move focus between columns', async ({ page }) => {
|
||||
// TODO(FW-6232): remove this skip when tabbing is working properly
|
||||
test.skip('tabbing should correctly move focus between columns', async ({ page }) => {
|
||||
const firstColumn = page.locator('ion-picker-column#first');
|
||||
const secondColumn = page.locator('ion-picker-column#second');
|
||||
|
||||
@ -120,7 +121,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await expect(secondColumn).toBeFocused();
|
||||
});
|
||||
|
||||
test('tabbing should correctly move focus back', async ({ page }) => {
|
||||
// TODO(FW-6232): remove this skip when tabbing is working properly
|
||||
test.skip('tabbing should correctly move focus back', async ({ page }) => {
|
||||
const firstColumn = page.locator('ion-picker-column#first');
|
||||
const secondColumn = page.locator('ion-picker-column#second');
|
||||
|
||||
|
||||
@ -7,7 +7,8 @@ import type { E2ELocator } from '@utils/test/playwright/page/utils/locator';
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('picker: keyboard entry'), () => {
|
||||
test('should scroll to and update the value prop for a single column', async ({ page }) => {
|
||||
// TODO(FW-6232): remove this skip when keyboard entry is working properly
|
||||
test.skip('should scroll to and update the value prop for a single column', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-picker>
|
||||
@ -122,7 +123,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
|
||||
await expect(secondColumn).toHaveJSProperty('value', 24);
|
||||
});
|
||||
|
||||
test('should select 00', async ({ page }) => {
|
||||
// TODO(FW-6232): remove this skip when keyboard entry is working properly
|
||||
test.skip('should select 00', async ({ page }) => {
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-picker>
|
||||
|
||||
@ -40,7 +40,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
|
||||
await popover.evaluate((popover: HTMLIonPopoverElement) => {
|
||||
popover.remove();
|
||||
document.querySelector('ion-button')?.insertAdjacentElement('afterend', popover);
|
||||
document.querySelector('button')?.insertAdjacentElement('afterend', popover);
|
||||
});
|
||||
await page.waitForChanges();
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ const checkedOptions: SelectPopoverOption[] = [
|
||||
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('select-popover: basic'), () => {
|
||||
test.beforeEach(({ browserName }) => {
|
||||
test.skip(browserName === 'webkit', 'https://ionic-cloud.atlassian.net/browse/FW-2979');
|
||||
test.skip(browserName === 'webkit', 'ROU-5437');
|
||||
});
|
||||
|
||||
test.describe('single selection', () => {
|
||||
@ -55,7 +55,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
});
|
||||
|
||||
test('pressing Space on a selected option should dismiss the popover', async ({ browserName }) => {
|
||||
test.skip(browserName === 'firefox', 'Same behavior as https://ionic-cloud.atlassian.net/browse/FW-2979');
|
||||
test.skip(browserName === 'firefox', 'Same behavior as ROU-5437');
|
||||
|
||||
await selectPopoverPage.setup(config, checkedOptions, false);
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
|
||||
test.describe('select: popover', () => {
|
||||
test('it should open a popover select', async ({ page, skip }) => {
|
||||
// TODO (FW-2979)
|
||||
// TODO (ROU-5437)
|
||||
skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
|
||||
|
||||
const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
|
||||
|
||||
@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('select: disabled options'), () => {
|
||||
test('should not focus a disabled option when no value is set', async ({ page, skip }) => {
|
||||
// TODO (FW-2979)
|
||||
// TODO (ROU-5437)
|
||||
skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
|
||||
|
||||
test.info().annotations.push({
|
||||
|
||||