From b224a96e08485a00795759f1642a8b4e2e674232 Mon Sep 17 00:00:00 2001
From: Josh Johnson
Date: Sun, 14 Oct 2018 16:00:46 +0100
Subject: [PATCH] Add select one e2e tests
---
cypress/integration/select-multiple.spec.js | 80 ++++++++-
cypress/integration/select-one.spec.js | 186 ++++++++++++++++++++
public/test/select-multiple.html | 34 +++-
public/test/select-one.html | 79 +++++++++
4 files changed, 376 insertions(+), 3 deletions(-)
create mode 100644 cypress/integration/select-one.spec.js
create mode 100644 public/test/select-one.html
diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js
index fe600b6..942a725 100644
--- a/cypress/integration/select-multiple.spec.js
+++ b/cypress/integration/select-multiple.spec.js
@@ -1,4 +1,4 @@
-describe('Choices - text element', () => {
+describe('Choices - select multiple', () => {
beforeEach(() => {
cy.visit('/select-multiple.html');
});
@@ -72,7 +72,7 @@ describe('Choices - text element', () => {
});
});
- it('removes selected choice from dropdown', () => {
+ it('removes selected choice from dropdown list', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list')
.children()
@@ -184,5 +184,81 @@ describe('Choices - text element', () => {
});
});
});
+
+ describe('selection limit', () => {
+ const selectionLimit = 5;
+
+ beforeEach(() => {
+ for (let index = 0; index < selectionLimit; index++) {
+ cy.get('[data-test-hook=selection-limit]')
+ .find('.choices__input--cloned')
+ .focus();
+
+ cy.get('[data-test-hook=selection-limit]')
+ .find('.choices__list--dropdown .choices__list')
+ .children()
+ .first()
+ .click();
+ }
+ });
+
+ it('shows dropdown prompt once limit has been reached', () => {
+ cy.get('[data-test-hook=selection-limit]')
+ .find('.choices__list--dropdown')
+ .should('be.visible')
+ .should($dropdown => {
+ const dropdownText = $dropdown.text().trim();
+ expect(dropdownText).to.equal(
+ `Only ${selectionLimit} values can be added`,
+ );
+ });
+ });
+ });
+
+ describe('prepend/append', () => {
+ let selectedChoiceText;
+
+ beforeEach(() => {
+ cy.get('[data-test-hook=prepend-append]')
+ .find('.choices__input--cloned')
+ .focus();
+
+ cy.get('[data-test-hook=prepend-append]')
+ .find('.choices__list--dropdown .choices__list')
+ .children()
+ .last()
+ .then($choice => {
+ selectedChoiceText = $choice.text().trim();
+ })
+ .click();
+ });
+
+ it('works', () => {
+ expect(true).to.equal(true);
+ });
+
+ it('prepends and appends value to inputted value', () => {
+ cy.get('[data-test-hook=prepend-append]')
+ .find('.choices__list--multiple .choices__item')
+ .last()
+ .should($choice => {
+ expect($choice.data('value')).to.equal(
+ `before-${selectedChoiceText}-after`,
+ );
+ });
+ });
+
+ it('displays just the inputted value to the user', () => {
+ cy.get('[data-test-hook=prepend-append]')
+ .find('.choices__list--multiple .choices__item')
+ .last()
+ .should($choice => {
+ expect($choice.text()).to.not.contain(
+ `before-${selectedChoiceText}-after`,
+ );
+ expect($choice.text()).to.contain(selectedChoiceText);
+ });
+ });
+ });
});
});
diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js
new file mode 100644
index 0000000..921dc4e
--- /dev/null
+++ b/cypress/integration/select-one.spec.js
@@ -0,0 +1,186 @@
+describe('Choices - select one', () => {
+ beforeEach(() => {
+ cy.visit('/select-one.html');
+ });
+
+ describe('configs', () => {
+ describe('basic', () => {
+ describe('selecting choices', () => {
+ beforeEach(() => {
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__input--cloned')
+ .focus();
+ });
+
+ describe('focusing on text input', () => {
+ const selectedChoiceText = 'Dropdown item 1';
+
+ it('displays a dropdown of choices', () => {
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__list--dropdown')
+ .should('be.visible');
+
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__list--dropdown .choices__list')
+ .children()
+ .should('have.length', 4)
+ .each(($choice, index) => {
+ expect($choice.text().trim()).to.equal(
+ `Dropdown item ${index + 1}`,
+ );
+ });
+ });
+
+ it('allows me select choices from a dropdown', () => {
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__list--dropdown .choices__list')
+ .children()
+ .first()
+ .click();
+
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__list--single .choices__item')
+ .last()
+ .should($item => {
+ expect($item).to.contain(selectedChoiceText);
+ });
+ });
+
+ it('does not remove selected choice from dropdown list', () => {
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__list--dropdown .choices__list')
+ .children()
+ .first()
+ .click();
+
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__list--dropdown .choices__list')
+ .children()
+ .first()
+ .should($item => {
+ expect($item).to.contain(selectedChoiceText);
+ });
+ });
+
+ describe('pressing escape', () => {
+ beforeEach(() => {
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__input--cloned')
+ .type('{esc}');
+ });
+
+ it('closes the dropdown', () => {
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__list--dropdown')
+ .should('not.be.visible');
+ });
+ });
+ });
+ });
+
+ describe('removing choices', () => {
+ beforeEach(() => {
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__input--cloned')
+ .focus();
+
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__list--dropdown .choices__list')
+ .children()
+ .last()
+ .click();
+ });
+
+ describe('remove button', () => {
+ it('removes last choice', () => {
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__list--single .choices__item')
+ .last()
+ .find('.choices__button')
+ .focus()
+ .click();
+
+ cy.get('[data-test-hook=basic]')
+ .find('.choices__list--single')
+ .children()
+ .should('have.length', 0);
+ });
+ });
+ });
+ });
+
+ describe('disabled choice', () => {
+ describe('selecting a disabled choice', () => {
+ let selectedChoiceText;
+
+ beforeEach(() => {
+ cy.get('[data-test-hook=disabled-choice]').click();
+
+ cy.get('[data-test-hook=disabled-choice]')
+ .find('.choices__list--dropdown .choices__item--disabled')
+ .then($choice => {
+ selectedChoiceText = $choice.text().trim();
+ })
+ .click();
+ });
+
+ it('does not change selected choice', () => {
+ cy.get('[data-test-hook=prepend-append]')
+ .find('.choices__list--single .choices__item')
+ .last()
+ .should($choice => {
+ expect($choice.text()).to.not.contain(selectedChoiceText);
+ });
+ });
+
+ it('closes the dropdown list', () => {
+ cy.get('[data-test-hook=disabled-choice]')
+ .find('.choices__list--dropdown')
+ .should('not.be.visible');
+ });
+ });
+ });
+
+ describe('prepend/append', () => {
+ let selectedChoiceText;
+
+ beforeEach(() => {
+ cy.get('[data-test-hook=prepend-append]')
+ .find('.choices__input--cloned')
+ .focus();
+
+ cy.get('[data-test-hook=prepend-append]')
+ .find('.choices__list--dropdown .choices__list')
+ .children()
+ .last()
+ .then($choice => {
+ selectedChoiceText = $choice.text().trim();
+ })
+ .click();
+ });
+
+ it('prepends and appends value to inputted value', () => {
+ cy.get('[data-test-hook=prepend-append]')
+ .find('.choices__list--single .choices__item')
+ .last()
+ .should($choice => {
+ expect($choice.data('value')).to.equal(
+ `before-${selectedChoiceText}-after`,
+ );
+ });
+ });
+
+ it('displays just the inputted value to the user', () => {
+ cy.get('[data-test-hook=prepend-append]')
+ .find('.choices__list--single .choices__item')
+ .last()
+ .should($choice => {
+ expect($choice.text()).to.not.contain(
+ `before-${selectedChoiceText}-after`,
+ );
+ expect($choice.text()).to.contain(selectedChoiceText);
+ });
+ });
+ });
+ });
+});
diff --git a/public/test/select-multiple.html b/public/test/select-multiple.html
index db4a7d5..e7fe3c1 100644
--- a/public/test/select-multiple.html
+++ b/public/test/select-multiple.html
@@ -41,7 +41,7 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Select one inputs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/test/select-one.html b/public/test/select-one.html
new file mode 100644
index 0000000..8bd1ecd
--- /dev/null
+++ b/public/test/select-one.html
@@ -0,0 +1,79 @@
+
+
+
+