chore(): update merge conflict in tests

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

@@ -8,17 +8,16 @@ test.describe('checkbox: basic visual tests', () => {
     `);
 
     const checkbox = page.locator('ion-checkbox');
-    expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-unchecked-${page.getSnapshotSettings()}.png`);
+    await expect(checkbox).toHaveScreenshot(`checkbox-unchecked-${page.getSnapshotSettings()}.png`);
   });
 
-<<<<<<< HEAD
   test('should render checked checkbox correctly', async ({ page }) => {
     await page.setContent(`
       <ion-checkbox checked>Checked</ion-checkbox>
     `);
 
     const checkbox = page.locator('ion-checkbox');
-    expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-checked-${page.getSnapshotSettings()}.png`);
+    await expect(checkbox).toHaveScreenshot(`checkbox-checked-${page.getSnapshotSettings()}.png`);
   });
 
   test('should render disabled checkbox correctly', async ({ page }) => {
@@ -27,7 +26,7 @@ test.describe('checkbox: basic visual tests', () => {
     `);
 
     const checkbox = page.locator('ion-checkbox');
-    expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-disabled-${page.getSnapshotSettings()}.png`);
+    await expect(checkbox).toHaveScreenshot(`checkbox-disabled-${page.getSnapshotSettings()}.png`);
   });
 
   test('should render custom checkmark-width correctly', async ({ page }) => {
@@ -36,7 +35,7 @@ test.describe('checkbox: basic visual tests', () => {
     `);
 
     const checkbox = page.locator('ion-checkbox');
-    expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-checkmark-width-${page.getSnapshotSettings()}.png`);
+    await expect(checkbox).toHaveScreenshot(`checkbox-checkmark-width-${page.getSnapshotSettings()}.png`);
   });
 
   test('should render custom size correctly', async ({ page }) => {
@@ -45,7 +44,7 @@ test.describe('checkbox: basic visual tests', () => {
     `);
 
     const checkbox = page.locator('ion-checkbox');
-    expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-size-${page.getSnapshotSettings()}.png`);
+    await expect(checkbox).toHaveScreenshot(`checkbox-size-${page.getSnapshotSettings()}.png`);
   });
 });
 
@@ -97,8 +96,5 @@ test.describe('checkbox: ionChange', () => {
 
     await checkbox.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
     expect(ionChange).not.toHaveReceivedEvent();
-=======
-    await expect(page).toHaveScreenshot(`checkbox-basic-${page.getSnapshotSettings()}.png`);
->>>>>>> origin/main
   });
 });

core/src/components/checkbox/test/indeterminate/checkbox.e2e.ts

@@ -7,13 +7,7 @@ test.describe('checkbox: indeterminate', () => {
 
     await page.goto(`/src/components/checkbox/test/indeterminate`);
 
-<<<<<<< HEAD
     const checkbox = page.locator('ion-checkbox:first-child');
-    expect(await checkbox.screenshot()).toMatchSnapshot(`checkbox-indeterminate-${page.getSnapshotSettings()}.png`);
+    await expect(checkbox).toHaveScreenshot(`checkbox-indeterminate-${page.getSnapshotSettings()}.png`);
-=======
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`checkbox-indeterminate-${page.getSnapshotSettings()}.png`);
->>>>>>> origin/main
   });
 });

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

@@ -9,11 +9,7 @@ test.describe('input: basic', () => {
       `);
       const input = page.locator('ion-input');
       // Validates the display of an input where text extends off the edge of the component.
