@natachah/vanilla-frontend 0.3.0 → 0.4.0

package/docs/pages/components/button.html

@@ -121,7 +121,7 @@
                 <button class="outline" aria-pressed="true">Active</button>
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/button" with ($outline: true);
+                @use "@natachah/vanilla-frontend/scss/components/button" with ($outline: true);
             </doc-code>
         </div>
 
@@ -148,7 +148,7 @@
                 <button class="primary outline" aria-pressed="true">Active</button>
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/button" with ($colors: ('primary'),$outline: true);
+                @use "@natachah/vanilla-frontend/scss/components/button" with ($colors: ('primary'),$outline: true);
             </doc-code>
         </div>
 

package/docs/pages/customs/badge.html

@@ -89,7 +89,7 @@
                 <span class="badge outline">Badge</span>
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/badge" with ($outline: true);
+                @use "@natachah/vanilla-frontend/scss/components/badge" with ($outline: true);
             </doc-code>
         </div>
 
@@ -111,7 +111,7 @@
                 <span class="badge outline primary">Outline</span>
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/badge" with ($colors: ('primary'), $outline: true);
+                @use "@natachah/vanilla-frontend/scss/components/badge" with ($colors: ('primary'), $outline: true);
             </doc-code>
         </div>
 

package/docs/pages/customs/card.html

@@ -151,7 +151,7 @@
                 <div class="card outline">Hello there !</div>
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/card" with ($outline: true);
+                @use "@natachah/vanilla-frontend/scss/components/card" with ($outline: true);
             </doc-code>
         </div>
 
@@ -174,7 +174,7 @@
                 <div class="card outline primary">Hello there !</div>
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
-                @use "@natachah/vanilla-frontend/scss/card" with ($colors: ('primary'),$outline: true);
+                @use "@natachah/vanilla-frontend/scss/components/card" with ($colors: ('primary'),$outline: true);
             </doc-code>
         </div>
 

package/docs/pages/javascript/comfort.html

@@ -38,7 +38,7 @@
             </doc-code>
             <doc-code id="css" data-type="css" role="tabpanel">
                 html[data-theme=dark] {
-                    background: black
+                background: black
                 }
             </doc-code>
             <doc-code id="js" data-type="js" role="tabpanel">
@@ -70,7 +70,7 @@
             </doc-code>
             <doc-code id="css" data-type="css" role="tabpanel">
                 body {
-                    font-size: var(--font-size)
+                font-size: var(--font-size)
                 }
             </doc-code>
             <doc-code id="js" data-type="js" role="tabpanel">
@@ -80,6 +80,18 @@
             </doc-code>
         </div>
 
+        <p>You can also set a custom style by value with some <code>&lt;input&gt;</code> tag with the <code>data-style-custom="NameOfTheCSSProperty"</code> and <code>value</code> attributes.</p>
+        <doc-demo>
+            <label for="demoCustomColor" style="color: var(--demo-label-color, black)">Change my label color !</label>
+            <input id="demoCustomColor" name="demo-change-color" data-style-custom="--demo-label-color" type="color" />
+            <button id="resetConfort">Reset</button>
+        </doc-demo>
+
+        <doc-code data-type="html">
+            <label for="demoCustomColor" style="color: var(--demo-label-color, black)">Change my label color !</label>
+            <input id="demoCustomColor" name="demo-change-color" data-style-custom="--demo-label-color" type="color" />
+        </doc-code>
+
         <h2>Javascript</h2>
         <p>To enable this component you need to import the javascript file and create a new Comfort object.</p>
         <p>You can customize the name of the <b>cookie</b> when initiate the component.</p>

package/docs/src/js/demo.js

@@ -57,7 +57,13 @@ const checkboxAll = document.getElementById('demoCheckboxAll')
 if (checkboxAll) new CheckAll(checkboxAll)
 
 import Comfort from "./../../../js/_comfort"
