@natachah/vanilla-frontend 0.0.2

package/js/tests/sidebar.test.js

@@ -0,0 +1,99 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _sidebar.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * - Constructor: Passing the correct parameters 
+ * - Constructor: Return the correct properties
+ * - #Init: On click on the button toggle the sidebar
+ * - #Init: On click on the backdrop, close the sidebar
+ */
+
+import { describe, test, expect, beforeAll } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import Sidebar from "../_sidebar"
+import ErrorMessage from "../utilities/_error"
+
+let fakeSidebar
+
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+
+    document.body.innerHTML =
+        '<div id="backdrop"></div>' +
+        '<button aria-expanded="false" aria-pressed="false" aria-controls="sidebar"></button>' +
+        '<aside id="sidebar" tabindex="0" hidden></aside>'
+
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1200 })
+
+    fakeSidebar = new Sidebar(document.getElementById('sidebar'))
+
+})
+
+describe('Structure of the class', () => {
+
+    test('Constructor: Passing the correct parameters', () => {
+        expect(() => new Sidebar(document.getElementById('sidebar'), { breakpoint: 'make-error' })).toThrowError(ErrorMessage.typeOf('options.breakpoint', 'number'))
+    })
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeSidebar._buttons).toStrictEqual(document.querySelectorAll('button[aria-controls="sidebar"]'))
+        expect(fakeSidebar._backdrop).toStrictEqual(document.getElementById('backdrop'))
+        expect(fakeSidebar._isOpen).toBeTruthy()
+    })
+
+})
+
+describe('#Init(', () => {
+
+    test('On click on the button toggle the sidebar', () => {
+
+        const button = fakeSidebar._buttons[0]
+
+        expect(fakeSidebar._isOpen).toBeTruthy()
+        expect(fakeSidebar._element.hasAttribute('hidden')).toBeFalsy()
+        expect(button.getAttribute('aria-pressed')).toBe('true')
+        expect(button.getAttribute('aria-expanded')).toBe('true')
+
+        fireEvent(button, new MouseEvent('click'))
+
+        expect(fakeSidebar._isOpen).toBeFalsy()
+        expect(fakeSidebar._element.hasAttribute('hidden')).toBeTruthy()
+        expect(button.getAttribute('aria-pressed')).toBe('false')
+        expect(button.getAttribute('aria-expanded')).toBe('false')
+
+        fireEvent(button, new MouseEvent('click'))
+
+        expect(fakeSidebar._isOpen).toBeTruthy()
+        expect(fakeSidebar._element.hasAttribute('hidden')).toBeFalsy()
+        expect(button.getAttribute('aria-pressed')).toBe('true')
+        expect(button.getAttribute('aria-expanded')).toBe('true')
+
+    })
+
+    test('On click on the backdrop, close the sidebar', () => {
+
+        Object.defineProperty(window, 'innerWidth', { configurable: true, value: 800 })
+
+        const button = fakeSidebar._buttons[0]
+
+        expect(fakeSidebar._isOpen).toBeTruthy()
+        expect(fakeSidebar._element.hasAttribute('hidden')).toBeFalsy()
+        expect(button.getAttribute('aria-pressed')).toBe('true')
+        expect(button.getAttribute('aria-expanded')).toBe('true')
+
+        fireEvent(document.getElementById('backdrop'), new MouseEvent('click'))
+
+        expect(fakeSidebar._isOpen).toBeFalsy()
+        expect(fakeSidebar._element.hasAttribute('hidden')).toBeTruthy()
+        expect(button.getAttribute('aria-pressed')).toBe('false')
+        expect(button.getAttribute('aria-expanded')).toBe('false')
+
+    })
+
+})
+

package/js/tests/slider.test.js

