diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts b/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts deleted file mode 100644 index 4cc68a00a3..0000000000 --- a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts +++ /dev/null @@ -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(` - - `); - - 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(` - - `); - - 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(` - - `); - - 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(` - - `); - - 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(` - - `); - - 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(` - - `); - - 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(` - - `); - - 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(` - - `); - - const nativeInput = page.locator('ion-searchbar input'); - await expect(nativeInput).toHaveAttribute('placeholder', 'My Placeholder'); - }); -}); diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e.ts b/core/src/components/searchbar/test/basic/searchbar.e2e.ts new file mode 100644 index 0000000000..486afaa5c8 --- /dev/null +++ b/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( + ` + + `, + 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( + ` + + `, + 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( + ` + + `, + 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( + ` + + `, + 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( + ` + + `, + 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( + ` + + `, + config + ); + + const searchbar = page.locator('ion-searchbar'); + + await expect(searchbar).toHaveScreenshot(screenshot(`searchbar-color`)); + }); + + test('should render disabled searchbar', async ({ page }) => { + await page.setContent( + ` + + `, + 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( + ` + + `, + config + ); + + const icon = page.locator('ion-searchbar ion-icon.searchbar-search-icon'); + + await expect(icon).toHaveScreenshot(screenshot(`searchbar-search-icon`)); + }); + }); +}); diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-buttons-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-color-md-ltr-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-color-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-disabled-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-rtl-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-rtl-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-rtl-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-ios-rtl-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-ios-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-ltr-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-rtl-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-rtl-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-rtl-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-rtl-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-rtl-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-rtl-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-rtl-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-rtl-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-rtl-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-rtl-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-md-rtl-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-md-rtl-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-ios-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Chrome-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Chrome-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Chrome-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Chrome-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Firefox-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Firefox-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Firefox-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Firefox-linux.png diff --git a/core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Safari-linux.png similarity index 100% rename from core/src/components/searchbar/test/basic/searchbar.e2e-legacy.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Safari-linux.png rename to core/src/components/searchbar/test/basic/searchbar.e2e.ts-snapshots/searchbar-search-icon-md-ltr-Mobile-Safari-linux.png diff --git a/core/src/components/searchbar/test/events/searchbar.e2e-legacy.ts b/core/src/components/searchbar/test/events/searchbar.e2e-legacy.ts deleted file mode 100644 index 1079957cbc..0000000000 --- a/core/src/components/searchbar/test/events/searchbar.e2e-legacy.ts +++ /dev/null @@ -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(``); - 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(``); - 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(``); - 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(``); - 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(``); - const nativeInput = page.locator('ion-searchbar input'); - const ionInput = await page.spyOnEvent('ionInput'); - - await nativeInput.type('new value', { delay: 100 }); - expect(ionInput).toHaveReceivedEventTimes(9); - }); -}); diff --git a/core/src/components/searchbar/test/events/searchbar.e2e.ts b/core/src/components/searchbar/test/events/searchbar.e2e.ts new file mode 100644 index 0000000000..28919348ca --- /dev/null +++ b/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(``, 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(``, 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( + ``, + 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(``, 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(``, 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); + }); + }); +});