test(list): migrate lines test to playwright (#26171)

ionic-team · Oct 26, 2022 · a7e15ba · a7e15ba
1 parent 3745083
commit a7e15ba
Show file tree

Hide file tree

Showing 58 changed files with 40 additions and 518 deletions.
diff --git a/core/src/components/list/test/basic/e2e.ts b/core/src/components/list/test/basic/e2e.ts
diff --git a/core/src/components/list/test/basic/index.html b/core/src/components/list/test/basic/index.html
@@ -28,19 +28,6 @@
           <ion-item>Super Metroid</ion-item>
           <ion-item>Mega Man X</ion-item>
           <ion-item>The Legend of Zelda</ion-item>
-          <ion-item>Pac-Man</ion-item>
-          <ion-item>Super Mario World</ion-item>
-          <ion-item>Street Fighter II</ion-item>
-          <ion-item>Half Life</ion-item>
-          <ion-item>Portal</ion-item>
-          <ion-item>Final Fantasy VII</ion-item>
-          <ion-item>Star Fox</ion-item>
-          <ion-item>Tetris</ion-item>
-          <ion-item>Donkey Kong III</ion-item>
-          <ion-item>Goldeneye 007</ion-item>
-          <ion-item>Doom</ion-item>
-          <ion-item>Fallout</ion-item>
-          <ion-item>GTA</ion-item>
           <ion-item lines="full">Halo</ion-item>
         </ion-list>
       </ion-content>

diff --git a/core/src/components/list/test/basic/list.e2e.ts b/core/src/components/list/test/basic/list.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('list: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/list/test/basic`);
+
+    const list = page.locator('ion-list');
+
+    expect(await list.screenshot()).toMatchSnapshot(`list-basic-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/...est/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Chrome-linux.png b/...est/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Chrome-linux.png
diff --git a/...st/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Firefox-linux.png b/...st/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Firefox-linux.png
diff --git a/...est/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Safari-linux.png b/...est/basic/list.e2e.ts-snapshots/list-basic-diff-ios-ltr-Mobile-Safari-linux.png
diff --git a/...est/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Chrome-linux.png b/...est/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Chrome-linux.png
diff --git a/...st/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Firefox-linux.png b/...st/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Firefox-linux.png
diff --git a/...est/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Safari-linux.png b/...est/basic/list.e2e.ts-snapshots/list-basic-diff-ios-rtl-Mobile-Safari-linux.png
diff --git a/...test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Chrome-linux.png b/...test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Chrome-linux.png
diff --git a/...est/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Firefox-linux.png b/...est/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Firefox-linux.png
diff --git a/...test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Safari-linux.png b/...test/basic/list.e2e.ts-snapshots/list-basic-diff-md-ltr-Mobile-Safari-linux.png
diff --git a/...test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Chrome-linux.png b/...test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Chrome-linux.png
diff --git a/...est/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Firefox-linux.png b/...est/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Firefox-linux.png
diff --git a/...test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Safari-linux.png b/...test/basic/list.e2e.ts-snapshots/list-basic-diff-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/list/test/icons/e2e.ts b/core/src/components/list/test/icons/e2e.ts
diff --git a/core/src/components/list/test/icons/index.html b/core/src/components/list/test/icons/index.html
diff --git a/core/src/components/list/test/lines/e2e.ts b/core/src/components/list/test/lines/e2e.ts
diff --git a/core/src/components/list/test/lines/index.html b/core/src/components/list/test/lines/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8" />
-    <title>List - Basic</title>
+    <title>List - Lines</title>
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -18,7 +18,7 @@
     <ion-app>
       <ion-header>
         <ion-toolbar>
-          <ion-title>List - Basic</ion-title>
+          <ion-title>List - Lines</ion-title>
         </ion-toolbar>
       </ion-header>
 
@@ -53,80 +53,6 @@
           <ion-item><ion-label>Donkey Kong III</ion-label></ion-item>
           <ion-item><ion-label>Goldeneye 007</ion-label></ion-item>
         </ion-list>
-
-        <ion-list>
-          <ion-list-header>
-            <ion-label> Lines: Default </ion-label>
-          </ion-list-header>
-          <ion-item><ion-label>Fallout</ion-label></ion-item>
-          <ion-item><ion-label>GTA</ion-label></ion-item>
-          <ion-item><ion-label>Halo</ion-label></ion-item>
-          <ion-item><ion-label>Doom</ion-label></ion-item>
-          <ion-item><ion-label>Final Fantasy VII</ion-label></ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header>
-            <ion-label> Wrapper item: default </ion-label>
-          </ion-list-header>
-          <div>
-            <ion-item><ion-label>Pokémon Yellow</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Super Metroid</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Mega Man X</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>The Legend of Zelda</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Pac-Man</ion-label></ion-item>
-          </div>
-        </ion-list>
-
-        <ion-list lines="none">
-          <ion-list-header>
-            <ion-label> Wrapper list lines: none </ion-label>
-          </ion-list-header>
-          <div>
-            <ion-item><ion-label>Pokémon Yellow</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Super Metroid</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Mega Man X</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>The Legend of Zelda</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item><ion-label>Pac-Man</ion-label></ion-item>
-          </div>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header>
-            <ion-label> Wrapper w/ item lines: none </ion-label>
-          </ion-list-header>
-          <div>
-            <ion-item lines="none"><ion-label>Pokémon Yellow</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item lines="none"><ion-label>Super Metroid</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item lines="none"><ion-label>Mega Man X</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item lines="none"><ion-label>The Legend of Zelda</ion-label></ion-item>
-          </div>
-          <div>
-            <ion-item lines="none"><ion-label>Pac-Man</ion-label></ion-item>
-          </div>
-        </ion-list>
       </ion-content>
     </ion-app>
   </body>

diff --git a/core/src/components/list/test/lines/list.e2e.ts b/core/src/components/list/test/lines/list.e2e.ts
@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('list: lines', () => {
+  test('lines="full" should render correctly', async ({ page }) => {
+    await page.goto(`/src/components/list/test/lines`);
+
+    const list = page.locator('ion-list[lines="full"]');
+
+    expect(await list.screenshot()).toMatchSnapshot(`list-lines-full-${page.getSnapshotSettings()}.png`);
+  });
+  test('lines="inset" should render correctly', async ({ page }) => {
+    await page.goto(`/src/components/list/test/lines`);
+
+    const list = page.locator('ion-list[lines="inset"]');
+
+    expect(await list.screenshot()).toMatchSnapshot(`list-lines-inset-${page.getSnapshotSettings()}.png`);
+  });
+  test('lines="none" should render correctly', async ({ page }) => {
+    await page.goto(`/src/components/list/test/lines`);
+
+    const list = page.locator('ion-list[lines="none"]');
+
+    expect(await list.screenshot()).toMatchSnapshot(`list-lines-none-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Chrome-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Chrome-linux.png
diff --git a/...st/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Firefox-linux.png b/...st/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Firefox-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Safari-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-full-ios-ltr-Mobile-Safari-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Chrome-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Chrome-linux.png
diff --git a/...st/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Firefox-linux.png b/...st/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Firefox-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Safari-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-full-ios-rtl-Mobile-Safari-linux.png
diff --git a/...test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Chrome-linux.png b/...test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Chrome-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Firefox-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Firefox-linux.png
diff --git a/...test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Safari-linux.png b/...test/lines/list.e2e.ts-snapshots/list-lines-full-md-ltr-Mobile-Safari-linux.png
diff --git a/...test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Chrome-linux.png b/...test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Chrome-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Firefox-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Firefox-linux.png
diff --git a/...test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Safari-linux.png b/...test/lines/list.e2e.ts-snapshots/list-lines-full-md-rtl-Mobile-Safari-linux.png
diff --git a/...st/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Chrome-linux.png b/...st/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Chrome-linux.png
diff --git a/...t/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Firefox-linux.png b/...t/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Firefox-linux.png
diff --git a/...st/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Safari-linux.png b/...st/lines/list.e2e.ts-snapshots/list-lines-inset-ios-ltr-Mobile-Safari-linux.png
diff --git a/...st/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Chrome-linux.png b/...st/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Chrome-linux.png
diff --git a/...t/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Firefox-linux.png b/...t/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Firefox-linux.png
diff --git a/...st/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Safari-linux.png b/...st/lines/list.e2e.ts-snapshots/list-lines-inset-ios-rtl-Mobile-Safari-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Chrome-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Chrome-linux.png
diff --git a/...st/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Firefox-linux.png b/...st/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Firefox-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Safari-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-inset-md-ltr-Mobile-Safari-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Chrome-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Chrome-linux.png
diff --git a/...st/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Firefox-linux.png b/...st/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Firefox-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Safari-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-inset-md-rtl-Mobile-Safari-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Chrome-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Chrome-linux.png
diff --git a/...st/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Firefox-linux.png b/...st/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Firefox-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Safari-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-none-ios-ltr-Mobile-Safari-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Chrome-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Chrome-linux.png
diff --git a/...st/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Firefox-linux.png b/...st/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Firefox-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Safari-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-none-ios-rtl-Mobile-Safari-linux.png
diff --git a/...test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Chrome-linux.png b/...test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Chrome-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Firefox-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Firefox-linux.png
diff --git a/...test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Safari-linux.png b/...test/lines/list.e2e.ts-snapshots/list-lines-none-md-ltr-Mobile-Safari-linux.png
diff --git a/...test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Chrome-linux.png b/...test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Chrome-linux.png
diff --git a/...est/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Firefox-linux.png b/...est/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Firefox-linux.png
diff --git a/...test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Safari-linux.png b/...test/lines/list.e2e.ts-snapshots/list-lines-none-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/list/test/spec/e2e.ts b/core/src/components/list/test/spec/e2e.ts