test(thumbnail): migrate to playwright (#26022)
Liam DeBeasi
@ -1,10 +0,0 @@
|
|||||||
import { newE2EPage } from '@stencil/core/testing';
|
|
||||||
|
|
||||||
test('thumbnail: basic', async () => {
|
|
||||||
const page = await newE2EPage({
|
|
||||||
url: '/src/components/thumbnail/test/basic',
|
|
||||||
});
|
|
||||||
|
|
||||||
const compare = await page.compareScreenshot();
|
|
||||||
expect(compare).toMatchScreenshot();
|
|
||||||
});
|
|
||||||
@ -23,23 +23,16 @@
|
|||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content id="content">
|
<ion-content id="content">
|
||||||
<ion-thumbnail>
|
<ion-thumbnail id="img">
|
||||||
<img src="/src/components/thumbnail/test/thumbnail.svg" />
|
<img src="/src/components/thumbnail/test/thumbnail.svg" />
|
||||||
</ion-thumbnail>
|
</ion-thumbnail>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item id="ion-item">
|
||||||
<ion-thumbnail slot="start">
|
<ion-thumbnail slot="start">
|
||||||
<img src="/src/components/thumbnail/test/thumbnail.svg" />
|
<img src="/src/components/thumbnail/test/thumbnail.svg" />
|
||||||
</ion-thumbnail>
|
</ion-thumbnail>
|
||||||
<ion-label>Item Thumbnail</ion-label>
|
<ion-label>Item Thumbnail</ion-label>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-thumbnail slot="start">
|
|
||||||
<img src="/src/components/thumbnail/test/thumbnail.svg" />
|
|
||||||
</ion-thumbnail>
|
|
||||||
<ion-label>Wide Thumbnail</ion-label>
|
|
||||||
</ion-item>
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
</ion-app>
|
</ion-app>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
27
core/src/components/thumbnail/test/basic/thumbnail.e2e.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { expect } from '@playwright/test';
|
||||||
|
import { test } from '@utils/test/playwright';
|
||||||
|
|
||||||
|
test.describe('thumbnail: basic', () => {
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await page.goto(`/src/components/thumbnail/test/basic`);
|
||||||
|
});
|
||||||
|
test('should not have visual regressions when rendering <img>', async ({ page, skip }) => {
|
||||||
|
skip.rtl('ion-thumbnail does not have RTL-specific logic');
|
||||||
|
skip.mode('md', 'ion-thumbnail does not have mode-specific logic');
|
||||||
|
|
||||||
|
const referenceEl = page.locator('#img');
|
||||||
|
|
||||||
|
expect(await referenceEl.screenshot()).toMatchSnapshot(`thumbnail-img-diff-${page.getSnapshotSettings()}.png`);
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ion-item has mode and RTL specific logic
|
||||||
|
* for ion-thumbnail which is why we do not skip
|
||||||
|
* RTL and mode tests here.
|
||||||
|
*/
|
||||||
|
test('should not have visual regressions when rendering inside of an <ion-item>', async ({ page }) => {
|
||||||
|
const referenceEl = page.locator('#ion-item');
|
||||||
|
|
||||||
|
expect(await referenceEl.screenshot()).toMatchSnapshot(`thumbnail-ion-item-diff-${page.getSnapshotSettings()}.png`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 11 KiB |
@ -1,10 +0,0 @@
|
|||||||
import { newE2EPage } from '@stencil/core/testing';
|
|
||||||
|
|
||||||
test('thumbnail: standalone', async () => {
|
|
||||||
const page = await newE2EPage({
|
|
||||||
url: '/src/components/thumbnail/test/standalone',
|
|
||||||
});
|
|
||||||
|
|
||||||
const compare = await page.compareScreenshot();
|
|
||||||
expect(compare).toMatchScreenshot();
|
|
||||||
});
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" dir="ltr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Thumbnail - Standalone</title>
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
||||||
/>
|
|
||||||
<link href="../../../../../css/core.css" rel="stylesheet" />
|
|
||||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
|
||||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
|
||||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
|
||||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<ion-thumbnail>
|
|
||||||
<img src="/src/components/thumbnail/test/thumbnail.svg" />
|
|
||||||
</ion-thumbnail>
|
|
||||||
|
|
||||||
<ion-thumbnail class="custom">
|
|
||||||
<img src="/src/components/thumbnail/test/thumbnail.svg" />
|
|
||||||
</ion-thumbnail>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.custom {
|
|
||||||
--border-radius: 50%;
|
|
||||||
--size: 120px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||