-<<<<<<< HEAD
+      await expect(input).toHaveScreenshot(`input-with-text-overflow-${page.getSnapshotSettings()}.png`);
-      expect(await input.screenshot()).toMatchSnapshot(`input-with-text-overflow-${page.getSnapshotSettings()}.png`);
-=======
-      await expect(item).toHaveScreenshot(`input-with-text-overflow-${page.getSnapshotSettings()}.png`);
->>>>>>> origin/main
     });
   });
   test.describe('input with placeholder', () => {
@@ -23,111 +19,7 @@ test.describe('input: basic', () => {
       `);
       const input = page.locator('ion-input');
       // Validates the display of an input with a placeholder.
-<<<<<<< HEAD
+      await expect(input).toHaveScreenshot(`input-with-placeholder-${page.getSnapshotSettings()}.png`);
-      expect(await input.screenshot()).toMatchSnapshot(`input-with-placeholder-${page.getSnapshotSettings()}.png`);
-=======
-      await expect(item).toHaveScreenshot(`input-with-placeholder-${page.getSnapshotSettings()}.png`);
-    });
-  });
-
-  test.describe('input disabled', () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.setContent(`
-      <ion-content>
-        <ion-list>
-          <ion-item>
-            <ion-input value="Input disabled" disabled></ion-input>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-      `);
-      const item = page.locator('ion-item');
-      // Validates the display of an input in a disabled state.
-      await expect(item).toHaveScreenshot(`input-disabled-${page.getSnapshotSettings()}.png`);
-    });
-  });
-
-  test.describe('input with lines="full"', () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.setContent(`
-      <ion-content>
-        <ion-list>
-          <ion-item lines="full">
-            <ion-input placeholder="Full"></ion-input>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-      `);
-      const item = page.locator('ion-item');
-      const input = page.locator('ion-input');
-      // Validates the display of an input with an ion-item using lines="full".
-      await expect(item).toHaveScreenshot(`input-with-lines-full-${page.getSnapshotSettings()}.png`);
-
-      await input.click();
-
-      // Verifies that the parent item receives .item-has-focus when the input is focused.
-      await expect(item).toHaveClass(/item-has-focus/);
-      // Validates the display of an input with an ion-item using lines="full" when focused.
-      await expect(item).toHaveScreenshot(`input-with-lines-full-focused-${page.getSnapshotSettings()}.png`, {
-        animations: 'disabled',
-      });
-    });
-  });
-
-  test.describe('input with lines="inset"', () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.setContent(`
-      <ion-content>
-        <ion-list>
-          <ion-item lines="inset">
-            <ion-input placeholder="Inset"></ion-input>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-      `);
-      const item = page.locator('ion-item');
-      const input = page.locator('ion-input');
-      // Validates the display of an input with an ion-item using lines="inset".
-      await expect(item).toHaveScreenshot(`input-with-lines-inset-${page.getSnapshotSettings()}.png`);
-
-      await input.click();
-
-      // Verifies that the parent item receives .item-has-focus when the input is focused.
-      await expect(item).toHaveClass(/item-has-focus/);
-
-      // Validates the display of an input with an ion-item using lines="inset" when focused.
-      await expect(item).toHaveScreenshot(`input-with-lines-inset-focused-${page.getSnapshotSettings()}.png`, {
-        animations: 'disabled',
-      });
-    });
-  });
-
-  test.describe('input with lines="none"', () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.setContent(`
-      <ion-content>
-        <ion-list>
-          <ion-item lines="none">
-            <ion-input placeholder="None"></ion-input>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-      `);
-      const item = page.locator('ion-item');
-      const input = page.locator('ion-input');
-      // Validates the display of an input with an ion-item using lines="none".
-      await expect(item).toHaveScreenshot(`input-with-lines-none-${page.getSnapshotSettings()}.png`);
-
-      await input.click();
-
-      // Verifies that the parent item receives .item-has-focus when the input is focused.
-      await expect(item).toHaveClass(/item-has-focus/);
-
-      // Validates the display of an input with an ion-item using lines="none" when focused.
-      await expect(item).toHaveScreenshot(`input-with-lines-none-focused-${page.getSnapshotSettings()}.png`, {
-        animations: 'disabled',
-      });
->>>>>>> origin/main
     });
   });
 
@@ -142,8 +34,7 @@ test.describe('input: basic', () => {
       `);
       const input = page.locator('ion-input');
       // Validates the display of an input with a clear button.
-<<<<<<< HEAD
+      await expect(input).toHaveScreenshot(`input-with-clear-button-${page.getSnapshotSettings()}.png`);
-      expect(await input.screenshot()).toMatchSnapshot(`input-with-clear-button-${page.getSnapshotSettings()}.png`);
     });
     test('should not have visual regressions with stacked label', async ({ page }) => {
       await page.setContent(`
@@ -156,12 +47,7 @@ test.describe('input: basic', () => {
       `);
       const input = page.locator('ion-input');
       // Validates the display of an input with a clear button.
-      expect(await input.screenshot()).toMatchSnapshot(
+      await expect(input).toHaveScreenshot(`input-with-clear-button-stacked-${page.getSnapshotSettings()}.png`);
-        `input-with-clear-button-stacked-${page.getSnapshotSettings()}.png`
-      );
-=======
-      await expect(item).toHaveScreenshot(`input-with-clear-button-${page.getSnapshotSettings()}.png`);
->>>>>>> origin/main
     });
   });
 });

