From 798b49d56592105aabeb482b01f533b96fcee367 Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Tue, 30 Oct 2018 20:21:52 +0000 Subject: [PATCH] Disable element if disabled attr passed --- cypress/integration/select-multiple.spec.js | 43 +++++++++++++++++++ cypress/integration/select-one.spec.js | 43 +++++++++++++++++++ cypress/integration/text.spec.js | 12 +++++- public/test/select-multiple.html | 11 +++++ public/test/select-one.html | 11 +++++ public/test/text.html | 18 +++++--- src/scripts/choices.js | 5 ++- .../components/wrapped-element.test.js | 16 +++---- 8 files changed, 142 insertions(+), 17 deletions(-) diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js index e160858..1402aec 100644 --- a/cypress/integration/select-multiple.spec.js +++ b/cypress/integration/select-multiple.spec.js @@ -321,6 +321,49 @@ describe('Choices - select multiple', () => { }); }); + describe('disabled via attribute', () => { + beforeEach(() => { + cy.get('[data-test-hook=disabled-via-attr]') + .find('.choices') + .click(); + }); + + it('disables the search input', () => { + cy.get('[data-test-hook=disabled-via-attr]') + .find('.choices__input--cloned') + .should('be.disabled'); + }); + + describe('on click', () => { + it('opens choice dropdown', () => { + cy.get('[data-test-hook=disabled-via-attr]') + .find('.choices__list--dropdown') + .should('be.visible'); + }); + }); + + describe('attempting to select choice', () => { + let selectedChoice; + + it('does not select choice', () => { + cy.get('[data-test-hook=disabled-via-attr]') + .find('.choices__list--dropdown .choices__item') + .last() + .then($lastChoice => { + selectedChoice = $lastChoice; + }) + .click(); + + cy.get('[data-test-hook=disabled-via-attr]') + .find('.choices__list--multiple .choices__item') + .last() + .should($item => { + expect($item.text()).to.not.contain(selectedChoice.text()); + }); + }); + }); + }); + describe('selection limit', () => { /* { diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js index c44ad29..c4b9f27 100644 --- a/cypress/integration/select-one.spec.js +++ b/cypress/integration/select-one.spec.js @@ -269,6 +269,49 @@ describe('Choices - select one', () => { }); }); + describe('disabled via attribute', () => { + beforeEach(() => { + cy.get('[data-test-hook=disabled-via-attr]') + .find('.choices') + .click(); + }); + + it('disables the search input', () => { + cy.get('[data-test-hook=disabled-via-attr]') + .find('.choices__input--cloned') + .should('be.disabled'); + }); + + describe('on click', () => { + it('opens choice dropdown', () => { + cy.get('[data-test-hook=disabled-via-attr]') + .find('.choices__list--dropdown') + .should('be.visible'); + }); + }); + + describe('attempting to select choice', () => { + let selectedChoice; + + it('does not select choice', () => { + cy.get('[data-test-hook=disabled-via-attr]') + .find('.choices__list--dropdown .choices__item') + .last() + .then($lastChoice => { + selectedChoice = $lastChoice; + }) + .click(); + + cy.get('[data-test-hook=disabled-via-attr]') + .find('.choices__list--single .choices__item') + .last() + .should($item => { + expect($item.text()).to.not.contain(selectedChoice.text()); + }); + }); + }); + }); + describe('prepend/append', () => { /* { diff --git a/cypress/integration/text.spec.js b/cypress/integration/text.spec.js index 4cb5279..b774943 100644 --- a/cypress/integration/text.spec.js +++ b/cypress/integration/text.spec.js @@ -284,9 +284,17 @@ describe('Choices - text element', () => { }); }); - describe('disabled', () => { + describe('adding items disabled', () => { it('does not allow me to input data', () => { - cy.get('[data-test-hook=disabled]') + cy.get('[data-test-hook=adding-items-disabled]') + .find('.choices__input--cloned') + .should('be.disabled'); + }); + }); + + describe('disabled via attribute', () => { + it('does not allow me to input data', () => { + cy.get('[data-test-hook=disabled-via-attr]') .find('.choices__input--cloned') .should('be.disabled'); }); diff --git a/public/test/select-multiple.html b/public/test/select-multiple.html index 2fd76fd..32a362c 100644 --- a/public/test/select-multiple.html +++ b/public/test/select-multiple.html @@ -68,6 +68,15 @@ +
+ + +
+
+
+ + +
+
-
- - +
+ + +
+ +
+ +
@@ -104,10 +109,11 @@ regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, }); - new Choices('#choices-disabled', { + new Choices('#choices-adding-items-disabled', { addItems: false, - removeItems: false, - }).disable(); + }); + + new Choices('#choices-disabled-via-attr'); new Choices('#choices-prepend-append', { prependValue: 'before-', diff --git a/src/scripts/choices.js b/src/scripts/choices.js index 7885a75..e2d16ae 100644 --- a/src/scripts/choices.js +++ b/src/scripts/choices.js @@ -1830,7 +1830,10 @@ class Choices { this.input.setWidth(true); } - if (!this.config.addItems) { + if ( + !this.config.addItems || + this.passedElement.element.hasAttribute('disabled') + ) { this.disable(); } diff --git a/src/scripts/components/wrapped-element.test.js b/src/scripts/components/wrapped-element.test.js index 2b1c154..bf2b99f 100644 --- a/src/scripts/components/wrapped-element.test.js +++ b/src/scripts/components/wrapped-element.test.js @@ -10,7 +10,7 @@ describe('components/wrappedElement', () => { element = document.createElement('select'); instance = new WrappedElement({ element, - classNames: DEFAULT_CLASSNAMES + classNames: DEFAULT_CLASSNAMES, }); }); @@ -51,15 +51,15 @@ describe('components/wrappedElement', () => { instance.conceal(); expect(instance.element.tabIndex).to.equal(-1); expect( - instance.element.classList.contains(instance.classNames.input) + instance.element.classList.contains(instance.classNames.input), ).to.equal(true); expect( - instance.element.classList.contains(instance.classNames.hiddenState) + 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 + originalStyling, ); }); }); @@ -76,16 +76,16 @@ describe('components/wrappedElement', () => { instance.reveal(); expect(instance.element.tabIndex).to.equal(0); expect( - instance.element.classList.contains(instance.classNames.input) + instance.element.classList.contains(instance.classNames.input), ).to.equal(false); expect( - instance.element.classList.contains(instance.classNames.hiddenState) + 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 + null, ); }); }); @@ -141,7 +141,7 @@ describe('components/wrappedElement', () => { describe('triggerEvent', () => { it('fires event on element using passed eventType and data', done => { const data = { - test: true + test: true, }; instance.element.addEventListener('testEvent', ({ detail }) => {