Begin component tests

src/scripts/src/choices.js

@@ -5,6 +5,7 @@ import Dropdown from './components/dropdown';
 import Container from './components/container';
 import Input from './components/input';
 import List from './components/list';
+import { DEFAULT_CONFIG, DEFAULT_CLASSNAMES } from './constants';
 import {
   addItem,
   removeItem,
@@ -53,75 +54,11 @@ class Choices {
     }
 
     const defaultConfig = {
-      silent: false,
+      ...DEFAULT_CONFIG,
       items: [],
       choices: [],
-      renderChoiceLimit: -1,
-      maxItemCount: -1,
-      addItems: true,
-      removeItems: true,
-      removeItemButton: false,
-      editItems: false,
-      duplicateItems: true,
-      delimiter: ',',
-      paste: true,
-      searchEnabled: true,
-      searchChoices: true,
-      searchFloor: 1,
-      searchResultLimit: 4,
-      searchFields: ['label', 'value'],
-      position: 'auto',
-      resetScrollPosition: true,
-      regexFilter: null,
-      shouldSort: true,
-      shouldSortItems: false,
+      classNames: DEFAULT_CLASSNAMES,
       sortFilter: sortByAlpha,
-      placeholder: true,
-      placeholderValue: null,
-      searchPlaceholderValue: null,
-      prependValue: null,
-      appendValue: null,
-      renderSelectedChoices: 'auto',
-      loadingText: 'Loading...',
-      noResultsText: 'No results found',
-      noChoicesText: 'No choices to choose from',
-      itemSelectText: 'Press to select',
-      addItemText: value => `Press Enter to add <b>"${value}"</b>`,
-      maxItemText: maxItemCount => `Only ${maxItemCount} values can be added.`,
-      uniqueItemText: 'Only unique values can be added.',
-      classNames: {
-        containerOuter: 'choices',
-        containerInner: 'choices__inner',
-        input: 'choices__input',
-        inputCloned: 'choices__input--cloned',
-        list: 'choices__list',
-        listItems: 'choices__list--multiple',
-        listSingle: 'choices__list--single',
-        listDropdown: 'choices__list--dropdown',
-        item: 'choices__item',
-        itemSelectable: 'choices__item--selectable',
-        itemDisabled: 'choices__item--disabled',
-        itemChoice: 'choices__item--choice',
-        placeholder: 'choices__placeholder',
-        group: 'choices__group',
-        groupHeading: 'choices__heading',
-        button: 'choices__button',
-        activeState: 'is-active',
-        focusState: 'is-focused',
-        openState: 'is-open',
-        disabledState: 'is-disabled',
-        highlightedState: 'is-highlighted',
-        hiddenState: 'is-hidden',
-        flippedState: 'is-flipped',
-        loadingState: 'is-loading',
-        noResults: 'has-no-results',
-        noChoices: 'has-no-choices',
-      },
-      fuseOptions: {
-        includeScore: true,
-      },
-      callbackOnInit: null,
-      callbackOnCreateTemplates: null,
     };
 
     this.idNames = {
@@ -2570,11 +2507,11 @@ class Choices {
     const input = this._getTemplate('input');
     const dropdown = this._getTemplate('dropdown');
 
-    this.containerOuter = new Container(this, containerOuter);
-    this.containerInner = new Container(this, containerInner);
-    this.input = new Input(this, input);
-    this.choiceList = new List(this, choiceList);
-    this.itemList = new List(this, itemList);
+    this.containerOuter = new Container(this, containerOuter, this.config.classNames);
+    this.containerInner = new Container(this, containerInner, this.config.classNames);
+    this.input = new Input(this, input, this.config.classNames);
+    this.choiceList = new List(this, choiceList, this.config.classNames);
+    this.itemList = new List(this, itemList, this.config.classNames);
     this.dropdown = new Dropdown(this, dropdown, this.config.classNames);
 
     // Hide passed input

src/scripts/src/components/container.js

@@ -1,9 +1,9 @@
 export default class Container {
-  constructor(instance, element) {
+  constructor(instance, element, classNames) {
     this.instance = instance;
     this.element = element;
+    this.classNames = classNames;
     this.config = instance.config;
-    this.classNames = instance.config.classNames;
     this.isOpen = false;
     this.isFlipped = false;
     this.isFocussed = false;

src/scripts/src/components/container.test.js

@@ -0,0 +1,32 @@
+import { expect } from 'chai';
+import Container from './container';
+import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
+
+describe('Container', () => {
+  let instance;
+  let choicesInstance;
+  let choicesElement;
+
+
+  beforeEach(() => {
+    choicesInstance = {
+      config: {
+        ...DEFAULT_CONFIG,
+      },
+    };
+    choicesElement = document.createElement('select');
+    instance = new Container(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
+  });
+
+  it('assigns choices instance to class', () => {
+    expect(instance.instance).to.eql(choicesInstance);
+  });
+
+  it('assigns choices element to class', () => {
+    expect(instance.element).to.eql(choicesElement);
+  });
+
+  it('assigns classnames to class', () => {
+    expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
+  });
+});

src/scripts/src/components/dropdown.test.js

@@ -0,0 +1,32 @@
+import { expect } from 'chai';
+import Dropdown from './dropdown';
+import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
+
+describe('Dropdown', () => {
+  let instance;
+  let choicesInstance;
+  let choicesElement;
+
+
+  beforeEach(() => {
+    choicesInstance = {
+      config: {
+        ...DEFAULT_CONFIG,
+      },
+    };
+    choicesElement = document.createElement('select');
+    instance = new Dropdown(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
+  });
+
+  it('assigns choices instance to class', () => {
+    expect(instance.instance).to.eql(choicesInstance);
+  });
+
+  it('assigns choices element to class', () => {
+    expect(instance.element).to.eql(choicesElement);
+  });
+
+  it('assigns classnames to class', () => {
+    expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
+  });
+});

src/scripts/src/components/input.js

@@ -1,9 +1,10 @@
 import { getWidthOfInput } from '../lib/utils';
 
 export default class Input {
-  constructor(instance, element) {
+  constructor(instance, element, classNames) {
     this.instance = instance;
     this.element = element;
+    this.classNames = classNames;
     this.isFocussed = this.element === document.activeElement;
     this.isDisabled = false;
 

src/scripts/src/components/input.test.js

@@ -0,0 +1,32 @@
+import { expect } from 'chai';
+import Input from './input';
+import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
+
+describe('Input', () => {
+  let instance;
+  let choicesInstance;
+  let choicesElement;
+
+
+  beforeEach(() => {
+    choicesInstance = {
+      config: {
+        ...DEFAULT_CONFIG,
+      },
+    };
+    choicesElement = document.createElement('select');
+    instance = new Input(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
+  });
+
+  it('assigns choices instance to class', () => {
+    expect(instance.instance).to.eql(choicesInstance);
+  });
+
+  it('assigns choices element to class', () => {
+    expect(instance.element).to.eql(choicesElement);
+  });
+
+  it('assigns classnames to class', () => {
+    expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
+  });
+});

src/scripts/src/components/list.js

@@ -1,8 +1,8 @@
 export default class List {
-  constructor(instance, element) {
+  constructor(instance, element, classNames) {
     this.instance = instance;
     this.element = element;
-    this.classNames = this.instance.config.classNames;
+    this.classNames = classNames;
     this.scrollPos = this.element.scrollTop;
     this.height = this.element.offsetHeight;
     this.hasChildren = !!this.element.children;

src/scripts/src/components/list.test.js

@@ -0,0 +1,32 @@
+import { expect } from 'chai';
+import List from './list';
+import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
+
+describe('List', () => {
+  let instance;
+  let choicesInstance;
+  let choicesElement;
+
+
+  beforeEach(() => {
+    choicesInstance = {
+      config: {
+        ...DEFAULT_CONFIG,
+      },
+    };
+    choicesElement = document.createElement('select');
+    instance = new List(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
+  });
+
+  it('assigns choices instance to class', () => {
+    expect(instance.instance).to.eql(choicesInstance);
+  });
+
+  it('assigns choices element to class', () => {
+    expect(instance.element).to.eql(choicesElement);
+  });
+
+  it('assigns classnames to class', () => {
+    expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
+  });
+});

src/scripts/src/constants.js

@@ -0,0 +1,70 @@
+
+export const DEFAULT_CLASSNAMES = {
+  containerOuter: 'choices',
+  containerInner: 'choices__inner',
+  input: 'choices__input',
+  inputCloned: 'choices__input--cloned',
+  list: 'choices__list',
+  listItems: 'choices__list--multiple',
+  listSingle: 'choices__list--single',
+  listDropdown: 'choices__list--dropdown',
+  item: 'choices__item',
+  itemSelectable: 'choices__item--selectable',
+  itemDisabled: 'choices__item--disabled',
+  itemChoice: 'choices__item--choice',
+  placeholder: 'choices__placeholder',
+  group: 'choices__group',
+  groupHeading: 'choices__heading',
+  button: 'choices__button',
+  activeState: 'is-active',
+  focusState: 'is-focused',
+  openState: 'is-open',
+  disabledState: 'is-disabled',
+  highlightedState: 'is-highlighted',
+  hiddenState: 'is-hidden',
+  flippedState: 'is-flipped',
+  loadingState: 'is-loading',
+  noResults: 'has-no-results',
+  noChoices: 'has-no-choices',
+};
+
+export const DEFAULT_CONFIG = {
+  silent: false,
+  renderChoiceLimit: -1,
+  maxItemCount: -1,
+  addItems: true,
+  removeItems: true,
+  removeItemButton: false,
+  editItems: false,
+  duplicateItems: true,
+  delimiter: ',',
+  paste: true,
+  searchEnabled: true,
+  searchChoices: true,
+  searchFloor: 1,
+  searchResultLimit: 4,
+  searchFields: ['label', 'value'],
+  position: 'auto',
+  resetScrollPosition: true,
+  regexFilter: null,
+  shouldSort: true,
+  shouldSortItems: false,
+  placeholder: true,
+  placeholderValue: null,
+  searchPlaceholderValue: null,
+  prependValue: null,
+  appendValue: null,
+  renderSelectedChoices: 'auto',
+  loadingText: 'Loading...',
+  noResultsText: 'No results found',
+  noChoicesText: 'No choices to choose from',
+  itemSelectText: 'Press to select',
+  addItemText: value => `Press Enter to add <b>"${value}"</b>`,
+  maxItemText: maxItemCount => `Only ${maxItemCount} values can be added.`,
+  uniqueItemText: 'Only unique values can be added.',
+  fuseOptions: {
+    includeScore: true,
+  },
+  callbackOnInit: null,
+  callbackOnCreateTemplates: null,
+};