test(searchbar): migrate to generators (#27373)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Searchbar tests are using legacy syntax

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Searchbar tests are using generator syntax


343458dc57

The searchbar event tests do not vary across modes, so I removed those
additional checks.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts

@@ -1,147 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('searchbar: cancel button', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(`/src/components/searchbar/test/basic`);
-  });
-
-  test('should show cancel button on focus if show-cancel-button=focus', async ({ page }) => {
-    const searchbar = page.locator('#basic');
-    const cancelButton = searchbar.locator('.searchbar-cancel-button');
-
-    await searchbar.evaluate((el: HTMLIonSearchbarElement) => el.setFocus());
-    await page.waitForChanges();
-
-    await expect(searchbar).toHaveClass(/searchbar-has-focus/);
-    await expect(cancelButton).toBeVisible();
-  });
-
-  test('should not show cancel button on focus if show-cancel-button=never', async ({ page }) => {
-    const searchbar = page.locator('#noCancel');
-    const cancelButton = searchbar.locator('.searchbar-cancel-button');
-
-    await searchbar.evaluate((el: HTMLIonSearchbarElement) => el.setFocus());
-    await page.waitForChanges();
-
-    await expect(searchbar).toHaveClass(/searchbar-has-focus/);
-    await expect(cancelButton).toHaveCount(0);
-  });
-});
-
-test.describe('searchbar: clear button', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-  test('should clear the input when pressed', async ({ page }) => {
-    await page.setContent(`
-      <ion-searchbar value="abc" show-clear-button="always"></ion-searchbar>
-    `);
-
-    const searchbar = page.locator('ion-searchbar');
-    const clearButton = searchbar.locator('.searchbar-clear-button');
-
-    await expect(searchbar).toHaveJSProperty('value', 'abc');
-
-    await clearButton.click();
-    await page.waitForChanges();
-
-    await expect(searchbar).toHaveJSProperty('value', '');
-  });
-  /**
-   * Note: This only tests the desktop focus behavior.
-   * Mobile browsers have different restrictions around
-   * focusing inputs, so these platforms should always
-   * be tested when making changes to the focus behavior.
-   */
-  test('should keep the input focused when the clear button is pressed', async ({ page }) => {
-    await page.setContent(`
-      <ion-searchbar value="abc"></ion-searchbar>
-    `);
-
-    const searchbar = page.locator('ion-searchbar');
-    const nativeInput = searchbar.locator('input');
-    const clearButton = searchbar.locator('.searchbar-clear-button');
-
-    await searchbar.click();
-    await expect(nativeInput).toBeFocused();
-
-    await clearButton.click();
-    await page.waitForChanges();
-
-    await expect(nativeInput).toBeFocused();
-  });
-});
-
-test.describe('searchbar: rendering', () => {
-  test('should render searchbar', async ({ page }) => {
-    await page.setContent(`
-      <ion-searchbar></ion-searchbar>
-    `);
-
-    const searchbar = page.locator('ion-searchbar');
-
-    await expect(searchbar).toHaveScreenshot(`searchbar-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should render cancel and clear buttons', async ({ page }) => {
-    await page.setContent(`
-      <ion-searchbar show-cancel-button="always" show-clear-button="always"></ion-searchbar>
-    `);
-
-    const searchbar = page.locator('ion-searchbar');
-
-    await expect(searchbar).toHaveScreenshot(`searchbar-buttons-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should render searchbar with color', async ({ page, skip }) => {
-    skip.rtl();
-
-    await page.setContent(`
-      <ion-searchbar color="danger" show-cancel-button="always" show-clear-button="always"></ion-searchbar>
-    `);
-
-    const searchbar = page.locator('ion-searchbar');
-
-    await expect(searchbar).toHaveScreenshot(`searchbar-color-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should render disabled searchbar', async ({ page, skip }) => {
-    skip.rtl();
-
-    await page.setContent(`
-      <ion-searchbar disabled="true"></ion-searchbar>
-    `);
-
-    const searchbar = page.locator('ion-searchbar');
-
-    await expect(searchbar).toHaveScreenshot(`searchbar-disabled-${page.getSnapshotSettings()}.png`);
-  });
-
-  test('should render custom search icon', async ({ page, skip }) => {
-    skip.rtl();
-
-    await page.setContent(`
-      <ion-searchbar search-icon="home"></ion-searchbar>
-    `);
-
-    const icon = page.locator('ion-searchbar ion-icon.searchbar-search-icon');
-
-    await expect(icon).toHaveScreenshot(`searchbar-search-icon-${page.getSnapshotSettings()}.png`);
-  });
-});
-
-test.describe('searchbar: placeholder', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-    skip.mode('ios');
-  });
-  test('should set placeholder', async ({ page }) => {
-    await page.setContent(`
-      <ion-searchbar placeholder="My Placeholder"></ion-searchbar>
-    `);
-
-    const nativeInput = page.locator('ion-searchbar input');
-    await expect(nativeInput).toHaveAttribute('placeholder', 'My Placeholder');
-  });
-});

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

@@ -0,0 +1,172 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('searchbar: cancel button'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/searchbar/test/basic`, config);
+    });
+
+    test('should show cancel button on focus if show-cancel-button=focus', async ({ page }) => {
+      const searchbar = page.locator('#basic');
+      const cancelButton = searchbar.locator('.searchbar-cancel-button');
+
+      await searchbar.evaluate((el: HTMLIonSearchbarElement) => el.setFocus());
+      await page.waitForChanges();
+
+      await expect(searchbar).toHaveClass(/searchbar-has-focus/);
+      await expect(cancelButton).toBeVisible();
+    });
+
+    test('should not show cancel button on focus if show-cancel-button=never', async ({ page }) => {
+      const searchbar = page.locator('#noCancel');
+      const cancelButton = searchbar.locator('.searchbar-cancel-button');
+
+      await searchbar.evaluate((el: HTMLIonSearchbarElement) => el.setFocus());
+      await page.waitForChanges();
+
+      await expect(searchbar).toHaveClass(/searchbar-has-focus/);
+      await expect(cancelButton).toHaveCount(0);
+    });
+  });
+
+  test.describe(title('searchbar: clear button'), () => {
+    test('should clear the input when pressed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-searchbar value="abc" show-clear-button="always"></ion-searchbar>
+      `,
+        config
+      );
+
+      const searchbar = page.locator('ion-searchbar');
+      const clearButton = searchbar.locator('.searchbar-clear-button');
+
+      await expect(searchbar).toHaveJSProperty('value', 'abc');
+
+      await clearButton.click();
+      await page.waitForChanges();
+
+      await expect(searchbar).toHaveJSProperty('value', '');
+    });
+    /**
+     * Note: This only tests the desktop focus behavior.
+     * Mobile browsers have different restrictions around
+     * focusing inputs, so these platforms should always
+     * be tested when making changes to the focus behavior.
+     */
+    test('should keep the input focused when the clear button is pressed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-searchbar value="abc"></ion-searchbar>
+      `,
+        config
+      );
+
+      const searchbar = page.locator('ion-searchbar');
+      const nativeInput = searchbar.locator('input');
+      const clearButton = searchbar.locator('.searchbar-clear-button');
+
+      await searchbar.click();
+      await expect(nativeInput).toBeFocused();
+
+      await clearButton.click();
+      await page.waitForChanges();
+
+      await expect(nativeInput).toBeFocused();
+    });
+  });
+
+  test.describe(title('searchbar: placeholder'), () => {
+    test('should set placeholder', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-searchbar placeholder="My Placeholder"></ion-searchbar>
+      `,
+        config
+      );
+
+      const nativeInput = page.locator('ion-searchbar input');
+      await expect(nativeInput).toHaveAttribute('placeholder', 'My Placeholder');
+    });
+  });
+});
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('searchbar: rendering'), () => {
+    test('should render searchbar', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-searchbar></ion-searchbar>
+      `,
+        config
+      );
+
+      const searchbar = page.locator('ion-searchbar');
+
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar`));
+    });
+
+    test('should render cancel and clear buttons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-searchbar show-cancel-button="always" show-clear-button="always"></ion-searchbar>
+      `,
+        config
+      );
+
+      const searchbar = page.locator('ion-searchbar');
+
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-buttons`));
+    });
+  });
+});
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('searchbar: feature rendering'), () => {
+    test('should render searchbar with color', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-searchbar color="danger" show-cancel-button="always" show-clear-button="always"></ion-searchbar>
+      `,
+        config
+      );
+
+      const searchbar = page.locator('ion-searchbar');
+
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-color`));
+    });
+
+    test('should render disabled searchbar', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-searchbar disabled="true"></ion-searchbar>
+      `,
+        config
+      );
+
+      const searchbar = page.locator('ion-searchbar');
+
+      await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-disabled`));
+    });
+
+    test('should render custom search icon', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-searchbar search-icon="home"></ion-searchbar>
+      `,
+        config
+      );
+
+      const icon = page.locator('ion-searchbar ion-icon.searchbar-search-icon');
+
+      await expect(icon).toHaveScreenshot(screenshot(`searchbar-search-icon`));
+    });
+  });
+});

