@natachah/vanilla-frontend 0.1.14 → 0.1.16

package/js/tests/slider.test.js

@@ -9,21 +9,18 @@
  * - 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
+ * - GoTo(): Go to the first or last slide via toGo() method
+ * - GoTo(): Change the [aria-selected], [aria-hidden] and [disabled] attributes
+ * - GoTo(): Emmit the slider:changed events
  * - 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"
@@ -33,12 +30,6 @@ 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
  * 
@@ -118,7 +109,7 @@ describe('Structure of the class', () => {
         expect(fakeSlider).toHaveProperty('_current')
         expect(fakeSlider).toHaveProperty('_interval')
         expect(fakeSlider._slides).toBeTypeOf('object')
-        expect(fakeSlider._slides).toStrictEqual(document.querySelectorAll('#slider [role=tabpanel]'))
+        expect(fakeSlider._slides).toStrictEqual(Array.from(document.querySelectorAll('#slider [role=tabpanel]')))
         expect(fakeSlider._buttons).toBeTypeOf('object')
         expect(fakeSlider._buttons.prev).toBeTypeOf('object')
         expect(fakeSlider._buttons.next).toBeTypeOf('object')
@@ -150,12 +141,6 @@ describe('#Init()', () => {
         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')
@@ -185,22 +170,62 @@ describe('GoTo()', () => {
         expect(() => fakeSlider.goTo()).toThrowError(ErrorMessage.typeOf('index', 'number'))
     })
 
-    test('Emit a scroll() method', () => {
-        const scrollSpy = vi.spyOn(fakeDiv, 'scroll')
+    test('Toggle the [aria-selected], [aria-hidden] and [disabled] attributes', () => {
         fakeSlider.goTo(0)
+        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()
+        fakeSlider.goTo(1)
+        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()
+        fakeSlider.goTo(2)
+        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('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)
+
+    })
+
+    test('Emmit the slider:changed events', () => {
+        const eventSpy = vi.spyOn(fakeSlider, 'emmitEvent')
+        fakeSlider.goTo(0)
+        expect(eventSpy).toHaveBeenCalledWith('changed', { current: 0, previous: 2 })
     })
 
 })
 
 describe('Prev()', () => {
 
-    afterAll(() => setScroll())
+    afterAll(() => fakeSlider.goTo(0))
 
     test('Emit a goTo() method with correct index', () => {
+        fakeSlider.goTo(1)
         const methodSpy = vi.spyOn(fakeSlider, 'goTo')
         fakeSlider.prev()
         expect(methodSpy).toHaveBeenCalledWith(0)
@@ -217,7 +242,7 @@ describe('Prev()', () => {
 
 describe('Next()', () => {
 
-    afterAll(() => setScroll())
+    afterAll(() => fakeSlider.goTo(0))
 
     test('Emit a goTo() method and index is X', () => {
         const methodSpy = vi.spyOn(fakeSlider, 'goTo')
@@ -232,76 +257,4 @@ describe('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

@@ -8,12 +8,10 @@
  * - 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
- * - #Move(): Go down on click and emmit the sortable:moved event
- * - #Move(): Go up on click and emmit the sortable:moved event
+ * - 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"
@@ -54,8 +52,8 @@ describe('Structure of the class', () => {
         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'))
+        expect(fakeListSortable._items).toBeTypeOf('object')
+        expect(fakeListSortable._items).toStrictEqual(document.querySelectorAll('#fakeList li'))
     })
 
 })
@@ -86,7 +84,7 @@ describe('Mousedown & Mouseup', () => {
 
 })
 
-describe('#Drag()', () => {
+describe('Drag()', () => {
 
     test('Add the [aria-grabbed] attribute', () => {
         expect(fakeListItem.hasAttribute('aria-grabbed')).toBeFalsy()
@@ -108,7 +106,7 @@ describe('#Drag()', () => {
 
 })
 
-describe('#Drop()', () => {
+describe('Drop()', () => {
 
     test('Remove the [aria-grabbed] attribute', () => {
         expect(fakeListItem.hasAttribute('aria-grabbed')).toBeTruthy()
@@ -124,23 +122,4 @@ describe('#Drop()', () => {
         expect(eventSpy).toHaveBeenCalledWith('drop', { current: fakeListItem, items: fakeListSortable.items })
     })
 
-})
-
-describe('#Move()', () => {
-
-    test('Go down on click and emmit the sortable:moved event', () => {
-        const eventSpy = vi.spyOn(fakeListSortable, 'emmitEvent')
-        fireEvent(fakeListItem.querySelector('[data-go=down]'), new MouseEvent('click'))
-        expect(fakeListItem).toBe(document.getElementById('fakeList').children[1])
-        expect(eventSpy).toHaveBeenCalledWith('moved', { current: fakeListItem, items: fakeListSortable.items })
-    })
-
-    test('Go up on click and emmit the sortable:moved event', () => {
-        const eventSpy = vi.spyOn(fakeListSortable, 'emmitEvent')
-        expect(fakeListItem).toBe(document.getElementById('fakeList').children[1])
-        fireEvent(fakeListItem.querySelector('[data-go=up]'), new MouseEvent('click'))
-        expect(fakeListItem).toBe(document.getElementById('fakeList').children[0])
-        expect(eventSpy).toHaveBeenCalledWith('moved', { current: fakeListItem, items: fakeListSortable.items })
-    })
-
 })

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.1.14",
+    "version": "0.1.16",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",

package/scss/components/_slider.scss

@@ -18,17 +18,18 @@
     grid-auto-flow: column;
     grid-auto-columns: calc((100% / var(--slider-columns, 1)) - var(--slider-gap, 0rem));
     gap: var(--slider-gap, 0);
-    overscroll-behavior-inline: contain;
-    overflow-x: auto;
-    scroll-snap-type: inline mandatory;
+    overflow: hidden;
+    //overscroll-behavior-inline: contain;
+    //overflow-x: auto;
+    //scroll-snap-type: inline mandatory;
 
     // Remove Scrollbar 
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+    //scrollbar-width: none;
+    //-ms-overflow-style: none;
 
     > * {
-        scroll-snap-align: start;
-        scroll-padding-inline: 0;
+        //scroll-snap-align: start;
+        //scroll-padding-inline: 0;
     }
 
 }