Update e2e tests

Choices-js · Aug 25, 2024 · 1f6415a · 1f6415a
1 parent d969bde
commit 1f6415a
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 18 deletions.
diff --git a/public/test/select-multiple/index-performance.html b/public/test/select-multiple/index-performance.html
@@ -55,26 +55,43 @@
   <body>
     <div class="container">
       <div class="section">
-        <h2>Select one inputs</h2>
+        <h2>Select multiple inputs</h2>
         <div data-test-hook="basic">
           <label for="choices-basic">Basic</label>
-          <select class="form-control" name="choices-basic" id="choices-basic" multiple>
+          <button class="disable push-bottom">Disable</button>
+          <button class="enable push-bottom">Enable</button>
+          <select
+            class="form-control"
+            name="choices-basic"
+            id="choices-basic"
+            multiple
+          >
           </select>
           <script>
             document.addEventListener('DOMContentLoaded', function() {
 
               const options = [...new Array(2000)].map((_, index) => ({
                 selected: !!(index % 2),
-                label: `Choice ${index + 1}`,
-                value: `Choice ${index + 1}`,
+                label: `Choice ${index + 1}$`,
+                value: `Choice ${index + 1}$`,
               }));
 
               const choices = new Choices('#choices-basic', {
                 allowHTML: true,
                 shouldSort: false,
-                removeItemButton: true,
-                choices: options
+                choices: options,
               });
+              document
+                .querySelector('button.disable')
+                .addEventListener('click', () => {
+                  choices.disable();
+                });
+
+              document
+                .querySelector('button.enable')
+                .addEventListener('click', () => {
+                  choices.enable();
+                });
             });
           </script>
         </div>

diff --git a/test-e2e/test-suit.ts b/test-e2e/test-suit.ts
@@ -34,6 +34,12 @@ export class TestSuit {
     this.dropdown = this.group.locator('.choices__list.choices__list--dropdown');
   }
 
