test: select-multiple coverage

cypress/integration/select-multiple.spec.ts

@@ -1,6 +1,10 @@
 describe('Choices - select multiple', () => {
   beforeEach(() => {
-    cy.visit('/select-multiple');
+    cy.visit('/select-multiple', {
+      onBeforeLoad(win) {
+        cy.stub(win.console, 'warn').as('consoleWarn');
+      },
+    });
   });
 
   describe('scenarios', () => {
@@ -865,5 +869,78 @@ describe('Choices - select multiple', () => {
           });
       });
     });
+
+    describe('allow html', () => {
+      describe('is undefined', () => {
+        it('logs a deprecation warning', () => {
+          cy.get('@consoleWarn').should(
+            'be.calledOnceWithExactly',
+            'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.',
+          );
+        });
+
+        it('does not show as text when selected', () => {
+          cy.get('[data-test-hook=allowhtml-undefined]')
+            .find('.choices__list--multiple .choices__item')
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Choice 1');
+            });
+        });
+
+        it('does not show html as text in dropdown', () => {
+          cy.get('[data-test-hook=allowhtml-undefined]')
+            .find('.choices__list--dropdown .choices__list')
+            .children()
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Choice 2');
+            });
+        });
+      });
+
+      describe('set to true', () => {
+        it('does not show as text when selected', () => {
+          cy.get('[data-test-hook=allowhtml-true]')
+            .find('.choices__list--multiple .choices__item')
+
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Choice 1');
+            });
+        });
+
+        it('does not show html as text in dropdown', () => {
+          cy.get('[data-test-hook=allowhtml-true]')
+            .find('.choices__list--dropdown .choices__list')
+            .children()
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('Choice 2');
+            });
+        });
+      });
+
+      describe('set to false', () => {
+        it('shows html as text when selected', () => {
+          cy.get('[data-test-hook=allowhtml-false]')
+            .find('.choices__list--multiple .choices__item')
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('<b>Choice 1</b>');
+            });
+        });
+
+        it('shows html as text', () => {
+          cy.get('[data-test-hook=allowhtml-false]')
+            .find('.choices__list--dropdown .choices__list')
+            .children()
+            .first()
+            .should(($choice) => {
+              expect($choice.text().trim()).to.equal('<b>Choice 2</b>');
+            });
+        });
+      });
+    });
   });
 });

public/test/select-multiple/index.html

@@ -345,11 +345,43 @@
             <option value="value2">label2</option>
           </select>
         </div>
+
+        <div data-test-hook="allowhtml-undefined">
+          <label for="choices-allowhtml-undefined">HTML allowed by default</label>
+          <select
+            class="form-control"
+            name="choices-allowhtml-undefined"
+            id="choices-allowhtml-undefined"
+            multiple
+          ></select>
+        </div>
+
+        <div data-test-hook="allowhtml-true">
+          <label for="choices-allowhtml-true">HTML allowed</label>
+          <select
+            class="form-control"
+            name="choices-allowhtml-true"
+            id="choices-allowhtml-true"
+            multiple
+          ></select>
+        </div>
+
+        <div data-test-hook="allowhtml-false">
+          <label for="choices-allowhtml-false">HTML disabled</label>
+          <select
+            class="form-control"
+            name="choices-allowhtml-false"
+            id="choices-allowhtml-false"
+            multiple
+          ></select>
+        </div>
       </div>
     </div>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
-        const choicesBasic = new Choices('#choices-basic');
+        const choicesBasic = new Choices('#choices-basic', {
+          allowHTML: true,
+        });
 
         document
           .querySelector('button.disable')
@@ -364,39 +396,54 @@
           });
 
         new Choices('#choices-remove-button', {
+          allowHTML: true,
           removeItemButton: true,
         });
 
-        new Choices('#choices-disabled-choice');
+        new Choices('#choices-disabled-choice', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-add-items-disabled', {
+          allowHTML: true,
           addItems: false,
         });
 
-        new Choices('#choices-disabled-via-attr');
+        new Choices('#choices-disabled-via-attr', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-selection-limit', {
+          allowHTML: true,
           maxItemCount: 5,
         });
 
         new Choices('#choices-prepend-append', {
+          allowHTML: true,
           prependValue: 'before-',
           appendValue: '-after',
         });
 
         new Choices('#choices-render-choice-limit', {
+          allowHTML: true,
           renderChoiceLimit: 1,
         });
 
         new Choices('#choices-search-floor', {
+          allowHTML: true,
           searchFloor: 5,
         });
 
-        new Choices('#choices-placeholder-via-option-value');
+        new Choices('#choices-placeholder-via-option-value', {
+          allowHTML: true,
+        });
 
-        new Choices('#choices-placeholder-via-option-attr');
+        new Choices('#choices-placeholder-via-option-attr', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-remote-data', {
+          allowHTML: true,
           shouldSort: false,
         }).setChoices(async () => {
           const data = await fetch('/data');
@@ -404,12 +451,16 @@
         });
 
         new Choices('#choices-scrolling-dropdown', {
+          allowHTML: true,
           shouldSort: false,
         });
 
-        new Choices('#choices-groups');
+        new Choices('#choices-groups', {
+          allowHTML: true,
+        });
 
         new Choices('#choices-custom-properties', {
+          allowHTML: true,
           searchFields: ['label', 'value', 'customProperties.country'],
           choices: [
             {
@@ -440,6 +491,7 @@
         });
 
         new Choices('#choices-non-string-values', {
+          allowHTML: true,
           choices: [
             {
               id: 1,
@@ -466,13 +518,83 @@
           ],
         });
 
-        new Choices('#choices-within-form');
+        new Choices('#choices-within-form', {
+          allowHTML: true,
+        });
 
-        new Choices('#choices-set-choice-by-value').setChoiceByValue(
+        new Choices('#choices-set-choice-by-value', {
-          'Choice 2',
+          allowHTML: true,
-        );
+        }).setChoiceByValue('Choice 2');
 
-        new Choices('#choices-search-by-label', { searchFields: ['label'] });
+        new Choices('#choices-search-by-label', {
+          allowHTML: true,
+          searchFields: ['label']
+        });
+
+        new Choices('#choices-allowhtml-undefined', {
+          choices: [
+            {
+              id: 1,
+              label: '<b>Choice 1</b>',
+              value: 'Choice 1',
+              selected: true
+            },
+            {
+              id: 2,
+              label: '<b>Choice 2</b>',
+              value: 'Choice 2',
+            },
+            {
+              id: 3,
+              label: 'Choice 3',
+              value: 'Choice 3',
+            },
+          ],
+        });
+
+        new Choices('#choices-allowhtml-true', {
+          allowHTML: true,
+          choices: [
+            {
+              id: 1,
+              label: '<b>Choice 1</b>',
+              value: 'Choice 1',
+              selected: true
+            },
+            {
+              id: 2,
+              label: '<b>Choice 2</b>',
+              value: 'Choice 2',
+            },
+            {
+              id: 3,
+              label: 'Choice 3',
+              value: 'Choice 3',
+            },
+          ],
+        });
+
+        new Choices('#choices-allowhtml-false', {
+          allowHTML: false,
+          choices: [
+            {
+              id: 1,
+              label: '<b>Choice 1</b>',
+              value: 'Choice 1',
+              selected: true
+            },
+            {
+              id: 2,
+              label: '<b>Choice 2</b>',
+              value: 'Choice 2',
+            },
+            {
+              id: 3,
+              label: 'Choice 3',
+              value: 'Choice 3',
+            },
+          ],
+        });
       });
     </script>
   </body>