chore(): sync with main

.github/CODEOWNERS

@@ -13,3 +13,60 @@
 
 # Global owners
 * @ionic-team/framework
+
+# Frameworks
+
+## Angular
+
+/angular/ @sean-perkins
+/packages/angular-server @sean-perkins
+/angular/test
+
+## React
+
+/packages/react/ @amandaejohnston
+/packages/react-router @amandaejohnston
+/packages/react/test-app/
+/packages/react-router/test-app/
+
+## Vue
+
+/packages/vue/ @liamdebeasi
+/packages/vue-router/ @liamdebeasi
+/packages/vue/test/
+/packages/vue-router/__tests__
+
+# Components
+
+/core/src/components/accordion/ @liamdebeasi
+/core/src/components/accordion-group/ @liamdebeasi
+
+/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
+/core/src/components/datetime-button/ @liamdebeasi
+
+/core/src/components/menu/ @amandaejohnston
+/core/src/components/menu-toggle/ @amandaejohnston
+
+/core/src/components/nav/ @sean-perkins
+/core/src/components/nav-link/ @sean-perkins
+
+/core/src/components/picker-internal/ @liamdebeasi
+/core/src/components/picker-column-internal/ @liamdebeasi
+
+/core/src/components/refresher/ @liamdebeasi
+/core/src/components/refresher-content/ @liamdebeasi
+
+# Codeowner should own the source, but everyone should own the tests
+/core/src/components/**/test/ @ionic-team/framework
+
+# Utilities
+
+/core/src/utils/animation/ @liamdebeasi
+/core/src/utils/content/ @sean-perkins
+/core/src/utils/gesture/ @liamdebeasi
+/core/src/utils/input-shims/ @liamdebeasi
+/core/src/utils/keyboard/ @liamdebeasi
+/core/src/utils/logging/ @amandaejohnston
+/core/src/utils/sanitization/ @liamdebeasi
+/core/src/utils/tap-click/ @liamdebeasi
+/core/src/utils/transition/ @liamdebeasi

.github/workflows/stencil-eval.yml

@@ -47,13 +47,6 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/test-core-spec
 
-  test-core-e2e:
-    needs: [build-core]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/workflows/actions/test-core-e2e
-
   test-core-screenshot:
     strategy:
       # This ensures that all screenshot shard

core/playwright.config.ts

@@ -85,7 +85,10 @@ const config: PlaywrightTestConfig = {
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  /* Fail fast on CI */
+  maxFailures: process.env.CI ? 1 : 0,
+  /* Flaky test should be either addressed or disabled until we can address them */
+  retries: 0,
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */

core/src/components/accordion/test/accordion.e2e.ts

@@ -19,15 +19,15 @@ test.describe('accordion: states', () => {
     const accordionGroup = page.locator('ion-accordion-group');
     const accordion = page.locator('ion-accordion');
 
-    expect(accordion).toHaveJSProperty('readonly', false);
+    await expect(accordion).toHaveJSProperty('readonly', false);
 
     await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
       el.readonly = true;
     });
 
     await page.waitForChanges();
 
-    expect(accordion).toHaveJSProperty('readonly', true);
+    await expect(accordion).toHaveJSProperty('readonly', true);
   });
 
   test('should properly set disabled on child accordions', async ({ page }) => {
@@ -43,14 +43,14 @@ test.describe('accordion: states', () => {
     const accordionGroup = page.locator('ion-accordion-group');
     const accordion = page.locator('ion-accordion');
 
-    expect(accordion).toHaveJSProperty('disabled', false);
+    await expect(accordion).toHaveJSProperty('disabled', false);
 
     await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
       el.disabled = true;
     });
 
     await page.waitForChanges();
 
-    expect(accordion).toHaveJSProperty('disabled', true);
+    await expect(accordion).toHaveJSProperty('disabled', true);
   });
 });

core/src/components/action-sheet/test/basic/action-sheet.e2e.ts

