2017-10-13 14:43:58 +02:00
|
|
|
import { expect } from 'chai';
|
|
|
|
import WrappedElement from './wrapped-element';
|
2018-05-21 18:01:03 +02:00
|
|
|
import { DEFAULT_CLASSNAMES } from '../constants';
|
2017-10-13 14:43:58 +02:00
|
|
|
|
2017-10-29 19:56:24 +01:00
|
|
|
describe('components/wrappedElement', () => {
|
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');
|
2018-05-21 18:01:03 +02:00
|
|
|
instance = new WrappedElement({
|
|
|
|
element,
|
|
|
|
classNames: DEFAULT_CLASSNAMES,
|
|
|
|
});
|
2017-10-13 14:43:58 +02:00
|
|
|
});
|
2017-10-29 19:56:24 +01:00
|
|
|
|
2017-12-18 13:06:38 +01:00
|
|
|
afterEach(() => {
|
|
|
|
document.body.innerHTML = '';
|
|
|
|
instance = null;
|
|
|
|
});
|
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets isDisabled flag to false', () => {
|
|
|
|
expect(instance.isDisabled).to.eql(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-04-24 13:54:45 +02:00
|
|
|
describe('value getter', () => {
|
|
|
|
it('returns element value', () => {
|
|
|
|
expect(instance.value).to.eql(element.value);
|
2017-12-10 17:41:39 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2017-10-29 19:56:24 +01:00
|
|
|
describe('conceal', () => {
|
|
|
|
let originalStyling;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
originalStyling = 'color:red';
|
|
|
|
instance.element.setAttribute('style', originalStyling);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('hides element', () => {
|
|
|
|
instance.conceal();
|
|
|
|
expect(instance.element.tabIndex).to.equal(-1);
|
|
|
|
expect(instance.element.classList.contains(instance.classNames.input)).to.equal(true);
|
|
|
|
expect(instance.element.classList.contains(instance.classNames.hiddenState)).to.equal(true);
|
|
|
|
expect(instance.element.getAttribute('aria-hidden')).to.equal('true');
|
|
|
|
expect(instance.element.getAttribute('data-choice')).to.equal('active');
|
|
|
|
expect(instance.element.getAttribute('data-choice-orig-style')).to.equal(originalStyling);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('reveal', () => {
|
|
|
|
let originalStyling;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
originalStyling = 'color:red';
|
|
|
|
instance.element.setAttribute('data-choice-orig-style', originalStyling);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows element', () => {
|
|
|
|
instance.reveal();
|
|
|
|
expect(instance.element.tabIndex).to.equal(0);
|
|
|
|
expect(instance.element.classList.contains(instance.classNames.input)).to.equal(false);
|
|
|
|
expect(instance.element.classList.contains(instance.classNames.hiddenState)).to.equal(false);
|
|
|
|
expect(instance.element.getAttribute('style')).to.equal(originalStyling);
|
|
|
|
expect(instance.element.getAttribute('aria-hidden')).to.equal(null);
|
|
|
|
expect(instance.element.getAttribute('data-choice')).to.equal(null);
|
|
|
|
expect(instance.element.getAttribute('data-choice-orig-style')).to.equal(null);
|
|
|
|
});
|
|
|
|
});
|
2017-12-19 14:08:57 +01:00
|
|
|
|
|
|
|
describe('enable', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
instance.disable();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('removes disabled attribute', () => {
|
|
|
|
expect(instance.element.hasAttribute('disabled')).to.equal(true);
|
|
|
|
instance.enable();
|
|
|
|
expect(instance.element.hasAttribute('disabled')).to.equal(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets elements disabled state to false', () => {
|
|
|
|
expect(instance.element.disabled).to.equal(true);
|
|
|
|
instance.enable();
|
|
|
|
expect(instance.element.disabled).to.equal(false);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets isDisabled flag to false', () => {
|
|
|
|
expect(instance.isDisabled).to.equal(true);
|
|
|
|
instance.enable();
|
|
|
|
expect(instance.isDisabled).to.equal(false);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('disable', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
instance.enable();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets disabled attribute (to blank string)', () => {
|
|
|
|
expect(instance.element.hasAttribute('disabled')).to.equal(false);
|
|
|
|
instance.disable();
|
|
|
|
expect(instance.element.getAttribute('disabled')).to.equal('');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets elements disabled state to true', () => {
|
|
|
|
expect(instance.element.disabled).to.equal(false);
|
|
|
|
instance.disable();
|
|
|
|
expect(instance.element.disabled).to.equal(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets isDisabled flag to true', () => {
|
|
|
|
expect(instance.isDisabled).to.equal(false);
|
|
|
|
instance.disable();
|
|
|
|
expect(instance.isDisabled).to.equal(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('triggerEvent', () => {
|
|
|
|
it('fires event on element using passed eventType and data', (done) => {
|
|
|
|
const data = {
|
|
|
|
test: true,
|
|
|
|
};
|
|
|
|
|
|
|
|
instance.element.addEventListener('testEvent', ({ detail }) => {
|
|
|
|
expect(detail).to.eql(data);
|
|
|
|
done();
|
|
|
|
});
|
|
|
|
|
|
|
|
instance.triggerEvent('testEvent', data);
|
|
|
|
});
|
|
|
|
});
|
2017-10-13 14:43:58 +02:00
|
|
|
});
|