add marquee test, remove !important

Applelo · Jan 11, 2024 · 064da76 · 064da76
1 parent ffd08a2
commit 064da76
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 18 deletions.
diff --git a/docs/demo/marquee.md b/docs/demo/marquee.md
@@ -26,8 +26,8 @@
 <style>
 .c-marquee .c-marquee-container {
   list-style: none;
-  padding-left: 0;
-  margin: 0!important;
+  padding: 0;
+  margin: 0;
 }
 .c-marquee li {
   margin: 0!important;

diff --git a/packages/core/src/assets/css/marquee.css b/packages/core/src/assets/css/marquee.css
@@ -24,6 +24,8 @@
 
 .c-marquee-container {
   display: flex;
+  list-style: none;
+  padding: 0;
   margin: 0;
   flex-shrink: 0;
   animation: c-anim-marquee-x var(--c-marquee-duration) infinite linear;
@@ -57,9 +59,8 @@
   flex-shrink: 0;
 }
 
-.c-marquee--a11y:focus-visible .c-marquee-container,
 .c-marquee--a11y.c-marquee--keyboard:focus-within .c-marquee-container {
-  animation: none!important;
+  animation: none;
 }
 
 @media (prefers-reduced-motion: reduce) {

diff --git a/packages/core/test/components/marquee.html b/packages/core/test/components/marquee.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍯</text></svg>">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Marquee</title>
+  </head>
+  <body>
+    <div class="c-marquee" style="width: 200px;">
+      <ul class="c-marquee-container">
+        <li>Marquee Left Direction</li>
+        <li><img width="25" height="25" src="https://vitejs.dev/logo.svg"/></li>
+      </ul>
+    </div>
+    <button class="js-marquee-play">
+      Play
+    </button>
+    <button class="js-marquee-pause">
+      Pause
+    </button>
+    <script type="module" src="./marquee.ts"></script>
+  </body>
+</html>
diff --git a/packages/core/test/components/marquee.ts b/packages/core/test/components/marquee.ts
@@ -0,0 +1,19 @@
+import '@css/marquee.css'
+import { Marquee } from '@src/index'
+
+const el = document.querySelector<HTMLElement>('.c-marquee')
+const play = document.querySelector('.js-marquee-play')
+const pause = document.querySelector('.js-marquee-pause')
+if (el) {
+  const marquee = new Marquee(el, {
+    duration: '1s',
+  })
+
+  play?.addEventListener('click', () => {
+    marquee.play()
+  })
+
+  pause?.addEventListener('click', () => {
+    marquee.pause()
+  })
+}
diff --git a/packages/core/test/drag.test.ts b/packages/core/test/drag.test.ts
@@ -77,18 +77,4 @@ describe.concurrent('drag', async () => {
 
     events.forEach(e => expect(result).toContain(e))
   })
-
-  // mouse drag doesn't work with playwright
-  it.skip('mouse drag', async () => {
-    const page = await browser.newPage()
-    await page.goto('http://localhost/drag.html')
-    const { lastDragEl, previousLastDragElBoundingBox } = await dragBox(page)
-
-    if (!lastDragEl || !previousLastDragElBoundingBox)
-      return
-
-    const currentLastDragElBoundingBox = await lastDragEl.boundingBox()
-    expect(currentLastDragElBoundingBox).not.toBeNull()
-    expect(currentLastDragElBoundingBox).not.toEqual(previousLastDragElBoundingBox)
-  })
 })
diff --git a/packages/core/test/global.ts b/packages/core/test/global.ts
@@ -18,6 +18,7 @@ const config: InlineConfig = {
         collapse: resolve(__dirname, './components/collapse.html'),
         drag: resolve(__dirname, './components/drag.html'),
         drilldown: resolve(__dirname, './components/drilldown.html'),
+        marquee: resolve(__dirname, './components/marquee.html'),
         parent: resolve(__dirname, './components/parent.html'),
       },
     },

diff --git a/packages/core/test/marquee.test.ts b/packages/core/test/marquee.test.ts
@@ -0,0 +1,57 @@
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+import type { Browser } from 'playwright'
+import { chromium } from 'playwright'
+
+let browser: Browser
+
+beforeAll(async () => {
+  browser = await chromium.launch()
+})
+
+afterAll(async () => {
+  browser.close()
+})
+
+describe('marquee', async () => {
+  it.concurrent('events', async () => {
+    const page = await browser.newPage()
+    const events = [
+      'c.marquee.play',
+      'c.marquee.pause',
+      'c.marquee.loop',
+    ]
+    const playEvent = page.waitForEvent('console', msg => msg.text().includes('c.marquee.play'))
+    const pauseEvent = page.waitForEvent('console', msg => msg.text().includes('c.marquee.pause'))
+    const loopEvent = page.waitForEvent('console', msg => msg.text().includes('c.marquee.loop'))
+    await page.goto('http://localhost:3000/marquee.html')
+
+    await page.evaluate(() => {
+      const el = document.querySelector('.c-marquee')
+      if (!el)
+        return
+      [
+        'c.marquee.play',
+        'c.marquee.pause',
+        'c.marquee.loop',
+      ].forEach((e) => {
+        el.addEventListener(e, () => {
+          // eslint-disable-next-line no-console
+          console.log(e)
+        })
+      })
+    })
+
+    const playBtn = page.locator('.js-marquee-play').first()
+    const pauseBtn = page.locator('.js-marquee-pause').first()
+    await pauseBtn.click()
+    await playBtn.click()
+
+    const result = (await Promise.all([
+      playEvent,
+      pauseEvent,
+      loopEvent,
+    ])).map(item => item.text())
+
+    events.forEach(e => expect(result).toContain(e))
+  })
+})