From 608358a9f84067d6d6bfca1f30c395852e8e37f1 Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@joshuajohnson.co.uk>
Date: Sun, 28 Oct 2018 09:32:35 +0000
Subject: [PATCH] Fix bug where selected options were not being selected

---
 cypress/integration/select-multiple.spec.js | 161 +++++++++++---------
 cypress/integration/select-one.spec.js      | 128 +++++++++-------
 src/scripts/templates.js                    |   2 +-
 src/scripts/templates.test.js               |   2 +-
 4 files changed, 167 insertions(+), 126 deletions(-)

diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js
index ab83cf2..e160858 100644
--- a/cypress/integration/select-multiple.spec.js
+++ b/cypress/integration/select-multiple.spec.js
@@ -11,33 +11,64 @@ describe('Choices - select multiple', () => {
           .focus();
       });
 
-      describe('selecting choices', () => {
-        describe('focusing on text input', () => {
-          const selectedChoiceText = 'Choice 1';
+      describe('focusing on text input', () => {
+        it('displays a dropdown of choices', () => {
+          cy.get('[data-test-hook=basic]')
+            .find('.choices__list--dropdown')
+            .should('be.visible');
 
-          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(`Choice ${index + 1}`);
+            });
+        });
 
+        describe('pressing escape', () => {
+          beforeEach(() => {
             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(
-                  `Choice ${index + 1}`,
-                );
-              });
+              .find('.choices__input--cloned')
+              .type('{esc}');
           });
 
-          it('allows me select choices from a dropdown', () => {
+          it('closes the dropdown', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown')
+              .should('not.be.visible');
+          });
+
+          describe('typing more into the input', () => {
+            it('re-opens the dropdown', () => {
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__input--cloned')
+                .type('test');
+
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__list--dropdown')
+                .should('be.visible');
+            });
+          });
+        });
+      });
+
+      describe('selecting choices', () => {
+        describe('selecting a single choice', () => {
+          let selectedChoiceText;
+
+          beforeEach(() => {
             cy.get('[data-test-hook=basic]')
               .find('.choices__list--dropdown .choices__list')
               .children()
               .first()
+              .then($choice => {
+                selectedChoiceText = $choice.text().trim();
+              })
               .click();
+          });
 
+          it('allows me select choices from a dropdown', () => {
             cy.get('[data-test-hook=basic]')
               .find('.choices__list--multiple .choices__item')
               .last()
@@ -46,39 +77,15 @@ describe('Choices - select multiple', () => {
               });
           });
 
-          describe('selecting all available choices', () => {
-            beforeEach(() => {
-              for (let index = 0; index <= 4; index++) {
-                cy.get('[data-test-hook=basic]')
-                  .find('.choices__input--cloned')
-                  .focus();
-
-                cy.get('[data-test-hook=basic]')
-                  .find('.choices__list--dropdown .choices__list')
-                  .children()
-                  .first()
-                  .click();
-              }
-            });
-
-            it('displays "no choices to choose" prompt', () => {
-              cy.get('[data-test-hook=basic]')
-                .find('.choices__list--dropdown')
-                .should('be.visible')
-                .should($dropdown => {
-                  const dropdownText = $dropdown.text().trim();
-                  expect(dropdownText).to.equal('No choices to choose from');
-                });
-            });
+          it('updates the value of the original input', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__input.is-hidden')
+              .should($select => {
+                expect($select.val()).to.contain(selectedChoiceText);
+              });
           });
 
           it('removes 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()
@@ -86,55 +93,69 @@ describe('Choices - select multiple', () => {
                 expect($choice.text().trim()).to.not.equal(selectedChoiceText);
               });
           });
+        });
 
-          describe('pressing escape', () => {
-            beforeEach(() => {
+        describe('selecting all available choices', () => {
+          beforeEach(() => {
+            for (let index = 0; index <= 4; index++) {
               cy.get('[data-test-hook=basic]')
                 .find('.choices__input--cloned')
-                .type('{esc}');
-            });
+                .focus();
 
-            it('closes the dropdown', () => {
               cy.get('[data-test-hook=basic]')
-                .find('.choices__list--dropdown')
-                .should('not.be.visible');
-            });
+                .find('.choices__list--dropdown .choices__list')
+                .children()
+                .first()
+                .click();
+            }
+          });
 
-            describe('typing more into the input', () => {
-              it('re-opens the dropdown', () => {
-                cy.get('[data-test-hook=basic]')
-                  .find('.choices__input--cloned')
-                  .type('test');
-
-                cy.get('[data-test-hook=basic]')
-                  .find('.choices__list--dropdown')
-                  .should('be.visible');
+          it('displays "no choices to choose" prompt', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown')
+              .should('be.visible')
+              .should($dropdown => {
+                const dropdownText = $dropdown.text().trim();
+                expect(dropdownText).to.equal('No choices to choose from');
               });
-            });
           });
         });
       });
 
       describe('removing choices', () => {
+        let removedChoiceText;
+
         beforeEach(() => {
           cy.get('[data-test-hook=basic]')
             .find('.choices__list--dropdown .choices__list')
             .children()
             .last()
+            .then($choice => {
+              removedChoiceText = $choice.text().trim();
+            })
             .click();
+
+          cy.get('[data-test-hook=basic]')
+            .find('.choices__input--cloned')
+            .type('{backspace}');
         });
 
         describe('on backspace', () => {
           it('removes last choice', () => {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__input--cloned')
-              .type('{backspace}');
-
             cy.get('[data-test-hook=basic]')
               .find('.choices__list--multiple')
               .children()
               .should('have.length', 0);
           });
+
+          it('updates the value of the original input', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__input.is-hidden')
+              .should($select => {
+                const val = $select.val() || [];
+                expect(val).to.not.contain(removedChoiceText);
+              });
+          });
         });
       });
 
@@ -529,9 +550,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(
-                `Choice ${index + 1}`,
-              );
+              expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
             });
 
           cy.get('[data-test-hook=scrolling-dropdown]')
diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js
index 8057de2..c44ad29 100644
--- a/cypress/integration/select-one.spec.js
+++ b/cypress/integration/select-one.spec.js
@@ -12,68 +12,68 @@ describe('Choices - select one', () => {
           .click();
       });
 
-      describe('selecting choice', () => {
-        describe('focusing on text input', () => {
-          const selectedChoiceText = 'Choice 1';
+      describe('focusing on text input', () => {
+        it('displays a dropdown of choices', () => {
+          cy.get('[data-test-hook=basic]')
+            .find('.choices__list--dropdown')
+            .should('be.visible');
 
-          it('displays a dropdown of choices', () => {
+          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(`Choice ${index + 1}`);
+            });
+        });
+
+        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('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(`Choice ${index + 1}`);
-              });
+              .should('not.be.visible');
           });
+        });
+      });
 
