2017-10-13 14:43:58 +02:00
|
|
|
import { expect } from 'chai';
|
2019-10-21 11:48:49 +02:00
|
|
|
import { stub, spy } from 'sinon';
|
2017-12-19 14:08:57 +01:00
|
|
|
import WrappedElement from './wrapped-element';
|
2017-10-13 14:43:58 +02:00
|
|
|
import WrappedSelect from './wrapped-select';
|
2018-05-21 18:01:03 +02:00
|
|
|
import { DEFAULT_CLASSNAMES } from '../constants';
|
2019-10-21 11:48:49 +02:00
|
|
|
import Templates from '../templates';
|
2017-10-13 14:43:58 +02:00
|
|
|
|
2017-10-29 19:56:24 +01:00
|
|
|
describe('components/wrappedSelect', () => {
|
2017-10-13 14:43:58 +02:00
|
|
|
let instance;
|
2017-12-20 16:10:01 +01:00
|
|
|
let element;
|
2017-10-13 14:43:58 +02:00
|
|
|
|
|
|
|
beforeEach(() => {
|
2017-12-20 16:10:01 +01:00
|
|
|
element = document.createElement('select');
|
|
|
|
element.id = 'target';
|
2019-10-22 12:25:36 +02:00
|
|
|
for (let i = 0; i <= 4; i++) {
|
2017-12-20 13:38:16 +01:00
|
|
|
const option = document.createElement('option');
|
|
|
|
|
2019-10-22 12:25:36 +02:00
|
|
|
if (i === 0) {
|
|
|
|
option.value = '';
|
|
|
|
option.innerHTML = 'Placeholder label';
|
|
|
|
} else {
|
|
|
|
option.value = `Value ${i}`;
|
|
|
|
option.innerHTML = `Label ${i}`;
|
|
|
|
}
|
2017-12-20 13:38:16 +01:00
|
|
|
|
|
|
|
if (i === 1) {
|
|
|
|
option.setAttribute('placeholder', '');
|
|
|
|
}
|
|
|
|
|
2017-12-20 16:10:01 +01:00
|
|
|
element.appendChild(option);
|
2017-12-20 13:38:16 +01:00
|
|
|
}
|
2017-12-20 16:10:01 +01:00
|
|
|
document.body.appendChild(element);
|
2017-12-20 13:38:16 +01:00
|
|
|
|
2018-05-21 18:01:03 +02:00
|
|
|
instance = new WrappedSelect({
|
|
|
|
element: document.getElementById('target'),
|
|
|
|
classNames: DEFAULT_CLASSNAMES,
|
2019-10-21 11:48:49 +02:00
|
|
|
template: spy(Templates.option),
|
2018-05-21 18:01:03 +02:00
|
|
|
});
|
2017-10-13 14:43:58 +02:00
|
|
|
});
|
2017-12-18 13:06:38 +01:00
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
document.body.innerHTML = '';
|
|
|
|
instance = null;
|
|
|
|
});
|
2017-12-19 14:08:57 +01:00
|
|
|
|
2017-12-20 16:10:01 +01:00
|
|
|
describe('constructor', () => {
|
|
|
|
it('assigns choices element to class', () => {
|
|
|
|
expect(instance.element).to.eql(element);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('assigns classnames to class', () => {
|
|
|
|
expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-12-19 14:08:57 +01:00
|
|
|
describe('inherited methods', () => {
|
2018-05-28 14:55:44 +02:00
|
|
|
['conceal', 'reveal', 'enable', 'disable'].forEach(method => {
|
2017-12-20 13:38:16 +01:00
|
|
|
beforeEach(() => {
|
|
|
|
stub(WrappedElement.prototype, method);
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
WrappedElement.prototype[method].restore();
|
|
|
|
});
|
|
|
|
|
2017-12-19 14:08:57 +01:00
|
|
|
describe(method, () => {
|
|
|
|
it(`calls super.${method}`, () => {
|
2017-12-20 13:38:16 +01:00
|
|
|
expect(WrappedElement.prototype[method].called).to.equal(false);
|
2017-12-19 14:08:57 +01:00
|
|
|
instance[method]();
|
|
|
|
expect(WrappedElement.prototype[method].called).to.equal(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-04-24 13:54:45 +02:00
|
|
|
describe('placeholderOption getter', () => {
|
2019-10-22 12:25:36 +02:00
|
|
|
it('returns option element with empty value attribute', () => {
|
|
|
|
expect(instance.placeholderOption).to.be.instanceOf(HTMLOptionElement);
|
|
|
|
expect(instance.placeholderOption.value).to.equal('');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns option element with placeholder attribute as fallback', () => {
|
|
|
|
instance.element.removeChild(instance.element.firstChild);
|
|
|
|
|
2018-04-24 13:54:45 +02:00
|
|
|
expect(instance.placeholderOption).to.be.instanceOf(HTMLOptionElement);
|
2019-10-22 12:25:36 +02:00
|
|
|
expect(instance.placeholderOption.value).to.equal('Value 1');
|
2017-12-20 13:38:16 +01:00
|
|
|
});
|
|
|
|
});
|
2017-12-19 14:08:57 +01:00
|
|
|
|
2018-04-24 13:54:45 +02:00
|
|
|
describe('options getter', () => {
|
2017-12-20 13:38:16 +01:00
|
|
|
it('returns all option elements', () => {
|
2018-04-24 13:54:45 +02:00
|
|
|
const { options } = instance;
|
|
|
|
expect(options).to.be.an('array');
|
2018-05-28 14:55:44 +02:00
|
|
|
options.forEach(option => {
|
2017-12-20 13:38:16 +01:00
|
|
|
expect(option).to.be.instanceOf(HTMLOptionElement);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2017-12-19 14:08:57 +01:00
|
|
|
|
2018-04-24 13:54:45 +02:00
|
|
|
describe('optionGroups getter', () => {
|
2017-12-20 16:10:01 +01:00
|
|
|
it('returns an array of all option groups', () => {
|
|
|
|
for (let i = 1; i <= 3; i++) {
|
|
|
|
const group = document.createElement('optgroup');
|
|
|
|
instance.element.appendChild(group);
|
|
|
|
}
|
|
|
|
|
2018-04-24 13:54:45 +02:00
|
|
|
const { optionGroups } = instance;
|
|
|
|
expect(optionGroups.length).to.equal(3);
|
2018-05-28 14:55:44 +02:00
|
|
|
optionGroups.forEach(option => {
|
2017-12-20 16:10:01 +01:00
|
|
|
expect(option).to.be.instanceOf(HTMLOptGroupElement);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-04-24 13:54:45 +02:00
|
|
|
describe('options setter', () => {
|
2017-12-20 16:10:01 +01:00
|
|
|
let appendDocFragmentStub;
|
|
|
|
const options = [
|
|
|
|
{
|
|
|
|
value: '1',
|
|
|
|
label: 'Test 1',
|
|
|
|
selected: false,
|
|
|
|
disabled: true,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: '2',
|
|
|
|
label: 'Test 2',
|
|
|
|
selected: true,
|
|
|
|
disabled: false,
|
|
|
|
},
|
|
|
|
];
|
2017-12-19 14:08:57 +01:00
|
|
|
|
2017-12-20 16:10:01 +01:00
|
|
|
beforeEach(() => {
|
|
|
|
appendDocFragmentStub = stub();
|
|
|
|
instance.appendDocFragment = appendDocFragmentStub;
|
|
|
|
});
|
2017-12-19 14:08:57 +01:00
|
|
|
|
2017-12-20 16:10:01 +01:00
|
|
|
afterEach(() => {
|
|
|
|
instance.appendDocFragment.reset();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('creates an option element for each passed object, adds it to a fragment and calls appendDocFragment with created fragment', () => {
|
|
|
|
expect(appendDocFragmentStub.called).to.equal(false);
|
2018-04-24 13:54:45 +02:00
|
|
|
instance.options = options;
|
2017-12-20 16:10:01 +01:00
|
|
|
expect(appendDocFragmentStub.called).to.equal(true);
|
|
|
|
|
|
|
|
const fragment = appendDocFragmentStub.firstCall.args[0];
|
|
|
|
const selectElement = document.createElement('select');
|
|
|
|
selectElement.appendChild(fragment);
|
2017-12-19 14:08:57 +01:00
|
|
|
|
2017-12-20 16:10:01 +01:00
|
|
|
expect(fragment).to.be.instanceOf(DocumentFragment);
|
2019-10-21 11:48:49 +02:00
|
|
|
expect(instance.template.callCount).to.equal(2);
|
2017-12-20 16:10:01 +01:00
|
|
|
expect(selectElement.options.length).to.equal(2);
|
|
|
|
expect(selectElement.options[0].value).to.equal(options[0].value);
|
|
|
|
expect(selectElement.options[1].value).to.equal(options[1].value);
|
|
|
|
});
|
|
|
|
});
|
2017-12-19 14:08:57 +01:00
|
|
|
|
2017-12-20 13:38:16 +01:00
|
|
|
describe('appendDocFragment', () => {
|
|
|
|
it('empties contents of element', () => {
|
2018-05-28 14:55:44 +02:00
|
|
|
expect(instance.element.getElementsByTagName('option').length).to.equal(
|
2019-10-22 12:25:36 +02:00
|
|
|
5,
|
2018-05-28 14:55:44 +02:00
|
|
|
);
|
2017-12-20 13:38:16 +01:00
|
|
|
instance.appendDocFragment(document.createDocumentFragment());
|
2018-05-28 14:55:44 +02:00
|
|
|
expect(instance.element.getElementsByTagName('option').length).to.equal(
|
|
|
|
0,
|
|
|
|
);
|
2017-12-20 13:38:16 +01:00
|
|
|
});
|
2017-12-19 14:08:57 +01:00
|
|
|
|
2017-12-20 13:38:16 +01:00
|
|
|
it('appends passed fragment to element', () => {
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
|
|
const elementToAppend = document.createElement('div');
|
|
|
|
elementToAppend.id = 'fragment-target';
|
|
|
|
fragment.appendChild(elementToAppend);
|
|
|
|
expect(instance.element.querySelector('#fragment-target')).to.equal(null);
|
|
|
|
instance.appendDocFragment(fragment);
|
2018-05-28 14:55:44 +02:00
|
|
|
expect(instance.element.querySelector('#fragment-target')).to.eql(
|
|
|
|
elementToAppend,
|
|
|
|
);
|
2017-12-20 13:38:16 +01:00
|
|
|
});
|
|
|
|
});
|
2017-10-13 14:43:58 +02:00
|
|
|
});
|