npm - @natachah/vanilla-frontend - Versions diffs - 0.0.2 - Mend

@natachah/vanilla-frontend 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/.gitlab-ci.yml +40 -0
package/LICENSE.md +7 -0
package/README.md +11 -0
package/docs/index.html +36 -0
package/docs/main.js +32 -0
package/docs/pages/components/badge.html +154 -0
package/docs/pages/components/button.html +186 -0
package/docs/pages/components/card.html +184 -0
package/docs/pages/components/dialog.html +334 -0
package/docs/pages/components/disclosure.html +310 -0
package/docs/pages/components/dropdown.html +255 -0
package/docs/pages/components/form.html +331 -0
package/docs/pages/components/list.html +140 -0
package/docs/pages/components/loading.html +58 -0
package/docs/pages/components/media.html +130 -0
package/docs/pages/components/nav.html +119 -0
package/docs/pages/components/progress.html +47 -0
package/docs/pages/components/slider.html +311 -0
package/docs/pages/components/table.html +168 -0
package/docs/pages/javascript/autofill.html +170 -0
package/docs/pages/javascript/checkall.html +59 -0
package/docs/pages/javascript/comfort.html +134 -0
package/docs/pages/javascript/consent.html +112 -0
package/docs/pages/javascript/cookie.html +81 -0
package/docs/pages/javascript/form.html +199 -0
package/docs/pages/javascript/scroll.html +209 -0
package/docs/pages/javascript/sidebar.html +53 -0
package/docs/pages/javascript/sortable.html +148 -0
package/docs/pages/javascript/toggle.html +191 -0
package/docs/pages/javascript/tree.html +221 -0
package/docs/pages/layout/grid.html +201 -0
package/docs/pages/layout/reset.html +53 -0
package/docs/pages/layout/typography.html +324 -0
package/docs/pages/quick-start/conventions.html +112 -0
package/docs/pages/quick-start/customization.html +187 -0
package/docs/pages/quick-start/installation.html +95 -0
package/docs/pages/quick-start/mixins.html +228 -0
package/docs/pages/test.html +15 -0
package/docs/src/js/demo.js +98 -0
package/docs/src/js/doc-code.js +102 -0
package/docs/src/js/doc-demo.js +14 -0
package/docs/src/js/doc-layout.js +108 -0
package/docs/src/scss/demo.scss +77 -0
package/docs/src/scss/layout.scss +160 -0
package/docs/src/scss/style.scss +278 -0
package/docs/vite.config.mjs +23 -0
package/esbuild.mjs +25 -0
package/js/_autofill.js +131 -0
package/js/_check-all.js +77 -0
package/js/_comfort.js +174 -0
package/js/_consent.js +84 -0
package/js/_dialog.js +164 -0
package/js/_dropdown.js +101 -0
package/js/_scroll.js +184 -0
package/js/_sidebar.js +97 -0
package/js/_slider.js +249 -0
package/js/_sortable.js +143 -0
package/js/_tabpanel.js +88 -0
package/js/_toggle.js +123 -0
package/js/_tree.js +85 -0
package/js/tests/autofill.test.js +157 -0
package/js/tests/base-component.test.js +108 -0
package/js/tests/check-all.test.js +88 -0
package/js/tests/comfort.test.js +219 -0
package/js/tests/consent.test.js +84 -0
package/js/tests/cookie.test.js +102 -0
package/js/tests/dialog.test.js +189 -0
package/js/tests/dropdown.test.js +115 -0
package/js/tests/form-helper.test.js +155 -0
package/js/tests/scroll.test.js +203 -0
package/js/tests/sidebar.test.js +99 -0
package/js/tests/slider.test.js +307 -0
package/js/tests/sortable.test.js +124 -0
package/js/tests/tabpanel.test.js +114 -0
package/js/tests/toggle.test.js +190 -0
package/js/tests/tree.test.js +165 -0
package/js/utilities/_base-component.js +101 -0
package/js/utilities/_cookie.js +98 -0
package/js/utilities/_error.js +80 -0
package/js/utilities/_form-helper.js +101 -0
package/package.json +42 -0
package/scss/_badge.scss +37 -0
package/scss/_button.scss +34 -0
package/scss/_card.scss +122 -0
package/scss/_dialog.scss +116 -0
package/scss/_disclosure.scss +101 -0
package/scss/_dropdown.scss +68 -0
package/scss/_form.scss +197 -0
package/scss/_grid.scss +40 -0
package/scss/_group.scss +57 -0
package/scss/_list.scss +18 -0
package/scss/_loading.scss +49 -0
package/scss/_media.scss +37 -0
package/scss/_nav.scss +72 -0
package/scss/_progress.scss +40 -0
package/scss/_slider.scss +35 -0
package/scss/_table.scss +36 -0
package/scss/utilities/_mixin.scss +322 -0
package/scss/utilities/_reset.scss +145 -0
package/scss/utilities/_typography.scss +107 -0
package/scss/vanilla-frontend.scss +23 -0
package/scss/variables/_root.scss +70 -0
package/scss/variables/_setting.scss +63 -0
package/vitest.config.js +7 -0

