add destroy test

Applelo · Feb 14, 2024 · 31f1975 · 31f1975
1 parent a880726
commit 31f1975
Show file tree

Hide file tree

Showing 26 changed files with 346 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
     "eslint": "^8.56.0",
     "playwright": "^1.41.2",
     "typescript": "^5.3.3",
-    "vite": "^5.1.1",
+    "vite": "^5.1.2",
     "vitepress": "1.0.0-rc.42",
     "vitest": "^1.2.2",
     "vue": "^3.4.19",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -70,7 +70,7 @@
     "fast-glob": "^3.3.2",
     "lightningcss": "^1.23.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.1",
+    "vite": "^5.1.2",
     "vite-plugin-dts": "^3.7.2"
   }
 }
diff --git a/packages/core/src/components/drilldown.ts b/packages/core/src/components/drilldown.ts
@@ -392,12 +392,10 @@ export default class Drilldown extends Parent {
     nexts.forEach((next) => {
       next.removeAttribute('role')
       next.removeAttribute('aria-expanded')
-      if (!next.getAttribute('aria-controls')) {
-        const menu = next.parentElement?.querySelector('.c-drilldown-menu')
-        next.removeAttribute('aria-controls')
-        if (menu && menu.id.startsWith('c-'))
-          menu.removeAttribute('id')
-      }
+      next.removeAttribute('aria-controls')
+      const menu = next.parentElement?.querySelector('.c-drilldown-menu')
+      if (menu && menu.id.startsWith('c-id-'))
+        menu.removeAttribute('id')
     })
     const elsBeenDisable = this.el.querySelectorAll('[data-c-hidden]')
     elsBeenDisable.forEach((el) => {

diff --git a/packages/core/src/components/dropdown.ts b/packages/core/src/components/dropdown.ts
@@ -324,7 +324,7 @@ export default class Dropdown extends Parent {
       this.triggerEl.removeAttribute('aria-controls')
     }
 
-    if (this.menuEl && this.menuEl.id.startsWith('c-'))
+    if (this.menuEl && this.menuEl.id.startsWith('c-id-'))
       this.menuEl.removeAttribute('id')
 
     if (this.type === 'menu' && this.menuEl) {

diff --git a/packages/core/test/__snapshots__/collapse.test.ts.snap b/packages/core/test/__snapshots__/collapse.test.ts.snap
@@ -0,0 +1,32 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`collapse > destroy 1`] = `
+"<!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>Collapse</title>
+    <script type="module" crossorigin="" src="/assets/collapse-DFX_hf7s.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <link rel="modulepreload" crossorigin="" href="/assets/animation-CH8HhKvA.js">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-CjakcbCe.css">
+  </head>
+  <body>
+    <div>
+      <button class="c-collapse-trigger" aria-controls="accordion-1">
+        Accordion 2
+      </button>
+      <div class="c-collapse" id="accordion-1" style="transition: height .2s;">
+        <p>
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia facere possimus impedit facilis culpa illo earum deserunt consequuntur minus. Ad et qui labore reprehenderit magnam exercitationem placeat magni nesciunt suscipit.
+        </p>
+      </div>
+    </div>
+    <button class="js-destroy">
+      Destroy
+    </button>
+
+  
+
+</body></html>"
+`;
diff --git a/packages/core/test/__snapshots__/drag.test.ts.snap b/packages/core/test/__snapshots__/drag.test.ts.snap
@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`drag > destroy 1`] = `
+"<!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>Drag</title>
+    <script type="module" crossorigin="" src="/assets/drag-BLets3Yo.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-CjakcbCe.css">
+  </head>
+  <body>
+    <div class="c-drag" style="width: 200px; height: 200px;">
+      <p>Lorem ipsum <a href="#">dolor sit amet</a> consectetur adipisicing elit. Consequatur, id? Dolorum cum est ipsum praesentium mollitia quod saepe nemo doloribus, aliquid dolore laudantium consequuntur alias facere veritatis magni, adipisci fugit.</p>
+      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur, est dolore. Vel ducimus incidunt labore, ipsum necessitatibus omnis qui! Consectetur molestiae ipsam repellendus illum hic veritatis. <a href="#">Consequuntur impedit</a> animi voluptatum.</p>
+    </div>
+    <button class="js-destroy">
+      Destroy
+    </button>
+  
+
+</body></html>"
+`;
diff --git a/packages/core/test/__snapshots__/drilldown.test.ts.snap b/packages/core/test/__snapshots__/drilldown.test.ts.snap
@@ -0,0 +1,105 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`drilldown > destroy 1`] = `
+"<!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>Drilldown</title>
+    <script type="module" crossorigin="" src="/assets/drilldown-Dlc9odJQ.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <link rel="modulepreload" crossorigin="" href="/assets/index.esm-CjV0_wFH.js">
+    <link rel="modulepreload" crossorigin="" href="/assets/accessibility-DQSUv1PD.js">
+    <link rel="modulepreload" crossorigin="" href="/assets/animation-CH8HhKvA.js">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-CjakcbCe.css">
+  </head>
+  <body>
+
+    <nav class="c-drilldown" style="height: 102px;">
+      <ul class="c-drilldown-menu" style="transform: translateX(0%);">
+        <li>
+          <button class="c-drilldown-next">
+            Go to section 1
+          </button>
+          <ul class="c-drilldown-menu" id="section-1">
+            <li>
+              <button class="c-drilldown-back">
+                Go Back
+              </button>
+            </li>
+            <li>
+              <button class="c-drilldown-next">
+                Go to section 1 1
+              </button>
+              <ul class="c-drilldown-menu">
+                <li>
+                  <button class="c-drilldown-back">
+                    Go Back
+                  </button>
+                </li>
+                <li>
+                  Item Section 1 1
+                </li>
+                <li>
+                  Item Section 1 1
+                </li>
+              </ul>
+            </li>
+            <li>
+              Item Section 1
+            </li>
+          </ul>
+        </li>
+        <li>
+          Hello
+        </li>
+        <li>
+          <button class="c-drilldown-next">
+            Go to section 2
+          </button>
+          <ul class="c-drilldown-menu" id="section-2">
+            <li>
+              <button class="c-drilldown-back">
+                Go Back
+              </button>
+            </li>
+            <li>
+              Item Section 2
+            </li>
+            <li>
+              Item Section 2
+            </li>
+          </ul>
+        </li>
+        <li>
+          <button class="c-drilldown-next">
+            Go to section 3
+          </button>
+          <ul class="c-drilldown-menu" id="section-3">
+            <li>
+              <button class="c-drilldown-back">
+                Go Back
+              </button>
+            </li>
+            <li>
+              Item Section 3
+            </li>
+            <li>
+              Item Section 3
+            </li>
+          </ul>
+        </li>
+        <li>
+          Item
+        </li>
+      </ul>
+    </nav>
+    <button class="js-drilldown-reset">Reset</button>
+    <button class="js-destroy">
+      Destroy
+    </button>
+
+  
+
+</body></html>"
+`;
diff --git a/packages/core/test/__snapshots__/dropdown.test.ts.snap b/packages/core/test/__snapshots__/dropdown.test.ts.snap
@@ -0,0 +1,30 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`dropdown > destroy 1`] = `
+"<!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>Dropdown</title>
+    <script type="module" crossorigin="" src="/assets/dropdown-BC_eHRB5.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <link rel="modulepreload" crossorigin="" href="/assets/index.esm-CjV0_wFH.js">
+    <link rel="modulepreload" crossorigin="" href="/assets/accessibility-DQSUv1PD.js">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-CjakcbCe.css">
+  </head>
+  <body>
+    <div class="c-dropdown" style="margin-top: 2rem;">
+      <button class="c-dropdown-trigger" aria-expanded="false" aria-haspopup="true">
+        Basic Dropdown
+      </button>
+      <div class="c-dropdown-container" id="dropdown-container">
+        Hello World
+      </div>
+    </div>
+    <button class="js-destroy">
+      Destroy
+    </button>
+  
+
+</body></html>"
+`;
diff --git a/packages/core/test/__snapshots__/marquee.test.ts.snap b/packages/core/test/__snapshots__/marquee.test.ts.snap
@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`marquee > destroy 1`] = `
+"<!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>
+    <script type="module" crossorigin="" src="/assets/marquee-D13K01fB.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/_parent-CjRBGSFb.js">
+    <link rel="modulepreload" crossorigin="" href="/assets/index.esm-CjV0_wFH.js">
+    <link rel="stylesheet" crossorigin="" href="/assets/marquee-CjakcbCe.css">
+  </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>
+    <button class="js-destroy">
+      Destroy
+    </button>
+  
+
+</body></html>"
+`;
diff --git a/packages/core/test/collapse.test.ts b/packages/core/test/collapse.test.ts
@@ -1,6 +1,7 @@
 import { afterAll, beforeAll, describe, expect, it } from 'vitest'
 import type { Browser } from 'playwright'
 import { chromium } from 'playwright'
