Add initial text input tests

cypress/integration/choices_spec.js

@@ -1,8 +1,104 @@
 describe('Choices', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
   describe('text element', () => {
-    it('works', () => {
-      cy.visit('/');
-      expect(true).to.equal(true);
+    describe('adding choices', () => {
+      const textInput = 'testing';
+
+      it('shows a dropdown prompt when inputting data', () => {
+        cy.get('.choices')
+          .first()
+          .find('.choices__input--cloned')
+          .type(textInput);
+
+        cy.get('.choices')
+          .first()
+          .find('.choices__list--dropdown')
+          .should('be.visible')
+          .should($dropdown => {
+            const dropdownText = $dropdown.text().trim();
+            expect(dropdownText).to.equal(`Press Enter to add "${textInput}"`);
+          });
+      });
+
+      it('allows me to input choices', () => {
+        cy.get('.choices')
+          .first()
+          .find('.choices__input--cloned')
+          .type(textInput)
+          .type('{enter}');
+
+        cy.get('.choices')
+          .first()
+          .find('.choices__list .choices__item')
+          .last()
+          .should($el => {
+            expect($el).to.contain(textInput);
+          });
+      });
+
+      describe('input limit', () => {
+        it('does not let me input more than 5 choices', () => {
+          for (let index = 0; index < 6; index++) {
+            cy.get('.choices')
+              .first()
+              .find('.choices__input--cloned')
+              .type(`${textInput} + ${index}`)
+              .type('{enter}');
+          }
+
+          cy.get('.choices')
+            .first()
+            .find('.choices__list')
+            .first()
+            .children()
+            .should($items => {
+              expect($items.length).to.equal(5);
+            });
+        });
+      });
+
+      describe.skip('unique values', () => {
+        it('only allows me to input unique values', () => {
+          cy.get('.choices')
+            .eq(1) // second choices instance
+            .find('.choices__list .choices__item')
+            .should($choices => {
+              expect($choices.length).to.equal(0);
+            });
+        });
+      });
+    });
+
+    describe('removing choices', () => {
+      it('allows me to remove inputted choices', () => {
+        cy.get('.choices')
+          .first()
+          .find('.choices__list')
+          .first()
+          .children()
+          .should($items => {
+            expect($items.length).to.equal(2);
+          });
+
+        cy.get('.choices')
+          .first()
+          .find('.choices__list .choices__item')
+          .last()
+          .find('.choices__button')
+          .focus()
+          .click();
+
+        cy.get('.choices')
+          .first()
+          .find('.choices__list')
+          .first()
+          .should($items => {
+            expect($items.length).to.equal(1);
+          });
+      });
     });
   });
 

package.json

@@ -9,7 +9,8 @@
     "build": "npm run js:build && npm run css:build",
     "lint": "eslint assets/**/*.js",
     "coverage": "nyc npm run test",
-    "cypress": "$(npm bin)/cypress run",
+    "cypress:run": "$(npm bin)/cypress run",
+    "cypress:open": "$(npm bin)/cypress open",
     "test": "mocha --require ./config/test.js --compilers js:babel-core/register \"./src/**/**/**/**/*.test.js\"",
     "test:watch": "npm run test -- --watch --inspect=5556",
     "test:ci": "concurrently --kill-others --prefix-colors yellow,green \"npm run start\" \"npm run cypress\"",