javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(select): update wrapping tests for v7

Browse Source
This commit is contained in:
Liam DeBeasi
2023-03-24 19:37:27 +00:00
parent 4349f1c2c8
commit 317f4eefec
2 changed files with 50 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
core/src/components/select/test/legacy/wrapping/select.e2e.ts Normal file
View File

@ -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(`
<ion-select value="nowrap">
<ion-select-option value="nowrap">Should not wrap when no label exists and no class is added to make the text wrap</ion-select-option>
</ion-select>
`);
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(`
<ion-select value="wrap" class="ion-text-wrap">
<ion-select-option value="wrap">Should wrap when no label exists and really long text exists to make it wrap the text</ion-select-option>
</ion-select>
`);
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(`
<ion-item>
<ion-label>Really long label should not wrap</ion-label>
<ion-select value="wrap" class="ion-text-wrap">
<ion-select-option value="wrap">Should wrap value only when label exists and really long text exists to make it wrap the text</ion-select-option>
</ion-select>
</ion-item>
`);
const select = page.locator('ion-item');
await expect(select).toHaveScreenshot(`select-wrap-with-label-${page.getSnapshotSettings()}.png`);
});
});

9
core/src/components/select/test/wrapping/select.e2e.ts
View File

@ -31,18 +31,13 @@ test.describe('select: wrapping', () => {
test('should not wrap label while wrapping text with class', async ({ page, skip }) => { test('should not wrap label while wrapping text with class', async ({ page, skip }) => {
skip.rtl(); skip.rtl();
// TODO(FW-3787) Make label a property of select
await page.setContent(` await page.setContent(`
<ion-item> <ion-select value="wrap" label="Really long label should not wrap" class="ion-text-wrap">
<ion-label>Really long label should not wrap</ion-label>
<ion-select value="wrap" aria-label="Should Wrap" class="ion-text-wrap">
<ion-select-option value="wrap">Should wrap value only when label exists and really long text exists to make it wrap the text</ion-select-option> <ion-select-option value="wrap">Should wrap value only when label exists and really long text exists to make it wrap the text</ion-select-option>
</ion-select> </ion-select>
</ion-label>
</ion-item>
`); `);
const select = page.locator('ion-item'); const select = page.locator('ion-select');
await expect(select).toHaveScreenshot(`select-wrap-with-label-${page.getSnapshotSettings()}.png`); await expect(select).toHaveScreenshot(`select-wrap-with-label-${page.getSnapshotSettings()}.png`);
}); });
}); });