Tests for no choices besides the current selected

Choices-js · Aug 30, 2024 · b402a00 · b402a00
1 parent 73b9c25
commit b402a00
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 1 deletion.
diff --git a/public/test/select-multiple/index.html b/public/test/select-multiple/index.html
@@ -164,7 +164,7 @@ <h2>Select multiple inputs</h2>
 
         <div data-test-hook="no-choices">
           <label for="no-choices">No choices</label>
-          <select class="form-control" name="no-choices" id="no-choices">
+          <select class="form-control" name="no-choices" id="no-choices" multiple>
           </select>
           <script>
             document.addEventListener('DOMContentLoaded', function() {
@@ -175,6 +175,20 @@ <h2>Select multiple inputs</h2>
           </script>
         </div>
 
+        <div data-test-hook="no-choices2">
+          <label for="no-choices2">No choices (besides selected)</label>
+          <select class="form-control" name="no-choices" id="no-choices2">
+            <option value="Choice 1" selected="selected" multiple>Choice 1</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              new Choices('#no-choices2', {
+                allowHTML: true,
+              });
+            });
+          </script>
+        </div>
+
         <div data-test-hook="disabled-choice">
           <label for="choices-disabled-choice">Disabled choice</label>
           <select

diff --git a/public/test/select-one/index.html b/public/test/select-one/index.html
@@ -145,6 +145,20 @@ <h2>Select one inputs</h2>
           </script>
         </div>
 
+        <div data-test-hook="no-choices2">
+          <label for="no-choices2">No choices (besides selected)</label>
+          <select class="form-control" name="no-choices" id="no-choices2">
+            <option value="Choice 1">Choice 1</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              new Choices('#no-choices2', {
+                allowHTML: true,
+              });
+            });
+          </script>
+        </div>
+
         <div data-test-hook="disabled-choice">
           <label for="choices-disabled-choice">Disabled choice</label>
           <select

diff --git a/test-e2e/tests/select-multiple.spec.ts b/test-e2e/tests/select-multiple.spec.ts
@@ -386,6 +386,17 @@ describe(`Choices - select multiple`, () => {
       });
     });
 
+    describe('No choices (besides selected)', () => {
+      const testId = 'no-choices2';
+      test('shows no choices banner', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+        await suite.startWithClick();
+
+        await expect(suite.selectableChoices).toHaveCount(0);
+        await suite.expectVisibleNoticeHtml('No choices to choose from');
+      });
+    });
+
     describe('disabled choice', () => {
       const testId = 'disabled-choice';
       const firstChoice = 'Choice 1';

diff --git a/test-e2e/tests/select-one.spec.ts b/test-e2e/tests/select-one.spec.ts
@@ -243,6 +243,17 @@ describe(`Choices - select one`, () => {
       });
     });
 
+    describe('No choices (besides selected)', () => {
+      const testId = 'no-choices2';
+      test('shows no choices banner', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+        await suite.startWithClick();
+
+        await expect(suite.selectableChoices).toHaveCount(0);
+        await suite.expectVisibleNoticeHtml('No choices to choose from');
+      });
+    });
+
     describe('disabled choice', () => {
       const testId = 'disabled-choice';
       const firstChoice = 'Choice 1';