@natachah/vanilla-frontend 0.0.2

package/js/tests/base-component.test.js

@@ -0,0 +1,108 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the utilities/_base-component.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * - Has all the public method
+ * - Constructor: Passing the correct parameters
+ * - Constructor: Return the correct properties
+ * - MergeObject(): Passing the correct parameter
+ * - MergeObject(): Return the correct value
+ * - MergeObject(): Multilevel object
+ * - EmmitEvent(): Passing the correct parameter
+ * - EmmitEvent(): Return the correct value
+ * - EmmitEvent(): Event listener
+ * - EmmitEvent(): Prevent default
+ */
+
+import { describe, test, expect, beforeAll } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import BaseComponent from "../utilities/_base-component"
+import ErrorMessage from "../utilities/_error"
+
+let fakeDiv, fakeComponent, fakeEvent
+
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+    fakeDiv = document.createElement('div')
+    fakeComponent = new BaseComponent(fakeDiv, {})
+    fakeEvent = fakeComponent.emmitEvent('testing', { test: true }, fakeDiv)
+})
+
+describe('Structure of the class', () => {
+
+    test('Has all the public method', () => {
+        expect(fakeComponent.emmitEvent).toBeTypeOf('function')
+    })
+
+    test('Constructor: Passing the correct parameters', () => {
+        expect(() => new BaseComponent()).toThrowError(ErrorMessage.instanceOf('el', 'HTMLElement'))
+        expect(() => new BaseComponent('make-error')).toThrowError(ErrorMessage.instanceOf('el', 'HTMLElement'))
+        expect(() => new BaseComponent(fakeDiv, 'make-error')).toThrowError(ErrorMessage.instanceOf('options', 'Object'))
+    })
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeComponent).toHaveProperty('_element')
+        expect(fakeComponent).toHaveProperty('_options')
+        expect(fakeComponent._element).toBe(fakeDiv)
+        expect(fakeComponent._options).toStrictEqual({})
+    })
+
+})
+
+describe('MergeObject()', () => {
+
+    test('Passing the correct parameter', () => {
+        expect(() => fakeComponent.mergeObject('make-error', {})).toThrowError(ErrorMessage.instanceOf('one', 'Object'))
+        expect(() => fakeComponent.mergeObject({}, 'make-error')).toThrowError(ErrorMessage.instanceOf('two', 'Object'))
+    })
+
+    test('Return the correct value', () => {
+        const a = { one: 1, two: 2, tree: 3 }
+        const b = { tree: 'three', four: 4 }
+        const result = fakeComponent.mergeObject(a, b)
+        expect(result).toStrictEqual({ one: 1, two: 2, tree: 'three' })
+    })
+
+    test('Multilevel object', () => {
+        const a = { level: 1, sublevel: { one: 1, two: 2 } }
+        const b = { level: 'one', sublevel: { one: 'one' } }
+        const result = fakeComponent.mergeObject(a, b)
+        expect(result).toStrictEqual({ level: 'one', sublevel: { one: 'one', two: 2 } })
+    })
+
+})
+
+describe('EmmitEvent()', () => {
+
+    test('Passing the correct parameter', () => {
+        expect(() => fakeComponent.emmitEvent()).toThrowError(ErrorMessage.typeOf('name', 'string'))
+        expect(() => fakeComponent.emmitEvent('testing', 'make-error')).toThrowError(ErrorMessage.instanceOf('data', 'Object'))
+        expect(() => fakeComponent.emmitEvent('testing', {}, 'make-error')).toThrowError(ErrorMessage.instanceOf('selector', 'HTMLElement'))
+    })
+
+    test('Return the correct value', () => {
+        expect(fakeEvent).toBeInstanceOf(CustomEvent)
+        expect(fakeEvent.type).toBe('basecomponent:testing')
+        expect(fakeEvent.detail).toStrictEqual({ test: true })
+    })
+
+    test('Event listener', () => {
+        let steps = 0
+        fakeDiv.addEventListener('basecomponent:testing', () => steps++)
+        const myEvent = fireEvent(fakeDiv, fakeEvent)
+        expect(myEvent).toBe(true)
+        expect(steps).toBe(1)
+    })
+
+    test('Prevent default', () => {
+        fakeDiv.addEventListener('basecomponent:testing', (e) => e.preventDefault())
+        const myEvent = fireEvent(fakeDiv, fakeEvent)
+        expect(myEvent).toBe(false)
+    })
+
+})

package/js/tests/check-all.test.js

