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

Merge remote-tracking branch 'origin/main' into chore/sync-with-main-5-3

Browse Source
This commit is contained in:
Sean Perkins
2023-05-03 13:38:03 -04:00
parent 0a0345a84a 27a9aaaedc
commit 10d2c75f8d
2722 changed files with 42605 additions and 10074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
core/src/components/card/test/basic/card.e2e.ts
View File

@ -1,10 +1,11 @@
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
import { configs, test } from '@utils/test/playwright';
test.describe('card: basic', () => {
test.describe('card: rendering', () => {
configs().forEach(({ title, screenshot, config }) => {
test.describe(title('card: rendering'), () => {
test('should not have visual regressions with basic card', async ({ page }) => {
await page.setContent(`
await page.setContent(
`
<ion-card>
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
@ -16,20 +17,20 @@ test.describe('card: basic', () => {
in the woods. Wash your spirit clean.
</ion-card-content>
</ion-card>
`);
`,
config
);
const card = page.locator('ion-card');
await expect(card).toHaveScreenshot(`card-diff-${page.getSnapshotSettings()}.png`);
await expect(card).toHaveScreenshot(screenshot(`card-diff`));
});
});
test.describe('card: feature rendering', () => {
test.beforeEach(({ skip }) => {
skip.rtl();
});
});
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('card: feature rendering'), () => {
test('should not have visual regressions with button cards', async ({ page }) => {
await page.setContent(`
await page.setContent(
`
<ion-card button="true">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
@ -40,35 +41,17 @@ test.describe('card: basic', () => {
in the woods. Wash your spirit clean.
</ion-card-content>
</ion-card>
`);
`,
config
);
const card = page.locator('ion-card');
await expect(card).toHaveScreenshot(`card-button-${page.getSnapshotSettings()}.png`);
});
test('should not have visual regressions with translucent cards', async ({ page, skip }) => {
skip.mode('md', 'Translucent effect is only available in iOS mode.');
await page.setContent(`
<ion-card>
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
<img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg" />
</div>
<ion-card-header translucent="true">
<ion-card-title> Title </ion-card-title>
<ion-card-subtitle> Subtitle </ion-card-subtitle>
</ion-card-header>
<ion-card-content style="min-height: 20px"></ion-card-content>
</ion-card>
`);
const card = page.locator('ion-card');
await expect(card).toHaveScreenshot(`card-translucent-${page.getSnapshotSettings()}.png`);
await expect(card).toHaveScreenshot(screenshot(`card-button`));
});
test('should not have visual regressions with disabled card', async ({ page }) => {
await page.setContent(`
await page.setContent(
`
<ion-card disabled="true">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
@ -80,13 +63,16 @@ test.describe('card: basic', () => {
in the woods. Wash your spirit clean.
</ion-card-content>
</ion-card>
`);
`,
config
);
const card = page.locator('ion-card');
await expect(card).toHaveScreenshot(`card-disabled-${page.getSnapshotSettings()}.png`);
await expect(card).toHaveScreenshot(screenshot(`card-disabled`));
});
test('should not have visual regressions with color', async ({ page }) => {
await page.setContent(`
await page.setContent(
`
<ion-card color="danger">
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
@ -98,13 +84,16 @@ test.describe('card: basic', () => {
in the woods. Wash your spirit clean.
</ion-card-content>
</ion-card>
`);
`,
config
);
const card = page.locator('ion-card');
await expect(card).toHaveScreenshot(`card-color-${page.getSnapshotSettings()}.png`);
await expect(card).toHaveScreenshot(screenshot(`card-color`));
});
test('headings should have correct size in card', async ({ page }) => {
await page.setContent(`
await page.setContent(
`
<ion-card>
<ion-card-content>
<h1>Heading 1</h1>
@ -116,13 +105,16 @@ test.describe('card: basic', () => {
<p>Paragraph</p>
</ion-card-content>
</ion-card>
`);
`,
config
);
const card = page.locator('ion-card');
await expect(card).toHaveScreenshot(`card-headings-${page.getSnapshotSettings()}.png`);
await expect(card).toHaveScreenshot(screenshot(`card-headings`));
});
test('should render even without header or content elements', async ({ page }) => {
await page.setContent(`
await page.setContent(
`
<ion-card>
<ion-list lines="none">
<ion-item href="#" class="ion-activated">
@ -150,10 +142,38 @@ test.describe('card: basic', () => {
</ion-item>
</ion-list>
</ion-card>
`);
`,
config
);
const card = page.locator('ion-card');
await expect(card).toHaveScreenshot(`card-no-content-or-header-${page.getSnapshotSettings()}.png`);
await expect(card).toHaveScreenshot(screenshot(`card-no-content-or-header`));
});
});
});
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('card: translucent'), () => {
test('should not have visual regressions with translucent cards', async ({ page }) => {
await page.setContent(
`
<ion-card>
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
<img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg" />
</div>
<ion-card-header translucent="true">
<ion-card-title> Title </ion-card-title>
<ion-card-subtitle> Subtitle </ion-card-subtitle>
</ion-card-header>
<ion-card-content style="min-height: 20px"></ion-card-content>
</ion-card>
`,
config
);
const card = page.locator('ion-card');
await expect(card).toHaveScreenshot(screenshot(`card-translucent`));
});
});
});