@@ -0,0 +1,307 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the /_slider.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * - Has all the public method
+ * ! herit from BaseComponent - Constructor: Passing the correct parameters 
+ * - Constructor: Passing the correct parameters
+ * - Constructor: Return the correct properties
+ * - #Init(): Loop will clone the first and last slide
+ * - #Init(): Autoplay will emmit next() method every X ms
+ * - #Init(): Scroll will change the current attributes
+ * - #Init(): Click on <button> with [role=tab] emmit the goTo() method
+ * - #Init(): Click on <button> with [data-slider-prev] emmit the prev() method
+ * - #Init(): Click on <button> with [data-slider-next] emmit the next() method
+ * - GoTo(): Passing the correct parameters
+ * - GoTo(): Emit a scroll() method
+ * - Prev(): Emmit the goTo() method with correct index
+ * - Prev(): Don't emmit the goTo() method if already first slide
+ * - Next(): Emmit the goTo() method with correct index
+ * - Next(): Don't emmit the goTo() method if already last slide
+ * - #Change(): Change the [aria-selected], [aria-hidden] and [disabled] attributes
+ * - #Change(): Emmit the slider:changing and slider:changed events
+ * - #Loop(): Go to the last slide if too much left
+ * - #Loop(): Go to the first slide if too much right
+ * - #Loop(): Go to the first or last slide via toGo() method
+ */
+
+import { describe, test, expect, beforeAll, vi, afterAll } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import Slider from "../_slider"
+import ErrorMessage from "../utilities/_error"
+
+let fakeDiv, fakeSlider, fakeDivLoop, fakeSliderLoop
+
+function setScroll(value = 0, el = fakeDiv) {
+    Object.assign(el, { scrollLeft: value })
+    fireEvent.scroll(el, { target: { scrollX: value } })
+    vi.runAllTimers()
+}
+
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+
+    document.body.innerHTML =
+        '<div id="slider">' +
+        '<div id="1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one"></div>' +
+        '<div id="2" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=two"></div>' +
+        '<div id="3" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=three"></div>' +
+        '</div>' +
+        '<div id="sliderLoop">' +
+        '<div id="4" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one"></div>' +
+        '<div id="5" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=two"></div>' +
+        '<div id="6" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=three"></div>' +
+        '</div>' +
+        '<div id="sliderAuto">' +
+        '<div id="7" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one"></div>' +
+        '<div id="8" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=two"></div>' +
+        '</div>' +
+        '<div aria-controls="slider" role="tablist">' +
+        '<button role="tab" aria-controls="1" aria-selected="true">1</button>' +
+        '<button role="tab" aria-controls="2" aria-selected="false">2</button>' +
+        '<button role="tab" aria-controls="3" aria-selected="false">3</button>' +
+        '</div>' +
+        '<div>' +
+        '<button aria-controls="slider" data-slider-prev>previous</button>' +
+        '<button aria-controls="slider" data-slider-next>next</button>' +
+        '</div>'
+
+    fakeDiv = document.getElementById('slider')
+    Object.defineProperty(fakeDiv, 'scrollWidth', { configurable: true, value: 300 })
+    Object.defineProperty(fakeDiv, 'clientWidth', { configurable: true, value: 100 })
+
+    fakeDivLoop = document.getElementById('sliderLoop')
+    Object.defineProperty(fakeDivLoop, 'scrollWidth', { configurable: true, value: 300 })
+    Object.defineProperty(fakeDivLoop, 'offsetWidth', { configurable: true, value: 100 })
+    Object.defineProperty(fakeDivLoop, 'clientWidth', { configurable: true, value: 100 })
+
+    fakeSlider = new Slider(fakeDiv)
+    fakeSliderLoop = new Slider(fakeDivLoop, { loop: true })
+
+    Object.defineProperty(fakeSlider._slides[0], 'offsetLeft', { configurable: true, value: 0 })
+    Object.defineProperty(fakeSlider._slides[1], 'offsetLeft', { configurable: true, value: 100 })
+    Object.defineProperty(fakeSlider._slides[2], 'offsetLeft', { configurable: true, value: 200 })
+
+    let val = 0
+    fakeSliderLoop._element.children.forEach(child => {
+        Object.defineProperty(child, 'offsetLeft', { configurable: true, value: val })
+        val = val + 100
+    })
+
+})
+
+describe('Structure of the class', () => {
+
+    test('Has all the public method', () => {
+        expect(fakeSlider.goTo).toBeTypeOf('function')
+        expect(fakeSlider.prev).toBeTypeOf('function')
+        expect(fakeSlider.next).toBeTypeOf('function')
+    })
+
+    test('Constructor: Passing the correct parameters', () => {
+        const htmlSlider = document.getElementById('slider')
+        expect(() => new Slider(htmlSlider, { behavior: 'make-error' })).toThrowError(ErrorMessage.enumOf('options.behavior', 'auto|smooth|instant'))
+        expect(() => new Slider(htmlSlider, { loop: 'make-error' })).toThrowError(ErrorMessage.typeOf('options.loop', 'boolean'))
+        expect(() => new Slider(htmlSlider, { autoplay: 'make-error' })).toThrowError(ErrorMessage.typeOf('options.autoplay', 'boolean|number'))
+    })
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeSlider).toHaveProperty('_element')
+        expect(fakeSlider).toHaveProperty('_options')
+        expect(fakeSlider).toHaveProperty('_slides')
+        expect(fakeSlider).toHaveProperty('_buttons')
+        expect(fakeSlider).toHaveProperty('_current')
+        expect(fakeSlider).toHaveProperty('_interval')
+        expect(fakeSlider._slides).toBeTypeOf('object')
+        expect(fakeSlider._slides).toStrictEqual(document.querySelectorAll('#slider [role=tabpanel]'))
+        expect(fakeSlider._buttons).toBeTypeOf('object')
+        expect(fakeSlider._buttons.prev).toBeTypeOf('object')
+        expect(fakeSlider._buttons.next).toBeTypeOf('object')
+        expect(fakeSlider._buttons.tabs).toBeTypeOf('object')
+        expect(fakeSlider._buttons.prev).toStrictEqual(document.querySelector('[data-slider-prev]'))
+        expect(fakeSlider._buttons.next).toStrictEqual(document.querySelector('[data-slider-next]'))
+        expect(fakeSlider._buttons.tabs).toStrictEqual(document.querySelectorAll('[role=tablist] [role=tab]'))
+        expect(fakeSlider._current).toBe(0)
+        expect(fakeSlider._interval).toBeNull()
+    })
+
+})
+
+describe('#Init()', () => {
+
+    test('Loop will clone the first and last slide', () => {
+        expect(fakeSliderLoop._slides.length).toBe(3)
+        expect(fakeSliderLoop._element.children.length).toBe(5)
+        expect(fakeSliderLoop._element.firstElementChild.querySelector('img').getAttribute('src')).toContain('three')
+        expect(fakeSliderLoop._element.lastElementChild.querySelector('img').getAttribute('src')).toContain('one')
+    })
+
+    test('Autoplay will emmit next() method every X ms', () => {
+        vi.useFakeTimers()
+        const fakeSliderAuto = new Slider(document.getElementById('sliderAuto'), { autoplay: 1500 })
+        const methodSpy = vi.spyOn(fakeSliderAuto, 'next')
+        vi.advanceTimersByTime(3000)
+        expect(methodSpy).toHaveBeenCalledTimes(2)
+        clearInterval(fakeSliderAuto._interval)
+    })
+
+    test('Scroll will change the current attributes', () => {
+        expect(fakeSlider._current).toBe(0)
+        setScroll(100)
+        expect(fakeSlider._current).toBe(1)
+    })
+
+    test('Click on <button> with [role=tab] emmit the goTo() method', () => {
+        const fakeTab = fakeSlider._buttons.tabs[0]
+        const methodSpy = vi.spyOn(fakeSlider, 'goTo')
+        fireEvent(fakeTab, new MouseEvent('click'))
+        expect(methodSpy).toHaveBeenCalled()
+    })
+
+    test('Click on <button> with [data-slider-prev] emmit the prev() method', () => {
+        const fakePrev = fakeSlider._buttons.prev
+        const methodSpy = vi.spyOn(fakeSlider, 'prev')
+        fireEvent(fakePrev, new MouseEvent('click'))
+        expect(methodSpy).toHaveBeenCalled()
+    })
+
+    test('Click on <button> with [data-slider-next] emmit the next() method', () => {
+        const fakeNext = fakeSlider._buttons.next
+        const methodSpy = vi.spyOn(fakeSlider, 'next')
+        fireEvent(fakeNext, new MouseEvent('click'))
+        expect(methodSpy).toHaveBeenCalled()
+    })
+
+})
+
+describe('GoTo()', () => {
+
+    test('Passing the correct parameters', () => {
+        expect(() => fakeSlider.goTo()).toThrowError(ErrorMessage.typeOf('index', 'number'))
+    })
+
+    test('Emit a scroll() method', () => {
+        const scrollSpy = vi.spyOn(fakeDiv, 'scroll')
+        fakeSlider.goTo(0)
+        expect(scrollSpy).toHaveBeenCalledWith({
+            behavior: "smooth",
+            left: 0,
+        }, undefined)
+    })
+
+})
+
+describe('Prev()', () => {
+
+    afterAll(() => setScroll())
+
+    test('Emit a goTo() method with correct index', () => {
+        const methodSpy = vi.spyOn(fakeSlider, 'goTo')
+        fakeSlider.prev()
+        expect(methodSpy).toHaveBeenCalledWith(0)
+    })
+
+    test('Don\'t emmit the goTo() method if already first slide', () => {
+        const methodSpy = vi.spyOn(fakeSlider, 'goTo')
+        fakeSlider._current = 0
+        fakeSlider.prev()
+        expect(methodSpy).not.toHaveBeenCalled()
+    })
+
+})
+
+describe('Next()', () => {
+
+    afterAll(() => setScroll())
+
+    test('Emit a goTo() method and index is X', () => {
+        const methodSpy = vi.spyOn(fakeSlider, 'goTo')
+        fakeSlider.next()
+        expect(methodSpy).toHaveBeenCalledWith(1)
+    })
+
+    test('Don\'t emmit the goTo() method if already last slide', () => {
+        const methodSpy = vi.spyOn(fakeSlider, 'goTo')
+        fakeSlider._current = 2
+        fakeSlider.next()
+        expect(methodSpy).not.toHaveBeenCalled()
+    })
+
+})
+
+describe('#Change()', () => {
+
+    test('Toggle the [aria-selected], [aria-hidden] and [disabled] attributes', () => {
+        expect(fakeSlider._current).toBe(0)
+        expect(fakeSlider._slides[0].getAttribute('aria-hidden')).toBe('false')
+        expect(fakeSlider._buttons.tabs[0].getAttribute('aria-selected')).toBe('true')
+        expect(fakeSlider._buttons.prev.hasAttribute('disabled')).toBeTruthy()
+        setScroll(100)
+        expect(fakeSlider._current).toBe(1)
+        expect(fakeSlider._slides[0].getAttribute('aria-hidden')).toBe('true')
+        expect(fakeSlider._slides[1].getAttribute('aria-hidden')).toBe('false')
+        expect(fakeSlider._buttons.tabs[0].getAttribute('aria-selected')).toBe('false')
+        expect(fakeSlider._buttons.tabs[1].getAttribute('aria-selected')).toBe('true')
+        expect(fakeSlider._buttons.prev.hasAttribute('disabled')).toBeFalsy()
+        setScroll(200)
+        expect(fakeSlider._current).toBe(2)
+        expect(fakeSlider._slides[1].getAttribute('aria-hidden')).toBe('true')
+        expect(fakeSlider._slides[2].getAttribute('aria-hidden')).toBe('false')
+        expect(fakeSlider._buttons.tabs[1].getAttribute('aria-selected')).toBe('false')
+        expect(fakeSlider._buttons.tabs[2].getAttribute('aria-selected')).toBe('true')
+        expect(fakeSlider._buttons.next.hasAttribute('disabled')).toBeTruthy()
+    })
+
+    test('Emmit the slider:changing and slider:changed events', () => {
+        const eventSpy = vi.spyOn(fakeSlider, 'emmitEvent')
+        setScroll(0)
+        expect(eventSpy).toHaveBeenCalledWith('changing', { current: 2 })
+        expect(eventSpy).toHaveBeenCalledWith('changed', { current: 0 })
+    })
+
+})
+
+describe('#Loop()', () => {
+
+    test('Go to the last slide if too much left', () => {
+        const scrollSpy = vi.spyOn(fakeDivLoop, 'scroll')
+        expect(fakeSliderLoop._current).toBe(0)
+        setScroll(0, fakeDivLoop)
+        expect(fakeSliderLoop._current).toBe(2)
+        expect(scrollSpy).toHaveBeenCalledWith(300, 0)
+    })
+
+    test('Go to the first slide if too much right', () => {
+        const scrollSpy = vi.spyOn(fakeDivLoop, 'scroll')
+        expect(fakeSliderLoop._current).toBe(2)
+        setScroll(400, fakeDivLoop)
+        expect(fakeSliderLoop._current).toBe(0)
+        expect(scrollSpy).toHaveBeenCalledWith(100, 0)
+    })
+
+    test('Go to the first or last slide via toGo() method', () => {
+
+        const scrollSpy = vi.spyOn(fakeDivLoop, 'scroll')
+
+        fakeSliderLoop.goTo(-1)
+
+        expect(scrollSpy).toHaveBeenCalledWith({
+            behavior: "smooth",
+            left: 0,
+        }, undefined)
+
+        fakeSliderLoop.goTo(3)
+
+        expect(scrollSpy).toHaveBeenCalledWith({
+            behavior: "smooth",
+            left: 400,
+        }, undefined)
+
+    })
+
+})

