Add normal e2e tests

Author: the-illarionov

.ci/.env.example

@@ -1,4 +1,4 @@
 NODE_IMAGE="node:20"
-PLAYWRIGHT_IMAGE="mcr.microsoft.com/playwright:v1.43.1-jammy"
+PLAYWRIGHT_IMAGE="mcr.microsoft.com/playwright:v1.43.0-jammy"
 CLOUDFLARE_ACCOUNT_ID="example"
 CLOUDFLARE_API_TOKEN="example"

.ci/Taskfile.yaml

@@ -53,38 +53,60 @@ tasks:
           -v $(pwd)/..:/app \
           $NODE_IMAGE /bin/bash -c "yarn lint"
 
-  test:
-    desc: runs unit tests of lib
+  build:
+    desc: creates production build of docs
+    cmds:
+      - task lint
+      - |
+        docker run \
+          --rm \
+          -w /app/docs \
+          -v $(pwd)/../docs:/app/docs \
+          -v $(pwd)/../lib:/app/lib \
+          $NODE_IMAGE /bin/bash -c "yarn build"
+
+  up:
     cmds:
       - |
-        docker run --user {{.MY_UID}}:{{.MY_GID}} \
+        docker run \
+          --network="host" \
+          -v $(pwd)/../docs:/app/docs \
+          -v $(pwd)/../lib:/app/lib \
+          -w /app/docs \
+          -d $NODE_IMAGE \
+          yarn preview
+
+  test:unit:
+    desc: runs unit tests in 'lib' directory
+    cmds:
+      - |
+        docker run \
           -v $(pwd)/../lib:/app \
           -w /app \
           $NODE_IMAGE \
           yarn test:unit
 
-  build:prepare:
-    desc: creates production build of docs
+  test:e2e:
+    desc: runs Playwright
     cmds:
       - |
         docker run \
-          --rm \
-          -w /app/docs \
-          -v $(pwd)/../docs:/app/docs \
-          -v $(pwd)/../lib:/app/lib \
-          $NODE_IMAGE /bin/bash -c "yarn build"
+          --network="host" \
+          -v $(pwd)/../docs:/app \
+          -w /app \
+          $PLAYWRIGHT_IMAGE \
+          yarn test:e2e
 
-  build:
+  test:
     cmds:
-      - task lint
-      - task test
-      - task build:prepare
+      - task test:unit
+      - task test:e2e
 
   deploy:pages:
     desc: deploy to CloudFlare pages
     cmds:
       - |
-        docker run --user $(id -u):$(id -g) \
+        docker run \
         --rm \
         -w /app \
         -v $(pwd)/../docs:/app \
@@ -96,4 +118,6 @@ tasks:
     desc: Lints, tests, builds and deploys to CloudFlare pages
     cmds:
       - task build
+      - task up
+      - task test
       - task deploy:pages

.dev/.env.example

@@ -1,2 +1,2 @@
 NODE_IMAGE="node:20"
-PLAYWRIGHT_IMAGE="mcr.microsoft.com/playwright:v1.43.1-jammy"
+PLAYWRIGHT_IMAGE="mcr.microsoft.com/playwright:v1.43.0-jammy"

.github/workflows/test-and-build.yml

@@ -47,14 +47,14 @@ jobs:
             lib/node_modules
           key: node-modules-${{ hashFiles('yarn.lock', 'docs/yarn.lock', 'lib/yarn.lock') }}
 
-      - name: Lint workspace
-        run: task -d .ci lint
+      - name: Build
+        run: task -d .ci build
 
-      - name: Unit tests lib
-        run: task -d .ci test
+      - name: Runs server
+        run: task -d .ci up
 
-      - name: Build docs
-        run: task -d .ci build:prepare
+      - name: Tests
+        run: task -d .ci test
 
       - name: 'Uploads ''frontend/dist'' artifact'
         uses: actions/upload-artifact@v4

docs/e2e.html

@@ -6,44 +6,108 @@
     <title>Document</title>
 
     <style>
-      .start,
-      .end {
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+      }
+      .top-100,
+      .top-150,
+      .top-200,
+      .top-250,
+      .top-300,
+      .top-350,
+      .top-400 {
         position: absolute;
-        width: 10px;
+        width: 100px;
         height: 5px;
-        background: red;
+        background: orange;
+        z-index: 100;
       }
 