@@ -0,0 +1,88 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _check-all.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * ! herit from BaseComponent - Constructor: Passing the correct parameters 
+ * - Constructor: Return the correct properties
+ * - #Init(): Toggle checkboxes on change the _element
+ * - #Init(): Check all the checkboxes will set the :checked ont the _element 
+ * - #Init(): Uncheck one of the checkboxes will remove the :checked on the _element
+ */
+
+import { describe, test, expect, beforeAll } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import CheckAll from "../_check-all"
+
+let fakeCheckbox
+
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+
+    document.body.innerHTML =
+        '<input id="fakeCheckbox" type="checkbox" name="all" value="fake[]">' +
+        '<input id="one" type="checkbox" name="fake[]" value="1" checked>' +
+        '<input id="two" type="checkbox" name="fake[]" value="2">' +
+        '<input id="three" type="checkbox" name="fake[]" value="3">'
+
+    fakeCheckbox = new CheckAll(document.getElementById('fakeCheckbox'))
+
+})
+
+describe('Structure of the class', () => {
+
+    test('Return the correct properties', () => {
+        expect(fakeCheckbox._checkboxes).toBeTypeOf('object')
+        expect(fakeCheckbox._checkboxes).toStrictEqual(document.querySelectorAll('input[type="checkbox"][name="fake[]"]'))
+        expect(fakeCheckbox.number).toBeInstanceOf(Object)
+        expect(fakeCheckbox.number).toStrictEqual({
+            total: 3,
+            checked: 1,
+            unchecked: 2
+        })
+    })
+
+})
+
+describe('#Init()', () => {
+
+    test('Toggle checkboxes on change the _element', () => {
+        expect(fakeCheckbox._element.checked).toBeFalsy()
+        fireEvent.change(fakeCheckbox._element, { target: { checked: true } })
+        expect(fakeCheckbox._element.checked).toBeTruthy()
+        expect(fakeCheckbox.number.checked).toBe(3)
+        expect(fakeCheckbox.number.unchecked).toBe(0)
+        fireEvent.change(fakeCheckbox._element, { target: { checked: false } })
+        expect(fakeCheckbox._element.checked).toBeFalsy()
+        expect(fakeCheckbox.number.checked).toBe(0)
+        expect(fakeCheckbox.number.unchecked).toBe(3)
+    })
+
+    test('Check all the checkboxes will set the :checked ont the _element', () => {
+        const one = document.getElementById('one')
+        const two = document.getElementById('two')
+        const three = document.getElementById('three')
+        expect(fakeCheckbox._element.checked).toBeFalsy()
+        fireEvent.change(one, { target: { checked: true } })
+        expect(fakeCheckbox._element.checked).toBeFalsy()
+        expect(fakeCheckbox.number.checked).toBe(1)
+        fireEvent.change(two, { target: { checked: true } })
+        expect(fakeCheckbox._element.checked).toBeFalsy()
+        expect(fakeCheckbox.number.checked).toBe(2)
+        fireEvent.change(three, { target: { checked: true } })
+        expect(fakeCheckbox._element.checked).toBeTruthy()
+        expect(fakeCheckbox.number.checked).toBe(3)
+    })
+
+    test('Uncheck one of the checkboxes will remove the :checked on the _element', () => {
+        const one = document.getElementById('one')
+        fireEvent.change(one, { target: { checked: false } })
+        expect(fakeCheckbox._element.checked).toBeFalsy()
+        expect(fakeCheckbox.number.checked).toBe(2)
+    })
+
+})

package/js/tests/comfort.test.js

