@natachah/vanilla-frontend 0.0.2

package/js/tests/toggle.test.js

@@ -0,0 +1,190 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _toggle.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * ! herit from BaseComponent - Constructor: Passing the correct parameters 
+ * - Constructor: Return the correct properties
+ * - #Toggle(): Button : Toggle the [aria-pressed] and [aria-expanded] attribute on the <button>
+ * - #Toggle(): Button : Toggle the [hidden] attribute on the <div>
+ * - #Toggle(): Checkbox : Toggle the [aria-expanded] attribute on the <checkbox>
+ * - #Toggle(): Checkbox : Toggle the [hidden] attribute on the <div>
+ * - #Toggle(): Radio : Toggle the [aria-expanded] attribute on the <radio>
+ * - #Toggle(): Radio : Toggle the [hidden] attribute on the <div>
+ * - #Toggle(): Select : Toggle the [aria-expanded] attribute on the <select>
+ * - #Toggle(): Select : 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 Toggle from "../_toggle"
+
+let fakeToggleButton, fakeToggleCheckbox, fakeToggleRadioA, fakeToggleRadioB, fakeToggleSelect
+
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+
+    document.body.innerHTML =
+        '<button id="fakeButton" aria-controls="fakeCollapse" aria-expanded="false" aria-pressed="false"></button>' +
+        '<div id="fakeCollapse" hidden></div>' +
+        '<input id="fakeCheckbox" type="checkbox" aria-controls="fakeCollapseCheckbox" aria-expanded="false">' +
+        '<div id="fakeCollapseCheckbox" hidden></div>' +
+        '<input id="fakeRadioA" type="radio" name="fake-radio" aria-controls="fakeCollapseRadioA" aria-expanded="false">' +
+        '<input id="fakeRadioB" type="radio" name="fake-radio" aria-controls="fakeCollapseRadioB" aria-expanded="false">' +
+        '<div id="fakeCollapseRadioA" hidden></div>' +
+        '<div id="fakeCollapseRadioB" hidden></div>' +
+        '<select id="fakeSelect" aria-controls="fakeCollapseSelectA fakeCollapseSelectB fakeCollapseSelectC" aria-expanded="false">' +
+        '<option value="null"></option>' +
+        '<option value="A"></option>' +
+        '<optgroup label="G">' +
+        '<option value="B"></option>' +
+        '</optgroup>' +
+        '</select>' +
+        '<div id="fakeCollapseSelectA" data-toggle-when="A" hidden></div>' +
+        '<div id="fakeCollapseSelectB" data-toggle-when="B" hidden></div>' +
+        '<div id="fakeCollapseSelectG" data-toggle-when="G" hidden></div>'
+
+    fakeToggleButton = new Toggle(document.getElementById('fakeButton'))
+    fakeToggleCheckbox = new Toggle(document.getElementById('fakeCheckbox'))
+    fakeToggleRadioA = new Toggle(document.getElementById('fakeRadioA'))
+    fakeToggleRadioB = new Toggle(document.getElementById('fakeRadioB'))
+    fakeToggleSelect = new Toggle(document.getElementById('fakeSelect'))
+
+})
+
+describe('Structure of the class', () => {
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeToggleButton).toHaveProperty('_type')
+        expect(fakeToggleButton).toHaveProperty('_toggables')
+        expect(fakeToggleButton._type).toBe('button')
+        expect(fakeToggleCheckbox._type).toBe('checkbox')
+        expect(fakeToggleRadioA._type).toBe('radio')
+        expect(fakeToggleSelect._type).toBe('select')
+        expect(fakeToggleButton._toggables).toStrictEqual([...document.querySelectorAll('#fakeCollapse')])
+        expect(fakeToggleSelect._toggables).toStrictEqual([...document.querySelectorAll('#fakeCollapseSelectA, #fakeCollapseSelectB, #fakeCollapseSelectC')])
+    })
+
+})
+
+describe('#Toggle()', () => {
+
+    describe('Button', () => {
+
+        test('Toggle the [aria-pressed] and [aria-expanded] attribute on the <button>', () => {
+            expect(fakeToggleButton._element.getAttribute('aria-pressed')).toBe('false')
+            expect(fakeToggleButton._element.getAttribute('aria-expanded')).toBe('false')
+            fireEvent(fakeToggleButton._element, new MouseEvent('click'))
+            expect(fakeToggleButton._element.getAttribute('aria-pressed')).toBe('true')
+            expect(fakeToggleButton._element.getAttribute('aria-expanded')).toBe('true')
+            fireEvent(fakeToggleButton._element, new MouseEvent('click'))
+            expect(fakeToggleButton._element.getAttribute('aria-pressed')).toBe('false')
+            expect(fakeToggleButton._element.getAttribute('aria-expanded')).toBe('false')
+        })
+
+        test('Toggle the [hidden] attribute on the <div>', () => {
+            const div = document.getElementById('fakeCollapse')
+            expect(div.hidden).toBeTruthy()
+            fireEvent(fakeToggleButton._element, new MouseEvent('click'))
+            expect(div.hidden).toBeFalsy()
+            fireEvent(fakeToggleButton._element, new MouseEvent('click'))
+            expect(div.hidden).toBeTruthy()
+        })
+
+    })
+
+    describe('Checkbox', () => {
+
+        test('Toggle the [aria-expanded] attribute on the <checkbox>', () => {
+            expect(fakeToggleCheckbox._element.getAttribute('aria-expanded')).toBe('false')
+            fireEvent.change(fakeToggleCheckbox._element, { target: { checked: true } })
+            expect(fakeToggleCheckbox._element.getAttribute('aria-expanded')).toBe('true')
+            fireEvent.change(fakeToggleCheckbox._element, { target: { checked: false } })
+            expect(fakeToggleCheckbox._element.getAttribute('aria-expanded')).toBe('false')
+        })
+
+        test('Toggle the [hidden] attribute on the <div>', () => {
+            const div = document.getElementById('fakeCollapseCheckbox')
+            expect(div.hidden).toBeTruthy()
+            fireEvent.change(fakeToggleCheckbox._element, { target: { checked: true } })
+            expect(div.hidden).toBeFalsy()
+            fireEvent.change(fakeToggleCheckbox._element, { target: { checked: false } })
+            expect(div.hidden).toBeTruthy()
+        })
+
+    })
+
+    describe('Radio', () => {
+
+        test('Toggle the [aria-expanded] attribute on the <radio>', () => {
+            expect(fakeToggleRadioA._element.getAttribute('aria-expanded')).toBe('false')
+            expect(fakeToggleRadioB._element.getAttribute('aria-expanded')).toBe('false')
+            fireEvent.change(fakeToggleRadioA._element, { target: { checked: true } })
+            expect(fakeToggleRadioA._element.getAttribute('aria-expanded')).toBe('true')
+            expect(fakeToggleRadioB._element.getAttribute('aria-expanded')).toBe('false')
+            fireEvent.change(fakeToggleRadioB._element, { target: { checked: true } })
+            expect(fakeToggleRadioA._element.getAttribute('aria-expanded')).toBe('false')
+            expect(fakeToggleRadioB._element.getAttribute('aria-expanded')).toBe('true')
+        })
+
+        test('Toggle the [hidden] attribute on the <div>', () => {
+            const divA = document.getElementById('fakeCollapseRadioA')
+            const divB = document.getElementById('fakeCollapseRadioB')
+            expect(divA.hidden).toBeTruthy()
+            expect(divB.hidden).toBeFalsy()
+            fireEvent.change(fakeToggleRadioA._element, { target: { checked: true } })
+            expect(divA.hidden).toBeFalsy()
+            expect(divB.hidden).toBeTruthy()
+            fireEvent.change(fakeToggleRadioB._element, { target: { checked: true } })
+            expect(divA.hidden).toBeTruthy()
+            expect(divB.hidden).toBeFalsy()
+        })
+
+    })
+
+    describe('Select', () => {
+
+        test('Toggle the [aria-expanded] attribute on the <select>', () => {
+            expect(fakeToggleSelect._element.getAttribute('aria-expanded')).toBe('false')
+            fireEvent.change(fakeToggleSelect._element, { target: { value: 'A' } })
+            expect(fakeToggleSelect._element.getAttribute('aria-expanded')).toBe('true')
+            fireEvent.change(fakeToggleSelect._element, { target: { value: 'null' } })
+            expect(fakeToggleSelect._element.getAttribute('aria-expanded')).toBe('false')
+        })
+
+        test('Toggle the [hidden] attribute on the <div>', () => {
+            const divA = document.getElementById('fakeCollapseSelectA')
+            const divB = document.getElementById('fakeCollapseSelectB')
+            const divC = document.getElementById('fakeCollapseSelectB')
+            expect(divA.hidden).toBeTruthy()
+            expect(divB.hidden).toBeTruthy()
+            expect(divC.hidden).toBeTruthy()
+            fireEvent.change(fakeToggleSelect._element, { target: { value: 'A' } })
+            expect(divA.hidden).toBeFalsy()
+            expect(divB.hidden).toBeTruthy()
+            expect(divC.hidden).toBeTruthy()
+            fireEvent.change(fakeToggleSelect._element, { target: { value: 'B' } })
+            expect(divA.hidden).toBeTruthy()
+            expect(divB.hidden).toBeFalsy()
+            expect(divC.hidden).toBeFalsy()
+            fireEvent.change(fakeToggleSelect._element, { target: { value: 'null' } })
+            expect(divA.hidden).toBeTruthy()
+            expect(divB.hidden).toBeTruthy()
+            expect(divC.hidden).toBeTruthy()
+        })
+
+    })
+
+    test('Emmit the toggle:changed event', () => {
+        const eventSpy = vi.spyOn(fakeToggleButton, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent(fakeToggleButton._element, new MouseEvent('click'))
+        expect(eventSpy).toHaveBeenCalledWith('changed')
+    })
+
+})

package/js/tests/tree.test.js

@@ -0,0 +1,165 @@
+/**
+ * ------------------------------------------------------------------
+ * TEST for the _tree.js
+ * ------------------------------------------------------------------
+ * The test will take care of:
+ * ! herit from BaseComponent - Constructor: Passing the correct parameters 
+ * - Constructor: Return the correct properties
+ * - #Init() : Do nothing if click outside the handle
+ * - #Toggle(): Passing the correct parameter
+ * - #Toggle(): List: Update the [aria-expanded] attribute
+ * - #Toggle(): List: Update the [hidden] attribute on children
+ * - #Toggle(): Grid: Update the [aria-expanded] attribute
+ * - #Toggle(): Grid: Update the [hidden] attribute on children
+ * - #Toggle(): Grid: Collapse the sub-children 
+ * - #Toggle(): Emmit the tree:changed event
+ */
+
+import { describe, test, expect, beforeAll, vi } from "vitest"
+import { fireEvent } from "@testing-library/dom"
+import Tree from "../_tree"
+
+
+let fakeListTree, fakeGridTree, fakeLi, fakeRow, customClick
+
+/**
+ * Before all tests
+ * 
+ */
+
+beforeAll(() => {
+
+    document.body.innerHTML =
+        '<ul id="fakeListTree" role="tree">' +
+        '<li role="treeitem"></li>' +
+        '<li role="treeitem" aria-expanded="false" aria-owns="child">' +
+        '<ul id="child" role="group" hidden>' +
+        '<li role="treeitem"></li>' +
+        '</ul>' +
+        '</li>' +
+        '<li role="treeitem"></li>' +
+        '</ul>' +
+        '<table id="fakeGridTree" role="treegrid">' +
+        '<tr aria-level="1"><td></td></tr>' +
+        '<tr aria-level="1" aria-expanded="false" aria-owns="lvl2"><td data-handle></td></tr>' +
+        '<tr id="lvl2" aria-level="2" aria-expanded="false" aria-owns="lvl3" hidden><td data-handle></td></tr>' +
+        '<tr id="lvl3" aria-level="3" hidden><td></td></tr>' +
+        '<tr aria-level="1"><td></td></tr>' +
+        '</table>'
+
+    fakeListTree = new Tree(document.getElementById('fakeListTree'))
+    fakeGridTree = new Tree(document.getElementById('fakeGridTree'))
+    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]') }) // Define the click event with custom target
+
+})
+
+describe('Structure of the class', () => {
+
+    test('Constructor: Return the correct properties', () => {
+        expect(fakeListTree).toHaveProperty('_type')
+        expect(fakeListTree).toHaveProperty('_withHandle')
+        expect(fakeListTree).toHaveProperty('_items')
+        expect(fakeListTree._type).toBe('list')
+        expect(fakeGridTree._type).toBe('grid')
+        expect(fakeListTree._withHandle).toBeFalsy()
+        expect(fakeGridTree._withHandle).toBeTruthy()
+        expect(fakeListTree._items).toBeTypeOf('object')
+        expect(fakeListTree._items).toStrictEqual(document.querySelectorAll('#fakeListTree [aria-expanded]'))
+    })
+
+})
+
+describe('#Init()', () => {
+
+    test('Do nothing if click outside the handle', () => {
+        expect(fakeRow.getAttribute('aria-expanded')).toBe('false')
+        fireEvent(fakeRow, new MouseEvent('click'))
+        expect(fakeRow.getAttribute('aria-expanded')).toBe('false')
+    })
+
+})
+
+describe('#Toggle()', () => {
+
+    describe('List', () => {
+
+        test('Update the [aria-expanded] attribute', () => {
+            expect(fakeLi.getAttribute('aria-expanded')).toBe('false')
+            fireEvent(fakeLi, new MouseEvent('click'))
+            expect(fakeLi.getAttribute('aria-expanded')).toBe('true')
+            fireEvent(fakeLi, new MouseEvent('click'))
+            expect(fakeLi.getAttribute('aria-expanded')).toBe('false')
+        })
+
+        test('Update the [hidden] attribute on children', () => {
+            const child = document.getElementById('child')
+            expect(child.hidden).toBeTruthy()
+            fireEvent(fakeLi, new MouseEvent('click'))
+            expect(child.hidden).toBeFalsy()
+            fireEvent(fakeLi, new MouseEvent('click'))
+            expect(child.hidden).toBeTruthy()
+        })
+
+    })
+
+    describe('Grid', () => {
+
+        test('Update the [aria-expanded] attribute', () => {
+            expect(fakeRow.getAttribute('aria-expanded')).toBe('false')
+            fireEvent(fakeRow, customClick)
+            expect(fakeRow.getAttribute('aria-expanded')).toBe('true')
+            fireEvent(fakeRow, customClick)
+            expect(fakeRow.getAttribute('aria-expanded')).toBe('false')
+        })
+
+        test('Update the [hidden] attribute on children', () => {
+            const child = document.getElementById('lvl2')
+            expect(child.hidden).toBeTruthy()
+            fireEvent(fakeRow, customClick)
+            expect(child.hidden).toBeFalsy()
+            fireEvent(fakeRow, customClick)
+            expect(child.hidden).toBeTruthy()
+        })
+
+        test('Collapse the sub-children', () => {
+            const lvl2 = document.getElementById('lvl2')
+            const lvl3 = document.getElementById('lvl3')
+
+            const customClickLvl2 = new MouseEvent('click')
+            Object.defineProperty(customClickLvl2, 'target', { value: lvl2.querySelector('[data-handle]') }) // Define the click event with custom target
+
+            const customClickLvl3 = new MouseEvent('click')
+            Object.defineProperty(customClickLvl3, 'target', { value: lvl3.querySelector('[data-handle]') }) // Define the click event with custom target
+
+            fireEvent(fakeRow, customClick)
+            fireEvent(lvl2, customClickLvl2)
+            fireEvent(lvl3, customClickLvl3)
+
+            expect(fakeRow.getAttribute('aria-expanded')).toBe('true')
+            expect(lvl2.hidden).toBeFalsy()
+            expect(lvl2.getAttribute('aria-expanded')).toBe('true')
+            expect(lvl3.hidden).toBeFalsy()
+
+            fireEvent(fakeRow, customClick)
+
+            expect(fakeRow.getAttribute('aria-expanded')).toBe('false')
+            expect(lvl2.hidden).toBeTruthy()
+            expect(lvl2.getAttribute('aria-expanded')).toBe('false')
+            expect(lvl3.hidden).toBeTruthy()
+
+        })
+
+    })
+
+    test('Emmit the tree:changed event', () => {
+        const eventSpy = vi.spyOn(fakeListTree, 'emmitEvent')
+        expect(eventSpy).not.toHaveBeenCalled()
+        fireEvent(fakeLi, new MouseEvent('click'))
+        expect(eventSpy).toHaveBeenCalledWith('changed', { isOpen: true })
+    })
+
+})

