2017-10-10 13:56:36 +02:00
|
|
|
import { expect } from 'chai';
|
2017-10-11 10:19:13 +02:00
|
|
|
import sinon from 'sinon';
|
2021-12-17 22:26:52 +01:00
|
|
|
import { DEFAULT_CLASSNAMES } from '../defaults';
|
2017-10-10 13:56:36 +02:00
|
|
|
import Dropdown from './dropdown';
|
|
|
|
|
2017-10-29 19:56:24 +01:00
|
|
|
describe('components/dropdown', () => {
|
2017-10-10 13:56:36 +02:00
|
|
|
let instance;
|
|
|
|
let choicesElement;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2017-10-11 10:19:13 +02:00
|
|
|
choicesElement = document.createElement('div');
|
|
|
|
document.body.appendChild(choicesElement);
|
2018-05-21 18:01:03 +02:00
|
|
|
instance = new Dropdown({
|
|
|
|
element: choicesElement,
|
|
|
|
type: 'text',
|
|
|
|
classNames: DEFAULT_CLASSNAMES,
|
|
|
|
});
|
2017-10-10 13:56:36 +02:00
|
|
|
});
|
|
|
|
|
2017-12-18 13:06:38 +01:00
|
|
|
afterEach(() => {
|
|
|
|
document.body.innerHTML = '';
|
|
|
|
instance = null;
|
|
|
|
});
|
|
|
|
|
2017-12-10 19:00:57 +01:00
|
|
|
describe('constructor', () => {
|
|
|
|
it('assigns choices element to instance', () => {
|
|
|
|
expect(instance.element).to.eql(choicesElement);
|
|
|
|
});
|
2017-10-10 13:56:36 +02:00
|
|
|
|
2017-12-10 19:00:57 +01:00
|
|
|
it('assigns classnames to instance', () => {
|
|
|
|
expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
|
|
|
|
});
|
2017-10-10 13:56:36 +02:00
|
|
|
});
|
2017-10-11 10:19:13 +02:00
|
|
|
|
2018-04-24 13:54:45 +02:00
|
|
|
describe('distanceFromTopWindow', () => {
|
2017-10-11 10:19:13 +02:00
|
|
|
let top;
|
|
|
|
let dimensions;
|
|
|
|
let getBoundingClientRectStub;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
top = 100;
|
|
|
|
dimensions = {
|
2019-10-30 18:28:15 +01:00
|
|
|
bottom: 121,
|
2017-10-11 10:19:13 +02:00
|
|
|
height: 0,
|
|
|
|
left: 0,
|
|
|
|
right: 0,
|
|
|
|
top,
|
|
|
|
width: 0,
|
|
|
|
};
|
|
|
|
|
2018-05-28 14:55:44 +02:00
|
|
|
getBoundingClientRectStub = sinon
|
|
|
|
.stub(instance.element, 'getBoundingClientRect')
|
|
|
|
.returns(dimensions);
|
2017-10-11 10:19:13 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
getBoundingClientRectStub.restore();
|
|
|
|
});
|
|
|
|
|
2019-10-30 18:28:15 +01:00
|
|
|
it('determines how far the top of our element is from the top of the viewport', () => {
|
|
|
|
const expectedResponse = dimensions.bottom;
|
|
|
|
const actualResponse = instance.distanceFromTopWindow;
|
2017-10-11 10:19:13 +02:00
|
|
|
expect(actualResponse).to.equal(expectedResponse);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('getChild', () => {
|
|
|
|
let childElement;
|
|
|
|
const childClass = 'test-element';
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
childElement = document.createElement('span');
|
|
|
|
childElement.classList.add(childClass);
|
|
|
|
instance.element.appendChild(childElement);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('returns child element', () => {
|
|
|
|
const expectedResponse = childElement;
|
|
|
|
const actualResponse = instance.getChild(`.${childClass}`);
|
|
|
|
expect(expectedResponse).to.eql(actualResponse);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('show', () => {
|
|
|
|
let actualResponse;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
actualResponse = instance.show();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
instance.hide();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('adds active class', () => {
|
2018-05-28 14:55:44 +02:00
|
|
|
expect(
|
|
|
|
instance.element.classList.contains(DEFAULT_CLASSNAMES.activeState),
|
|
|
|
).to.equal(true);
|
2017-10-11 10:19:13 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
it('sets expanded attribute', () => {
|
|
|
|
expect(instance.element.getAttribute('aria-expanded')).to.equal('true');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets isActive instance flag', () => {
|
|
|
|
expect(instance.isActive).to.equal(true);
|
|
|
|
});
|
|
|
|
|
2018-05-21 18:01:03 +02:00
|
|
|
it('returns instance', () => {
|
|
|
|
expect(actualResponse).to.eql(instance);
|
2017-10-11 10:19:13 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('hide', () => {
|
|
|
|
let actualResponse;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
actualResponse = instance.hide();
|
|
|
|
});
|
|
|
|
|
|
|
|
afterEach(() => {
|
|
|
|
instance.show();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('adds active class', () => {
|
2018-05-28 14:55:44 +02:00
|
|
|
expect(
|
|
|
|
instance.element.classList.contains(DEFAULT_CLASSNAMES.activeState),
|
|
|
|
).to.equal(false);
|
2017-10-11 10:19:13 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
it('sets expanded attribute', () => {
|
|
|
|
expect(instance.element.getAttribute('aria-expanded')).to.equal('false');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('sets isActive instance flag', () => {
|
|
|
|
expect(instance.isActive).to.equal(false);
|
|
|
|
});
|
|
|
|
|
2018-05-21 18:01:03 +02:00
|
|
|
it('returns instance', () => {
|
|
|
|
expect(actualResponse).to.eql(instance);
|
2017-10-11 10:19:13 +02:00
|
|
|
});
|
|
|
|
});
|
2017-10-10 13:56:36 +02:00
|
|
|
});
|