@@ -0,0 +1,219 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _comfort.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * - Has all the public method
+ * ! herit from Cookie - Constructor: Passing the correct parameters 
+ * - 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 
+ * - SetTheme(): Passing the correct parameters 
+ * - SetTheme(): Save the property in the cookie
+ * - SetTheme(): Emmit the set() method
+ * - SetTheme(): If already exist, DONT emmit the set() method 
+ * - SetStyle(): Passing the correct parameters 
+ * - SetStyle(): Save the property in the cookie
+ * - SetStyle(): Emmit the set() and #toggleStyle() method
+ * - SetStyle(): If already exist, DONT emmit the set() and #toggleStyle() method 
+ * - Reset(): Emmit de delete() and remove the cookie
+ * - Reset(): Remove all the attributes
+ * - #toggleTheme(): Add the [data-theme] attribute on the <html>
+ * - #toggleTheme(): Add the [aria-pressed] attribute on the <button>
+ * - #toggleStyle(): Add the [style] attribute on the <body>
+ * - #toggleStyle(): Add the [aria-pressed] attribute on the <button>
+ */
+
+import { describe, test, expect, beforeAll, afterEach, afterAll, vi } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import Comfort from "../_comfort"
+import ErrorMessage from "../utilities/_error"
+
+let fakeComfort
+
+/**
+ * Before all tests
+ * 
+ */
+
+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>'
+
+    fakeComfort = new Comfort()
+
+})
+
+describe('Structure of the class', () => {
+
+    test('Has all the public method', () => {
+        expect(fakeComfort.setTheme).toBeTypeOf('function')
+        expect(fakeComfort.setStyle).toBeTypeOf('function')
+        expect(fakeComfort.reset).toBeTypeOf('function')
+    })
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeComfort._buttons).toBeTypeOf('object')
+        expect(fakeComfort._buttons.theme).toStrictEqual(document.querySelectorAll('[data-theme]'))
+        expect(fakeComfort._buttons.style).toStrictEqual(document.querySelectorAll('[data-style]'))
+    })
+
+})
+
+describe('#Init()', () => {
+
+    test('Emit the setTheme() method when click on this._buttons.theme', () => {
+        const methodSpy = vi.spyOn(fakeComfort, 'setTheme')
+        fireEvent(document.getElementById('fakeDarkButton'), new MouseEvent('click'))
+        expect(methodSpy).toHaveBeenCalled()
+    })
+
+    test('Emit the setStyle() method when click on this._buttons.style', () => {
+        const methodSpy = vi.spyOn(fakeComfort, 'setStyle')
+        fireEvent(document.getElementById('fakeFontButton'), new MouseEvent('click'))
+        expect(methodSpy).toHaveBeenCalled()
+    })
+
+    afterAll(() => {
+        fakeComfort.reset()
+    })
+
+})
+
+describe('SetTheme()', () => {
+
+    test('Passing the correct parameters', () => {
+        expect(() => fakeComfort.setTheme()).toThrowError(ErrorMessage.typeOf('value', 'string'))
+    })
+
+    test('Save the property in the cookie', () => {
+        expect(fakeComfort.has('theme')).toBeFalsy()
+        fakeComfort.setTheme('my-theme')
+        expect(fakeComfort.has('theme')).toBeTruthy()
+        expect(fakeComfort.get('theme')).toBe('my-theme')
+    })
+
+    test('Emmit the set() method', () => {
+        const methodSpy = vi.spyOn(fakeComfort, 'set')
+        fakeComfort.setTheme('dark')
+        expect(methodSpy).toHaveBeenCalled()
+    })
+
+    test('If already exist, DONT emmit the set() method', () => {
+        const methodSpy = vi.spyOn(fakeComfort, 'set')
+        fakeComfort.setTheme('dark')
+        expect(methodSpy).not.toHaveBeenCalled()
+    })
+
+    afterAll(() => {
+        fakeComfort.reset()
+    })
+
+})
+
+describe('SetStyle()', () => {
+
+    test('Passing the correct parameters', () => {
+        expect(() => fakeComfort.setStyle()).toThrowError(ErrorMessage.typeOf('name', 'string'))
+        expect(() => fakeComfort.setStyle('font-size')).toThrowError(ErrorMessage.typeOf('value', 'string'))
+    })
+
+    test('Save the property in the cookie', () => {
+        expect(fakeComfort.has('style')).toBeFalsy()
+        fakeComfort.setStyle('color', 'red')
+        expect(fakeComfort.has('style')).toBeTruthy()
+        expect(fakeComfort.get('style')).toStrictEqual({ 'color': 'red' })
+    })
+
+    test('Emmit the set() method', () => {
+        const methodSpy = vi.spyOn(fakeComfort, 'set')
+        fakeComfort.setStyle('font-size', '1rem')
+        expect(methodSpy).toHaveBeenCalled()
+    })
+
+    test('If already exist, DONT emmit the set() method', () => {
+        const methodSpy = vi.spyOn(fakeComfort, 'set')
+        fakeComfort.setStyle('font-size', '1rem')
+        expect(methodSpy).not.toHaveBeenCalled()
+    })
+
+    afterAll(() => {
+        fakeComfort.reset()
+    })
+
+})
+
+describe('Reset()', () => {
+
+    test('Emmit de delete() and remove the cookie', () => {
+        const methodSpy = vi.spyOn(fakeComfort, 'delete')
+        fakeComfort.setTheme('dark')
+        expect(fakeComfort.has('theme')).toBeTruthy()
+        fakeComfort.reset()
+        expect(fakeComfort.has('theme')).toBeFalsy()
+        expect(methodSpy).toHaveBeenCalled()
+    })
+
+    test('Remove all the attributes', () => {
+        const html = document.documentElement
+        const body = document.body
+        const buttonTheme = document.getElementById('fakeDarkButton')
+        const buttonStyle = document.getElementById('fakeFontButton')
+        fakeComfort.setTheme('dark')
+        fakeComfort.setStyle('font-size', '2rem')
+        expect(html.hasAttribute('data-theme')).toBeTruthy()
+        expect(body.hasAttribute('style')).toBeTruthy()
+        expect(buttonTheme.hasAttribute('aria-pressed')).toBeTruthy()
+        expect(buttonStyle.hasAttribute('aria-pressed')).toBeTruthy()
+        fakeComfort.reset()
+        expect(html.hasAttribute('data-theme')).toBeFalsy()
+        expect(body.hasAttribute('style')).toBeFalsy()
+        expect(buttonTheme.hasAttribute('aria-pressed')).toBeFalsy()
+        expect(buttonStyle.hasAttribute('aria-pressed')).toBeFalsy()
+    })
+
+})
+
+
+describe('#ToggleTheme()', () => {
+
+    afterEach(() => {
+        fakeComfort.reset()
+    })
+
+    test('Add the [data-theme] attribute on the <html>', () => {
+        const html = document.documentElement
+        expect(html.hasAttribute('data-theme')).toBeFalsy()
+        fakeComfort.setTheme('dark')
+        expect(html.hasAttribute('data-theme')).toBeTruthy()
+        expect(html.getAttribute('data-theme')).toBe('dark')
+    })
+
+    test('Add the [aria-pressed] attribute on the <button>', () => {
+        const button = document.getElementById('fakeDarkButton')
+        expect(button.hasAttribute('aria-pressed')).toBeFalsy()
+        fakeComfort.setTheme('dark')
+        expect(button.hasAttribute('aria-pressed')).toBeTruthy()
+        expect(button.getAttribute('aria-pressed')).toBe('true')
+    })
+
+    test('Add the [style] attribute on the <body>', () => {
+        const body = document.body
+        expect(body.hasAttribute('style')).toBeFalsy()
+        fakeComfort.setStyle('font-size', '1rem')
+        expect(body.hasAttribute('style')).toBeTruthy()
+        expect(body.getAttribute('style')).toBe('font-size:1rem')
+    })
+
+    test('Add the [aria-pressed] attribute on the <button>', () => {
+        const button = document.getElementById('fakeFontButton')
+        expect(button.hasAttribute('aria-pressed')).toBeFalsy()
+        fakeComfort.setStyle('font-size', '1rem')
+        expect(button.hasAttribute('aria-pressed')).toBeTruthy()
+        expect(button.getAttribute('aria-pressed')).toBe('true')
+    })
+
+})