core/src/components/range/test/a11y/range.e2e.ts

@@ -3,11 +3,23 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('range: a11y', () => {
-  test.beforeEach(async ({ skip }) => {
+  test('should not have accessibility violations', async ({ page, skip }) => {
     skip.rtl();
-<<<<<<< HEAD
     skip.mode('md');
-=======
+
+    await page.goto(`/src/components/range/test/a11y`);
+
+    /**
+     * Axe does not take <slot> elements into account
+     * when checking color-contrast. As a result, it will
+     * incorrectly report color-contrast issues: https://github.com/dequelabs/axe-core/issues/3329
+     */
+    const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
+    expect(results.violations).toEqual([]);
+  });
+
+  test('should not have visual regressions', async ({ page, skip }) => {
+    skip.rtl();
     skip.mode('ios', 'iOS mode does not display hover/active/focus styles.');
 
     await page.setContent(
@@ -36,21 +48,12 @@ test.describe('range: a11y', () => {
     await page.waitForChanges();
 
     await expect(range).toHaveScreenshot(`range-active-${page.getSnapshotSettings()}.png`);
->>>>>>> origin/main
   });
 
-  test('should not have accessibility violations', async ({ page }) => {
+  test.describe('with pin', () => {
-    await page.goto(`/src/components/range/test/a11y`);
+    test('should not have visual regressions', async ({ page, skip }) => {
+      skip.rtl();
 
-<<<<<<< HEAD
-    /**
-     * Axe does not take <slot> elements into account
-     * when checking color-contrast. As a result, it will
-     * incorrectly report color-contrast issues: https://github.com/dequelabs/axe-core/issues/3329
-     */
-    const results = await new AxeBuilder({ page }).disableRules('color-contrast').analyze();
-    expect(results.violations).toEqual([]);
-=======
       await page.setContent(
         `<ion-app>
           <ion-content>
@@ -68,6 +71,5 @@ test.describe('range: a11y', () => {
 
       await expect(range).toHaveScreenshot(`range-focus-with-pin-${page.getSnapshotSettings()}.png`);
     });
->>>>>>> origin/main
   });
 });

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

@@ -2,84 +2,22 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('range: basic', () => {
-<<<<<<< HEAD
   test.beforeEach(async ({ skip, page }) => {
-=======
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto(`/src/components/range/test/basic`);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`range-diff-${page.getSnapshotSettings()}.png`);
-  });
-
-  /**
-   * The mouse events are flaky on CI
-   * TODO FW-2873
-   */
-  test.fixme('should emit start/end events', async ({ page }, testInfo) => {
-    await page.setContent(`<ion-range value="20"></ion-range>`);
-
-    const rangeStart = await page.spyOnEvent('ionKnobMoveStart');
-    const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd');
-
-    const rangeEl = page.locator('ion-range');
-
-    await dragElementBy(rangeEl, page, testInfo.project.metadata.rtl ? -300 : 300, 0);
-    await page.waitForChanges();
-
-    /**
-     * dragElementBy defaults to starting the drag from the middle of the el,
-     * so the start value should jump to 50 despite the range defaulting to 20.
-     */
-    expect(rangeStart).toHaveReceivedEventDetail({ value: 50 });
-    expect(rangeEnd).toHaveReceivedEventDetail({ value: 100 });
-
-    /**
-     * Verify both events fire if range is clicked without dragging.
-     */
-    await dragElementBy(rangeEl, page, 0, 0);
-    await page.waitForChanges();
-
-    expect(rangeStart).toHaveReceivedEventDetail({ value: 50 });
-    expect(rangeEnd).toHaveReceivedEventDetail({ value: 50 });
-  });
-
-  test('should emit start/end events, keyboard', async ({ page }) => {
-    await page.setContent(`<ion-range value="20"></ion-range>`);
-
-    const rangeStart = await page.spyOnEvent('ionKnobMoveStart');
-    const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd');
-
-    await page.keyboard.press('Tab'); // focus first range
-    await page.keyboard.press('ArrowRight');
-
-    await rangeStart.next();
-    await rangeEnd.next();
-
-    expect(rangeStart).toHaveReceivedEventDetail({ value: 20 });
-    expect(rangeEnd).toHaveReceivedEventDetail({ value: 21 });
-  });
-
-  // TODO FW-2873
-  test.skip('should not scroll when the knob is swiped', async ({ page, skip }) => {
-    skip.browser('webkit', 'mouse.wheel is not available in WebKit');
->>>>>>> origin/main
     skip.rtl();
 
     await page.goto('/src/components/range/test/basic');
   });
   test('should render default range', async ({ page }) => {
     const range = page.locator('ion-range.default');
-    expect(await range.screenshot()).toMatchSnapshot(`range-default-${page.getSnapshotSettings()}.png`);
+    await expect(range).toHaveScreenshot(`range-default-${page.getSnapshotSettings()}.png`);
   });
   test('should render dual knob range', async ({ page }) => {
     const range = page.locator('ion-range.dual-knobs');
-    expect(await range.screenshot()).toMatchSnapshot(`range-dual-knobs-${page.getSnapshotSettings()}.png`);
+    await expect(range).toHaveScreenshot(`range-dual-knobs-${page.getSnapshotSettings()}.png`);
   });
   test('should render range with ticks', async ({ page }) => {
     const range = page.locator('ion-range.ticks');
-    expect(await range.screenshot()).toMatchSnapshot(`range-ticks-${page.getSnapshotSettings()}.png`);
+    await expect(range).toHaveScreenshot(`range-ticks-${page.getSnapshotSettings()}.png`);
   });
   test('should render pin', async ({ page }) => {
     const range = page.locator('ion-range.pin');
@@ -88,8 +26,6 @@ test.describe('range: basic', () => {
     // Force the pin to show
     await knob.evaluate((el: HTMLElement) => el.classList.add('ion-focused'));
 
-    expect(await range.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+    await expect(range).toHaveScreenshot(`range-pin-${page.getSnapshotSettings()}.png`, { animations: 'disabled' });
-      `range-pin-${page.getSnapshotSettings()}.png`
-    );
   });
 });

core/src/components/textarea/test/autogrow/textarea.e2e.ts

@@ -11,20 +11,8 @@ test.describe('textarea: autogrow', () => {
   });
 
   test('should grow when typing', async ({ page }) => {
-<<<<<<< HEAD
-    await page.setContent(
-      `
-      <ion-app>
-        <ion-content>
-          <ion-list>
-            <ion-textarea auto-grow="true"></ion-textarea>
-          </ion-list>
-        </ion-content>
-      </ion-app>`
-    );
-=======
     await page.setContent(`
-      <ion-textarea auto-grow="true"></ion-textarea>
+      <ion-textarea aria-label="Textarea" auto-grow="true"></ion-textarea>
     `);
 
     const ionTextarea = page.locator('ion-textarea');
@@ -33,21 +21,8 @@ test.describe('textarea: autogrow', () => {
     await nativeTextarea.type('Now, this is a story all about how');
 
     await expect(ionTextarea).toHaveScreenshot(`textarea-autogrow-initial-${page.getSnapshotSettings()}.png`);
->>>>>>> origin/main
-
-    const textarea = await page.waitForSelector('ion-textarea');
-
-    await textarea.click();
-
-    await page.waitForChanges();
-
-    await textarea.type('Now, this is a story all about how');
-
-    await page.setIonViewport();
-
-    expect(await textarea.screenshot()).toMatchSnapshot(`textarea-autogrow-initial-${page.getSnapshotSettings()}.png`);
 
-    await textarea.type(
+    await nativeTextarea.type(
       [
         `\nMy life got flipped-turned upside down`,
         `And I'd like to take a minute`,
@@ -56,11 +31,7 @@ test.describe('textarea: autogrow', () => {
       ].join('\n')
     );
 
-<<<<<<< HEAD
-    expect(await textarea.screenshot()).toMatchSnapshot(`textarea-autogrow-after-${page.getSnapshotSettings()}.png`);
-=======
     await expect(ionTextarea).toHaveScreenshot(`textarea-autogrow-after-${page.getSnapshotSettings()}.png`);
->>>>>>> origin/main
   });
 
   test('should break long lines without white space', async ({ page }) => {
@@ -73,6 +44,7 @@ test.describe('textarea: autogrow', () => {
       `<ion-app>
         <ion-content>
           <ion-textarea
+            aria-label="Textarea"
             auto-grow="true"
             value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
           </ion-textarea>