-          it('allows me select choices from a dropdown', () => {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--dropdown .choices__list')
-              .children()
-              .first()
-              .click();
+      describe('selecting choices', () => {
+        const selectedChoiceText = 'Choice 1';
 
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--single .choices__item')
-              .last()
-              .should($item => {
-                expect($item).to.contain(selectedChoiceText);
-              });
-          });
+        it('allows me select choices from a dropdown', () => {
+          cy.get('[data-test-hook=basic]')
+            .find('.choices__list--dropdown .choices__list')
+            .children()
+            .first()
+            .click();
 
-          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}');
+          cy.get('[data-test-hook=basic]')
+            .find('.choices__list--single .choices__item')
+            .last()
+            .should($item => {
+              expect($item).to.contain(selectedChoiceText);
             });
+        });
 
-            it('closes the dropdown', () => {
-              cy.get('[data-test-hook=basic]')
-                .find('.choices__list--dropdown')
-                .should('not.be.visible');
+        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);
             });
-          });
         });
       });
 
@@ -150,19 +150,41 @@ describe('Choices - select one', () => {
 
       describe('remove button', () => {
         describe('on click', () => {
-          it('removes selected choice', () => {
+          let removedChoiceText;
+
+          beforeEach(() => {
+            cy.get('[data-test-hook=remove-button]')
+              .find('.choices__list--single .choices__item')
+              .last()
+              .then($choice => {
+                removedChoiceText = $choice.text().trim();
+              })
+              .click();
+
             cy.get('[data-test-hook=remove-button]')
               .find('.choices__list--single .choices__item')
               .last()
               .find('.choices__button')
               .focus()
               .click();
+          });
 
+          it('removes selected choice', () => {
             cy.get('[data-test-hook=remove-button]')
               .find('.choices__list--single')
               .children()
               .should('have.length', 0);
           });
+
+          it('updates the value of the original input', () => {
+            cy.get('[data-test-hook=remove-button]')
+              .find('.choices__input.is-hidden')
+              .should($select => {
+                const val = $select.val() || [];
+
+                expect(val).to.not.contain(removedChoiceText);
+              });
+          });
         });
       });
     });
diff --git a/src/scripts/templates.js b/src/scripts/templates.js
index 48e91a9..5b50857 100644
--- a/src/scripts/templates.js
+++ b/src/scripts/templates.js
@@ -223,7 +223,7 @@ export const TEMPLATES = {
   },
   option(data) {
     return strToEl(`
-      <option value="${data.value}" ${data.selected ? 'selected' : ''} ${
+      <option value="${data.value}" ${data.active ? 'selected' : ''} ${
       data.disabled ? 'disabled' : ''
     }>${data.label}</option>
     `);
diff --git a/src/scripts/templates.test.js b/src/scripts/templates.test.js
index 40f840d..e0bdee0 100644
--- a/src/scripts/templates.test.js
+++ b/src/scripts/templates.test.js
@@ -623,7 +623,7 @@ describe('templates', () => {
       beforeEach(() => {
         data = {
           ...data,
-          selected: true,
+          active: true,
         };
       });