-      .foo {
+      .top-100 {
+        top: 100vh;
+      }
+      .top-150 {
+        top: 150vh;
+      }
+      .top-200 {
+        top: 200vh;
+      }
+      .top-250 {
+        top: 250vh;
+      }
+      .top-300 {
+        top: 300vh;
+      }
+      .top-350 {
+        top: 350vh;
+      }
+      .top-400 {
+        top: 400vh;
+      }
+
+      .element {
         position: fixed;
-        z-index: 100;
-        left: 0;
-        top: 0;
-        width: 50px;
-        height: 50px;
+        width: 80px;
+        height: 80px;
         background: yellow;
-
-        animation-name: foo;
         animation-duration: 10s;
         animation-play-state: paused;
         animation-fill-mode: forwards;
+        animation-timing-function: linear;
       }
 
-      @keyframes foo {
-        0% {
-          translate: -30px 0 0;
-        }
+      .basic,
+      .cancel-render-driver,
+      .cancel-render-animation,
+      .changes-bg-on-render {
+        animation-name: basic;
+      }
+
+      @keyframes basic {
         100% {
-          translate: calc(100vw - 50px) 0 0;
+          translate: calc(50vw - 50%) 0 0;
         }
       }
     </style>
   </head>
   <body>
-    <div class="start" style="top: 100vh"></div>
-    <div class="end" style="top: 300vh"></div>
-    <div class="foo"></div>
+    <div class="top-100"></div>
+    <div class="top-150"></div>
+    <div class="top-200"></div>
+    <div class="top-250"></div>
+    <div class="top-250"></div>
+    <div class="top-300"></div>
+    <div class="top-350"></div>
+    <div class="top-400"></div>
+
+    <div class="element basic" style="left: 0; top: 0"></div>
+
+    <div
+      class="element basic"
+      style="left: 0; top: 100px; animation-timing-function: ease"
+    ></div>
+
+    <div
+      class="element basic"
+      style="left: 0; top: 200px; animation-delay: 1s"
+    ></div>
+
+    <div class="element cancel-render-driver" style="left: 0; top: 0"></div>
+
+    <div
+      class="element cancel-render-animation"
+      style="left: 0; top: 100px"
+    ></div>
+
+    <div class="element changes-bg-on-render" style="left: 0; top: 300px"></div>
 
+    <div
+      style="position: fixed; right: 0; bottom: 0; z-index: 200"
+      id="scroll-log"
+    ></div>
     <script type="module" src="/src/e2e.ts"></script>
   </body>
 </html>

docs/e2e/ScreenShot.test.ts

@@ -1,6 +1,32 @@
 import { expect, test } from '@playwright/test'
 
-test('Initial state', async ({ page }) => {
+test('0', async ({ page }) => {
   await page.goto('/e2e.html')
-  await expect(page).toHaveScreenshot()
+  await expect(page).toHaveScreenshot({
+    animations: 'allow',
+  })
 })
+
+test('500', async ({ page }) => {
+  await page.goto('/e2e.html')
+  await page.evaluate(() => window.scrollTo(0, 500))
+  await sleep()
+  await expect(page).toHaveScreenshot({
+    animations: 'allow',
+  })
+})
+
+test('1000', async ({ page }) => {
+  await page.goto('/e2e.html')
+  await page.evaluate(() => window.scrollTo(0, 1000))
+  await sleep()
+  await expect(page).toHaveScreenshot({
+    animations: 'allow',
+  })
+})
+
+function sleep(time = 100) {
+  return new Promise((res) => {
+    setTimeout(res, time)
+  })
+}

docs/e2e/ScreenShot.test.ts-snapshots/0-1-Mobile-Chrome-linux.png

@@ -11,7 +11,7 @@
     <link
       rel="stylesheet"
       type="text/css"
-      href="https://the-illarionov.com/style.css"
+      href="https://the-illarionov.com/assets/main.css"
     />
     <title>The Supersonic Plugin For Scroll Based Animation</title>
     <style>
@@ -26,7 +26,7 @@
     </style>
   </head>
   <body>
-    <h1>1. Basic exampleq</h1>
+    <h1>1. Basic example</h1>
     <div class="iframe-wrapper">
       <iframe
         title="The Supersonic Plugin For SCroll Based Animation: Basic Example"

docs/e2e/ScreenShot.test.ts-snapshots/0-1-chromium-linux.png

@@ -12,7 +12,7 @@
     "deploy": "wrangler pages deploy dist --project-name=the-supersonic-plugin-for-scroll-based-animation --branch=main"
   },
   "devDependencies": {
-    "@playwright/test": "^1.43.1",
+    "@playwright/test": "^1.43.0",
     "@types/node": "^20.12.7",
     "postcss": "^8.4.38",
     "typescript": "^5.2.2",

docs/e2e/ScreenShot.test.ts-snapshots/0-1-firefox-linux.png

@@ -50,18 +50,21 @@ export default defineConfig({
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
+        viewport: { width: 1000, height: 1000 },
       },
     },
     {
       name: 'firefox',
       use: {
         ...devices['Desktop Firefox'],
+        viewport: { width: 1000, height: 1000 },
       },
     },
     {
       name: 'webkit',
       use: {
         ...devices['Desktop Safari'],
+        viewport: { width: 1000, height: 1000 },
       },
     },
 
@@ -72,12 +75,12 @@ export default defineConfig({
         ...devices['Pixel 5'],
       },
     },
-    {
+    /* {
       name: 'Mobile Safari',
       use: {
         ...devices['iPhone 12'],
       },
-    },
+    }, */
 
     /* Test against branded browsers. */
     // {