deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-09 17:16:36 +02:00
Code Issues Projects Releases Wiki Activity

Move wrapping into container class

Browse source
This commit is contained in:
Josh Johnson 2017-12-11 14:40:38 +00:00
parent 6130ee00d5
commit beeeeb87ad
4 changed files with 74 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/scripts/src/choices.js
View file

@ -218,7 +218,7 @@ class Choices {
// Remove all event listeners
this._removeEventListeners();
this.passedElement.reveal();
this.containerOuter.revert(this.passedElement.element);
this.containerOuter.unwrap(this.passedElement.element);
// Clear data store
this.clearStore();
@ -2183,9 +2183,9 @@ class Choices {
this.passedElement.conceal();
// Wrap input in container preserving DOM ordering
wrap(this.passedElement.element, this.containerInner.element);
this.containerInner.wrap(this.passedElement.element);
// Wrapper inner container with outer container
wrap(this.containerInner.element, this.containerOuter.element);
this.containerOuter.wrap(this.containerInner.element);
if (this.isSelectOneElement) {
this.input.setPlaceholder(this.config.searchPlaceholderValue || '');

10
src/scripts/src/choices.test.js
View file

@ -131,13 +131,13 @@ describe('choices', () => {
describe('when already initialised', () => {
let removeEventListenersSpy;
let passedElementRevealSpy;
let containerOuterRevertSpy;
let containerOuterUnwrapSpy;
let clearStoreSpy;
beforeEach(() => {
removeEventListenersSpy = spy(instance, '_removeEventListeners');
passedElementRevealSpy = spy(instance.passedElement, 'reveal');
containerOuterRevertSpy = spy(instance.containerOuter, 'revert');
containerOuterUnwrapSpy = spy(instance.containerOuter, 'unwrap');
clearStoreSpy = spy(instance, 'clearStore');
instance.initialised = true;
@ -147,7 +147,7 @@ describe('choices', () => {
afterEach(() => {
removeEventListenersSpy.restore();
passedElementRevealSpy.restore();
containerOuterRevertSpy.restore();
containerOuterUnwrapSpy.restore();
clearStoreSpy.restore();
});
@ -160,8 +160,8 @@ describe('choices', () => {
});
it('reverts outer container', () => {
expect(containerOuterRevertSpy.called).to.equal(true);
expect(containerOuterRevertSpy.lastCall.args[0]).to.equal(instance.passedElement.element);
expect(containerOuterUnwrapSpy.called).to.equal(true);
expect(containerOuterUnwrapSpy.lastCall.args[0]).to.equal(instance.passedElement.element);
});
it('clears store', () => {

11
src/scripts/src/components/container.js
View file

@ -1,4 +1,4 @@
import { getWindowHeight } from '../lib/utils';
import { getWindowHeight, wrap } from '../lib/utils';
export default class Container {
constructor(instance, element, classNames) {
@ -151,10 +151,15 @@ export default class Container {
this.isDisabled = true;
}
revert(originalElement) {
wrap(element) {
this.wrappedElement = element;
wrap(this.wrappedElement, this.element);
}
unwrap() {
// Move passed element back to original position
this.element.parentNode.insertBefore(
originalElement,
this.wrappedElement,
this.element,
);
// Remove container

65
src/scripts/src/components/container.test.js
View file

@ -6,7 +6,7 @@ import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
describe('components/container', () => {
let instance;
let choicesInstance;
let choicesElement;
let element;
beforeEach(() => {
choicesInstance = {
@ -14,8 +14,9 @@ describe('components/container', () => {
...DEFAULT_CONFIG,
},
};
choicesElement = document.createElement('select');
instance = new Container(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
element = document.createElement('div');
element.id = 'container';
instance = new Container(choicesInstance, element, DEFAULT_CLASSNAMES);
});
describe('constructor', () => {
@ -24,7 +25,7 @@ describe('components/container', () => {
});
it('assigns choices element to class', () => {
expect(instance.element).to.eql(choicesElement);
expect(instance.element).to.eql(element);
});
it('assigns classnames to class', () => {
@ -34,7 +35,7 @@ describe('components/container', () => {
describe('getElement', () => {
it('returns DOM reference of element', () => {
expect(instance.getElement()).to.eql(choicesElement);
expect(instance.getElement()).to.eql(element);
});
});
@ -332,9 +333,59 @@ describe('components/container', () => {
});
});
// describe('revert', () => {
describe('wrap', () => {
let elementToWrap;
// });
beforeEach(() => {
elementToWrap = document.createElement('div');
elementToWrap.id = 'wrap-test';
document.body.appendChild(elementToWrap);
});
afterEach(() => {
document.getElementById('wrap-test').remove();
});
it('wraps passed element inside element', () => {
expect(instance.element.querySelector('div#wrap-test')).to.equal(null);
instance.wrap(document.querySelector('div#wrap-test'));
expect(instance.element.querySelector('div#wrap-test')).to.equal(elementToWrap);
});
it('assigns reference to element to instance', () => {
expect(instance.wrappedElement).to.equal(undefined);
instance.wrap(document.querySelector('div#wrap-test'));
expect(instance.wrappedElement).to.equal(elementToWrap);
});
});
describe('unwrap', () => {
let elementToWrap;
beforeEach(() => {
elementToWrap = document.createElement('div');
elementToWrap.id = 'unwrap-test';
document.body.appendChild(elementToWrap);
instance.wrap(document.getElementById('unwrap-test'));
});
afterEach(() => {
document.body.removeChild(document.getElementById('unwrap-test'));
});
it('moves wrapped element outside of element', () => {
expect(instance.element.querySelector('div#unwrap-test')).to.be.instanceof(HTMLElement);
instance.unwrap(elementToWrap);
expect(instance.element.querySelector('div#unwrap-test')).to.equal(null);
expect(document.querySelector('div#unwrap-test')).to.be.instanceof(HTMLElement);
});
// it('removes element from DOM', () => {
// expect(document.getElementById('container')).to.not.equal(null);
// instance.unwrap(elementToWrap);
// expect(document.getElementById('container')).to.equal(null);
// });
});
describe('addLoadingState', () => {
beforeEach(() => {