package/js/tests/sortable.test.js

@@ -0,0 +1,124 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _sortable.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * ! NONE ! - Has all the public method
+ * ! Tested in BaseComponent ! - Constructor: Passing the correct parameters 
+ * - Constructor: Return the correct properties
+ * - Mousedown & Mouseup: Without handle toggle the [draggable] attribute
+ * - Mousedown & Mouseup: With handle toggle the [draggable] attribute
+ * - #Drag(): Add the [aria-grabbed] attribute
+ * - #Drag(): Emmit the sortable:drag event
+ * - #Drop(): Remove the [aria-grabbed] attribute
+ * - #Drop(): Emmit the sortable:drop event
+ */
+
+import { describe, test, expect, beforeAll, vi } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import Sortable from "../_sortable"
+
+let fakeListSortable, fakeTableSortable, fakeListItem
+
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+
+    document.body.innerHTML =
+        '<ul id="fakeList">' +
+        '<li draggable="false">One</li>' +
+        '<li draggable="false">Two</li>' +
+        '<li draggable="false">Three</li>' +
+        '</ul>' +
+        '<table id="fakeTable">' +
+        '<tr draggable="false"><td data-handle>DRAG</td><td>One</td></tr>' +
+        '<tr draggable="false"><td data-handle>DRAG</td><td>Two</td></tr>' +
+        '<tr draggable="false"><td data-handle>DRAG</td><td>Three</td></tr>' +
+        '</table>'
+
+    fakeListSortable = new Sortable(document.getElementById('fakeList'))
+    fakeTableSortable = new Sortable(document.getElementById('fakeTable'))
+    fakeListItem = document.querySelector('#fakeList li')
+
+})
+
+describe('Structure of the class', () => {
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeListSortable).toHaveProperty('_withHandle')
+        expect(fakeListSortable._withHandle).toBeTypeOf('boolean')
+        expect(fakeListSortable._withHandle).toBe(false)
+        expect(fakeTableSortable._withHandle).toBe(true)
+        expect(fakeListSortable.items).toBeTypeOf('object')
+        expect(fakeListSortable.items).toStrictEqual(document.querySelectorAll('#fakeList li'))
+    })
+
+})
+
+describe('Mousedown & Mouseup', () => {
+
+    test('Without handle toggle the [draggable] attribute', () => {
+        expect(fakeListItem.draggable).toBeFalsy()
+        fireEvent(fakeListItem, new MouseEvent('mousedown'))
+        expect(fakeListItem.draggable).toBeTruthy()
+        fireEvent(fakeListItem, new MouseEvent('mouseup'))
+        expect(fakeListItem.draggable).toBeFalsy()
+    })
+
+    test('With handle & Mouseup toggle the [draggable] attribute', () => {
+        const item = document.querySelector('#fakeTable tr')
+        const handle = document.querySelector('#fakeTable tr:first-child [data-handle]')
+        const customMousedown = new MouseEvent('mousedown')
+        Object.defineProperty(customMousedown, 'target', { value: handle }) // Define the mousedown event with custom target
+        expect(item.draggable).toBeFalsy()
+        fireEvent(item, new MouseEvent('mousedown'))
+        expect(item.draggable).toBeFalsy()
+        fireEvent(item, customMousedown)
+        expect(item.draggable).toBeTruthy()
+        fireEvent(item, new MouseEvent('mouseup'))
+        expect(item.draggable).toBeFalsy()
+    })
+
+})
+
+describe('#Drag()', () => {
+
+    test('Add the [aria-grabbed] attribute', () => {
+        expect(fakeListItem.hasAttribute('aria-grabbed')).toBeFalsy()
+        fireEvent(fakeListItem, new MouseEvent('mousedown'))
+        fireEvent(fakeListItem, new MouseEvent('dragstart'))
+        expect(fakeListItem.hasAttribute('aria-grabbed')).toBeTruthy()
+        fireEvent(fakeListItem, new MouseEvent('dragend'))
+        fireEvent(fakeListItem, new MouseEvent('mouseup'))
+        expect(fakeListItem.hasAttribute('aria-grabbed')).toBeFalsy()
+    })
+
+    test('Emmit the sortable:drag event', () => {
+        const eventSpy = vi.spyOn(fakeListSortable, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent(fakeListItem, new MouseEvent('mousedown'))
+        fireEvent(fakeListItem, new MouseEvent('dragstart'))
+        expect(eventSpy).toHaveBeenCalledWith('drag', { current: fakeListItem, items: fakeListSortable.items })
+    })
+
+})
+
+describe('#Drop()', () => {
+
+    test('Remove the [aria-grabbed] attribute', () => {
+        expect(fakeListItem.hasAttribute('aria-grabbed')).toBeTruthy()
+        fireEvent(fakeListItem, new MouseEvent('dragend'))
+        expect(fakeListItem.hasAttribute('aria-grabbed')).toBeFalsy()
+    })
+
+    test('Emmit the sortable:drop event', () => {
+        const eventSpy = vi.spyOn(fakeListSortable, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent(fakeListItem, new MouseEvent('dragend'))
+        expect(eventSpy).toHaveBeenCalledWith('drop', { current: fakeListItem, items: fakeListSortable.items })
+    })
+
+})

package/js/tests/tabpanel.test.js

@@ -0,0 +1,114 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the_tabpabel.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * ! herit from BaseComponent - Constructor: Passing the correct parameters 
+ * - Constructor: Passing the correct parameters 
+ * - Constructor: Return the correct properties
+ * - #Change(): Toggle the [aria-selected] attribute on the tab
+ * - #Change(): Toggle the [hidden] attribute on the panel
+ * - #Change(): Emmit the tabpanel:changed event
+ */
+
+import { describe, test, expect, beforeAll, vi } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import Tabpanel from "../_tabpanel"
+import ErrorMessage from "../utilities/_error"
+
+let fakeTabpanel, fakeTabA, fakeTabB, fakeTabC, fakePanelA, fakePanelB
+
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+
+    document.body.innerHTML =
+        '<div id="tabpanel">' +
+        '<div role="tablist">' +
+        '<button role="tab" aria-controls="a" aria-selected="false">A</button>' +
+        '<button role="tab" aria-controls="b" aria-selected="false">B</button>' +
+        '<button role="tab" aria-selected="false">C</button>' +
+        '</div>' +
+        '<div role="tabpanel" id="a" hidden>AAA</div>' +
+        '<div role="tabpanel" id="b" hidden>BBB</div>' +
+        '<div role="tabpanel" id="c" hidden>CCC</div>' +
+        '</div>'
+
+    fakeTabpanel = new Tabpanel(document.getElementById('tabpanel'))
+    fakeTabA = fakeTabpanel._tabs[0]
+    fakeTabB = fakeTabpanel._tabs[1]
+    fakeTabC = fakeTabpanel._tabs[2]
+    fakePanelA = fakeTabpanel._panels[0]
+    fakePanelB = fakeTabpanel._panels[1]
+})
+
+describe('Structure of the class', () => {
+
+    test('Constructor: Passing the correct parameters', () => {
+        const fakeWrong = document.createElement('div')
+        expect(() => new Tabpanel(fakeWrong)).toThrowError(ErrorMessage.exist('button [role="tab"]'))
+        const fakeTab = document.createElement('button')
+        fakeTab.setAttribute('role', 'tab')
+        fakeWrong.appendChild(fakeTab)
+        expect(() => new Tabpanel(fakeWrong)).toThrowError(ErrorMessage.exist('div [role="tabpanel"]'))
+    })
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeTabpanel).toHaveProperty('_tabs')
+        expect(fakeTabpanel).toHaveProperty('_panels')
+        expect(fakeTabpanel).toHaveProperty('_current')
+        expect(fakeTabpanel._tabs).toBeTypeOf('object')
+        expect(fakeTabpanel._panels).toBeTypeOf('object')
+        expect(fakeTabpanel._current).toBeTypeOf('object')
+        expect(fakeTabpanel._tabs).toStrictEqual(document.querySelectorAll('#tabpanel [role="tab"]'))
+        expect(fakeTabpanel._panels).toStrictEqual(document.querySelectorAll('#tabpanel [role="tabpanel"]'))
+        expect(fakeTabpanel._current).toStrictEqual(document.querySelector('#tabpanel button'))
+    })
+
+})
+
+describe('#Change()', () => {
+
+    test('Toggle the [aria-selected] attribute on the tab', () => {
+        expect(fakeTabA.getAttribute('aria-selected')).toBe('true')
+        expect(fakeTabB.getAttribute('aria-selected')).toBe('false')
+        fireEvent(fakeTabB, new MouseEvent('click'))
+        expect(fakeTabA.getAttribute('aria-selected')).toBe('false')
+        expect(fakeTabB.getAttribute('aria-selected')).toBe('true')
+        fireEvent(fakeTabC, new MouseEvent('click'))
+        expect(fakeTabA.getAttribute('aria-selected')).toBe('false')
+        expect(fakeTabB.getAttribute('aria-selected')).toBe('true')
+        fireEvent(fakeTabA, new MouseEvent('click'))
+        expect(fakeTabA.getAttribute('aria-selected')).toBe('true')
+        expect(fakeTabB.getAttribute('aria-selected')).toBe('false')
+    })
+
+    test('Toggle the [hidden] attribute on the panel', () => {
+        expect(fakePanelA.hidden).toBeFalsy()
+        expect(fakePanelB.hidden).toBeTruthy()
+        fireEvent(fakeTabB, new MouseEvent('click'))
+        expect(fakePanelA.hidden).toBeTruthy()
+        expect(fakePanelB.hidden).toBeFalsy()
+        fireEvent(fakeTabC, new MouseEvent('click'))
+        expect(fakePanelA.hidden).toBeTruthy()
+        expect(fakePanelB.hidden).toBeFalsy()
+        fireEvent(fakeTabA, new MouseEvent('click'))
+        expect(fakePanelA.hidden).toBeFalsy()
+        expect(fakePanelB.hidden).toBeTruthy()
+    })
+
+    test('Emmit the tabpanel:changed event', () => {
+        const eventSpy = vi.spyOn(fakeTabpanel, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent(fakeTabA, new MouseEvent('click'))
+        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent(fakeTabC, new MouseEvent('click'))
+        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent(fakeTabB, new MouseEvent('click'))
+        expect(eventSpy).toHaveBeenCalledWith('changed', { current: fakeTabB })
+    })
+
+})