@@ -41,7 +41,7 @@ test.describe('action sheet: basic', () => {
       await actionSheetFixture.open('#basic');
 
       const actionSheet = page.locator('ion-action-sheet');
-      expect(actionSheet).toHaveAttribute('data-testid', 'basic-action-sheet');
+      await expect(actionSheet).toHaveAttribute('data-testid', 'basic-action-sheet');
     });
   });
   test.describe('action sheet: variants', () => {
@@ -78,7 +78,7 @@ test.describe('action sheet: basic', () => {
       await actionSheetFixture.open('#customBackdrop');
 
       const backdrop = page.locator('ion-action-sheet ion-backdrop');
-      expect(backdrop).toHaveCSS('opacity', '1');
+      await expect(backdrop).toHaveCSS('opacity', '1');
     });
     test('should open alert from action sheet', async ({ page, skip }) => {
       skip.rtl();
@@ -96,7 +96,7 @@ test.describe('action sheet: basic', () => {
       const actionSheet = page.locator('ion-action-sheet');
       await actionSheet.locator('ion-backdrop').click();
 
-      expect(actionSheet).toBeVisible();
+      await expect(actionSheet).toBeVisible();
     });
   });
   test.describe('action sheet: focus trap', () => {
@@ -133,14 +133,14 @@ class ActionSheetFixture {
     await this.page.locator(selector).click();
     await ionActionSheetDidPresent.next();
     this.actionSheet = this.page.locator('ion-action-sheet');
-    expect(this.actionSheet).toBeVisible();
+    await 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();
+    await expect(this.actionSheet).not.toBeVisible();
   }
 
   async screenshot(modifier: string) {

core/src/components/alert/test/basic/alert.e2e.ts

@@ -51,7 +51,7 @@ test.describe('alert: basic', () => {
     await page.goto(`/src/components/alert/test/basic`);
 
     const alert = await openAlert(page, 'basic');
-    expect(alert).toHaveAttribute('data-testid', 'basic-alert');
+    await expect(alert).toHaveAttribute('data-testid', 'basic-alert');
   });
 
   test('should dismiss when async handler resolves', async ({ page, skip }) => {

core/src/components/datetime-button/test/basic/datetime-button.e2e.ts

@@ -14,21 +14,21 @@ test.describe('datetime-button: switching to correct view', () => {
   });
   test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
     const datetime = page.locator('ion-datetime');
-    expect(datetime).toHaveJSProperty('presentation', 'date-time');
+    await expect(datetime).toHaveJSProperty('presentation', 'date-time');
 
     await page.locator('#date-button').click();
     await page.waitForChanges();
 
-    expect(datetime).toHaveJSProperty('presentation', 'date');
+    await expect(datetime).toHaveJSProperty('presentation', 'date');
   });
   test('should switch to a time-only view when the time button is clicked', async ({ page }) => {
     const datetime = page.locator('ion-datetime');
-    expect(datetime).toHaveJSProperty('presentation', 'date-time');
+    await expect(datetime).toHaveJSProperty('presentation', 'date-time');
 
     await page.locator('#time-button').click();
     await page.waitForChanges();
 
-    expect(datetime).toHaveJSProperty('presentation', 'time');
+    await expect(datetime).toHaveJSProperty('presentation', 'time');
   });
 });
 

core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts

@@ -68,38 +68,38 @@ test.describe('datetime-button: popover', () => {
 
     await ionPopoverDidPresent.next();
 
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
   });
   test('should open the time popover', async ({ page }) => {
     await page.locator('#time-button').click();
 
     await ionPopoverDidPresent.next();
 
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
   });
   test('should open the date popover then the time popover', async ({ page }) => {
     await page.locator('#date-button').click();
     await ionPopoverDidPresent.next();
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
 
     await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
     await ionPopoverDidDismiss.next();
 
     await page.locator('#time-button').click();
     await ionPopoverDidPresent.next();
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
   });
   test('should open the time popover then the date popover', async ({ page }) => {
     await page.locator('#time-button').click();
     await ionPopoverDidPresent.next();
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
 
     await popover.evaluate((el: HTMLIonPopoverElement) => el.dismiss());
     await ionPopoverDidDismiss.next();
 
     await page.locator('#date-button').click();
     await ionPopoverDidPresent.next();
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
   });
 });
 
@@ -130,37 +130,37 @@ test.describe('datetime-button: modal', () => {
 
     await ionModalDidPresent.next();
 
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
   });
   test('should open the time modal', async ({ page }) => {
     await page.locator('#time-button').click();
 
     await ionModalDidPresent.next();
 
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
   });
   test('should open the date modal then the time modal', async ({ page }) => {
     await page.locator('#date-button').click();
     await ionModalDidPresent.next();
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
 
     await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
     await ionModalDidDismiss.next();
 
     await page.locator('#time-button').click();
     await ionModalDidPresent.next();
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
   });
   test('should open the time modal then the date modal', async ({ page }) => {
     await page.locator('#time-button').click();
     await ionModalDidPresent.next();
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
 
     await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
     await ionModalDidDismiss.next();
 
     await page.locator('#date-button').click();
     await ionModalDidPresent.next();
-    expect(datetime).toBeVisible();
+    await expect(datetime).toBeVisible();
   });
 });

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -145,7 +145,7 @@ test.describe('datetime: confirm date', () => {
 
     await ionChange.next();
 
-    expect(datetime).toHaveJSProperty('value', '2021-12-25T12:40:00');
+    await expect(datetime).toHaveJSProperty('value', '2021-12-25T12:40:00');
   });
 });
 