package/js/tests/consent.test.js

@@ -0,0 +1,84 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _consent.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * ! herit from Cookie - Has all the public method
+ * - Constructor: Passing the correct parameters 
+ * - Constructor: Return the correct properties
+ * - #Init(): Make sure that the dialog is open if the cookie doesn't exist
+ * - #Init(): Emmit the dialog:closed event will run the set() method
+ * - #Init(): Emmit the dialog:submiting event will run the set() method and save the inputs value
+ */
+
+import { describe, test, expect, beforeAll, vi } from "vitest"
+import Dialog from "../_dialog"
+import Consent from "../_consent"
+import ErrorMessage from "../utilities/_error"
+
+let fakeCookie, fakeCookiePref, fakeDefaultCookie
+
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+
+    document.body.innerHTML =
+        '<dialog id="cookies"></dialog>' +
+        '<dialog id="cookiesPreferences" aria-modal="true">' +
+        '<form method="dialog">' +
+        '<input type="checkbox" name="cookies_consent[]" value="necessary" checked disabled>' +
+        '<input type="checkbox" name="cookies_consent[]" value="analytic" checked>' +
+        '<input type="checkbox" name="cookies_consent[]" value="marketing" >' +
+        '</form>' +
+        '</dialog>'
+
+    fakeCookie = new Consent('_consent', 'cookies')
+    fakeCookiePref = new Consent('_consent', 'cookiesPreferences')
+    fakeDefaultCookie = new Consent()
+
+})
+
+describe('Structure of the class', () => {
+
+    test('Constructor: Passing the correct parameters', () => {
+        expect(() => new Consent('test', {})).toThrowError(ErrorMessage.typeOf('dialogID', 'string'))
+        expect(() => new Consent('test', 'make-error')).toThrowError(ErrorMessage.existById('dialog', 'make-error'))
+    })
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeCookie).toHaveProperty('_dialog')
+        expect(fakeCookie._dialog).toBeInstanceOf(Dialog)
+        expect(fakeCookie._dialog._element).toStrictEqual(document.getElementById('cookies'))
+        expect(fakeCookie.value).toStrictEqual({})
+        expect(fakeDefaultCookie._dialog).toBeInstanceOf(Dialog)
+    })
+
+})
+
+describe('#Init()', () => {
+
+    test('Make sure that the dialog is open if the cookie doesn\'t exist', () => {
+        expect(fakeCookie.value).toStrictEqual({})
+        expect(fakeCookie._dialog.open).toBeTruthy()
+    })
+
+    test('Emmit the dialog:closed event will run the set() method and save the inputs value', () => {
+        const methodSpy = vi.spyOn(fakeCookie, 'set')
+        expect(methodSpy).not.toHaveBeenCalled()
+        fakeCookie._dialog.close()
+        expect(methodSpy).toHaveBeenCalled()
+        expect(fakeCookie.value).toStrictEqual({ necessary: true })
+    })
+
+    test('Emmit the dialog:submiting event will run the set() method and save the inputs value', () => {
+        const methodSpy = vi.spyOn(fakeCookiePref, 'set')
+        expect(methodSpy).not.toHaveBeenCalled()
+        fakeCookiePref._dialog.submit()
+        expect(methodSpy).toHaveBeenCalled()
+        expect(fakeCookie.value).toStrictEqual({ necessary: true, analytic: true, marketing: false })
+    })
+
+})