core/src/components/searchbar/test/events/searchbar.e2e-legacy.ts

@@ -1,83 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('searchbar: events (ionChange)', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-
-  test('should emit when blurred after value change', async ({ page }) => {
-    await page.setContent(`<ion-searchbar></ion-searchbar>`);
-    const nativeInput = page.locator('ion-searchbar input');
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    await nativeInput.type('new value', { delay: 100 });
-    await nativeInput.evaluate((e) => e.blur());
-
-    await ionChange.next();
-    expect(ionChange).toHaveReceivedEventDetail({ value: 'new value', event: { isTrusted: true } });
-    expect(ionChange).toHaveReceivedEventTimes(1);
-  });
-
-  test('should emit when blurred after clicking clear with default value', async ({ page }) => {
-    await page.setContent(`<ion-searchbar show-clear-button="always" value="default value"></ion-searchbar>`);
-    const nativeInput = page.locator('ion-searchbar input');
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    await page.click('.searchbar-clear-button');
-    await page.waitForChanges();
-    await nativeInput.evaluate((e) => e.blur());
-
-    await ionChange.next();
-    expect(ionChange).toHaveReceivedEventDetail({ value: '', event: { isTrusted: true } });
-    expect(ionChange).toHaveReceivedEventTimes(1);
-  });
-
-  test('should emit after clicking cancel with default value', async ({ page }) => {
-    await page.setContent(`<ion-searchbar show-cancel-button="always" value="default value"></ion-searchbar>`);
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    await page.click('.searchbar-cancel-button');
-    await page.waitForChanges();
-
-    await ionChange.next();
-    expect(ionChange).toHaveReceivedEventDetail({ value: '', event: { isTrusted: true } });
-    expect(ionChange).toHaveReceivedEventTimes(1);
-  });
-
-  test('should not emit if the value is set programmatically', async ({ page }) => {
-    await page.setContent(`<ion-searchbar></ion-searchbar>`);
-    const searchbar = page.locator('ion-searchbar');
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    await searchbar.evaluate((el: HTMLIonSearchbarElement) => {
-      el.value = 'new value';
-    });
-
-    await page.waitForChanges();
-    expect(ionChange).toHaveReceivedEventTimes(0);
-
-    // Update the value again to make sure it doesn't emit a second time
-    await searchbar.evaluate((el: HTMLIonSearchbarElement) => {
-      el.value = 'new value 2';
-    });
-
-    await page.waitForChanges();
-    expect(ionChange).toHaveReceivedEventTimes(0);
-  });
-});
-
-test.describe('searchbar: events (ionInput)', () => {
-  test.beforeEach(({ skip }) => {
-    skip.rtl();
-  });
-
-  test('should emit when the user types', async ({ page }) => {
-    await page.setContent(`<ion-searchbar debounce="0"></ion-searchbar>`);
-    const nativeInput = page.locator('ion-searchbar input');
-    const ionInput = await page.spyOnEvent('ionInput');
-
-    await nativeInput.type('new value', { delay: 100 });
-    expect(ionInput).toHaveReceivedEventTimes(9);
-  });
-});