+import { destroyComponent } from './helper/destroy'
 
 let browser: Browser
 
@@ -58,4 +59,12 @@ describe('collapse', async () => {
 
     events.forEach(e => expect(result).toContain(e))
   })
+
+  it.concurrent('destroy', async () => {
+    const page = await browser.newPage()
+    await page.goto('http://localhost:3000/collapse.html')
+    const { before, after } = await destroyComponent(page)
+    expect(before).not.toEqual(after)
+    expect(after).toMatchSnapshot()
+  })
 })
diff --git a/packages/core/test/components/collapse.html b/packages/core/test/components/collapse.html
@@ -20,6 +20,9 @@
         </p>
       </div>
     </div>
+    <button class="js-destroy">
+      Destroy
+    </button>
 
     <script type="module" src="./collapse.ts"></script>
   </body>

diff --git a/packages/core/test/components/collapse.ts b/packages/core/test/components/collapse.ts
@@ -3,5 +3,7 @@ import { Collapse } from '@src/index'
 
 const el = document.querySelector<HTMLElement>('.c-collapse')
 if (el) {
-  const _collapse = new Collapse(el)
+  const collapse = new Collapse(el)
+  const destroyBtn = document.querySelector<HTMLButtonElement>('.js-destroy')
+  destroyBtn?.addEventListener('click', () => collapse.destroy())
 }
