test: add test coverage for new modules and refactored code

packages/drawer/index.js

@@ -18,7 +18,6 @@ export default class Drawer {
     this.state = {};
     this.focusTrap = new FocusTrap();
     this.breakpoint = new Breakpoint(this);
-    this.selectorTabindex = `[data-${this.settings.dataDrawer}] [data-${this.settings.dataDialog}]`;
     this.__handlerClick = handlerClick.bind(this);
     this.__handlerKeyup = handlerKeyup.bind(this);
     if (this.settings.autoInit) this.init();
@@ -27,7 +26,7 @@ export default class Drawer {
   init(options = null) {
     if (options) this.settings = { ...this.settings, ...options };
     this.stateSet();
-    this.setTabindex(this.settings.setTabindex, this.selectorTabindex);
+    this.setTabindex(this.settings.setTabindex);
     this.breakpoint.init();
     document.addEventListener('click', this.__handlerClick, false);
     document.addEventListener('touchend', this.__handlerClick, false);
@@ -62,7 +61,11 @@ export default class Drawer {
   }
 
   setTabindex(state = true) {
-    setTabindex(state, this.selectorTabindex);
+    const selectorTabindex = `
+      [data-${this.settings.dataDrawer}]
+      [data-${this.settings.dataDialog}]
+    `;
+    setTabindex(state, selectorTabindex);
   }
 
   /**

packages/drawer/src/js/breakpoint.js

@@ -38,12 +38,11 @@ export class Breakpoint {
         // If an event is passed, filter out drawers that don't match the query
         // If event is null, run all drawers through match
         let filter = (event) ? event.media == item.mql.media : true;
-        if (filter) {
-          const drawer = document.querySelector(`[data-${this.parent.settings.dataDrawer}="${item.drawer}"]`);
-          if (drawer) {
-            this.match(item.mql, drawer);
-          }
-        }
+        if (!filter) return;
+        const drawer = document.querySelector(
+          `[data-${this.parent.settings.dataDrawer}="${item.drawer}"]`
+        );
+        if (drawer) this.match(item.mql, drawer);
       });
       document.dispatchEvent(new CustomEvent(this.parent.settings.customEventPrefix + 'breakpoint', {
         bubbles: true

packages/drawer/src/js/state.js

@@ -23,7 +23,7 @@ export function stateSet(settings) {
   return state;
 }
 
-export function stateSave(target = null, settings) {
+export function stateSave(target, settings) {
   // If save state is disabled
   if (!settings.stateSave)
     return stateClear(settings);
@@ -36,7 +36,6 @@ export function stateSave(target = null, settings) {
   const drawers = (target) ? [target] :
     document.querySelectorAll(`[data-${settings.dataDrawer}]`);
 
-
   // Loop through drawers and save their states
   drawers.forEach((el) => {
     if (hasClass(el, settings.classModal)) return;

packages/drawer/tests/breakpoint.test.js

@@ -234,6 +234,12 @@ test('should not throw error when a drawer in mediaQueryLists doesn\'t exist in
   document.body.innerHTML = markup;
   window.innerWidth = 300;
   drawer = new Drawer({ autoInit: true });
-  drawer.breakpoint.mediaQueryLists[0].drawer = 'fake-drawer';
+  drawer.breakpoint.mediaQueryLists[0].drawer = 'asdf-drawer';
+  drawer.breakpoint.check();
+  // console.log(drawer.breakpoint.mediaQueryLists);
   expect(drawer.breakpoint.check.bind(drawer)).not.toThrow();
 });
+
+// test('should not throw error if breakpoint check doesn\'t find a specific drawer', () => {
+
+// });

packages/drawer/tests/state.test.js

@@ -1,4 +1,5 @@
 import Drawer from '../index.js';
+import { stateSave } from '../src/js/state';
 import { transition } from './helpers/transition';
 import '@testing-library/jest-dom/extend-expect';
 
@@ -203,3 +204,47 @@ test('should not save state if a modal drawer', () => {
   const state = JSON.parse(localStorage.getItem('DrawerState'));
   expect(state).not.toHaveProperty('drawer-three');
 });
+
+test('should clear current state if stateClear API is called', () => {
+  document.body.innerHTML = markup;
+  drawer = new Drawer({ autoInit: true });
+  let state = JSON.parse(localStorage.getItem('DrawerState'));
+  expect(Object.keys(drawer.state).length).toBe(2);
+  expect(Object.keys(state).length).toBe(2);
+
+  drawer.stateClear();
+  state = localStorage.getItem('DrawerState');
+  expect(Object.keys(drawer.state).length).toBe(0);
+  expect(state).toBe(null);
+});
+
+test('should save state of all drawers when saveState is called with no passed target', () => {
+  document.body.innerHTML = markup;
+  drawer = new Drawer();
+
+  localStorage.removeItem('DrawerState');
+  let state = localStorage.getItem('DrawerState');
+  expect(Object.keys(drawer.state).length).toBe(0);
+  expect(state).toBe(null);
+
+  drawer.stateSave();
+  state = JSON.parse(localStorage.getItem('DrawerState'));
+  expect(Object.keys(drawer.state).length).toBe(2);
+  expect(Object.keys(state).length).toBe(2);
+});
+
+test('should save a single drawer when manually passed to stateSave module', () => {
+  document.body.innerHTML = markup;
+  drawer = new Drawer();
+  const el = document.querySelector('[data-drawer="drawer-one"]');
+
+  localStorage.removeItem('DrawerState');
+  let state = localStorage.getItem('DrawerState');
+  expect(Object.keys(drawer.state).length).toBe(0);
+  expect(state).toBe(null);
+
+  drawer.state = stateSave(el, drawer.settings);
+  state = JSON.parse(localStorage.getItem('DrawerState'));
+  expect(Object.keys(drawer.state).length).toBe(1);
+  expect(Object.keys(state).length).toBe(1);
+});

packages/drawer/tests/transition.test.js

@@ -99,6 +99,12 @@ test('should apply state classes on `click` and `transitionend` events', async (
   expect(el).not.toHaveClass('is-opening is-opened is-closing');
 });
 
+test('should be able to pass options on init method', () => {
+  drawer = new Drawer({ stateKey: 'OnNew' });
+  drawer.init({ stateKey: 'OnInit' });
+  expect(drawer.settings.stateKey).toBe('OnInit');
+});
+
 test('should open and close drawer using data attribute triggers', async () => {
   document.body.innerHTML = markup;
   drawer = new Drawer();

packages/modal/tests/api.test.js

@@ -166,3 +166,11 @@ test('should set initial state even when modal is open', async () => {
   expect(el).toHaveClass('is-closed');
   expect(el.classList.length).toBe(2);
 });
+
+test('should return argument if not a string when getModal is called', () => {
+  document.body.innerHTML = markup;
+  modal = new Modal({ autoInit: true });
+  const el = document.querySelector('[data-modal="modal-default"]');
+  const getEl = modal.getModal(el);
+  expect(getEl).toBe(el);
+});

packages/modal/tests/transition.test.js

@@ -77,6 +77,12 @@ test('should apply state classes on `click` and `transitionend` events', async (
   expect(el).not.toHaveClass('is-opening is-opened is-closing');
 });
 
+test('should be able to pass options on init method', () => {
+  modal = new Modal({ customEventPrefix: 'OnNew' });
+  modal.init({ customEventPrefix: 'OnInit' });
+  expect(modal.settings.customEventPrefix).toBe('OnInit');
+});
+
 test('should apply state classes with custom data attributes', async () => {
   document.body.innerHTML = markupCustomAttr;
   modal = new Modal({