package/js/tests/dialog.test.js ADDED Viewed

@@ -0,0 +1,189 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _dialog.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ *  - Has all the public method
+ * ! herit from BaseComponent - Constructor: Passing the correct parameters
+ * - Constructor: Return the correct properties
+ * - Open(): Add the [open] attribute on the <dialog>
+ * - Open(): Emmit the dialog:opening & dialog:opened events
+ * - Close(): Remove the [open] attribute on the <dialog>
+ * - Close(): Emmit the dialog:closing & dialog:closed events
+ * - Submit(): By default will exectute submit event
+ * - Submit(): By JS will Remove the [open] attribute on the <dialog>
+ * - Submit(): Toggle the [aria-busy] attribute on the <button>
+ * - Submit(): Emmit the dialog:submiting & dialog:submited events
+ * - #toggleBodyAttribute(): As modal will toggle the [inert] attribute on the <body>
+ * - #toggleBodyAttribute(): As dialog will NOT toggle the [inert] attribute on the <body>
+ * - #toggleBodyAttribute(): The [inert] attribute on the <body> will be removed only if all modal are closed
+ */
+import { describe, test, expect, beforeAll, vi, beforeEach, afterEach } from "vitest"
+import Dialog from "../_dialog"
+let fakeDialog, fakeModal, fakeFormModal
+/**
+ * Before all tests
+ *
+ */
+beforeAll(() => {
+    document.body.innerHTML =
+        '<button aria-controls="fakeDialog"></button>' +
+        '<dialog id="fakeDialog">' +
+        '<button data-dialog-close></button>' +
+        '</dialog>' +
+        '<dialog id="fakeModal" aria-modal="true"></dialog>' +
+        '<dialog id="fakeFormModal" aria-modal="true">' +
+        '<form><button type="submit"></button></form>' +
+        '</dialog>'
+    fakeDialog = new Dialog(document.getElementById('fakeDialog'))
+    fakeModal = new Dialog(document.getElementById('fakeModal'))
+    fakeFormModal = new Dialog(document.getElementById('fakeFormModal'))
+})
+describe('Structure of the class', () => {
+    test('Has all the public method', () => {
+        expect(fakeDialog.open).toBeTypeOf('function')
+        expect(fakeDialog.close).toBeTypeOf('function')
+        expect(fakeDialog.submit).toBeTypeOf('function')
+    })
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeDialog).toHaveProperty('_isModal')
+        expect(fakeDialog._isModal).toBeTypeOf('boolean')
+        expect(fakeDialog._isModal).toBe(false)
+        expect(fakeModal._isModal).toBe(true)
+        expect(fakeDialog).toHaveProperty('_buttons')
+        expect(fakeDialog._buttons).toBeTypeOf('object')
+        expect(fakeDialog._buttons.open).toBeTypeOf('object')
+        expect(fakeDialog._buttons.close).toBeTypeOf('object')
+        expect(fakeDialog._buttons.submit).toBeTypeOf('object')
+        expect(fakeDialog._buttons.open).toStrictEqual(document.querySelectorAll('[aria-controls=fakeDialog]'))
+        expect(fakeDialog._buttons.close).toStrictEqual(fakeDialog._element.querySelectorAll('[data-dialog-close]'))
+        expect(fakeDialog._buttons.submit).toStrictEqual(fakeDialog._element.querySelectorAll('[type=submit]'))
+    })
+})
+describe('Open()', () => {
+    afterEach(() => {
+        fakeDialog._element.removeAttribute('open')
+    })
+    test('Add the [open] attribute on the <dialog>', () => {
+        expect(fakeDialog._element.open).toBeFalsy()
+        fakeDialog.open()
+        expect(fakeDialog._element.open).toBeTruthy()
+    })
+    test('Emmit the dialog:opening & dialog:opened events', () => {
+        const eventSpy = vi.spyOn(fakeDialog, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fakeDialog.open()
+        expect(eventSpy).toHaveBeenCalledWith('opening')
+        expect(eventSpy).toHaveBeenCalledWith('opened')
+    })
+})
+describe('Close()', () => {
+    beforeEach(() => {
+        fakeDialog._element.setAttribute('open', true)
+    })
+    test('Remove the [open] attribute on the <dialog>', () => {
+        expect(fakeDialog._element.open).toBeTruthy()
+        fakeDialog.close()
+        expect(fakeDialog._element.open).toBeFalsy()
+    })
+    test('Emmit the dialog:closing & dialog:closed events', () => {
+        const eventSpy = vi.spyOn(fakeDialog, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fakeDialog.close()
+        expect(eventSpy).toHaveBeenCalledWith('closing')
+        expect(eventSpy).toHaveBeenCalledWith('closed')
+    })
+})
+describe('Submit()', () => {
+    beforeEach(() => {
+        fakeFormModal._element.setAttribute('open', true)
+    })
+    test('By default will exectute submit event', () => {
+        fakeFormModal._form.setAttribute('method', 'POST')
+        const submitSpy = vi.spyOn(fakeFormModal._form, 'submit')
+        expect(submitSpy).not.toHaveBeenCalled()
+        fakeFormModal.submit()
+        expect(submitSpy).toHaveBeenCalled()
+    })
+    test('By JS will Remove the [open] attribute on the <dialog>', () => {
+        fakeFormModal._form.setAttribute('method', 'dialog')
+        expect(fakeFormModal._element.open).toBeTruthy()
+        fakeFormModal.submit()
+        expect(fakeFormModal._element.open).toBeFalsy()
+    })
+    test('Toggle the [aria-busy] attribute on the <button>', (t) => {
+        fakeFormModal._form.setAttribute('method', 'dialog')
+        const button = fakeFormModal._buttons.submit[0]
+        const testBefore = (e) => expect(button.hasAttribute('aria-busy')).toBeTruthy()
+        fakeFormModal._element.addEventListener('dialog:submiting', testBefore)
+        const testAfter = (e) => expect(button.hasAttribute('aria-busy')).toBeFalsy()
+        fakeFormModal._element.addEventListener('dialog:submited', testAfter)
+        fakeFormModal.submit()
+        t.onTestFinished(() => fakeFormModal._element.removeEventListener('dialog:submiting', testBefore))
+        t.onTestFinished(() => fakeFormModal._element.removeEventListener('dialog:submited', testAfter))
+    })
+    test('Emmit the dialog:submiting & dialog:submited events', () => {
+        fakeFormModal._form.setAttribute('method', 'dialog')
+        const eventSpy = vi.spyOn(fakeFormModal, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fakeFormModal.submit()
+        expect(eventSpy).toHaveBeenCalledWith('submiting', { form: fakeFormModal._form })
+        expect(eventSpy).toHaveBeenCalledWith('submited', { form: fakeFormModal._form })
+    })
+})
+describe('#ToggleBodyAttribute()', () => {
+    test('As modal will toggle the [inert] attribute on the <body>', () => {
+        expect(document.body.hasAttribute('inert')).toBeFalsy()
+        fakeModal.open()
+        expect(document.body.hasAttribute('inert')).toBeTruthy()
+        fakeModal.close()
+        expect(document.body.hasAttribute('inert')).toBeFalsy()
+    })
+    test('As dialog will NOT toggle the [inert] attribute on the <body>', () => {
+        expect(document.body.hasAttribute('inert')).toBeFalsy()
+        fakeDialog.open()
+        expect(document.body.hasAttribute('inert')).toBeFalsy()
+    })
+    test('The [inert] attribute on the <body> will be removed only if all modal are closed', () => {
+        fakeModal.open()
+        fakeFormModal.open()
+        expect(document.body.hasAttribute('inert')).toBeTruthy()
+        fakeModal.close()
+        expect(document.body.hasAttribute('inert')).toBeTruthy()
+        fakeFormModal.close()
+        expect(document.body.hasAttribute('inert')).toBeFalsy()
+    })
+})

package/js/tests/dropdown.test.js ADDED Viewed

@@ -0,0 +1,115 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _dropdown.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * ! herit from BaseComponent - Constructor: Passing the correct parameters
+ * - Constructor: Return the correct properties
+ * - Constructor: Constructor: Passing the correct parameters
+ * - #Init(): Close content if click outside
+ * - #Toggle(): Toggle the [aria-pressed] and [aria-expanded] attribute on the <button>
+ * - #Toggle(): Toggle the [hidden] attribute on the <div>
+ * - #Toggle(): Emmit the toggle:changed event
+ */
+import { describe, test, expect, beforeAll, vi } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import Dropdown from "../_dropdown"
+import ErrorMessage from "../utilities/_error"
+let fakeDiv, fakeButton, fakeContent, fakeDropdown, fakeDropdownClosable
+/**
+ * Before all tests
+ *
+ */
+beforeAll(() => {
+    document.body.innerHTML =
+        '<div id="fakeDropdown">' +
+        '<button id="fakeButton" aria-controls="fakeContent" aria-expanded="false" aria-pressed="false"></button>' +
+        '<div id="fakeContent" tabindex="0" hidden></div>' +
+        '</div>' +
+        '<div id="fakeDropdownClosable">' +
+        '<button aria-controls="fakeContentClosable" aria-expanded="false" aria-pressed="false"></button>' +
+        '<div id="fakeContentClosable" tabindex="0" hidden></div>' +
+        '</div>'
+    fakeDiv = document.getElementById('fakeDropdown')
+    fakeButton = document.getElementById('fakeButton')
+    fakeContent = document.getElementById('fakeContent')
+    fakeDropdown = new Dropdown(fakeDiv, {
+        closable: false
+    })
+    fakeDropdownClosable = new Dropdown(document.getElementById('fakeDropdownClosable'), {
+        closable: true
+    })
+})
+describe('Structure of the class', () => {
+    test('Constructor: Passing the correct parameters', () => {
+        expect(() => new Dropdown(fakeDiv, { closable: 'make-error' })).toThrowError(ErrorMessage.typeOf('options.closable', 'boolean'))
+    })
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeDropdown).toHaveProperty('_button')
+        expect(fakeDropdown).toHaveProperty('_content')
+        expect(fakeDropdown._button).toBe(fakeButton)
+        expect(fakeDropdown._content).toBe(fakeContent)
+    })
+})
+describe('#Init()', () => {
+    test('Close content if click outside', () => {
+        expect(fakeDropdownClosable._button.getAttribute('aria-pressed')).toBe('false')
+        expect(fakeDropdownClosable._button.getAttribute('aria-expanded')).toBe('false')
+        expect(fakeDropdownClosable._content.hidden).toBeTruthy()
+        fireEvent(fakeDropdownClosable._button, new MouseEvent('click'))
+        expect(fakeDropdownClosable._button.getAttribute('aria-pressed')).toBe('true')
+        expect(fakeDropdownClosable._button.getAttribute('aria-expanded')).toBe('true')
+        expect(fakeDropdownClosable._content.hidden).toBeFalsy()
+        fireEvent.blur(fakeDropdownClosable._content)
+        expect(fakeDropdownClosable._button.getAttribute('aria-expanded')).toBe('false')
+        expect(fakeDropdownClosable._button.getAttribute('aria-pressed')).toBe('false')
+        expect(fakeDropdownClosable._content.hidden).toBeTruthy()
+    })
+})
+describe('#Toggle()', () => {
+    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')
+        fireEvent(fakeDropdown._button, new MouseEvent('click'))
+        expect(fakeDropdown._button.getAttribute('aria-pressed')).toBe('true')
+        expect(fakeDropdown._button.getAttribute('aria-expanded')).toBe('true')
+        fireEvent(fakeDropdown._button, new MouseEvent('click'))
+        expect(fakeDropdown._button.getAttribute('aria-pressed')).toBe('false')
+        expect(fakeDropdown._button.getAttribute('aria-expanded')).toBe('false')
+    })
+    test('Toggle the [hidden] attribute on the <div>', () => {
+        expect(fakeDropdown._content.hidden).toBeTruthy()
+        fireEvent(fakeDropdown._button, new MouseEvent('click'))
+        expect(fakeDropdown._content.hidden).toBeFalsy()
+        fireEvent.blur(fakeDropdown._content)
+        expect(fakeDropdown._content.hidden).toBeFalsy()
+        fireEvent(fakeDropdown._button, new MouseEvent('click'))
+        expect(fakeDropdown._content.hidden).toBeTruthy()
+    })
+    test('Emmit the dropdown:changed event', () => {
+        const eventSpy = vi.spyOn(fakeDropdown, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent(fakeDropdown._button, new MouseEvent('click'))
+        expect(eventSpy).toHaveBeenCalledWith('changed', { isOpen: true })
+    })
+})

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