diff --git a/packages/core/test/components/drag.html b/packages/core/test/components/drag.html
@@ -11,6 +11,9 @@
       <p>Lorem ipsum <a href="#">dolor sit amet</a> consectetur adipisicing elit. Consequatur, id? Dolorum cum est ipsum praesentium mollitia quod saepe nemo doloribus, aliquid dolore laudantium consequuntur alias facere veritatis magni, adipisci fugit.</p>
       <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur, est dolore. Vel ducimus incidunt labore, ipsum necessitatibus omnis qui! Consectetur molestiae ipsam repellendus illum hic veritatis. <a href="#">Consequuntur impedit</a> animi voluptatum.</p>
     </div>
+    <button class="js-destroy">
+      Destroy
+    </button>
     <script type="module" src="./drag.ts"></script>
   </body>
 </html>
diff --git a/packages/core/test/components/drag.ts b/packages/core/test/components/drag.ts
@@ -3,5 +3,7 @@ import { Drag } from '@src/index'
 
 const el = document.querySelector<HTMLElement>('.c-drag')
 if (el) {
-  const _drag = new Drag(el)
+  const drag = new Drag(el)
+  const destroyBtn = document.querySelector<HTMLButtonElement>('.js-destroy')
+  destroyBtn?.addEventListener('click', () => drag.destroy())
 }
diff --git a/packages/core/test/components/drilldown.html b/packages/core/test/components/drilldown.html
@@ -88,6 +88,9 @@
       </ul>
     </nav>
     <button class="js-drilldown-reset">Reset</button>
+    <button class="js-destroy">
+      Destroy
+    </button>
 
     <script type="module" src="./drilldown.ts"></script>
   </body>

diff --git a/packages/core/test/components/drilldown.ts b/packages/core/test/components/drilldown.ts
@@ -5,7 +5,7 @@ const el = document.querySelector<HTMLElement>('.c-drilldown')
 const reset = document.querySelector<HTMLElement>('.js-drilldown-reset')
 if (el) {
   const drilldown = new Drilldown(el)
-  reset?.addEventListener('click', () => {
-    drilldown.reset()
-  })
+  reset?.addEventListener('click', () => drilldown.reset())
+  const destroyBtn = document.querySelector<HTMLButtonElement>('.js-destroy')
+  destroyBtn?.addEventListener('click', () => drilldown.destroy())
 }
diff --git a/packages/core/test/components/dropdown.html b/packages/core/test/components/dropdown.html
@@ -15,6 +15,9 @@
         Hello World
       </div>
     </div>
+    <button class="js-destroy">
+      Destroy
+    </button>
     <script type="module" src="./dropdown.ts"></script>
   </body>
 </html>
diff --git a/packages/core/test/components/dropdown.ts b/packages/core/test/components/dropdown.ts
@@ -3,5 +3,7 @@ import { Dropdown } from '@src/index'
 
 const el = document.querySelector<HTMLElement>('.c-dropdown')
 if (el) {
-  const _dropdown = new Dropdown(el)
+  const dropdown = new Dropdown(el)
+  const destroyBtn = document.querySelector<HTMLButtonElement>('.js-destroy')
+  destroyBtn?.addEventListener('click', () => dropdown.destroy())
 }
diff --git a/packages/core/test/components/marquee.html b/packages/core/test/components/marquee.html
@@ -19,6 +19,9 @@
     <button class="js-marquee-pause">
       Pause
     </button>
+    <button class="js-destroy">
+      Destroy
+    </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
@@ -16,4 +16,7 @@ if (el) {
   pause?.addEventListener('click', () => {
     marquee.pause()
   })
+
+  const destroyBtn = document.querySelector<HTMLButtonElement>('.js-destroy')
+  destroyBtn?.addEventListener('click', () => marquee.destroy())
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,9 @@ @@
             </p>
           </div>
         </div>
+        <button class="js-destroy">
+          Destroy
+        </button>
         <script type="module" src="./collapse.ts"></script>
       </body>
@@ Expand Down @@