diff --git a/.eslintrc b/.eslintrc index 8c2836b..185a527 100644 --- a/.eslintrc +++ b/.eslintrc @@ -42,6 +42,7 @@ "no-plusplus": "off", "no-unused-expressions": "off", "no-underscore-dangle": "off", + "consistent-return": "off", "prettier/prettier": [ "error", { diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js index ade66bb..1e46fa3 100644 --- a/cypress/integration/select-multiple.spec.js +++ b/cypress/integration/select-multiple.spec.js @@ -68,7 +68,7 @@ describe('Choices - select multiple', () => { .click(); }); - it('allows me select choices from a dropdown', () => { + it('allows selecting choices from dropdown', () => { cy.get('[data-test-hook=basic]') .find('.choices__list--multiple .choices__item') .last() @@ -211,44 +211,6 @@ describe('Choices - select multiple', () => { }); }); - /* - There is currently a bug with opening/closing/toggling dropdowns - - @todo Investigate why - */ - describe('interacting with dropdown', () => { - describe('opening dropdown', () => { - it('opens dropdown', () => { - cy.get('[data-test-hook=basic]') - .find('button.open-dropdown') - .focus() - .click(); - - cy.get('[data-test-hook=basic]') - .find('.choices__list--dropdown') - .should('be.visible'); - }); - }); - - describe('closing dropdown', () => { - it('closes dropdown', () => { - cy.get('[data-test-hook=basic]') - .find('button.open-dropdown') - .focus() - .click(); - - cy.get('[data-test-hook=basic]') - .find('button.close-dropdown') - .focus() - .click(); - - cy.get('[data-test-hook=basic]') - .find('.choices__list--dropdown') - .should('not.be.visible'); - }); - }); - }); - describe('disabling', () => { describe('on disable', () => { it('disables the search input', () => { @@ -754,6 +716,40 @@ describe('Choices - select multiple', () => { }); }); + describe('non-string values', () => { + beforeEach(() => { + cy.get('[data-test-hook=non-string-values]') + .find('.choices') + .click(); + }); + + it('displays expected amount of choices in dropdown', () => { + cy.get('[data-test-hook=non-string-values]') + .find('.choices__list--dropdown .choices__list') + .children() + .should('have.length', 4); + }); + + it('allows selecting choices from dropdown', () => { + let $selectedChoice; + cy.get('[data-test-hook=non-string-values]') + .find('.choices__list--dropdown .choices__list') + .children() + .first() + .then($choice => { + $selectedChoice = $choice; + }) + .click(); + + cy.get('[data-test-hook=non-string-values]') + .find('.choices__list--single .choices__item') + .last() + .should($item => { + expect($item.text().trim()).to.equal($selectedChoice.text().trim()); + }); + }); + }); + describe('within form', () => { describe('selecting choice', () => { describe('on enter key', () => { diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js index 1ac30dc..f68d1b0 100644 --- a/cypress/integration/select-one.spec.js +++ b/cypress/integration/select-one.spec.js @@ -45,7 +45,7 @@ describe('Choices - select one', () => { describe('selecting choices', () => { const selectedChoiceText = 'Choice 1'; - it('allows me select choices from a dropdown', () => { + it('allows selecting choices from dropdown', () => { cy.get('[data-test-hook=basic]') .find('.choices__list--dropdown .choices__list') .children() @@ -129,44 +129,6 @@ describe('Choices - select one', () => { }); }); - /* - There is currently a bug with opening/closing/toggling dropdowns - - @todo Investigate why - */ - describe('interacting with dropdown', () => { - describe('opening dropdown', () => { - it('opens dropdown', () => { - cy.get('[data-test-hook=basic]') - .find('button.open-dropdown') - .focus() - .click(); - - cy.get('[data-test-hook=basic]') - .find('.choices__list--dropdown') - .should('be.visible'); - }); - }); - - describe('closing dropdown', () => { - it('closes dropdown', () => { - cy.get('[data-test-hook=basic]') - .find('button.open-dropdown') - .focus() - .click(); - - cy.get('[data-test-hook=basic]') - .find('button.close-dropdown') - .focus() - .click(); - - cy.get('[data-test-hook=basic]') - .find('.choices__list--dropdown') - .should('not.be.visible'); - }); - }); - }); - describe('disabling', () => { describe('on disable', () => { it('disables the search input', () => { @@ -418,7 +380,7 @@ describe('Choices - select one', () => { .should('not.exist'); }); - it('allows me select choices from a dropdown', () => { + it('allows selecting choices from dropdown', () => { cy.get('[data-test-hook=search-disabled]') .find('.choices__list--dropdown .choices__list') .children() @@ -766,6 +728,40 @@ describe('Choices - select one', () => { }); }); + describe('non-string values', () => { + beforeEach(() => { + cy.get('[data-test-hook=non-string-values]') + .find('.choices') + .click(); + }); + + it('displays expected amount of choices in dropdown', () => { + cy.get('[data-test-hook=non-string-values]') + .find('.choices__list--dropdown .choices__list') + .children() + .should('have.length', 4); + }); + + it('allows selecting choices from dropdown', () => { + let $selectedChoice; + cy.get('[data-test-hook=non-string-values]') + .find('.choices__list--dropdown .choices__list') + .children() + .first() + .then($choice => { + $selectedChoice = $choice; + }) + .click(); + + cy.get('[data-test-hook=non-string-values]') + .find('.choices__list--single .choices__item') + .last() + .should($item => { + expect($item.text().trim()).to.equal($selectedChoice.text().trim()); + }); + }); + }); + describe('within form', () => { describe('selecting choice', () => { describe('on enter key', () => { diff --git a/package.json b/package.json index 22d3fb2..b001c46 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "bundlesize": "bundlesize", "cypress:run": "$(npm bin)/cypress run", "cypress:open": "$(npm bin)/cypress open", - "test": "run-p test:unit test:e2e", + "test": "npm run test:unit && npm run test:e2e", "test:unit": "mocha --require ./config/jsdom.js --require @babel/register $(find src -name '*.test.js') --exit", "test:unit:watch": "npm run test:unit -- --watch --inspect=5556", "test:e2e": "run-p --race start cypress:run", diff --git a/public/test/select-multiple.html b/public/test/select-multiple.html index 2b0b4a8..e860d20 100644 --- a/public/test/select-multiple.html +++ b/public/test/select-multiple.html @@ -31,8 +31,6 @@