@@ -0,0 +1,155 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the utilities/_form-helper.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * - Has all the public method
+ * - TogglePassword(): Passing the correct parameters
+ * - TogglePassword(): Toggle the [type] attribute on the <input>
+ * - TogglePassword(): Toggle the [aria-pressed] attribute on the <button>
+ * - ToggleAttributes(): Passing the correct parameters
+ * - ToggleAttributes(): Reset the [value] attribute on the <input>
+ * - ToggleAttributes(): Toggle the [disabled] attribute on the <input>
+ * - ToggleAttributes(): Toggle the [required] attribute on the <input>
+ * - ToggleAttributes(): Toggle do not impact <input> if in unchanged option
+ */
+import { describe, test, expect, beforeAll, afterEach } from "vitest"
+import FormHelper from "../utilities/_form-helper"
+import ErrorMessage from "../utilities/_error"
+let fakeInput, fakeButton, fakeFields, fieldA, fieldB
+describe('Structure of the class', () => {
+    test('Has all the public method', () => {
+        expect(FormHelper.togglePassword).toBeTypeOf('function')
+    })
+})
+describe('TogglePassword()', () => {
+    beforeAll(() => {
+        document.body.innerHTML =
+            '<input id="fakeInput" type="password" value="123456">' +
+            '<button id="fakeButton" aria-pressed="false" aria-controls="fakeInput"></button>'
+        fakeInput = document.getElementById('fakeInput')
+        fakeButton = document.getElementById('fakeButton')
+    })
+    test('Passing the correct parameters', () => {
+        const button = document.createElement('button')
+        expect(() => FormHelper.togglePassword('make-error')).toThrowError(ErrorMessage.instanceOf('button', 'HTMLElement'))
+        expect(() => FormHelper.togglePassword(button)).toThrowError(ErrorMessage.withAttribute('button', 'aria-controls'))
+        button.setAttribute('aria-controls', 'make-error')
+        expect(() => FormHelper.togglePassword(button)).toThrowError(ErrorMessage.existById('input', 'make-error'))
+    })
+    test('Toggle the [type] attribute on the <input>', () => {
+        expect(fakeInput.type).toBe('password')
+        FormHelper.togglePassword(fakeButton)
+        expect(fakeInput.type).toBe('text')
+        FormHelper.togglePassword(fakeButton)
+        expect(fakeInput.type).toBe('password')
+    })
+    test('Toggle the [aria-pressed] attribute on the <button>', () => {
+        expect(fakeButton.getAttribute('aria-pressed')).toBe('false')
+        FormHelper.togglePassword(fakeButton)
+        expect(fakeButton.getAttribute('aria-pressed')).toBe('true')
+    })
+})
+describe('ToggleAttributes', () => {
+    beforeAll(() => {
+        document.body.innerHTML =
+            '<input id="fakeFieldA" name="fakeFieldA" type="text" value="aaa">' +
+            '<input id="fakeFieldB" name="fakeFieldB" type="text" value="bbb">'
+        fakeFields = document.querySelectorAll('#fakeFieldA,#fakeFieldB')
+        fieldA = document.getElementById('fakeFieldA')
+        fieldB = document.getElementById('fakeFieldB')
+    })
+    afterEach(() => {
+        fieldA.value = 'aaa'
+        fieldA.disabled = false
+        fieldA.required = false
+        fieldB.value = 'bbb'
+        fieldB.disabled = false
+        fieldB.required = false
+    })
+    test('Passing the correct parameters', () => {
+        expect(() => FormHelper.toggleAttributes('make-error')).toThrowError(ErrorMessage.instanceOf('fields', 'Object'))
+        expect(() => FormHelper.toggleAttributes(fakeFields, 'make-error')).toThrowError(ErrorMessage.typeOf('isVisible', 'boolean'))
+        expect(() => FormHelper.toggleAttributes(fakeFields, true, 'make-error')).toThrowError(ErrorMessage.instanceOf('customOptions', 'Object'))
+        expect(() => FormHelper.toggleAttributes(fakeFields, true, { reset: 'make-error' })).toThrowError(ErrorMessage.typeOf('customOptions.reset', 'boolean|object'))
+        expect(() => FormHelper.toggleAttributes(fakeFields, true, { disabled: 'make-error' })).toThrowError(ErrorMessage.typeOf('customOptions.disabled', 'boolean|object'))
+        expect(() => FormHelper.toggleAttributes(fakeFields, true, { required: 'make-error' })).toThrowError(ErrorMessage.typeOf('customOptions.required', 'boolean|object'))
+        expect(() => FormHelper.toggleAttributes(fakeFields, true, { unchanged: 'make-error' })).toThrowError(ErrorMessage.typeOf('customOptions.unchanged', 'object'))
+    })
+    test('Reset the [value] attribute on the <input>', () => {
+        expect(fieldA.value).toBe('aaa')
+        expect(fieldB.value).toBe('bbb')
+        FormHelper.toggleAttributes(fakeFields, true, { reset: false })
+        expect(fieldA.value).toBe('aaa')
+        expect(fieldB.value).toBe('bbb')
+        FormHelper.toggleAttributes(fakeFields, false, { reset: ['fakeFieldA'] })
+        expect(fieldA.value).toBe('null')
+        expect(fieldB.value).toBe('bbb')
+    })
+    test('Toggle the [disabled] attribute on the <input>', () => {
+        expect(fieldA.disabled).toBeFalsy()
+        expect(fieldB.disabled).toBeFalsy()
+        FormHelper.toggleAttributes(fakeFields, true, { disabled: false })
+        expect(fieldA.disabled).toBeFalsy()
+        expect(fieldB.disabled).toBeFalsy()
+        FormHelper.toggleAttributes(fakeFields, false, { disabled: ['fakeFieldA'] })
+        expect(fieldA.disabled).toBeTruthy()
+        expect(fieldB.disabled).toBeFalsy()
+    })
+    test('Toggle the [required] attribute on the <input>', () => {
+        expect(fieldA.required).toBeFalsy()
+        expect(fieldB.required).toBeFalsy()
+        FormHelper.toggleAttributes(fakeFields, true, { required: false })
+        expect(fieldA.required).toBeFalsy()
+        expect(fieldB.required).toBeFalsy()
+        FormHelper.toggleAttributes(fakeFields, true, { required: ['fakeFieldA'] })
+        expect(fieldA.required).toBeTruthy()
+        expect(fieldB.required).toBeFalsy()
+    })
+    test('Toggle do not impact <input> if in unchanged option', () => {
+        expect(fieldA.value).toBe('aaa')
+        expect(fieldA.disabled).toBeFalsy()
+        expect(fieldA.required).toBeFalsy()
+        expect(fieldB.value).toBe('bbb')
+        expect(fieldB.disabled).toBeFalsy()
+        expect(fieldB.required).toBeFalsy()
+        FormHelper.toggleAttributes(fakeFields, true, { reset: true, disabled: true, required: true, unchanged: ['fakeFieldB'] })
+        expect(fieldA.value).toBe('aaa')
+        expect(fieldA.disabled).toBeFalsy()
+        expect(fieldA.required).toBeTruthy()
+        expect(fieldB.value).toBe('bbb')
+        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.disabled).toBeTruthy()
+        expect(fieldA.required).toBeFalsy()
+        expect(fieldB.value).toBe('bbb')
+        expect(fieldB.disabled).toBeFalsy()
+        expect(fieldB.required).toBeFalsy()
+    })
+})

