From d5437413a4c4bd4907c8341956b8a9c2187b14b8 Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Sat, 27 Oct 2018 21:00:49 +0100 Subject: [PATCH] Update choice value/labels + add test for parent/child link --- cypress/integration/select-multiple.spec.js | 16 +-- cypress/integration/select-one.spec.js | 83 +++++++++++--- public/index.html | 44 ++++---- public/test/select-multiple.html | 98 ++++++++--------- public/test/select-one.html | 113 ++++++++++++-------- 5 files changed, 219 insertions(+), 135 deletions(-) diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js index ee4812c..ab83cf2 100644 --- a/cypress/integration/select-multiple.spec.js +++ b/cypress/integration/select-multiple.spec.js @@ -13,7 +13,7 @@ describe('Choices - select multiple', () => { describe('selecting choices', () => { describe('focusing on text input', () => { - const selectedChoiceText = 'Dropdown item 1'; + const selectedChoiceText = 'Choice 1'; it('displays a dropdown of choices', () => { cy.get('[data-test-hook=basic]') @@ -26,7 +26,7 @@ describe('Choices - select multiple', () => { .should('have.length', 4) .each(($choice, index) => { expect($choice.text().trim()).to.equal( - `Dropdown item ${index + 1}`, + `Choice ${index + 1}`, ); }); }); @@ -151,7 +151,7 @@ describe('Choices - select multiple', () => { .children() .first() .should($choice => { - expect($choice.text().trim()).to.equal('Dropdown item 2'); + expect($choice.text().trim()).to.equal('Choice 2'); }); }); }); @@ -167,7 +167,7 @@ describe('Choices - select multiple', () => { .children() .first() .should($choice => { - expect($choice.text().trim()).to.equal('Dropdown item 3'); + expect($choice.text().trim()).to.equal('Choice 3'); }); }); }); @@ -424,7 +424,7 @@ describe('Choices - select multiple', () => { describe('search floor reached', () => { it('displays choices filtered by inputted value', () => { - const searchTerm = 'Dropdown item 2'; + const searchTerm = 'Choice 2'; cy.get('[data-test-hook=search-floor]') .find('.choices__input--cloned') @@ -520,7 +520,7 @@ describe('Choices - select multiple', () => { cy.get('[data-test-hook=scrolling-dropdown]') .find('.choices__list--dropdown .choices__list .is-highlighted') .should($choice => { - expect($choice.text().trim()).to.equal('Dropdown item 1'); + expect($choice.text().trim()).to.equal('Choice 1'); }); }); @@ -530,7 +530,7 @@ describe('Choices - select multiple', () => { .find('.choices__list--dropdown .choices__list .is-highlighted') .should($choice => { expect($choice.text().trim()).to.equal( - `Dropdown item ${index + 1}`, + `Choice ${index + 1}`, ); }); @@ -555,7 +555,7 @@ describe('Choices - select multiple', () => { cy.get('[data-test-hook=scrolling-dropdown]') .find('.choices__list--dropdown .choices__list .is-highlighted') .should($choice => { - expect($choice.text().trim()).to.equal(`Dropdown item ${index}`); + expect($choice.text().trim()).to.equal(`Choice ${index}`); }); cy.get('[data-test-hook=scrolling-dropdown]') diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js index 494eebd..d97a630 100644 --- a/cypress/integration/select-one.spec.js +++ b/cypress/integration/select-one.spec.js @@ -14,7 +14,7 @@ describe('Choices - select one', () => { describe('selecting choice', () => { describe('focusing on text input', () => { - const selectedChoiceText = 'Dropdown item 1'; + const selectedChoiceText = 'Choice 1'; it('displays a dropdown of choices', () => { cy.get('[data-test-hook=basic]') @@ -26,9 +26,7 @@ describe('Choices - select one', () => { .children() .should('have.length', 4) .each(($choice, index) => { - expect($choice.text().trim()).to.equal( - `Dropdown item ${index + 1}`, - ); + expect($choice.text().trim()).to.equal(`Choice ${index + 1}`); }); }); @@ -92,7 +90,7 @@ describe('Choices - select one', () => { .children() .first() .should($choice => { - expect($choice.text().trim()).to.equal('Dropdown item 2'); + expect($choice.text().trim()).to.equal('Choice 2'); }); }); }); @@ -108,7 +106,7 @@ describe('Choices - select one', () => { .children() .first() .should($choice => { - expect($choice.text().trim()).to.equal('Dropdown item 3'); + expect($choice.text().trim()).to.equal('Choice 3'); }); }); }); @@ -319,7 +317,7 @@ describe('Choices - select one', () => { searchEnabled: false } */ - const selectedChoiceText = 'Dropdown item 3'; + const selectedChoiceText = 'Choice 3'; beforeEach(() => { cy.get('[data-test-hook=search-disabled]') @@ -383,7 +381,7 @@ describe('Choices - select one', () => { describe('search floor reached', () => { it('displays choices filtered by inputted value', () => { - const searchTerm = 'Dropdown item 2'; + const searchTerm = 'Choice 2'; cy.get('[data-test-hook=search-floor]') .find('.choices__input--cloned') @@ -468,7 +466,7 @@ describe('Choices - select one', () => { cy.get('[data-test-hook=scrolling-dropdown]') .find('.choices__list--dropdown .choices__list .is-highlighted') .should($choice => { - expect($choice.text().trim()).to.equal('Dropdown item 1'); + expect($choice.text().trim()).to.equal('Choice 1'); }); }); @@ -477,9 +475,7 @@ describe('Choices - select one', () => { cy.get('[data-test-hook=scrolling-dropdown]') .find('.choices__list--dropdown .choices__list .is-highlighted') .should($choice => { - expect($choice.text().trim()).to.equal( - `Dropdown item ${index + 1}`, - ); + expect($choice.text().trim()).to.equal(`Choice ${index + 1}`); }); cy.get('[data-test-hook=scrolling-dropdown]') @@ -503,7 +499,7 @@ describe('Choices - select one', () => { cy.get('[data-test-hook=scrolling-dropdown]') .find('.choices__list--dropdown .choices__list .is-highlighted') .should($choice => { - expect($choice.text().trim()).to.equal(`Dropdown item ${index}`); + expect($choice.text().trim()).to.equal(`Choice ${index}`); }); cy.get('[data-test-hook=scrolling-dropdown]') @@ -579,5 +575,66 @@ describe('Choices - select one', () => { }); }); }); + + describe('dependencies', () => { + describe('selecting "Parent choice 2"', () => { + it('enables the child Choices instance', () => { + cy.get('[data-test-hook=dependencies]') + .find('.choices') + .eq(1) + .should('have.class', 'is-disabled'); + + cy.get('[data-test-hook=dependencies]') + .find('.choices') + .eq(0) + .click(); + + cy.get('[data-test-hook=dependencies]') + .find('.choices__list--dropdown .choices__list') + .children() + .eq(1) + .click(); + + cy.get('[data-test-hook=dependencies]') + .find('.choices') + .eq(1) + .should('not.have.class', 'is-disabled'); + }); + }); + + describe('changing selection from "Parent choice 2" to something else', () => { + it('disables the child Choices instance', () => { + // open parent instance and select second choice + cy.get('[data-test-hook=dependencies]') + .find('.choices') + .eq(0) + .click() + .find('.choices__list--dropdown .choices__list') + .children() + .eq(1) + .click(); + + cy.get('[data-test-hook=dependencies]') + .find('.choices') + .eq(1) + .should('not.have.class', 'is-disabled'); + + // open parent instance and select third choice + cy.get('[data-test-hook=dependencies]') + .find('.choices') + .eq(0) + .click() + .find('.choices__list--dropdown .choices__list') + .children() + .eq(2) + .click(); + + cy.get('[data-test-hook=dependencies]') + .find('.choices') + .eq(1) + .should('have.class', 'is-disabled'); + }); + }); + }); }); }); diff --git a/public/index.html b/public/index.html index 4706f59..0c05001 100644 --- a/public/index.html +++ b/public/index.html @@ -85,19 +85,19 @@ @@ -143,10 +143,10 @@ @@ -158,9 +158,9 @@

If the following two examples do not load, the Discogs rate limit has probably been reached. Try again later!

@@ -212,9 +212,9 @@ @@ -295,10 +295,10 @@ diff --git a/public/test/select-multiple.html b/public/test/select-multiple.html index eb8be63..2fd76fd 100644 --- a/public/test/select-multiple.html +++ b/public/test/select-multiple.html @@ -32,87 +32,87 @@
@@ -124,21 +124,21 @@
@@ -187,7 +187,7 @@ }); new Choices('#choices-search-floor', { - searchFloor: 10, + searchFloor: 5, }); new Choices('#choices-placeholder', { diff --git a/public/test/select-one.html b/public/test/select-one.html index f6d20ff..da39717 100644 --- a/public/test/select-one.html +++ b/public/test/select-one.html @@ -32,75 +32,75 @@
@@ -112,21 +112,21 @@
@@ -145,6 +145,22 @@ + +
+ + + + + +