diff --git a/core/src/components/select/test/legacy/wrapping/select.e2e.ts b/core/src/components/select/test/legacy/wrapping/select.e2e.ts new file mode 100644 index 0000000000..e530ebb4aa --- /dev/null +++ b/core/src/components/select/test/legacy/wrapping/select.e2e.ts @@ -0,0 +1,46 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('select: wrapping', () => { + test('should not wrap text by default', async ({ page, skip }) => { + skip.rtl(); + + await page.setContent(` + + Should not wrap when no label exists and no class is added to make the text wrap + + `); + + const select = page.locator('ion-select'); + await expect(select).toHaveScreenshot(`select-nowrap-${page.getSnapshotSettings()}.png`); + }); + + test('should wrap text with class', async ({ page, skip }) => { + skip.rtl(); + + await page.setContent(` + + Should wrap when no label exists and really long text exists to make it wrap the text + + `); + + const select = page.locator('ion-select'); + await expect(select).toHaveScreenshot(`select-wrap-${page.getSnapshotSettings()}.png`); + }); + + test('should not wrap label while wrapping text with class', async ({ page, skip }) => { + skip.rtl(); + + await page.setContent(` + + Really long label should not wrap + + Should wrap value only when label exists and really long text exists to make it wrap the text + + + `); + + const select = page.locator('ion-item'); + await expect(select).toHaveScreenshot(`select-wrap-with-label-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/select/test/wrapping/select.e2e.ts b/core/src/components/select/test/wrapping/select.e2e.ts index 1cf0e62823..b0cb52887c 100644 --- a/core/src/components/select/test/wrapping/select.e2e.ts +++ b/core/src/components/select/test/wrapping/select.e2e.ts @@ -31,18 +31,13 @@ test.describe('select: wrapping', () => { test('should not wrap label while wrapping text with class', async ({ page, skip }) => { skip.rtl(); - // TODO(FW-3787) Make label a property of select await page.setContent(` - - Really long label should not wrap - - Should wrap value only when label exists and really long text exists to make it wrap the text - - - + + Should wrap value only when label exists and really long text exists to make it wrap the text + `); - const select = page.locator('ion-item'); + const select = page.locator('ion-select'); await expect(select).toHaveScreenshot(`select-wrap-with-label-${page.getSnapshotSettings()}.png`); }); });