package/js/utilities/_base-component.js

@@ -0,0 +1,101 @@
+/**
+ * ------------------------------------------------------------------
+ * Base component
+ * ------------------------------------------------------------------
+ * This class regroup common functionalities for other classes
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ */
+
+import ErrorMessage from "./_error"
+
+export default class BaseComponent {
+
+    #NAME
+
+    /**
+     * Creates an instance
+     *
+     * @param {HTMLElement} el - The element
+     * @param {Object} options - The custom options
+     * @constructor
+     */
+    constructor(el, options = {}) {
+
+        // Check for errors
+        if (!(el instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('el', 'HTMLElement'))
+        if (!(options instanceof Object)) throw new Error(ErrorMessage.instanceOf('options', 'Object'))
+
+        // Define the #NAME private properties
+        this.#NAME = this.constructor.name.toLowerCase() ?? ''
+
+        // Define the _element property
+        this._element = el
+
+        // Define the _options property by merging the options parameter with the static OPTIONS
+        const defaultOptions = this.constructor.OPTIONS ?? {}
+        this._options = this.mergeObject(defaultOptions, options)
+
+    }
+
+    /**
+     * Merge two object to a single one (accept multi-level)
+     * 
+     * @param {Object} one 
+     * @param {Object} two 
+     * @returns {Object}
+     */
+    mergeObject(one, two) {
+
+        // Check for errors
+        if (!(one instanceof Object)) throw new Error(ErrorMessage.instanceOf('one', 'Object'))
+        if (!(two instanceof Object)) throw new Error(ErrorMessage.instanceOf('two', 'Object'))
+
+        // Reduce the objects in a single one
+        return Object.keys(one).reduce((obj, key) => {
+
+            // Define the final option (if key is an object => call the method )
+            const option = two.hasOwnProperty(key) ? (one[key] instanceof Object ? this.mergeObject(one[key], two[key]) : two[key]) : one[key]
+
+            // Merge option  
+            return { ...obj, [key]: option }
+
+        }, {})
+
+    }
+
+    /**
+     * Create a CustomEvent
+     * 
+     * @param {String} name - The name of the event
+     * @param {Object} data - The data to pass
+     * @param {HTMLElement} selector - The HTML element who will have the event
+     * @returns {CustomEvent}
+     */
+    emmitEvent(name, data = {}, selector = this._element) {
+
+        // Check for errors
+        if (typeof name !== 'string') throw new Error(ErrorMessage.typeOf('name', 'string'))
+        if (!(data instanceof Object)) throw new Error(ErrorMessage.instanceOf('data', 'Object'))
+        if (!(selector instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('selector', 'HTMLElement'))
+
+        // Define the name of the event as classname:event
+        const eventName = `${this.#NAME}:${name}`
+
+        // Create a new CustomEvent
+        const newEvent = new CustomEvent(eventName, {
+            cancelable: true,
+            detail: data,
+        })
+
+        // Dispatch the event on the HTMLElement
+        selector.dispatchEvent(newEvent)
+
+        // Return the CustomEvent
+        return newEvent
+
+    }
+
+}

package/js/utilities/_cookie.js

@@ -0,0 +1,98 @@
+/**
+ * ------------------------------------------------------------------
+ * Cookie
+ * ------------------------------------------------------------------
+ * This class create and manage the cookies
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ */
+
+import ErrorMessage from "./_error"
+
+export default class Cookie {
+
+    #NAME
+
+    /**
+     * Creates an instance
+     *
+     * @param {string} name - The name of the cookie
+     * @constructor
+     */
+    constructor(name) {
+
+        // Check for errors
+        if (typeof name !== 'string') throw new Error(ErrorMessage.typeOf('name', 'string'))
+
+        // Define the static private properties
+        this.#NAME = name
+
+    }
+
+    /**
+     * Get the cookie value
+     * Code from {@link https://www.w3schools.com/js/js_cookies.asp W3School}.
+     * 
+     * @returns {object}
+     */
+    get value() {
+
+        const name = `${this.#NAME}=`
+        let decodedCookie = decodeURIComponent(document.cookie)
+        let ca = decodedCookie.split(';')
+        for (let i = 0; i < ca.length; i++) {
+            let c = ca[i]
+            while (c.charAt(0) == ' ') {
+                c = c.substring(1)
+            }
+            if (c.indexOf(name) == 0) {
+                return JSON.parse(c.substring(name.length, c.length))
+            }
+        }
+        return {}
+
+    }
+
+    /**
+     * Set the object value as string in the cookie
+     * 
+     * @param {object} value - Value of the cookie
+     */
+    set(value) {
+        if (!(value instanceof Object)) throw new Error(ErrorMessage.instanceOf('value', 'Object'))
+        document.cookie = `${this.#NAME}=${JSON.stringify(value)};SameSite=Lax`
+    }
+
+    /**
+     * Check if the cookie value has a specific key
+     * 
+     * @param {string} key - The string to search
+     * @returns {boolean}
+     */
+    has(key) {
+        if (typeof key !== 'string') throw new Error(ErrorMessage.typeOf('key', 'string'))
+        return this.value.hasOwnProperty(key)
+    }
+
+    /**
+     * Get a specific cookie value per key
+     * 
+     * @param {string} key - The string to search
+     * @returns
+     */
+    get(key) {
+        if (typeof key !== 'string') throw new Error(ErrorMessage.typeOf('key', 'string'))
+        return this.has(key) ? this.value[key] : null
+    }
+
+    /**
+     * Delete the cookie
+     * 
+     */
+    delete() {
+        document.cookie = this.#NAME + "=;SameSite=Lax; expires = Thu, 01 Jan 1970 00:00:00 GMT"
+    }
+
+}

package/js/utilities/_error.js

@@ -0,0 +1,80 @@
+/**
+ * ------------------------------------------------------------------
+ * Error
+ * ------------------------------------------------------------------
+ * This make global error message
+ * 
+ * @author Natacha Herth
+ * @version 0.0.1
+ * @copyright Natacha Herth, design & web development
+ */
+
+export default class ErrorMessage {
+
+    /**
+     * For: !(parameter instanceof type)
+     * 
+     * @param {string} parameter 
+     * @param {string} type 
+     * @returns {string}
+     */
+    static instanceOf(parameter, type) {
+        return `Whoops, the "${parameter}" parameter must be an instance of ${type} !`
+    }
+
+    /**
+     * For: typeof parameter !=== type
+     * 
+     * @param {string} parameter 
+     * @param {string} type 
+     * @returns {string}
+     */
+    static typeOf(parameter, type) {
+        return `Whoops, the "${parameter}" parameter must be a ${type} !`
+    }
+
+    /**
+     * For: ![values].includes(parameter)
+     * 
+     * @param {string} parameter 
+     * @param {string} type 
+     * @returns {string}
+     */
+    static enumOf(parameter, values) {
+        return `Whoops, the "${parameter}" parameter must be as ${values} !`
+    }
+
+    /**
+     * For: !tag.length or document.querySelector(tag)
+     * 
+     * @param {string} tag
+     * @returns {string}
+     * @returns {string}
+     */
+    static exist(tag) {
+        return `Whoops, there is no <${tag}> !`
+    }
+
+    /**
+     * For: !document.getElementById(id)
+     * 
+     * @param {string} tag 
+     * @param {string} id
+     * @returns {string}
+     */
+    static existById(tag, id) {
+        return `Whoops, there is no <${tag}> with the id "#${id}" !`
+    }
+
+    /**
+     * For: !tag.hasAttribute(attribute)
+     * 
+     * @param {string} tag 
+     * @param {string} attribute
+     * @returns {string}
+     */
+    static withAttribute(tag, attribute) {
+        return `Whoops, the <${tag}> must have the attribute [${attribute}] !`
+    }
+
+}