package/js/tests/cookie.test.js

@@ -0,0 +1,102 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the /utilities/_cookie.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * - Has all the public method
+ * - Constructor: Passing the correct parameters 
+ * - Constructor: Return the correct properties
+ * - Set(): Passing the correct parameters 
+ * - Set(): Save the new cookie value
+ * - Has(): Passing the correct parameters 
+ * - Has(): Verify the existance of a key in the cookie value
+ * - Get(): Passing the correct parameters 
+ * - Get(): Get value by key in the cookie
+ * - Delete(): Delete the cookie
+ */
+
+import { describe, test, expect, beforeAll } from "vitest"
+import Cookie from "../utilities/_cookie"
+import ErrorMessage from "../utilities/_error"
+
+let fakeCookie
+
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+    fakeCookie = new Cookie('monster')
+})
+
+describe('Structure of the class', () => {
+
+    test('Has all the public method', () => {
+        expect(fakeCookie.set).toBeTypeOf('function')
+        expect(fakeCookie.has).toBeTypeOf('function')
+        expect(fakeCookie.get).toBeTypeOf('function')
+        expect(fakeCookie.delete).toBeTypeOf('function')
+    })
+
+    test('Constructor: Passing the correct parameters', () => {
+        expect(() => new Cookie()).toThrowError(ErrorMessage.typeOf('name', 'string'))
+    })
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeCookie.value).toBeInstanceOf(Object)
+        expect(fakeCookie.value).toStrictEqual({})
+    })
+
+})
+
+describe('Set()', () => {
+
+    test('Passing the correct parameters ', () => {
+        expect(() => fakeCookie.set('make-error')).toThrowError(ErrorMessage.instanceOf('value', 'Object'))
+    })
+
+    test('Save the new cookie value', () => {
+        fakeCookie.set({ 1: 'one' })
+        expect(fakeCookie.value).toStrictEqual({ 1: 'one' })
+        fakeCookie.set({ 1: 'one', 2: 'two' })
+        expect(fakeCookie.value).toStrictEqual({ 1: 'one', 2: 'two' })
+    })
+
+})
+
+describe('Has()', () => {
+
+    test('Passing the correct parameters ', () => {
+        expect(() => fakeCookie.has()).toThrowError(ErrorMessage.typeOf('key', 'string'))
+    })
+
+    test('Verify the existance of a key in the cookie value', () => {
+        expect(fakeCookie.has('dont-exist')).toBeFalsy()
+        expect(fakeCookie.has('1')).toBeTruthy()
+    })
+
+})
+
+describe('Get()', () => {
+
+    test('Passing the correct parameters ', () => {
+        expect(() => fakeCookie.has()).toThrowError(ErrorMessage.typeOf('key', 'string'))
+    })
+
+    test('Get value by key in the cookie', () => {
+        expect(fakeCookie.get('dont-exist')).toBeNull()
+        expect(fakeCookie.get('1')).toBe('one')
+    })
+
+})
+
+describe('Delete()', () => {
+
+    test('Delete the cookie', () => {
+        expect(fakeCookie.value).toStrictEqual({ 1: 'one', 2: 'two' })
+        fakeCookie.delete()
+        expect(fakeCookie.value).toStrictEqual({})
+    })
+
+})