@@ -300,10 +300,13 @@ test.describe('datetime: visibility', () => {
 
     await datetime.evaluate((el: HTMLIonDatetimeElement) => el.style.setProperty('display', 'none'));
     await expect(datetime).toBeHidden();
+    await expect(datetime).not.toHaveClass(/datetime-ready/);
 
     await datetime.evaluate((el: HTMLIonDatetimeElement) => el.style.removeProperty('display'));
     await expect(datetime).toBeVisible();
 
+    await page.waitForSelector('.datetime-ready');
+
     // month/year interface should be reset
     await expect(monthYearInterface).toBeHidden();
   });

core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts

@@ -214,8 +214,8 @@ test.describe('datetime: prefer wheel', () => {
         const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
         const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
 
-        expect(monthValues).toHaveText(['1月', '2月', '3月']);
-        expect(dayValues).toHaveText(['1日', '2日', '3日']);
+        await expect(monthValues).toHaveText(['1月', '2月', '3月']);
+        await expect(dayValues).toHaveText(['1日', '2日', '3日']);
       });
       test('should render the columns according to locale - en-US', async ({ page }) => {
         await page.setContent(`
@@ -334,7 +334,7 @@ test.describe('datetime: prefer wheel', () => {
 
       const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
-      expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
+      await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
     });
     test('should respect min and max bounds even across years', async ({ page }) => {
       await page.setContent(`
@@ -495,7 +495,7 @@ test.describe('datetime: prefer wheel', () => {
 
       const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
-      expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
+      await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
     });
     test('should respect min and max bounds even across years', async ({ page }) => {
       await page.setContent(`

core/src/components/datetime/test/presentation/datetime.e2e.ts

@@ -108,7 +108,8 @@ test.describe('datetime: presentation', () => {
   });
 });
 
-test.describe('datetime: presentation: time', () => {
+// TODO: FW-3018
+test.skip('datetime: presentation: time', () => {
   let timePickerFixture: TimePickerFixture;
 
   test.beforeEach(async ({ page }) => {
@@ -159,9 +160,10 @@ class TimePickerFixture {
   }
 
   async goto() {
-    await this.page.goto(`/src/components/datetime/test/presentation`);
-    await this.page.locator('select').selectOption('time');
-    await this.page.waitForSelector('.datetime-presentation-time');
+    await this.page.setContent(`
+      <ion-datetime presentation="time" value="2022-03-10T13:00:00"></ion-datetime>
+    `);
+    await this.page.waitForSelector('.datetime-ready');
     this.timePicker = this.page.locator('ion-datetime');
   }
 

core/src/components/fab/test/basic/fab.e2e.ts

@@ -47,28 +47,28 @@ test.describe('fab: basic (functionality checks)', () => {
     const fab = page.locator('#fab1');
     const fabList = fab.locator('ion-fab-list');
 
-    expect(fabList).not.toHaveClass(/fab-list-active/);
+    await expect(fabList).not.toHaveClass(/fab-list-active/);
 
     // open fab
     await fab.click();
     await page.waitForChanges();
-    expect(fabList).toHaveClass(/fab-list-active/);
+    await expect(fabList).toHaveClass(/fab-list-active/);
 
     // close fab
     await fab.click();
     await page.waitForChanges();
-    expect(fabList).not.toHaveClass(/fab-list-active/);
+    await expect(fabList).not.toHaveClass(/fab-list-active/);
   });
 
   test('should not open when disabled', async ({ page }) => {
     const fab = page.locator('#fab2');
     const fabList = fab.locator('ion-fab-list');
 
-    expect(fabList).not.toHaveClass(/fab-list-active/);
+    await expect(fabList).not.toHaveClass(/fab-list-active/);
 
     // attempt to open fab
     await fab.click();
     await page.waitForChanges();
-    expect(fabList).not.toHaveClass(/fab-list-active/);
+    await expect(fabList).not.toHaveClass(/fab-list-active/);
   });
 });