core/src/components/searchbar/test/events/searchbar.e2e.ts

@@ -0,0 +1,83 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('searchbar: events (ionChange)'), () => {
+    test('should emit when blurred after value change', async ({ page }) => {
+      await page.setContent(`<ion-searchbar></ion-searchbar>`, config);
+      const nativeInput = page.locator('ion-searchbar input');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      await nativeInput.type('new value', { delay: 100 });
+      await nativeInput.evaluate((e) => e.blur());
+
+      await ionChange.next();
+      expect(ionChange).toHaveReceivedEventDetail({ value: 'new value', event: { isTrusted: true } });
+      expect(ionChange).toHaveReceivedEventTimes(1);
+    });
+
+    test('should emit when blurred after clicking clear with default value', async ({ page }) => {
+      await page.setContent(`<ion-searchbar show-clear-button="always" value="default value"></ion-searchbar>`, config);
+      const nativeInput = page.locator('ion-searchbar input');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      await page.click('.searchbar-clear-button');
+      await page.waitForChanges();
+      await nativeInput.evaluate((e) => e.blur());
+
+      await ionChange.next();
+      expect(ionChange).toHaveReceivedEventDetail({ value: '', event: { isTrusted: true } });
+      expect(ionChange).toHaveReceivedEventTimes(1);
+    });
+
+    test('should emit after clicking cancel with default value', async ({ page }) => {
+      await page.setContent(
+        `<ion-searchbar show-cancel-button="always" value="default value"></ion-searchbar>`,
+        config
+      );
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      await page.click('.searchbar-cancel-button');
+      await page.waitForChanges();
+
+      await ionChange.next();
+      expect(ionChange).toHaveReceivedEventDetail({ value: '', event: { isTrusted: true } });
+      expect(ionChange).toHaveReceivedEventTimes(1);
+    });
+
+    test('should not emit if the value is set programmatically', async ({ page }) => {
+      await page.setContent(`<ion-searchbar></ion-searchbar>`, config);
+      const searchbar = page.locator('ion-searchbar');
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      await searchbar.evaluate((el: HTMLIonSearchbarElement) => {
+        el.value = 'new value';
+      });
+
+      await page.waitForChanges();
+      expect(ionChange).toHaveReceivedEventTimes(0);
+
+      // Update the value again to make sure it doesn't emit a second time
+      await searchbar.evaluate((el: HTMLIonSearchbarElement) => {
+        el.value = 'new value 2';
+      });
+
+      await page.waitForChanges();
+      expect(ionChange).toHaveReceivedEventTimes(0);
+    });
+  });
+
+  test.describe(title('searchbar: events (ionInput)'), () => {
+    test('should emit when the user types', async ({ page }) => {
+      await page.setContent(`<ion-searchbar debounce="0"></ion-searchbar>`, config);
+      const nativeInput = page.locator('ion-searchbar input');
+      const ionInput = await page.spyOnEvent('ionInput');
+
+      await nativeInput.type('new value', { delay: 100 });
+      expect(ionInput).toHaveReceivedEventTimes(9);
+    });
+  });
+});