package/js/tests/scroll.test.js ADDED Viewed

@@ -0,0 +1,203 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _scroll.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * - Has all the public method
+ * - Constructor: Passing the correct parameters
+ * - Constructor: Return the correct properties
+ * - #Init: Emit the scrollTop() method when click on this._buttons.top
+ * - #Init: Emit the scrollBottom() method when click on this._buttons.bottom
+ * - GoTo(): Passing the correct parameters
+ * - GoTo(): Emit a scroll event
+ * - ScrollTop(): Emit a goTo() method and scrollTop is 0
+ * - ScrollBottom(): Emit a goTo() method and scrollTop is this._height
+ * - #Scroll(): Toggle the [hidden] attribute on the [data-scroll-top] button
+ * - #Scroll(): Toggle the [hidden] attribute on the [data-scroll-bottom] button
+ * - #Spy(): Toggle the [aria-current] attribute on the <a>
+ */
+import { describe, test, expect, beforeAll, vi } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import Scroll from "../_scroll"
+import ErrorMessage from "../utilities/_error"
+let fakeDiv, fakeDivScroll, fakePageScroll, fakeDivOne, fakeDivTwo
+/**
+ * Before all tests
+ *
+ */
+beforeAll(() => {
+    document.body.innerHTML =
+        '<div id="scrollspy"><a href="#one"></a><a href="#two"></a><a><a/></div>' +
+        '<div id="fakeDiv" style="height:200px;overflow-y:scroll">' +
+        '<button data-scroll-bottom="fakeDiv"></button>' +
+        '<button data-scroll-top="fakeDiv" hidden></button>' +
+        '<div id="one"></div>' +
+        '<div id="two"></div>' +
+        '</div>'
+    fakeDiv = document.getElementById('fakeDiv')
+    fakeDivOne = document.getElementById('one')
+    fakeDivTwo = document.getElementById('two')
+    // Define the sizes for HTML div
+    Object.defineProperty(fakeDiv, 'scrollHeight', { configurable: true, value: 800 })
+    Object.defineProperty(fakeDiv, 'clientHeight', { configurable: true, value: 200 })
+    Object.defineProperty(fakeDivOne, 'offsetTop', { configurable: true, value: 200 })
+    Object.defineProperty(fakeDivTwo, 'offsetTop', { configurable: true, value: 400 })
+    Object.defineProperty(document.documentElement, 'scrollHeight', { configurable: true, value: 1200 })
+    Object.defineProperty(document.documentElement, 'clientHeight', { configurable: true, value: 600 })
+    // Then init the class
+    fakeDivScroll = new Scroll(fakeDiv, { navigation: 'scrollspy', gaps: { spy: 0 } })
+    fakePageScroll = new Scroll(document.documentElement)
+})
+describe('Structure of the class', () => {
+    test('Has all the public method', () => {
+        expect(fakeDivScroll.goTo).toBeTypeOf('function')
+        expect(fakeDivScroll.scrollTop).toBeTypeOf('function')
+        expect(fakeDivScroll.scrollBottom).toBeTypeOf('function')
+    })
+    test('Constructor: Passing the correct parameters', () => {
+        expect(() => new Scroll(fakeDiv, { gaps: 'make-error' })).toThrowError(ErrorMessage.instanceOf('options.gaps', 'Object'))
+        expect(() => new Scroll(fakeDiv, { gaps: { top: 'make-error' } })).toThrowError(ErrorMessage.typeOf('options.gaps.top', 'number'))
+        expect(() => new Scroll(fakeDiv, { gaps: { bottom: 'make-error' } })).toThrowError(ErrorMessage.typeOf('options.gaps.bottom', 'number'))
+        expect(() => new Scroll(fakeDiv, { gaps: { spy: 'make-error' } })).toThrowError(ErrorMessage.typeOf('options.gaps.spy', 'number'))
+        expect(() => new Scroll(fakeDiv, { behavior: 'make-error' })).toThrowError(ErrorMessage.enumOf('options.behavior', 'auto|smooth|instant'))
+        expect(() => new Scroll(fakeDiv, { navigation: 'make-error' })).toThrowError(ErrorMessage.existById('element', 'make-error'))
+    })
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeDivScroll).toHaveProperty('_height')
+        expect(fakeDivScroll._height).toBe(600)
+        expect(fakeDivScroll._buttons).toBeTypeOf('object')
+        expect(fakeDivScroll._buttons.top).toStrictEqual(document.querySelector('[data-scroll-top="fakeDiv"]'))
+        expect(fakeDivScroll._buttons.bottom).toStrictEqual(document.querySelector('[data-scroll-bottom="fakeDiv"]'))
+        expect(fakePageScroll._buttons.top).toBeNull()
+        expect(fakePageScroll._buttons.bottom).toBeNull()
+        expect(fakeDivScroll._spy).toBeTypeOf('object')
+        expect(fakeDivScroll._spy.enable).toBeTypeOf('boolean')
+        expect(fakeDivScroll._spy.links).toBeTypeOf('object')
+        expect(fakeDivScroll._spy.targets).toBeTypeOf('object')
+        expect(fakeDivScroll._spy.current).toBeTypeOf('number')
+        expect(fakeDivScroll._spy.enable).toBeTruthy()
+        expect(fakePageScroll._spy.enable).toBeFalsy()
+        expect(fakeDivScroll._spy.links).toStrictEqual([...document.querySelectorAll('#scrollspy a[href^="#"]')])
+        expect(fakeDivScroll._spy.targets).toStrictEqual([...document.querySelectorAll('#one,#two')])
+        expect(fakeDivScroll._spy.current).toBe(0)
+    })
+})
+describe('#Init()', () => {
+    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'))
+        expect(methodSpy).toHaveBeenCalled()
+    })
+    test('Emit the scrollBottom() method when click on this._buttons.bottom', () => {
+        const methodSpy = vi.spyOn(fakeDivScroll, 'scrollBottom')
+        fireEvent(document.querySelector('[data-scroll-bottom="fakeDiv"]'), new MouseEvent('click'))
+        expect(methodSpy).toHaveBeenCalled()
+    })
+    test('Emit the goTo() method when click on this._spy.links', () => {
+        const methodSpy = vi.spyOn(fakeDivScroll, 'goTo')
+        fireEvent(document.querySelector('a[href="#one"]'), new MouseEvent('click'))
+        expect(methodSpy).toHaveBeenCalled()
+    })
+})
+describe('GoTo()', () => {
+    test('Passing the correct parameters ', () => {
+        expect(() => fakeDivScroll.goTo()).toThrowError(ErrorMessage.typeOf('distance', 'number'))
+        expect(() => fakeDivScroll.goTo('make-error')).toThrowError(ErrorMessage.typeOf('distance', 'number'))
+    })
+    test('Emit a scroll event', () => {
+        const scrollSpy = vi.spyOn(fakeDiv, 'scroll')
+        fakeDivScroll.goTo(100)
+        expect(scrollSpy).toHaveBeenCalled()
+    })
+})
+describe('ScrollTop()', () => {
+    test('Emit a goTo() method with parameter as 0', () => {
+        const methodSpy = vi.spyOn(fakeDivScroll, 'goTo')
+        fakeDivScroll.scrollTop()
+        expect(methodSpy).toHaveBeenCalledWith(0)
+    })
+})
+describe('ScrollBottom()', () => {
+    test('Emit a goTo() method with parameter as _height', () => {
+        const methodSpy = vi.spyOn(fakeDivScroll, 'goTo')
+        fakeDivScroll.scrollBottom()
+        expect(methodSpy).toHaveBeenCalledWith(fakeDivScroll._height)
+    })
+})
+describe('#Scroll()', () => {
+    test('Toggle the [hidden] attribute on the [data-scroll-top] button', () => {
+        const topButton = document.querySelector('[data-scroll-top="fakeDiv"]')
+        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 })
+        fireEvent.scroll(fakeDiv)
+        expect(topButton.hidden).toBeTruthy()
+    })
+    test('Toggle the [hidden] attribute on the [data-scroll-bottom] button', () => {
+        const topButton = document.querySelector('[data-scroll-bottom="fakeDiv"]')
+        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 })
+        fireEvent.scroll(fakeDiv)
+        expect(topButton.hidden).toBeFalsy()
+    })
+})
+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"]')
+        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 })
+        fireEvent.scroll(fakeDiv)
+        expect(fakeDivScroll._spy.current).toBe(1)
+        expect(one.hasAttribute('aria-current')).toBeFalsy()
+        expect(two.hasAttribute('aria-current')).toBeTruthy()
+    })
+})