test(list-header): migrate to Playwright (#26068)
Amanda Johnston
@@ -2,7 +2,7 @@
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>List Header - Spec</title>
|
||||
<title>List Header - Basic</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
@@ -18,53 +18,45 @@
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>List Header - Spec</ion-title>
|
||||
<ion-title>List Header - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-list>
|
||||
<ion-list-header lines="inset">
|
||||
<ion-label>Recent</ion-label>
|
||||
<ion-label>With list + button</ion-label>
|
||||
<ion-button>Clear</ion-button>
|
||||
</ion-list-header>
|
||||
<ion-item lines="none">
|
||||
<ion-label color="primary">
|
||||
<h1>I got you babe</h1>
|
||||
</ion-label>
|
||||
<ion-label color="primary">List item</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-list>
|
||||
<ion-list-header lines="inset">
|
||||
<ion-label>Trending</ion-label>
|
||||
<ion-label>With list, no button</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label color="primary">
|
||||
<h1>harry styles</h1>
|
||||
</ion-label>
|
||||
<ion-label color="primary">List item</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label color="primary">
|
||||
<h1>christmas</h1>
|
||||
</ion-label>
|
||||
<ion-label color="primary">List item</ion-label>
|
||||
</ion-item>
|
||||
<ion-item lines="none">
|
||||
<ion-label color="primary">
|
||||
<h1>falling</h1>
|
||||
</ion-label>
|
||||
<ion-label color="primary">List item</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>New This Week</ion-label>
|
||||
<ion-label>Lines: Default</ion-label>
|
||||
<ion-button>See All</ion-button>
|
||||
</ion-list-header>
|
||||
<ion-list-header lines="full">
|
||||
<ion-label>New This Week</ion-label>
|
||||
<ion-label>Lines: Full</ion-label>
|
||||
<ion-button>See All</ion-button>
|
||||
</ion-list-header>
|
||||
<ion-list-header lines="inset">
|
||||
<ion-label>New This Week</ion-label>
|
||||
<ion-label>Lines: Inset</ion-label>
|
||||
<ion-button>See All</ion-button>
|
||||
</ion-list-header>
|
||||
</ion-list>
|
||||
@@ -0,0 +1,12 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('list-header: basic', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto(`/src/components/list-header/test/basic`);
|
||||
|
||||
await page.setIonViewport();
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`list-header-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 54 KiB |
@@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('list-header: spec', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/list-header/test/spec?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||