From f2f44579a3ae944104d76681e75a85e6d0ceb756 Mon Sep 17 00:00:00 2001 From: "Luke \"Jared\" Bennett" Date: Fri, 7 Apr 2017 01:34:19 +0100 Subject: Renamed spec files --- spec/javascripts/droplab/constants.js | 29 -- spec/javascripts/droplab/constants_spec.js | 29 ++ spec/javascripts/droplab/drop_down.js | 578 --------------------- spec/javascripts/droplab/drop_down_spec.js | 578 +++++++++++++++++++++ spec/javascripts/droplab/hook.js | 82 --- spec/javascripts/droplab/hook_spec.js | 82 +++ spec/javascripts/droplab/plugins/input_setter.js | 246 --------- .../droplab/plugins/input_setter_spec.js | 246 +++++++++ 8 files changed, 935 insertions(+), 935 deletions(-) delete mode 100644 spec/javascripts/droplab/constants.js create mode 100644 spec/javascripts/droplab/constants_spec.js delete mode 100644 spec/javascripts/droplab/drop_down.js create mode 100644 spec/javascripts/droplab/drop_down_spec.js delete mode 100644 spec/javascripts/droplab/hook.js create mode 100644 spec/javascripts/droplab/hook_spec.js delete mode 100644 spec/javascripts/droplab/plugins/input_setter.js create mode 100644 spec/javascripts/droplab/plugins/input_setter_spec.js (limited to 'spec/javascripts') diff --git a/spec/javascripts/droplab/constants.js b/spec/javascripts/droplab/constants.js deleted file mode 100644 index 35239e4fb8e..00000000000 --- a/spec/javascripts/droplab/constants.js +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable */ - -import * as constants from '~/droplab/constants'; - -describe('constants', function () { - describe('DATA_TRIGGER', function () { - it('should be `data-dropdown-trigger`', function() { - expect(constants.DATA_TRIGGER).toBe('data-dropdown-trigger'); - }); - }); - - describe('DATA_DROPDOWN', function () { - it('should be `data-dropdown`', function() { - expect(constants.DATA_DROPDOWN).toBe('data-dropdown'); - }); - }); - - describe('SELECTED_CLASS', function () { - it('should be `droplab-item-selected`', function() { - expect(constants.SELECTED_CLASS).toBe('droplab-item-selected'); - }); - }); - - describe('ACTIVE_CLASS', function () { - it('should be `droplab-item-active`', function() { - expect(constants.ACTIVE_CLASS).toBe('droplab-item-active'); - }); - }); -}); diff --git a/spec/javascripts/droplab/constants_spec.js b/spec/javascripts/droplab/constants_spec.js new file mode 100644 index 00000000000..35239e4fb8e --- /dev/null +++ b/spec/javascripts/droplab/constants_spec.js @@ -0,0 +1,29 @@ +/* eslint-disable */ + +import * as constants from '~/droplab/constants'; + +describe('constants', function () { + describe('DATA_TRIGGER', function () { + it('should be `data-dropdown-trigger`', function() { + expect(constants.DATA_TRIGGER).toBe('data-dropdown-trigger'); + }); + }); + + describe('DATA_DROPDOWN', function () { + it('should be `data-dropdown`', function() { + expect(constants.DATA_DROPDOWN).toBe('data-dropdown'); + }); + }); + + describe('SELECTED_CLASS', function () { + it('should be `droplab-item-selected`', function() { + expect(constants.SELECTED_CLASS).toBe('droplab-item-selected'); + }); + }); + + describe('ACTIVE_CLASS', function () { + it('should be `droplab-item-active`', function() { + expect(constants.ACTIVE_CLASS).toBe('droplab-item-active'); + }); + }); +}); diff --git a/spec/javascripts/droplab/drop_down.js b/spec/javascripts/droplab/drop_down.js deleted file mode 100644 index bbf953658c8..00000000000 --- a/spec/javascripts/droplab/drop_down.js +++ /dev/null @@ -1,578 +0,0 @@ -/* eslint-disable */ - -import DropDown from '~/droplab/drop_down'; -import utils from '~/droplab/utils'; -import { SELECTED_CLASS } from '~/droplab/constants'; - -describe('DropDown', function () { - describe('class constructor', function () { - beforeEach(function () { - spyOn(DropDown.prototype, 'getItems'); - spyOn(DropDown.prototype, 'initTemplateString'); - spyOn(DropDown.prototype, 'addEvents'); - - this.list = { innerHTML: 'innerHTML' }; - this.dropdown = new DropDown(this.list); - }); - - it('sets the .hidden property to true', function () { - expect(this.dropdown.hidden).toBe(true); - }) - - it('sets the .list property', function () { - expect(this.dropdown.list).toBe(this.list); - }); - - it('calls .getItems', function () { - expect(DropDown.prototype.getItems).toHaveBeenCalled(); - }); - - it('calls .initTemplateString', function () { - expect(DropDown.prototype.initTemplateString).toHaveBeenCalled(); - }); - - it('calls .addEvents', function () { - expect(DropDown.prototype.addEvents).toHaveBeenCalled(); - }); - - it('sets the .initialState property to the .list.innerHTML', function () { - expect(this.dropdown.initialState).toBe(this.list.innerHTML); - }); - - describe('if the list argument is a string', function () { - beforeEach(function () { - this.element = {}; - this.selector = '.selector'; - - spyOn(Document.prototype, 'querySelector').and.returnValue(this.element); - - this.dropdown = new DropDown(this.selector); - }); - - it('calls .querySelector with the selector string', function () { - expect(Document.prototype.querySelector).toHaveBeenCalledWith(this.selector); - }); - - it('sets the .list property element', function () { - expect(this.dropdown.list).toBe(this.element); - }); - }); - }); - - describe('getItems', function () { - beforeEach(function () { - this.list = { querySelectorAll: () => {} }; - this.dropdown = { list: this.list }; - this.nodeList = []; - - spyOn(this.list, 'querySelectorAll').and.returnValue(this.nodeList); - - this.getItems = DropDown.prototype.getItems.call(this.dropdown); - }); - - it('calls .querySelectorAll with a list item query', function () { - expect(this.list.querySelectorAll).toHaveBeenCalledWith('li'); - }); - - it('sets the .items property to the returned list items', function () { - expect(this.dropdown.items).toEqual(jasmine.any(Array)); - }); - - it('returns the .items', function () { - expect(this.getItems).toEqual(jasmine.any(Array)); - }); - }); - - describe('initTemplateString', function () { - beforeEach(function () { - this.items = [{ outerHTML: '' }, { outerHTML: '' }]; - this.dropdown = { items: this.items }; - - DropDown.prototype.initTemplateString.call(this.dropdown); - }); - - it('should set .templateString to the last items .outerHTML', function () { - expect(this.dropdown.templateString).toBe(this.items[1].outerHTML); - }); - - it('should not set .templateString to a non-last items .outerHTML', function () { - expect(this.dropdown.templateString).not.toBe(this.items[0].outerHTML); - }); - - describe('if .items is not set', function () { - beforeEach(function () { - this.dropdown = { getItems: () => {} }; - - spyOn(this.dropdown, 'getItems').and.returnValue([]); - - DropDown.prototype.initTemplateString.call(this.dropdown); - }); - - it('should call .getItems', function () { - expect(this.dropdown.getItems).toHaveBeenCalled(); - }); - }); - - describe('if items array is empty', function () { - beforeEach(function () { - this.dropdown = { items: [] }; - - DropDown.prototype.initTemplateString.call(this.dropdown); - }); - - it('should set .templateString to an empty string', function () { - expect(this.dropdown.templateString).toBe(''); - }); - }); - }); - - describe('clickEvent', function () { - beforeEach(function () { - this.list = { dispatchEvent: () => {} }; - this.dropdown = { hide: () => {}, list: this.list, addSelectedClass: () => {} }; - this.event = { preventDefault: () => {}, target: 'target' }; - this.customEvent = {}; - this.closestElement = {}; - - spyOn(this.dropdown, 'hide'); - spyOn(this.dropdown, 'addSelectedClass'); - spyOn(this.list, 'dispatchEvent'); - spyOn(this.event, 'preventDefault'); - spyOn(window, 'CustomEvent').and.returnValue(this.customEvent); - spyOn(utils, 'closest').and.returnValues(this.closestElement, undefined); - - DropDown.prototype.clickEvent.call(this.dropdown, this.event); - }); - - it('should call utils.closest', function () { - expect(utils.closest).toHaveBeenCalledWith(this.event.target, 'LI'); - }); - - it('should call addSelectedClass', function () { - expect(this.dropdown.addSelectedClass).toHaveBeenCalledWith(this.closestElement); - }) - - it('should call .preventDefault', function () { - expect(this.event.preventDefault).toHaveBeenCalled(); - }); - - it('should call .hide', function () { - expect(this.dropdown.hide).toHaveBeenCalled(); - }); - - it('should construct CustomEvent', function () { - expect(window.CustomEvent).toHaveBeenCalledWith('click.dl', jasmine.any(Object)); - }); - - it('should call .dispatchEvent with the customEvent', function () { - expect(this.list.dispatchEvent).toHaveBeenCalledWith(this.customEvent); - }); - - describe('if no selected element exists', function () { - beforeEach(function () { - this.event.preventDefault.calls.reset(); - this.clickEvent = DropDown.prototype.clickEvent.call(this.dropdown, this.event); - }); - - it('should return undefined', function () { - expect(this.clickEvent).toBe(undefined); - }); - - it('should return before .preventDefault is called', function () { - expect(this.event.preventDefault).not.toHaveBeenCalled(); - }); - }); - }); - - describe('addSelectedClass', function () { - beforeEach(function () { - this.items = Array(4).forEach((item, i) => { - this.items[i] = { classList: { add: () => {} } }; - spyOn(this.items[i].classList, 'add'); - }); - this.selected = { classList: { add: () => {} } }; - this.dropdown = { removeSelectedClasses: () => {} }; - - spyOn(this.dropdown, 'removeSelectedClasses'); - spyOn(this.selected.classList, 'add'); - - DropDown.prototype.addSelectedClass.call(this.dropdown, this.selected); - }); - - it('should call .removeSelectedClasses', function () { - expect(this.dropdown.removeSelectedClasses).toHaveBeenCalled(); - }); - - it('should call .classList.add', function () { - expect(this.selected.classList.add).toHaveBeenCalledWith(SELECTED_CLASS); - }); - }); - - describe('removeSelectedClasses', function () { - beforeEach(function () { - this.items = Array(4); - this.items.forEach((item, i) => { - this.items[i] = { classList: { add: () => {} } }; - spyOn(this.items[i].classList, 'add'); - }); - this.dropdown = { items: this.items }; - - DropDown.prototype.removeSelectedClasses.call(this.dropdown); - }); - - it('should call .classList.remove for all items', function () { - this.items.forEach((item, i) => { - expect(this.items[i].classList.add).toHaveBeenCalledWith(SELECTED_CLASS); - }); - }); - - describe('if .items is not set', function () { - beforeEach(function () { - this.dropdown = { getItems: () => {} }; - - spyOn(this.dropdown, 'getItems').and.returnValue([]); - - DropDown.prototype.removeSelectedClasses.call(this.dropdown); - }); - - it('should call .getItems', function () { - expect(this.dropdown.getItems).toHaveBeenCalled(); - }); - }); - }); - - describe('addEvents', function () { - beforeEach(function () { - this.list = { addEventListener: () => {} }; - this.dropdown = { list: this.list, clickEvent: () => {}, eventWrapper: {} }; - - spyOn(this.list, 'addEventListener'); - - DropDown.prototype.addEvents.call(this.dropdown); - }); - - it('should call .addEventListener', function () { - expect(this.list.addEventListener).toHaveBeenCalledWith('click', jasmine.any(Function)); - }); - }); - - describe('toggle', function () { - beforeEach(function () { - this.dropdown = { hidden: true, show: () => {}, hide: () => {} }; - - spyOn(this.dropdown, 'show'); - spyOn(this.dropdown, 'hide'); - - DropDown.prototype.toggle.call(this.dropdown); - }); - - it('should call .show if hidden is true', function () { - expect(this.dropdown.show).toHaveBeenCalled(); - }); - - describe('if hidden is false', function () { - beforeEach(function () { - this.dropdown = { hidden: false, show: () => {}, hide: () => {} }; - - spyOn(this.dropdown, 'show'); - spyOn(this.dropdown, 'hide'); - - DropDown.prototype.toggle.call(this.dropdown); - }); - - it('should call .show if hidden is true', function () { - expect(this.dropdown.hide).toHaveBeenCalled(); - }); - }); - }); - - describe('setData', function () { - beforeEach(function () { - this.dropdown = { render: () => {} }; - this.data = ['data']; - - spyOn(this.dropdown, 'render'); - - DropDown.prototype.setData.call(this.dropdown, this.data); - }); - - it('should set .data', function () { - expect(this.dropdown.data).toBe(this.data); - }); - - it('should call .render with the .data', function () { - expect(this.dropdown.render).toHaveBeenCalledWith(this.data); - }); - }); - - describe('addData', function () { - beforeEach(function () { - this.dropdown = { render: () => {}, data: ['data1'] }; - this.data = ['data2']; - - spyOn(this.dropdown, 'render'); - spyOn(Array.prototype, 'concat').and.callThrough(); - - DropDown.prototype.addData.call(this.dropdown, this.data); - }); - - it('should call .concat with data', function () { - expect(Array.prototype.concat).toHaveBeenCalledWith(this.data); - }); - - it('should set .data with concatination', function () { - expect(this.dropdown.data).toEqual(['data1', 'data2']); - }); - - it('should call .render with the .data', function () { - expect(this.dropdown.render).toHaveBeenCalledWith(['data1', 'data2']); - }); - - describe('if .data is undefined', function () { - beforeEach(function () { - this.dropdown = { render: () => {}, data: undefined }; - this.data = ['data2']; - - spyOn(this.dropdown, 'render'); - - DropDown.prototype.addData.call(this.dropdown, this.data); - }); - - it('should set .data with concatination', function () { - expect(this.dropdown.data).toEqual(['data2']); - }); - }); - }); - - describe('render', function () { - beforeEach(function () { - this.list = { querySelector: () => {} }; - this.dropdown = { renderChildren: () => {}, list: this.list }; - this.renderableList = {}; - this.data = [0, 1]; - - spyOn(this.dropdown, 'renderChildren').and.callFake(data => data); - spyOn(this.list, 'querySelector').and.returnValue(this.renderableList); - spyOn(this.data, 'map').and.callThrough(); - - DropDown.prototype.render.call(this.dropdown, this.data); - }); - - it('should call .map', function () { - expect(this.data.map).toHaveBeenCalledWith(jasmine.any(Function)); - }); - - it('should call .renderChildren for each data item', function() { - expect(this.dropdown.renderChildren.calls.count()).toBe(this.data.length); - }); - - it('sets the renderableList .innerHTML', function () { - expect(this.renderableList.innerHTML).toBe('01'); - }); - - describe('if no data argument is passed' , function () { - beforeEach(function () { - this.data.map.calls.reset(); - this.dropdown.renderChildren.calls.reset(); - - DropDown.prototype.render.call(this.dropdown, undefined); - }); - - it('should not call .map', function () { - expect(this.data.map).not.toHaveBeenCalled(); - }); - - it('should not call .renderChildren', function () { - expect(this.dropdown.renderChildren).not.toHaveBeenCalled(); - }); - }); - - describe('if no dynamic list is present', function () { - beforeEach(function () { - this.list = { querySelector: () => {} }; - this.dropdown = { renderChildren: () => {}, list: this.list }; - this.data = [0, 1]; - - spyOn(this.dropdown, 'renderChildren').and.callFake(data => data); - spyOn(this.list, 'querySelector'); - spyOn(this.data, 'map').and.callThrough(); - - DropDown.prototype.render.call(this.dropdown, this.data); - }); - - it('sets the .list .innerHTML', function () { - expect(this.list.innerHTML).toBe('01'); - }); - }); - }); - - describe('renderChildren', function () { - beforeEach(function () { - this.templateString = 'templateString'; - this.dropdown = { setImagesSrc: () => {}, templateString: this.templateString }; - this.data = { droplab_hidden: true }; - this.html = 'html'; - this.template = { firstChild: { outerHTML: 'outerHTML', style: {} } }; - - spyOn(utils, 't').and.returnValue(this.html); - spyOn(document, 'createElement').and.returnValue(this.template); - spyOn(this.dropdown, 'setImagesSrc'); - - this.renderChildren = DropDown.prototype.renderChildren.call(this.dropdown, this.data); - }); - - it('should call utils.t with .templateString and data', function () { - expect(utils.t).toHaveBeenCalledWith(this.templateString, this.data); - }); - - it('should call document.createElement', function () { - expect(document.createElement).toHaveBeenCalledWith('div'); - }); - - it('should set the templates .innerHTML to the HTML', function () { - expect(this.template.innerHTML).toBe(this.html); - }); - - it('should call .setImagesSrc with the template', function () { - expect(this.dropdown.setImagesSrc).toHaveBeenCalledWith(this.template); - }); - - it('should set the template display to none', function () { - expect(this.template.firstChild.style.display).toBe('none'); - }); - - it('should return the templates .firstChild.outerHTML', function () { - expect(this.renderChildren).toBe(this.template.firstChild.outerHTML); - }); - - describe('if droplab_hidden is false', function () { - beforeEach(function () { - this.data = { droplab_hidden: false }; - this.renderChildren = DropDown.prototype.renderChildren.call(this.dropdown, this.data); - }); - - it('should set the template display to block', function () { - expect(this.template.firstChild.style.display).toBe('block'); - }); - }); - }); - - describe('setImagesSrc', function () { - beforeEach(function () { - this.dropdown = {}; - this.template = { querySelectorAll: () => {} }; - - spyOn(this.template, 'querySelectorAll').and.returnValue([]); - - DropDown.prototype.setImagesSrc.call(this.dropdown, this.template); - }); - - it('should call .querySelectorAll', function () { - expect(this.template.querySelectorAll).toHaveBeenCalledWith('img[data-src]'); - }); - }); - - describe('show', function () { - beforeEach(function () { - this.list = { style: {} }; - this.dropdown = { list: this.list, hidden: true }; - - DropDown.prototype.show.call(this.dropdown); - }); - - it('it should set .list display to block', function () { - expect(this.list.style.display).toBe('block'); - }); - - it('it should set .hidden to false', function () { - expect(this.dropdown.hidden).toBe(false); - }); - - describe('if .hidden is false', function () { - beforeEach(function () { - this.list = { style: {} }; - this.dropdown = { list: this.list, hidden: false }; - - this.show = DropDown.prototype.show.call(this.dropdown); - }); - - it('should return undefined', function () { - expect(this.show).toEqual(undefined); - }); - - it('should not set .list display to block', function () { - expect(this.list.style.display).not.toEqual('block'); - }); - }); - }); - - describe('hide', function () { - beforeEach(function () { - this.list = { style: {} }; - this.dropdown = { list: this.list }; - - DropDown.prototype.hide.call(this.dropdown); - }); - - it('it should set .list display to none', function () { - expect(this.list.style.display).toBe('none'); - }); - - it('it should set .hidden to true', function () { - expect(this.dropdown.hidden).toBe(true); - }); - }); - - describe('toggle', function () { - beforeEach(function () { - this.hidden = true - this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} }; - - spyOn(this.dropdown, 'show'); - spyOn(this.dropdown, 'hide'); - - DropDown.prototype.toggle.call(this.dropdown); - }); - - it('should call .show', function () { - expect(this.dropdown.show).toHaveBeenCalled(); - }); - - describe('if .hidden is false', function () { - beforeEach(function () { - this.hidden = false - this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} }; - - spyOn(this.dropdown, 'show'); - spyOn(this.dropdown, 'hide'); - - DropDown.prototype.toggle.call(this.dropdown); - }); - - it('should call .hide', function () { - expect(this.dropdown.hide).toHaveBeenCalled(); - }); - }); - }); - - describe('destroy', function () { - beforeEach(function () { - this.list = { removeEventListener: () => {} }; - this.eventWrapper = { clickEvent: 'clickEvent' }; - this.dropdown = { list: this.list, hide: () => {}, eventWrapper: this.eventWrapper }; - - spyOn(this.list, 'removeEventListener'); - spyOn(this.dropdown, 'hide'); - - DropDown.prototype.destroy.call(this.dropdown); - }); - - it('it should call .hide', function () { - expect(this.dropdown.hide).toHaveBeenCalled(); - }); - - it('it should call .removeEventListener', function () { - expect(this.list.removeEventListener).toHaveBeenCalledWith('click', this.eventWrapper.clickEvent); - }); - }); -}); diff --git a/spec/javascripts/droplab/drop_down_spec.js b/spec/javascripts/droplab/drop_down_spec.js new file mode 100644 index 00000000000..bbf953658c8 --- /dev/null +++ b/spec/javascripts/droplab/drop_down_spec.js @@ -0,0 +1,578 @@ +/* eslint-disable */ + +import DropDown from '~/droplab/drop_down'; +import utils from '~/droplab/utils'; +import { SELECTED_CLASS } from '~/droplab/constants'; + +describe('DropDown', function () { + describe('class constructor', function () { + beforeEach(function () { + spyOn(DropDown.prototype, 'getItems'); + spyOn(DropDown.prototype, 'initTemplateString'); + spyOn(DropDown.prototype, 'addEvents'); + + this.list = { innerHTML: 'innerHTML' }; + this.dropdown = new DropDown(this.list); + }); + + it('sets the .hidden property to true', function () { + expect(this.dropdown.hidden).toBe(true); + }) + + it('sets the .list property', function () { + expect(this.dropdown.list).toBe(this.list); + }); + + it('calls .getItems', function () { + expect(DropDown.prototype.getItems).toHaveBeenCalled(); + }); + + it('calls .initTemplateString', function () { + expect(DropDown.prototype.initTemplateString).toHaveBeenCalled(); + }); + + it('calls .addEvents', function () { + expect(DropDown.prototype.addEvents).toHaveBeenCalled(); + }); + + it('sets the .initialState property to the .list.innerHTML', function () { + expect(this.dropdown.initialState).toBe(this.list.innerHTML); + }); + + describe('if the list argument is a string', function () { + beforeEach(function () { + this.element = {}; + this.selector = '.selector'; + + spyOn(Document.prototype, 'querySelector').and.returnValue(this.element); + + this.dropdown = new DropDown(this.selector); + }); + + it('calls .querySelector with the selector string', function () { + expect(Document.prototype.querySelector).toHaveBeenCalledWith(this.selector); + }); + + it('sets the .list property element', function () { + expect(this.dropdown.list).toBe(this.element); + }); + }); + }); + + describe('getItems', function () { + beforeEach(function () { + this.list = { querySelectorAll: () => {} }; + this.dropdown = { list: this.list }; + this.nodeList = []; + + spyOn(this.list, 'querySelectorAll').and.returnValue(this.nodeList); + + this.getItems = DropDown.prototype.getItems.call(this.dropdown); + }); + + it('calls .querySelectorAll with a list item query', function () { + expect(this.list.querySelectorAll).toHaveBeenCalledWith('li'); + }); + + it('sets the .items property to the returned list items', function () { + expect(this.dropdown.items).toEqual(jasmine.any(Array)); + }); + + it('returns the .items', function () { + expect(this.getItems).toEqual(jasmine.any(Array)); + }); + }); + + describe('initTemplateString', function () { + beforeEach(function () { + this.items = [{ outerHTML: '' }, { outerHTML: '' }]; + this.dropdown = { items: this.items }; + + DropDown.prototype.initTemplateString.call(this.dropdown); + }); + + it('should set .templateString to the last items .outerHTML', function () { + expect(this.dropdown.templateString).toBe(this.items[1].outerHTML); + }); + + it('should not set .templateString to a non-last items .outerHTML', function () { + expect(this.dropdown.templateString).not.toBe(this.items[0].outerHTML); + }); + + describe('if .items is not set', function () { + beforeEach(function () { + this.dropdown = { getItems: () => {} }; + + spyOn(this.dropdown, 'getItems').and.returnValue([]); + + DropDown.prototype.initTemplateString.call(this.dropdown); + }); + + it('should call .getItems', function () { + expect(this.dropdown.getItems).toHaveBeenCalled(); + }); + }); + + describe('if items array is empty', function () { + beforeEach(function () { + this.dropdown = { items: [] }; + + DropDown.prototype.initTemplateString.call(this.dropdown); + }); + + it('should set .templateString to an empty string', function () { + expect(this.dropdown.templateString).toBe(''); + }); + }); + }); + + describe('clickEvent', function () { + beforeEach(function () { + this.list = { dispatchEvent: () => {} }; + this.dropdown = { hide: () => {}, list: this.list, addSelectedClass: () => {} }; + this.event = { preventDefault: () => {}, target: 'target' }; + this.customEvent = {}; + this.closestElement = {}; + + spyOn(this.dropdown, 'hide'); + spyOn(this.dropdown, 'addSelectedClass'); + spyOn(this.list, 'dispatchEvent'); + spyOn(this.event, 'preventDefault'); + spyOn(window, 'CustomEvent').and.returnValue(this.customEvent); + spyOn(utils, 'closest').and.returnValues(this.closestElement, undefined); + + DropDown.prototype.clickEvent.call(this.dropdown, this.event); + }); + + it('should call utils.closest', function () { + expect(utils.closest).toHaveBeenCalledWith(this.event.target, 'LI'); + }); + + it('should call addSelectedClass', function () { + expect(this.dropdown.addSelectedClass).toHaveBeenCalledWith(this.closestElement); + }) + + it('should call .preventDefault', function () { + expect(this.event.preventDefault).toHaveBeenCalled(); + }); + + it('should call .hide', function () { + expect(this.dropdown.hide).toHaveBeenCalled(); + }); + + it('should construct CustomEvent', function () { + expect(window.CustomEvent).toHaveBeenCalledWith('click.dl', jasmine.any(Object)); + }); + + it('should call .dispatchEvent with the customEvent', function () { + expect(this.list.dispatchEvent).toHaveBeenCalledWith(this.customEvent); + }); + + describe('if no selected element exists', function () { + beforeEach(function () { + this.event.preventDefault.calls.reset(); + this.clickEvent = DropDown.prototype.clickEvent.call(this.dropdown, this.event); + }); + + it('should return undefined', function () { + expect(this.clickEvent).toBe(undefined); + }); + + it('should return before .preventDefault is called', function () { + expect(this.event.preventDefault).not.toHaveBeenCalled(); + }); + }); + }); + + describe('addSelectedClass', function () { + beforeEach(function () { + this.items = Array(4).forEach((item, i) => { + this.items[i] = { classList: { add: () => {} } }; + spyOn(this.items[i].classList, 'add'); + }); + this.selected = { classList: { add: () => {} } }; + this.dropdown = { removeSelectedClasses: () => {} }; + + spyOn(this.dropdown, 'removeSelectedClasses'); + spyOn(this.selected.classList, 'add'); + + DropDown.prototype.addSelectedClass.call(this.dropdown, this.selected); + }); + + it('should call .removeSelectedClasses', function () { + expect(this.dropdown.removeSelectedClasses).toHaveBeenCalled(); + }); + + it('should call .classList.add', function () { + expect(this.selected.classList.add).toHaveBeenCalledWith(SELECTED_CLASS); + }); + }); + + describe('removeSelectedClasses', function () { + beforeEach(function () { + this.items = Array(4); + this.items.forEach((item, i) => { + this.items[i] = { classList: { add: () => {} } }; + spyOn(this.items[i].classList, 'add'); + }); + this.dropdown = { items: this.items }; + + DropDown.prototype.removeSelectedClasses.call(this.dropdown); + }); + + it('should call .classList.remove for all items', function () { + this.items.forEach((item, i) => { + expect(this.items[i].classList.add).toHaveBeenCalledWith(SELECTED_CLASS); + }); + }); + + describe('if .items is not set', function () { + beforeEach(function () { + this.dropdown = { getItems: () => {} }; + + spyOn(this.dropdown, 'getItems').and.returnValue([]); + + DropDown.prototype.removeSelectedClasses.call(this.dropdown); + }); + + it('should call .getItems', function () { + expect(this.dropdown.getItems).toHaveBeenCalled(); + }); + }); + }); + + describe('addEvents', function () { + beforeEach(function () { + this.list = { addEventListener: () => {} }; + this.dropdown = { list: this.list, clickEvent: () => {}, eventWrapper: {} }; + + spyOn(this.list, 'addEventListener'); + + DropDown.prototype.addEvents.call(this.dropdown); + }); + + it('should call .addEventListener', function () { + expect(this.list.addEventListener).toHaveBeenCalledWith('click', jasmine.any(Function)); + }); + }); + + describe('toggle', function () { + beforeEach(function () { + this.dropdown = { hidden: true, show: () => {}, hide: () => {} }; + + spyOn(this.dropdown, 'show'); + spyOn(this.dropdown, 'hide'); + + DropDown.prototype.toggle.call(this.dropdown); + }); + + it('should call .show if hidden is true', function () { + expect(this.dropdown.show).toHaveBeenCalled(); + }); + + describe('if hidden is false', function () { + beforeEach(function () { + this.dropdown = { hidden: false, show: () => {}, hide: () => {} }; + + spyOn(this.dropdown, 'show'); + spyOn(this.dropdown, 'hide'); + + DropDown.prototype.toggle.call(this.dropdown); + }); + + it('should call .show if hidden is true', function () { + expect(this.dropdown.hide).toHaveBeenCalled(); + }); + }); + }); + + describe('setData', function () { + beforeEach(function () { + this.dropdown = { render: () => {} }; + this.data = ['data']; + + spyOn(this.dropdown, 'render'); + + DropDown.prototype.setData.call(this.dropdown, this.data); + }); + + it('should set .data', function () { + expect(this.dropdown.data).toBe(this.data); + }); + + it('should call .render with the .data', function () { + expect(this.dropdown.render).toHaveBeenCalledWith(this.data); + }); + }); + + describe('addData', function () { + beforeEach(function () { + this.dropdown = { render: () => {}, data: ['data1'] }; + this.data = ['data2']; + + spyOn(this.dropdown, 'render'); + spyOn(Array.prototype, 'concat').and.callThrough(); + + DropDown.prototype.addData.call(this.dropdown, this.data); + }); + + it('should call .concat with data', function () { + expect(Array.prototype.concat).toHaveBeenCalledWith(this.data); + }); + + it('should set .data with concatination', function () { + expect(this.dropdown.data).toEqual(['data1', 'data2']); + }); + + it('should call .render with the .data', function () { + expect(this.dropdown.render).toHaveBeenCalledWith(['data1', 'data2']); + }); + + describe('if .data is undefined', function () { + beforeEach(function () { + this.dropdown = { render: () => {}, data: undefined }; + this.data = ['data2']; + + spyOn(this.dropdown, 'render'); + + DropDown.prototype.addData.call(this.dropdown, this.data); + }); + + it('should set .data with concatination', function () { + expect(this.dropdown.data).toEqual(['data2']); + }); + }); + }); + + describe('render', function () { + beforeEach(function () { + this.list = { querySelector: () => {} }; + this.dropdown = { renderChildren: () => {}, list: this.list }; + this.renderableList = {}; + this.data = [0, 1]; + + spyOn(this.dropdown, 'renderChildren').and.callFake(data => data); + spyOn(this.list, 'querySelector').and.returnValue(this.renderableList); + spyOn(this.data, 'map').and.callThrough(); + + DropDown.prototype.render.call(this.dropdown, this.data); + }); + + it('should call .map', function () { + expect(this.data.map).toHaveBeenCalledWith(jasmine.any(Function)); + }); + + it('should call .renderChildren for each data item', function() { + expect(this.dropdown.renderChildren.calls.count()).toBe(this.data.length); + }); + + it('sets the renderableList .innerHTML', function () { + expect(this.renderableList.innerHTML).toBe('01'); + }); + + describe('if no data argument is passed' , function () { + beforeEach(function () { + this.data.map.calls.reset(); + this.dropdown.renderChildren.calls.reset(); + + DropDown.prototype.render.call(this.dropdown, undefined); + }); + + it('should not call .map', function () { + expect(this.data.map).not.toHaveBeenCalled(); + }); + + it('should not call .renderChildren', function () { + expect(this.dropdown.renderChildren).not.toHaveBeenCalled(); + }); + }); + + describe('if no dynamic list is present', function () { + beforeEach(function () { + this.list = { querySelector: () => {} }; + this.dropdown = { renderChildren: () => {}, list: this.list }; + this.data = [0, 1]; + + spyOn(this.dropdown, 'renderChildren').and.callFake(data => data); + spyOn(this.list, 'querySelector'); + spyOn(this.data, 'map').and.callThrough(); + + DropDown.prototype.render.call(this.dropdown, this.data); + }); + + it('sets the .list .innerHTML', function () { + expect(this.list.innerHTML).toBe('01'); + }); + }); + }); + + describe('renderChildren', function () { + beforeEach(function () { + this.templateString = 'templateString'; + this.dropdown = { setImagesSrc: () => {}, templateString: this.templateString }; + this.data = { droplab_hidden: true }; + this.html = 'html'; + this.template = { firstChild: { outerHTML: 'outerHTML', style: {} } }; + + spyOn(utils, 't').and.returnValue(this.html); + spyOn(document, 'createElement').and.returnValue(this.template); + spyOn(this.dropdown, 'setImagesSrc'); + + this.renderChildren = DropDown.prototype.renderChildren.call(this.dropdown, this.data); + }); + + it('should call utils.t with .templateString and data', function () { + expect(utils.t).toHaveBeenCalledWith(this.templateString, this.data); + }); + + it('should call document.createElement', function () { + expect(document.createElement).toHaveBeenCalledWith('div'); + }); + + it('should set the templates .innerHTML to the HTML', function () { + expect(this.template.innerHTML).toBe(this.html); + }); + + it('should call .setImagesSrc with the template', function () { + expect(this.dropdown.setImagesSrc).toHaveBeenCalledWith(this.template); + }); + + it('should set the template display to none', function () { + expect(this.template.firstChild.style.display).toBe('none'); + }); + + it('should return the templates .firstChild.outerHTML', function () { + expect(this.renderChildren).toBe(this.template.firstChild.outerHTML); + }); + + describe('if droplab_hidden is false', function () { + beforeEach(function () { + this.data = { droplab_hidden: false }; + this.renderChildren = DropDown.prototype.renderChildren.call(this.dropdown, this.data); + }); + + it('should set the template display to block', function () { + expect(this.template.firstChild.style.display).toBe('block'); + }); + }); + }); + + describe('setImagesSrc', function () { + beforeEach(function () { + this.dropdown = {}; + this.template = { querySelectorAll: () => {} }; + + spyOn(this.template, 'querySelectorAll').and.returnValue([]); + + DropDown.prototype.setImagesSrc.call(this.dropdown, this.template); + }); + + it('should call .querySelectorAll', function () { + expect(this.template.querySelectorAll).toHaveBeenCalledWith('img[data-src]'); + }); + }); + + describe('show', function () { + beforeEach(function () { + this.list = { style: {} }; + this.dropdown = { list: this.list, hidden: true }; + + DropDown.prototype.show.call(this.dropdown); + }); + + it('it should set .list display to block', function () { + expect(this.list.style.display).toBe('block'); + }); + + it('it should set .hidden to false', function () { + expect(this.dropdown.hidden).toBe(false); + }); + + describe('if .hidden is false', function () { + beforeEach(function () { + this.list = { style: {} }; + this.dropdown = { list: this.list, hidden: false }; + + this.show = DropDown.prototype.show.call(this.dropdown); + }); + + it('should return undefined', function () { + expect(this.show).toEqual(undefined); + }); + + it('should not set .list display to block', function () { + expect(this.list.style.display).not.toEqual('block'); + }); + }); + }); + + describe('hide', function () { + beforeEach(function () { + this.list = { style: {} }; + this.dropdown = { list: this.list }; + + DropDown.prototype.hide.call(this.dropdown); + }); + + it('it should set .list display to none', function () { + expect(this.list.style.display).toBe('none'); + }); + + it('it should set .hidden to true', function () { + expect(this.dropdown.hidden).toBe(true); + }); + }); + + describe('toggle', function () { + beforeEach(function () { + this.hidden = true + this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} }; + + spyOn(this.dropdown, 'show'); + spyOn(this.dropdown, 'hide'); + + DropDown.prototype.toggle.call(this.dropdown); + }); + + it('should call .show', function () { + expect(this.dropdown.show).toHaveBeenCalled(); + }); + + describe('if .hidden is false', function () { + beforeEach(function () { + this.hidden = false + this.dropdown = { hidden: this.hidden, show: () => {}, hide: () => {} }; + + spyOn(this.dropdown, 'show'); + spyOn(this.dropdown, 'hide'); + + DropDown.prototype.toggle.call(this.dropdown); + }); + + it('should call .hide', function () { + expect(this.dropdown.hide).toHaveBeenCalled(); + }); + }); + }); + + describe('destroy', function () { + beforeEach(function () { + this.list = { removeEventListener: () => {} }; + this.eventWrapper = { clickEvent: 'clickEvent' }; + this.dropdown = { list: this.list, hide: () => {}, eventWrapper: this.eventWrapper }; + + spyOn(this.list, 'removeEventListener'); + spyOn(this.dropdown, 'hide'); + + DropDown.prototype.destroy.call(this.dropdown); + }); + + it('it should call .hide', function () { + expect(this.dropdown.hide).toHaveBeenCalled(); + }); + + it('it should call .removeEventListener', function () { + expect(this.list.removeEventListener).toHaveBeenCalledWith('click', this.eventWrapper.clickEvent); + }); + }); +}); diff --git a/spec/javascripts/droplab/hook.js b/spec/javascripts/droplab/hook.js deleted file mode 100644 index 8ebdcdd1404..00000000000 --- a/spec/javascripts/droplab/hook.js +++ /dev/null @@ -1,82 +0,0 @@ -/* eslint-disable */ - -import Hook from '~/droplab/hook'; -import * as dropdownSrc from '~/droplab/drop_down'; - -describe('Hook', function () { - describe('class constructor', function () { - beforeEach(function () { - this.trigger = { id: 'id' }; - this.list = {}; - this.plugins = {}; - this.config = {}; - this.dropdown = {}; - - spyOn(dropdownSrc, 'default').and.returnValue(this.dropdown); - - this.hook = new Hook(this.trigger, this.list, this.plugins, this.config); - }); - - it('should set .trigger', function () { - expect(this.hook.trigger).toBe(this.trigger); - }); - - it('should set .list', function () { - expect(this.hook.list).toBe(this.dropdown); - }); - - it('should call DropDown constructor', function () { - expect(dropdownSrc.default).toHaveBeenCalledWith(this.list); - }); - - it('should set .type', function () { - expect(this.hook.type).toBe('Hook'); - }); - - it('should set .event', function () { - expect(this.hook.event).toBe('click'); - }); - - it('should set .plugins', function () { - expect(this.hook.plugins).toBe(this.plugins); - }); - - it('should set .config', function () { - expect(this.hook.config).toBe(this.config); - }); - - it('should set .id', function () { - expect(this.hook.id).toBe(this.trigger.id); - }); - - describe('if config argument is undefined', function () { - beforeEach(function () { - this.config = undefined; - - this.hook = new Hook(this.trigger, this.list, this.plugins, this.config); - }); - - it('should set .config to an empty object', function () { - expect(this.hook.config).toEqual({}); - }); - }); - - describe('if plugins argument is undefined', function () { - beforeEach(function () { - this.plugins = undefined; - - this.hook = new Hook(this.trigger, this.list, this.plugins, this.config); - }); - - it('should set .plugins to an empty array', function () { - expect(this.hook.plugins).toEqual([]); - }); - }); - }); - - describe('addEvents', function () { - it('should exist', function () { - expect(Hook.prototype.hasOwnProperty('addEvents')).toBe(true); - }); - }); -}); diff --git a/spec/javascripts/droplab/hook_spec.js b/spec/javascripts/droplab/hook_spec.js new file mode 100644 index 00000000000..8ebdcdd1404 --- /dev/null +++ b/spec/javascripts/droplab/hook_spec.js @@ -0,0 +1,82 @@ +/* eslint-disable */ + +import Hook from '~/droplab/hook'; +import * as dropdownSrc from '~/droplab/drop_down'; + +describe('Hook', function () { + describe('class constructor', function () { + beforeEach(function () { + this.trigger = { id: 'id' }; + this.list = {}; + this.plugins = {}; + this.config = {}; + this.dropdown = {}; + + spyOn(dropdownSrc, 'default').and.returnValue(this.dropdown); + + this.hook = new Hook(this.trigger, this.list, this.plugins, this.config); + }); + + it('should set .trigger', function () { + expect(this.hook.trigger).toBe(this.trigger); + }); + + it('should set .list', function () { + expect(this.hook.list).toBe(this.dropdown); + }); + + it('should call DropDown constructor', function () { + expect(dropdownSrc.default).toHaveBeenCalledWith(this.list); + }); + + it('should set .type', function () { + expect(this.hook.type).toBe('Hook'); + }); + + it('should set .event', function () { + expect(this.hook.event).toBe('click'); + }); + + it('should set .plugins', function () { + expect(this.hook.plugins).toBe(this.plugins); + }); + + it('should set .config', function () { + expect(this.hook.config).toBe(this.config); + }); + + it('should set .id', function () { + expect(this.hook.id).toBe(this.trigger.id); + }); + + describe('if config argument is undefined', function () { + beforeEach(function () { + this.config = undefined; + + this.hook = new Hook(this.trigger, this.list, this.plugins, this.config); + }); + + it('should set .config to an empty object', function () { + expect(this.hook.config).toEqual({}); + }); + }); + + describe('if plugins argument is undefined', function () { + beforeEach(function () { + this.plugins = undefined; + + this.hook = new Hook(this.trigger, this.list, this.plugins, this.config); + }); + + it('should set .plugins to an empty array', function () { + expect(this.hook.plugins).toEqual([]); + }); + }); + }); + + describe('addEvents', function () { + it('should exist', function () { + expect(Hook.prototype.hasOwnProperty('addEvents')).toBe(true); + }); + }); +}); diff --git a/spec/javascripts/droplab/plugins/input_setter.js b/spec/javascripts/droplab/plugins/input_setter.js deleted file mode 100644 index c9b7b2b23dc..00000000000 --- a/spec/javascripts/droplab/plugins/input_setter.js +++ /dev/null @@ -1,246 +0,0 @@ -/* eslint-disable */ - -import InputSetter from '~/droplab/plugins/input_setter'; - -describe('InputSetter', function () { - describe('init', function () { - beforeEach(function () { - this.config = { InputSetter: {} }; - this.hook = { config: this.config }; - this.inputSetter = jasmine.createSpyObj('inputSetter', ['addEvents']); - - InputSetter.init.call(this.inputSetter, this.hook); - }); - - it('should set .hook', function () { - expect(this.inputSetter.hook).toBe(this.hook); - }); - - it('should set .config', function () { - expect(this.inputSetter.config).toBe(this.config.InputSetter); - }); - - it('should set .eventWrapper', function () { - expect(this.inputSetter.eventWrapper).toEqual({}); - }); - - it('should call .addEvents', function () { - expect(this.inputSetter.addEvents).toHaveBeenCalled(); - }); - - describe('if config.InputSetter is not set', function () { - beforeEach(function () { - this.config = { InputSetter: undefined }; - this.hook = { config: this.config }; - - InputSetter.init.call(this.inputSetter, this.hook); - }); - - it('should set .config to an empty object', function () { - expect(this.inputSetter.config).toEqual({}); - }); - - it('should set hook.config to an empty object', function () { - expect(this.hook.config.InputSetter).toEqual({}); - }); - }) - }); - - describe('addEvents', function () { - beforeEach(function () { - this.hook = { list: { list: jasmine.createSpyObj('list', ['addEventListener']) } }; - this.inputSetter = { eventWrapper: {}, hook: this.hook, setInputs: () => {} }; - - InputSetter.addEvents.call(this.inputSetter); - }); - - it('should set .eventWrapper.setInputs', function () { - expect(this.inputSetter.eventWrapper.setInputs).toEqual(jasmine.any(Function)); - }); - - it('should call .addEventListener', function () { - expect(this.hook.list.list.addEventListener) - .toHaveBeenCalledWith('click.dl', this.inputSetter.eventWrapper.setInputs); - }); - }); - - describe('removeEvents', function () { - beforeEach(function () { - this.hook = { list: { list: jasmine.createSpyObj('list', ['removeEventListener']) } }; - this.eventWrapper = jasmine.createSpyObj('eventWrapper', ['setInputs']); - this.inputSetter = { eventWrapper: this.eventWrapper, hook: this.hook }; - - InputSetter.removeEvents.call(this.inputSetter); - }); - - it('should call .removeEventListener', function () { - expect(this.hook.list.list.removeEventListener) - .toHaveBeenCalledWith('click.dl', this.eventWrapper.setInputs); - }); - }); - - describe('setInputs', function () { - beforeEach(function () { - this.event = { detail: { selected: {} } }; - this.config = [0, 1]; - this.inputSetter = { config: this.config, setInput: () => {} }; - - spyOn(this.inputSetter, 'setInput'); - - InputSetter.setInputs.call(this.inputSetter, this.event); - }); - - it('should call .setInput for each config element', function () { - const allArgs = this.inputSetter.setInput.calls.allArgs(); - - expect(allArgs.length).toEqual(2); - - allArgs.forEach((args, i) => { - expect(args[0]).toBe(this.config[i]); - expect(args[1]).toBe(this.event.detail.selected); - }); - }); - - describe('if config isnt an array', function () { - beforeEach(function () { - this.inputSetter = { config: {}, setInput: () => {} }; - - InputSetter.setInputs.call(this.inputSetter, this.event); - }); - - it('should set .config to an array with .config as the first element', function () { - expect(this.inputSetter.config).toEqual([{}]); - }); - }); - }); - - describe('setInput', function () { - beforeEach(function () { - this.selectedItem = { getAttribute: () => {} }; - this.input = { value: 'oldValue', tagName: 'INPUT', hasAttribute: () => {} }; - this.config = { valueAttribute: {}, input: this.input }; - this.inputSetter = { hook: { trigger: {} } }; - this.newValue = 'newValue'; - - spyOn(this.selectedItem, 'getAttribute').and.returnValue(this.newValue); - spyOn(this.input, 'hasAttribute').and.returnValue(false); - - InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); - }); - - it('should call .getAttribute', function () { - expect(this.selectedItem.getAttribute).toHaveBeenCalledWith(this.config.valueAttribute); - }); - - it('should call .hasAttribute', function () { - expect(this.input.hasAttribute).toHaveBeenCalledWith(undefined); - }); - - it('should set the value of the input', function () { - expect(this.input.value).toBe(this.newValue); - }); - - describe('if there is no newValue', function () { - beforeEach(function () { - this.newValue = ''; - this.inputSetter = { hook: { trigger: {} } }; - this.config = { valueAttribute: {}, input: this.input }; - this.input = { value: 'oldValue', tagName: 'INPUT' }; - this.selectedItem = { getAttribute: () => {} }; - - InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); - }); - - it('should not set the value of the input', function () { - expect(this.input.value).toBe('oldValue'); - }) - }); - - describe('if no config.input is provided', function () { - beforeEach(function () { - this.config = { valueAttribute: {} }; - this.trigger = { value: 'oldValue', tagName: 'INPUT', hasAttribute: () => {} }; - this.inputSetter = { hook: { trigger: this.trigger } }; - - InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); - }); - - it('should set the value of the hook.trigger', function () { - expect(this.trigger.value).toBe(this.newValue); - }); - }); - - describe('if the input tag is not INPUT', function () { - beforeEach(function () { - this.input = { textContent: 'oldValue', tagName: 'SPAN', hasAttribute: () => {} }; - this.config = { valueAttribute: {}, input: this.input }; - - InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); - }); - - it('should set the textContent of the input', function () { - expect(this.input.textContent).toBe(this.newValue); - }); - - describe('if there is no new value', function () { - beforeEach(function () { - this.selectedItem = { getAttribute: () => {} }; - this.input = { textContent: 'oldValue', tagName: 'INPUT', hasAttribute: () => {} }; - this.config = { valueAttribute: {}, input: this.input }; - this.inputSetter = { hook: { trigger: {} } }; - this.newValue = 'newValue'; - - spyOn(this.selectedItem, 'getAttribute').and.returnValue(this.newValue); - - InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); - }); - - it('should not set the value of the input', function () { - expect(this.input.textContent).toBe('oldValue'); - }); - }); - }); - - describe('if there is an inputAttribute', function () { - beforeEach(function () { - this.selectedItem = { getAttribute: () => {} }; - this.input = { id: 'oldValue', hasAttribute: () => {}, setAttribute: () => {} }; - this.inputSetter = { hook: { trigger: {} } }; - this.newValue = 'newValue'; - this.inputAttribute = 'id'; - this.config = { - valueAttribute: {}, - input: this.input, - inputAttribute: this.inputAttribute, - }; - - spyOn(this.selectedItem, 'getAttribute').and.returnValue(this.newValue); - spyOn(this.input, 'hasAttribute').and.returnValue(true); - spyOn(this.input, 'setAttribute'); - - InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); - }); - - it('should call setAttribute', function () { - expect(this.input.setAttribute).toHaveBeenCalledWith(this.inputAttribute, this.newValue); - }); - - it('should not set the value or textContent of the input', function () { - expect(this.input.value).not.toBe('newValue'); - expect(this.input.textContent).not.toBe('newValue'); - }); - }); - }); - - describe('destroy', function () { - beforeEach(function () { - this.inputSetter = jasmine.createSpyObj('inputSetter', ['removeEvents']); - - InputSetter.destroy.call(this.inputSetter); - }); - - it('should call .removeEvents', function () { - expect(this.inputSetter.removeEvents).toHaveBeenCalled(); - }); - }); -}); diff --git a/spec/javascripts/droplab/plugins/input_setter_spec.js b/spec/javascripts/droplab/plugins/input_setter_spec.js new file mode 100644 index 00000000000..c9b7b2b23dc --- /dev/null +++ b/spec/javascripts/droplab/plugins/input_setter_spec.js @@ -0,0 +1,246 @@ +/* eslint-disable */ + +import InputSetter from '~/droplab/plugins/input_setter'; + +describe('InputSetter', function () { + describe('init', function () { + beforeEach(function () { + this.config = { InputSetter: {} }; + this.hook = { config: this.config }; + this.inputSetter = jasmine.createSpyObj('inputSetter', ['addEvents']); + + InputSetter.init.call(this.inputSetter, this.hook); + }); + + it('should set .hook', function () { + expect(this.inputSetter.hook).toBe(this.hook); + }); + + it('should set .config', function () { + expect(this.inputSetter.config).toBe(this.config.InputSetter); + }); + + it('should set .eventWrapper', function () { + expect(this.inputSetter.eventWrapper).toEqual({}); + }); + + it('should call .addEvents', function () { + expect(this.inputSetter.addEvents).toHaveBeenCalled(); + }); + + describe('if config.InputSetter is not set', function () { + beforeEach(function () { + this.config = { InputSetter: undefined }; + this.hook = { config: this.config }; + + InputSetter.init.call(this.inputSetter, this.hook); + }); + + it('should set .config to an empty object', function () { + expect(this.inputSetter.config).toEqual({}); + }); + + it('should set hook.config to an empty object', function () { + expect(this.hook.config.InputSetter).toEqual({}); + }); + }) + }); + + describe('addEvents', function () { + beforeEach(function () { + this.hook = { list: { list: jasmine.createSpyObj('list', ['addEventListener']) } }; + this.inputSetter = { eventWrapper: {}, hook: this.hook, setInputs: () => {} }; + + InputSetter.addEvents.call(this.inputSetter); + }); + + it('should set .eventWrapper.setInputs', function () { + expect(this.inputSetter.eventWrapper.setInputs).toEqual(jasmine.any(Function)); + }); + + it('should call .addEventListener', function () { + expect(this.hook.list.list.addEventListener) + .toHaveBeenCalledWith('click.dl', this.inputSetter.eventWrapper.setInputs); + }); + }); + + describe('removeEvents', function () { + beforeEach(function () { + this.hook = { list: { list: jasmine.createSpyObj('list', ['removeEventListener']) } }; + this.eventWrapper = jasmine.createSpyObj('eventWrapper', ['setInputs']); + this.inputSetter = { eventWrapper: this.eventWrapper, hook: this.hook }; + + InputSetter.removeEvents.call(this.inputSetter); + }); + + it('should call .removeEventListener', function () { + expect(this.hook.list.list.removeEventListener) + .toHaveBeenCalledWith('click.dl', this.eventWrapper.setInputs); + }); + }); + + describe('setInputs', function () { + beforeEach(function () { + this.event = { detail: { selected: {} } }; + this.config = [0, 1]; + this.inputSetter = { config: this.config, setInput: () => {} }; + + spyOn(this.inputSetter, 'setInput'); + + InputSetter.setInputs.call(this.inputSetter, this.event); + }); + + it('should call .setInput for each config element', function () { + const allArgs = this.inputSetter.setInput.calls.allArgs(); + + expect(allArgs.length).toEqual(2); + + allArgs.forEach((args, i) => { + expect(args[0]).toBe(this.config[i]); + expect(args[1]).toBe(this.event.detail.selected); + }); + }); + + describe('if config isnt an array', function () { + beforeEach(function () { + this.inputSetter = { config: {}, setInput: () => {} }; + + InputSetter.setInputs.call(this.inputSetter, this.event); + }); + + it('should set .config to an array with .config as the first element', function () { + expect(this.inputSetter.config).toEqual([{}]); + }); + }); + }); + + describe('setInput', function () { + beforeEach(function () { + this.selectedItem = { getAttribute: () => {} }; + this.input = { value: 'oldValue', tagName: 'INPUT', hasAttribute: () => {} }; + this.config = { valueAttribute: {}, input: this.input }; + this.inputSetter = { hook: { trigger: {} } }; + this.newValue = 'newValue'; + + spyOn(this.selectedItem, 'getAttribute').and.returnValue(this.newValue); + spyOn(this.input, 'hasAttribute').and.returnValue(false); + + InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); + }); + + it('should call .getAttribute', function () { + expect(this.selectedItem.getAttribute).toHaveBeenCalledWith(this.config.valueAttribute); + }); + + it('should call .hasAttribute', function () { + expect(this.input.hasAttribute).toHaveBeenCalledWith(undefined); + }); + + it('should set the value of the input', function () { + expect(this.input.value).toBe(this.newValue); + }); + + describe('if there is no newValue', function () { + beforeEach(function () { + this.newValue = ''; + this.inputSetter = { hook: { trigger: {} } }; + this.config = { valueAttribute: {}, input: this.input }; + this.input = { value: 'oldValue', tagName: 'INPUT' }; + this.selectedItem = { getAttribute: () => {} }; + + InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); + }); + + it('should not set the value of the input', function () { + expect(this.input.value).toBe('oldValue'); + }) + }); + + describe('if no config.input is provided', function () { + beforeEach(function () { + this.config = { valueAttribute: {} }; + this.trigger = { value: 'oldValue', tagName: 'INPUT', hasAttribute: () => {} }; + this.inputSetter = { hook: { trigger: this.trigger } }; + + InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); + }); + + it('should set the value of the hook.trigger', function () { + expect(this.trigger.value).toBe(this.newValue); + }); + }); + + describe('if the input tag is not INPUT', function () { + beforeEach(function () { + this.input = { textContent: 'oldValue', tagName: 'SPAN', hasAttribute: () => {} }; + this.config = { valueAttribute: {}, input: this.input }; + + InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); + }); + + it('should set the textContent of the input', function () { + expect(this.input.textContent).toBe(this.newValue); + }); + + describe('if there is no new value', function () { + beforeEach(function () { + this.selectedItem = { getAttribute: () => {} }; + this.input = { textContent: 'oldValue', tagName: 'INPUT', hasAttribute: () => {} }; + this.config = { valueAttribute: {}, input: this.input }; + this.inputSetter = { hook: { trigger: {} } }; + this.newValue = 'newValue'; + + spyOn(this.selectedItem, 'getAttribute').and.returnValue(this.newValue); + + InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); + }); + + it('should not set the value of the input', function () { + expect(this.input.textContent).toBe('oldValue'); + }); + }); + }); + + describe('if there is an inputAttribute', function () { + beforeEach(function () { + this.selectedItem = { getAttribute: () => {} }; + this.input = { id: 'oldValue', hasAttribute: () => {}, setAttribute: () => {} }; + this.inputSetter = { hook: { trigger: {} } }; + this.newValue = 'newValue'; + this.inputAttribute = 'id'; + this.config = { + valueAttribute: {}, + input: this.input, + inputAttribute: this.inputAttribute, + }; + + spyOn(this.selectedItem, 'getAttribute').and.returnValue(this.newValue); + spyOn(this.input, 'hasAttribute').and.returnValue(true); + spyOn(this.input, 'setAttribute'); + + InputSetter.setInput.call(this.inputSetter, this.config, this.selectedItem); + }); + + it('should call setAttribute', function () { + expect(this.input.setAttribute).toHaveBeenCalledWith(this.inputAttribute, this.newValue); + }); + + it('should not set the value or textContent of the input', function () { + expect(this.input.value).not.toBe('newValue'); + expect(this.input.textContent).not.toBe('newValue'); + }); + }); + }); + + describe('destroy', function () { + beforeEach(function () { + this.inputSetter = jasmine.createSpyObj('inputSetter', ['removeEvents']); + + InputSetter.destroy.call(this.inputSetter); + }); + + it('should call .removeEvents', function () { + expect(this.inputSetter.removeEvents).toHaveBeenCalled(); + }); + }); +}); -- cgit v1.2.3