+  logConsole(): void {
+    this.page.on('console', (msg) => {
+      console.log(msg);
+    });
+  }
+
   async start(textInput?: string): Promise<void> {
     if (this.choicesBundle) {
       await this.page.route('/assets/scripts/choices.js', (route) => route.continue({ url: this.choicesBundle }));

diff --git a/test-e2e/tests/select-multiple-performance.spec.ts b/test-e2e/tests/select-multiple-performance.spec.ts
@@ -7,7 +7,7 @@ const { describe } = test;
 const testUrl = '/test/select-multiple/index-performance.html';
 
 describe(`Choices - select multiple (performance tests)`, () => {
-  test.setTimeout(30000);
+  // test.setTimeout(30000);
 
   describe('scenarios', () => {
     describe('basic', () => {
@@ -38,23 +38,63 @@ describe(`Choices - select multiple (performance tests)`, () => {
       });
 
       describe('selecting choices', () => {
-        const selectedChoiceText = 'Choice 1';
+        const selectedChoiceText = 'Choice 1$';
 
         test('allows selecting choices from dropdown', async ({ page, bundle }) => {
           const suite = new SelectTestSuit(page, bundle, testUrl, testId);
           await suite.startWithClick();
 
           await suite.choices.first().click();
-          await expect(suite.itemList.last()).toHaveText(selectedChoiceText);
+          await expect(suite.items.last()).toHaveText(selectedChoiceText);
         });
 
-        test('does not remove selected choice from dropdown list', async ({ page, bundle }) => {
+        test('remove selected choice from dropdown list', async ({ page, bundle }) => {
           const suite = new SelectTestSuit(page, bundle, testUrl, testId);
           await suite.startWithClick();
 
           await suite.choices.first().click();
-          await expect(suite.choices.first()).toHaveText(selectedChoiceText);
-          await expect(suite.itemList.last()).toHaveText(selectedChoiceText);
+          await expect(suite.choices.first()).not.toHaveText(selectedChoiceText);
+          await expect(suite.items.last()).toHaveText(selectedChoiceText);
+        });
+
+        test('multiple choices', async ({ page, bundle }) => {
+          const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+          await suite.startWithClick();
+
+          await suite.expectedItemCount(1000);
+          await suite.expectChoiceCount(1000);
+          await suite.expectVisibleDropdown();
+
+          await suite.getChoiceWithText('Choice 1$').click();
+          await suite.expectedItemCount(1001);
+          await suite.expectChoiceCount(999);
+          await suite.expectVisibleDropdown();
+
+          await suite.getChoiceWithText('Choice 3$').click();
+          await suite.expectedItemCount(1002);
+          await suite.expectChoiceCount(998);
+          await suite.expectVisibleDropdown();
+        });
+
+        describe('slowly', () => {
+          test.setTimeout(30000);
+          test('all available choices', async ({ page, bundle }) => {
+            const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+            await suite.startWithClick();
+
+            const itemCount = await suite.items.count();
+            const count = await suite.choices.count();
+
+            for (let i = 1; i < count + 1; i++) {
+              await suite.expectVisibleDropdown();
+              await suite.getChoiceWithText(`Choice ${i * 2 - 1}$`).click();
+              await suite.advanceClock();
+              await suite.expectedItemCount(itemCount + i);
+              await expect(suite.selectableChoices).toHaveCount(count - i);
+            }
+
+            await suite.expectVisibleNoticeHtml('No choices to choose from');
+          });
         });
       });
 

diff --git a/test-e2e/tests/select-multiple.spec.ts b/test-e2e/tests/select-multiple.spec.ts
@@ -44,7 +44,7 @@ describe(`Choices - select multiple`, () => {
           await suite.startWithClick();
 
           await suite.choices.first().click();
-          await expect(suite.itemList.last()).toHaveText(selectedChoiceText);
+          await expect(suite.items.last()).toHaveText(selectedChoiceText);
         });
 
         test('remove selected choice from dropdown list', async ({ page, bundle }) => {
@@ -53,10 +53,10 @@ describe(`Choices - select multiple`, () => {
 
           await suite.choices.first().click();
           await expect(suite.choices.first()).not.toHaveText(selectedChoiceText);
-          await expect(suite.itemList.last()).toHaveText(selectedChoiceText);
+          await expect(suite.items.last()).toHaveText(selectedChoiceText);
         });
 
-        test('selecting multiple choices', async ({ page, bundle }) => {
+        test('multiple choices', async ({ page, bundle }) => {
           const suite = new SelectTestSuit(page, bundle, testUrl, testId);
           await suite.startWithClick();
 
@@ -75,7 +75,7 @@ describe(`Choices - select multiple`, () => {
           await suite.expectVisibleDropdown();
         });
 
-        test('selecting all available choices', async ({ page, bundle }) => {
+        test('all available choices', async ({ page, bundle }) => {
           const suite = new SelectTestSuit(page, bundle, testUrl, testId);
           await suite.startWithClick();
 

diff --git a/test-e2e/tests/select-one.spec.ts b/test-e2e/tests/select-one.spec.ts
@@ -44,7 +44,7 @@ describe(`Choices - select one`, () => {
           await suite.startWithClick();
 
           await suite.choices.first().click();
-          await expect(suite.itemList.last()).toHaveText(selectedChoiceText);
+          await expect(suite.items.last()).toHaveText(selectedChoiceText);
         });
 
         test('does not remove selected choice from dropdown list', async ({ page, bundle }) => {
@@ -53,7 +53,7 @@ describe(`Choices - select one`, () => {
 
           await suite.choices.first().click();
           await expect(suite.choices.first()).toHaveText(selectedChoiceText);
-          await expect(suite.itemList.last()).toHaveText(selectedChoiceText);
+          await expect(suite.items.last()).toHaveText(selectedChoiceText);
         });
       });