-new Comfort('demo-confort')
+const demoConfort = new Comfort('demo-confort')
+
+if (document.getElementById('resetConfort')) {
+    document.getElementById('resetConfort').addEventListener('click', () => {
+        demoConfort.reset()
+    })
+}
 
 import Consent from "./../../../js/_consent"
 if (document.getElementById('demoCookies')) {

package/docs/src/js/doc-layout.js

@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
                                 <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
                                 </svg>
-                                0.3.0v
+                                0.4.0v
                             </span>
                         </li>
                         <li>

package/docs/vite.config.mjs

@@ -6,7 +6,7 @@ import { fileURLToPath } from 'node:url'
 export default defineConfig({
     build: {
         target: 'esnext', //browsers can handle the latest ES features
-        cssCodeSplit: false,
+        cssCodeSplit: true,
         rollupOptions: {
             input: Object.fromEntries(
                 glob.sync(['./*.html', './pages/**/*.html']).map(file => [

package/js/_comfort.js

@@ -30,6 +30,10 @@ export default class Comfort extends Cookie {
             style: document.querySelectorAll('body [data-style]'),
         }
 
+        this._inputs = {
+            style: document.querySelectorAll('body [data-style-custom]'),
+        }
+
         // Init the cookie
         this.#init()
 
@@ -54,6 +58,9 @@ export default class Comfort extends Cookie {
         // CLICK on style buttons
         this._buttons.style.forEach((button) => button.addEventListener('click', () => this.setStyle(button.getAttribute('data-style'), button.value)))
 
+        // Change a value input
+        this._inputs.style.forEach((input) => input.addEventListener('change', () => this.setStyle(input.getAttribute('data-style-custom'), input.value)))
+
     }
 
     /**
@@ -99,6 +106,12 @@ export default class Comfort extends Cookie {
             button.setAttribute('aria-pressed', style.hasOwnProperty(attribute) && style[attribute] === button.value)
         })
 
+        // Set the value attribute on the <input>
+        this._inputs.style.forEach(input => {
+            const attribute = input.getAttribute('data-style-custom')
+            input.setAttribute('value', style.hasOwnProperty(attribute) ? style[attribute] : null)
+        })
+
     }
 
     /**
@@ -168,6 +181,10 @@ export default class Comfort extends Cookie {
             button.removeAttribute('aria-pressed')
         })
 
+        this._inputs.style.forEach(input => {
+            input.removeAttribute('value')
+        })
+
     }
 
 }

package/js/tests/autofill.test.js

@@ -133,6 +133,10 @@ describe('#Init()', () => {
 
 describe('#ByOption()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Emmit the autofill:changed event', () => {
         const eventSpy = vi.spyOn(fakeAutofillSelect, 'emmitEvent')
         expect(eventSpy).not.toHaveBeenCalled()
@@ -144,6 +148,10 @@ describe('#ByOption()', () => {
 
 describe('#ByFile()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Emmit the autofill:changed event', () => {
         const fakeImage = new File(["my testing file"], "my-file.jpg", {
             type: "image/jpeg",

package/js/tests/comfort.test.js

@@ -8,6 +8,7 @@
  * - Constructor: Return the correct properties
  * - #Init: Emit the setTheme() method when click on this._buttons.theme
  * - #Init: Emit the setStyle() method when click on this._buttons.style 
+ * - #Init: Emit the setStyle() method when change on this._inputs.style 
  * - SetTheme(): Passing the correct parameters 
  * - SetTheme(): Save the property in the cookie
  * - SetTheme(): Emmit the set() method
@@ -41,7 +42,8 @@ beforeAll(() => {
     document.body.innerHTML =
         '<button id="fakeDarkButton" data-theme="theme" value="dark"></button>' +
         '<button id="fakeLightButton" data-theme="theme" value="light"></button>' +
-        '<button id="fakeFontButton" data-style="font-size" value="1rem"></button>'
+        '<button id="fakeFontButton" data-style="font-size" value="1rem"></button>' +
+        '<input id="fakeColorInput" data-style-custom="color" value=""/>'
 
     fakeComfort = new Comfort()
 
@@ -59,12 +61,17 @@ describe('Structure of the class', () => {
         expect(fakeComfort._buttons).toBeTypeOf('object')
         expect(fakeComfort._buttons.theme).toStrictEqual(document.querySelectorAll('[data-theme]'))
         expect(fakeComfort._buttons.style).toStrictEqual(document.querySelectorAll('[data-style]'))
+        expect(fakeComfort._inputs.style).toStrictEqual(document.querySelectorAll('[data-style-custom]'))
     })
 
 })
 
 describe('#Init()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Emit the setTheme() method when click on this._buttons.theme', () => {
         const methodSpy = vi.spyOn(fakeComfort, 'setTheme')
         fireEvent(document.getElementById('fakeDarkButton'), new MouseEvent('click'))
@@ -77,6 +84,14 @@ describe('#Init()', () => {
         expect(methodSpy).toHaveBeenCalled()
     })
 
+    test('Emit the setStyle() method when change on this._inputs.style ', () => {
+        const methodSpy = vi.spyOn(fakeComfort, 'setStyle')
+        const inputElement = document.getElementById('fakeColorInput')
+        inputElement.value = '#ff0000'
+        fireEvent.change(inputElement)
+        expect(methodSpy).toHaveBeenCalled()
+    })
+
     afterAll(() => {
         fakeComfort.reset()
     })
@@ -85,6 +100,10 @@ describe('#Init()', () => {
 
 describe('SetTheme()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Passing the correct parameters', () => {
         expect(() => fakeComfort.setTheme()).toThrowError(ErrorMessage.typeOf('value', 'string'))
     })
@@ -116,6 +135,10 @@ describe('SetTheme()', () => {
 
 describe('SetStyle()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Passing the correct parameters', () => {
         expect(() => fakeComfort.setStyle()).toThrowError(ErrorMessage.typeOf('name', 'string'))
         expect(() => fakeComfort.setStyle('font-size')).toThrowError(ErrorMessage.typeOf('value', 'string'))
@@ -178,7 +201,7 @@ describe('Reset()', () => {
 })
 
 
-describe('#ToggleTheme()', () => {
+describe('#ToggleTheme() & #ToggleStyle()', () => {
 
     afterEach(() => {
         fakeComfort.reset()
@@ -216,4 +239,11 @@ describe('#ToggleTheme()', () => {
         expect(button.getAttribute('aria-pressed')).toBe('true')
     })
 
+    test('Add the [value] attribute on the <input>', () => {
+        const input = document.getElementById('fakeColorInput')
+        expect(input.hasAttribute('value')).toBeFalsy()
+        fakeComfort.setStyle('color', '#00ff00')
+        expect(input.getAttribute('value')).toBe('#00ff00')
+    })
+
 })

package/js/tests/consent.test.js

@@ -60,6 +60,10 @@ describe('Structure of the class', () => {
 
 describe('#Init()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Make sure that the dialog is open if the cookie doesn\'t exist', () => {
         expect(fakeCookie.value).toStrictEqual({})
         expect(fakeCookie._dialog.open).toBeTruthy()

package/js/tests/dialog.test.js

@@ -76,6 +76,7 @@ describe('Open()', () => {
 
     afterEach(() => {
         fakeDialog._element.removeAttribute('open')
+        vi.restoreAllMocks()
     })
 
     test('Add the [open] attribute on the <dialog>', () => {
@@ -98,6 +99,7 @@ describe('Close()', () => {
 
     beforeEach(() => {
         fakeDialog._element.setAttribute('open', true)
+        vi.restoreAllMocks()
     })
 
     test('Remove the [open] attribute on the <dialog>', () => {
@@ -120,11 +122,12 @@ describe('Submit()', () => {
 
     beforeEach(() => {
         fakeFormModal._element.setAttribute('open', true)
+        vi.restoreAllMocks()
     })
 
     test('By default will exectute submit event', () => {
         fakeFormModal._form.setAttribute('method', 'POST')
-        const submitSpy = vi.spyOn(fakeFormModal._form, 'submit')
+        const submitSpy = vi.spyOn(HTMLFormElement.prototype, 'submit')
         expect(submitSpy).not.toHaveBeenCalled()
         fakeFormModal.submit()
         expect(submitSpy).toHaveBeenCalled()

package/js/tests/dropdown.test.js

@@ -84,6 +84,10 @@ describe('#Init()', () => {
 
 describe('#Toggle()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Toggle the [aria-pressed] and [aria-expanded] attribute on the <button>', () => {
         expect(fakeDropdown._button.getAttribute('aria-pressed')).toBe('false')
         expect(fakeDropdown._button.getAttribute('aria-expanded')).toBe('false')

package/js/tests/form-helper.test.js

@@ -103,7 +103,7 @@ describe('ToggleAttributes', () => {
         expect(fieldA.value).toBe('aaa')
         expect(fieldB.value).toBe('bbb')
         FormHelper.toggleAttributes(fakeFields, false, { reset: ['fakeFieldA'] })
-        expect(fieldA.value).toBe('null')
+        expect(fieldA.value).toBe('')
         expect(fieldB.value).toBe('bbb')
     })
 
@@ -144,7 +144,7 @@ describe('ToggleAttributes', () => {
         expect(fieldB.disabled).toBeFalsy()
         expect(fieldB.required).toBeFalsy()
         FormHelper.toggleAttributes(fakeFields, false, { reset: true, disabled: true, required: true, unchanged: ['fakeFieldB'] })
-        expect(fieldA.value).toBe('null')
+        expect(fieldA.value).toBe('')
         expect(fieldA.disabled).toBeTruthy()
         expect(fieldA.required).toBeFalsy()
         expect(fieldB.value).toBe('bbb')

package/js/tests/scroll.test.js

@@ -99,6 +99,10 @@ describe('Structure of the class', () => {
 
 describe('#Init()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Emit the scrollTop() method when click on this._buttons.top', () => {
         const methodSpy = vi.spyOn(fakeDivScroll, 'scrollTop')
         fireEvent(document.querySelector('[data-scroll-top="fakeDiv"]'), new MouseEvent('click'))
@@ -121,6 +125,10 @@ describe('#Init()', () => {
 
 describe('GoTo()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Passing the correct parameters ', () => {
         expect(() => fakeDivScroll.goTo()).toThrowError(ErrorMessage.typeOf('distance', 'number'))
         expect(() => fakeDivScroll.goTo('make-error')).toThrowError(ErrorMessage.typeOf('distance', 'number'))
@@ -136,6 +144,10 @@ describe('GoTo()', () => {
 
 describe('ScrollTop()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Emit a goTo() method with parameter as 0', () => {
         const methodSpy = vi.spyOn(fakeDivScroll, 'goTo')
         fakeDivScroll.scrollTop()
@@ -158,24 +170,26 @@ describe('#Scroll()', () => {
 
     test('Toggle the [hidden] attribute on the [data-scroll-top] button', () => {
         const topButton = document.querySelector('[data-scroll-top="fakeDiv"]')
+        const scrollTopSpy = vi.spyOn(Element.prototype, 'scrollTop', 'get').mockReturnValue(300)
         expect(topButton.hidden).toBeTruthy()
-        Object.defineProperty(fakeDiv, 'scrollTop', { configurable: true, value: 300 })
         fireEvent.scroll(fakeDiv)
         expect(topButton.hidden).toBeFalsy()
-        Object.defineProperty(fakeDiv, 'scrollTop', { configurable: true, value: 0 })
+        scrollTopSpy.mockReturnValue(0)
         fireEvent.scroll(fakeDiv)
         expect(topButton.hidden).toBeTruthy()
+        scrollTopSpy.mockRestore()
     })
 
     test('Toggle the [hidden] attribute on the [data-scroll-bottom] button', () => {
         const topButton = document.querySelector('[data-scroll-bottom="fakeDiv"]')
+        const scrollTopSpy = vi.spyOn(Element.prototype, 'scrollTop', 'get').mockReturnValue(600)
         expect(topButton.hidden).toBeFalsy()
-        Object.defineProperty(fakeDiv, 'scrollTop', { configurable: true, value: 600 })
         fireEvent.scroll(fakeDiv)
         expect(topButton.hidden).toBeTruthy()
-        Object.defineProperty(fakeDiv, 'scrollTop', { configurable: true, value: 0 })
+        scrollTopSpy.mockReturnValue(0)
         fireEvent.scroll(fakeDiv)
         expect(topButton.hidden).toBeFalsy()
+        scrollTopSpy.mockRestore()
     })
 
 })
@@ -185,19 +199,20 @@ describe('#Spy()', () => {
     test('Toggle the [aria-current] attribute on the <a> ', () => {
         const one = document.querySelector('a[href="#one"]')
         const two = document.querySelector('a[href="#two"]')
+        const scrollTopSpy = vi.spyOn(Element.prototype, 'scrollTop', 'get').mockReturnValue(200)
         expect(fakeDivScroll._spy.current).toBe(2)
         expect(one.hasAttribute('aria-current')).toBeFalsy() //200
         expect(two.hasAttribute('aria-current')).toBeFalsy() //400
-        Object.defineProperty(fakeDiv, 'scrollTop', { configurable: true, value: 200 })
         fireEvent.scroll(fakeDiv)
         expect(fakeDivScroll._spy.current).toBe(0)
         expect(one.hasAttribute('aria-current')).toBeTruthy()
         expect(two.hasAttribute('aria-current')).toBeFalsy()
-        Object.defineProperty(fakeDiv, 'scrollTop', { configurable: true, value: 400 })
+        scrollTopSpy.mockReturnValue(400)
         fireEvent.scroll(fakeDiv)
         expect(fakeDivScroll._spy.current).toBe(1)
         expect(one.hasAttribute('aria-current')).toBeFalsy()
         expect(two.hasAttribute('aria-current')).toBeTruthy()
+        scrollTopSpy.mockRestore()
     })
 
 })

package/js/tests/slider.test.js

@@ -23,7 +23,7 @@
 
  */
 
-import { describe, test, expect, beforeAll, vi, afterAll } from "vitest"
+import { describe, test, expect, beforeAll, beforeEach, vi, afterAll } from "vitest"
 import { fireEvent } from "@testing-library/dom"
 import Slider from "../_slider"
 import ErrorMessage from "../utilities/_error"
@@ -79,7 +79,7 @@ beforeAll(() => {
     Object.defineProperty(fakeSlider._slides[2], 'offsetLeft', { configurable: true, value: 200 })
 
     let val = 0
-    fakeSliderLoop._element.children.forEach(child => {
+    Array.from(fakeSliderLoop._element.children).forEach(child => {
         Object.defineProperty(child, 'offsetLeft', { configurable: true, value: val })
         val = val + 100
     })
@@ -125,6 +125,10 @@ describe('Structure of the class', () => {
 
 describe('#Init()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Loop will clone the first and last slide', () => {
         expect(fakeSliderLoop._slides.length).toBe(3)
         expect(fakeSliderLoop._element.children.length).toBe(5)
@@ -151,6 +155,7 @@ describe('#Init()', () => {
     test('Click on <button> with [data-slider-prev] emmit the prev() method', () => {
         const fakePrev = fakeSlider._buttons.prev
         const methodSpy = vi.spyOn(fakeSlider, 'prev')
+        fakeSlider.goTo(1)
         fireEvent(fakePrev, new MouseEvent('click'))
         expect(methodSpy).toHaveBeenCalled()
     })
@@ -166,6 +171,10 @@ describe('#Init()', () => {
 
 describe('GoTo()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Passing the correct parameters', () => {
         expect(() => fakeSlider.goTo()).toThrowError(ErrorMessage.typeOf('index', 'number'))
     })
@@ -222,6 +231,10 @@ describe('GoTo()', () => {
 
 describe('Prev()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     afterAll(() => fakeSlider.goTo(0))
 
     test('Emit a goTo() method with correct index', () => {
@@ -242,6 +255,10 @@ describe('Prev()', () => {
 
 describe('Next()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     afterAll(() => fakeSlider.goTo(0))
 
     test('Emit a goTo() method and index is X', () => {

package/js/tests/sortable.test.js

@@ -86,6 +86,10 @@ describe('Mousedown & Mouseup', () => {
 
 describe('Drag()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Add the [aria-grabbed] attribute', () => {
         expect(fakeListItem.hasAttribute('aria-grabbed')).toBeFalsy()
         fireEvent(fakeListItem, new MouseEvent('mousedown'))
@@ -108,6 +112,10 @@ describe('Drag()', () => {
 
 describe('Drop()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Remove the [aria-grabbed] attribute', () => {
         expect(fakeListItem.hasAttribute('aria-grabbed')).toBeTruthy()
         fireEvent(fakeListItem, new MouseEvent('dragend'))

package/js/tests/tabpanel.test.js

@@ -72,6 +72,10 @@ describe('Structure of the class', () => {
 
 describe('#Change()', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Toggle the [aria-selected] attribute on the tab', () => {
         expect(fakeTabA.getAttribute('aria-selected')).toBe('true')
         expect(fakeTabB.getAttribute('aria-selected')).toBe('false')

package/js/tests/toggle.test.js

@@ -150,6 +150,10 @@ describe('#Toggle()', () => {
 
     describe('Select', () => {
 
+        beforeEach(() => {
+            vi.restoreAllMocks()
+        })
+
         test('Toggle the [aria-expanded] attribute on the <select>', () => {
             expect(fakeToggleSelect._element.getAttribute('aria-expanded')).toBe('false')
             fireEvent.change(fakeToggleSelect._element, { target: { value: 'A' } })

package/js/tests/trap.test.js

@@ -87,6 +87,10 @@ describe('FocusOnFirst()', () => {
 
 describe('Toggle the trap', () => {
 
+    beforeEach(() => {
+        vi.restoreAllMocks()
+    })
+
     test('Activate the trap', () => {
         const eventSpy = vi.spyOn(document, 'addEventListener')
 

package/js/tests/tree.test.js

@@ -20,7 +20,7 @@ import { fireEvent } from "@testing-library/dom"
 import Tree from "../_tree"
 
 
-let fakeListTree, fakeGridTree, fakeLi, fakeRow, customClick
+let fakeListTree, fakeGridTree, fakeLi, fakeRow
 
 /**
  * Before all tests
@@ -53,9 +53,6 @@ beforeAll(() => {
     fakeLi = fakeListTree._element.querySelector('li [aria-expanded]')
     fakeRow = fakeGridTree._element.querySelector('tr[aria-level="1"][aria-expanded]')
 
-    customClick = new MouseEvent('click')
-    Object.defineProperty(customClick, 'target', { value: fakeRow.querySelector('[data-handle=tree]') }) // Define the click event with custom target
-
 })
 
 describe('Structure of the class', () => {
@@ -110,23 +107,26 @@ describe('#Toggle()', () => {
     describe('Grid', () => {
 
         test('Update the [aria-expanded] attribute', () => {
+            const handle = fakeRow.querySelector('[data-handle=tree]')
             expect(fakeRow.getAttribute('aria-expanded')).toBe('false')
-            fireEvent(fakeRow, customClick)
+            fireEvent(handle, new MouseEvent('click', { bubbles: true }))
             expect(fakeRow.getAttribute('aria-expanded')).toBe('true')
-            fireEvent(fakeRow, customClick)
+            fireEvent(handle, new MouseEvent('click', { bubbles: true }))
             expect(fakeRow.getAttribute('aria-expanded')).toBe('false')
         })
 
         test('Update the [hidden] attribute on children', () => {
+            const handle = fakeRow.querySelector('[data-handle=tree]')
             const child = document.getElementById('lvl2')
             expect(child.hidden).toBeTruthy()
-            fireEvent(fakeRow, customClick)
+            fireEvent(handle, new MouseEvent('click', { bubbles: true }))
             expect(child.hidden).toBeFalsy()
-            fireEvent(fakeRow, customClick)
+            fireEvent(handle, new MouseEvent('click', { bubbles: true }))
             expect(child.hidden).toBeTruthy()
         })
 
         test('Collapse the sub-children', () => {
+            const handle = fakeRow.querySelector('[data-handle=tree]')
             const lvl2 = document.getElementById('lvl2')
             const lvl3 = document.getElementById('lvl3')
 
@@ -136,7 +136,7 @@ describe('#Toggle()', () => {
             const customClickLvl3 = new MouseEvent('click')
             Object.defineProperty(customClickLvl3, 'target', { value: lvl3.querySelector('[data-handle=tree]') }) // Define the click event with custom target
 
-            fireEvent(fakeRow, customClick)
+            fireEvent(handle, new MouseEvent('click', { bubbles: true }))
             fireEvent(lvl2, customClickLvl2)
             fireEvent(lvl3, customClickLvl3)
 
@@ -145,7 +145,7 @@ describe('#Toggle()', () => {
             expect(lvl2.getAttribute('aria-expanded')).toBe('true')
             expect(lvl3.hidden).toBeFalsy()
 
-            fireEvent(fakeRow, customClick)
+            fireEvent(handle, new MouseEvent('click', { bubbles: true }))
 
             expect(fakeRow.getAttribute('aria-expanded')).toBe('false')
             expect(lvl2.hidden).toBeTruthy()

package/package.json

@@ -1,6 +1,7 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.3.0",
+    "version": "0.4.0",
+    "type": "module",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",
@@ -14,7 +15,6 @@
         "email": "info@natachaherth.ch"
     },
     "license": "MIT",
-    "readme": "README.md",
     "scripts": {
         "test": "vitest --coverage",
         "code:build": "node esbuild.mjs",
@@ -28,16 +28,16 @@
     },
     "devDependencies": {
         "@testing-library/dom": "^9.3.4",
-        "@vitest/coverage-v8": "^1.3.1",
+        "@vitest/coverage-v8": "^4.0.17",
         "autoprefixer": "^10.4.19",
-        "esbuild": "0.21.5",
+        "esbuild": "^0.27.2",
         "esbuild-sass-plugin": "^3.3.1",
         "fast-glob": "^3.3.2",
-        "happy-dom": "^13.6.2",
+        "happy-dom": "^20.3.3",
         "postcss": "^8.4.38",
         "sass": "^1.77.5",
         "shiki": "^1.7.0",
-        "vite": "^5.2.0",
-        "vitest": "^1.3.1"
+        "vite": "^7.3.1",
+        "vitest": "^4.0.17"
     }
 }

package/vitest.config.js

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite'
 
 export default defineConfig({
     test: {
-        environment: 'happy-dom'
+        environment: 'happy-dom',
+        globals: true,
     }
 })