Add e2e test for #1278

Author: Xon

public/test/select-multiple/index.html

@@ -1129,6 +1129,33 @@ <h2>Select multiple inputs</h2>
           </script>
         </div>
 
+        <div data-test-hook="set-choices-preserve">
+          <label for="choices-set-choices-preserve">setChoices example</label>
+          <select
+            class="form-control"
+            name="choices-set-choices-preserve"
+            id="choices-set-choices-preserve"
+            multiple
+          >
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2" selected>Choice 2</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              const choices = new Choices('#choices-set-choices-preserve', {});
+              choices.setChoices(
+                [
+                  { value: 'Choice 1', label: 'Choice 1' },
+                  { value: 'Choice 2', label: 'Choice 2' }
+                ],
+                'value',
+                'label',
+                true,
+              );
+            });
+          </script>
+        </div>
+
       </div>
     </div>
   </body>

public/test/select-one/index.html

@@ -1129,6 +1129,32 @@ <h2>Select one inputs</h2>
           </script>
         </div>
 
+        <div data-test-hook="set-choices-preserve">
+          <label for="choices-set-choices-preserve">setChoices example</label>
+          <select
+            class="form-control"
+            name="choices-set-choices-preserve"
+            id="choices-set-choices-preserve"
+          >
+            <option value="Choice 1">Choice 1</option>
+            <option value="Choice 2" selected>Choice 2</option>
+          </select>
+          <script>
+            document.addEventListener('DOMContentLoaded', function() {
+              const choices = new Choices('#choices-set-choices-preserve', {});
+              choices.setChoices(
+                [
+                  { value: 'Choice 1', label: 'Choice 1' },
+                  { value: 'Choice 2', label: 'Choice 2' }
+                ],
+                'value',
+                'label',
+                true,
+              );
+            });
+          </script>
+        </div>
+
       </div>
     </div>
   </body>

test-e2e/tests/select-multiple.spec.ts

@@ -1056,5 +1056,19 @@ describe(`Choices - select multiple`, () => {
         await suite.expectChoiceCount(1);
       });
     });
+
+    describe('setChoices', () => {
+      const testId = 'set-choices-preserve';
+      test('Expected selected to be preserved', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+        await suite.start();
+        await suite.advanceClock();
+
+        await suite.expectHiddenDropdown();
+        await suite.expectedValue('Choice 2');
+        await suite.expectedItemCount(1);
+        await suite.expectChoiceCount(2);
+      });
+    });
   });
 });

test-e2e/tests/select-one.spec.ts

@@ -991,5 +991,18 @@ describe(`Choices - select one`, () => {
         await suite.expectChoiceCount(1);
       });
     });
+
+    describe('setChoices', () => {
+      const testId = 'set-choices-preserve';
+      test('Expected selected to be preserved', async ({ page, bundle }) => {
+        const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+        await suite.start();
+
+        await suite.expectHiddenDropdown();
+        await suite.expectedValue('Choice 2');
+        await suite.expectedItemCount(1);
+        await suite.expectChoiceCount(3);
+      });
+    });
   });
 });