Rewrite e2e paste to avoid javascript APIs

Choices-js · Aug 28, 2024 · c014b7a · c014b7a
1 parent a93c5b8
commit c014b7a
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 10 deletions.
diff --git a/test-e2e/test-suit.ts b/test-e2e/test-suit.ts
@@ -200,12 +200,23 @@ export class TestSuit {
 
   async pasteText(text: string, _locator?: Locator): Promise<void> {
     const locator = _locator || this.input;
-    await locator.focus();
-    await this.advanceClock();
+
+    await this.page.evaluate(() => {
+      if (!document.querySelector('textarea#pasteTarget')) {
+        document.body.insertAdjacentHTML('afterbegin', "<textarea id='pasteTarget'></textarea>");
+      }
+    });
+
+    const target = this.page.locator('textarea#pasteTarget');
+    await target.fill(''); // empty any value
+    await target.fill(text);
 
     await this.crossProcessLock(async () => {
-      await this.page.evaluate(`navigator.clipboard.writeText('${text}')`);
-      await this.advanceClock();
+      await target.selectText(); // Focus & Ctrl+a
+      await this.ctrlC(target);
+
+      await this.selectByClick();
+
       await this.ctrlV(locator);
     });
 

diff --git a/test-e2e/tests/select-multiple.spec.ts b/test-e2e/tests/select-multiple.spec.ts
@@ -186,7 +186,7 @@ describe(`Choices - select multiple`, () => {
         describe('on paste', () => {
           // playwright lacks clipboard isolation, so use serial mode to try to work around it.
           // https://github.com/microsoft/playwright/issues/13097
-          describe.configure({ mode: 'serial' });
+          describe.configure({ mode: 'serial', timeout: 2000 });
 
           describe('searching by label', () => {
             test('displays choices filtered by inputted value', async ({ page, bundle }) => {
@@ -681,25 +681,44 @@ describe(`Choices - select multiple`, () => {
             const choice = suite.selectableChoices.first();
             await expect(choice).toHaveText(city);
           });
+
+          test(`filters choices - ${city}`, async ({ page, bundle }) => {
+            const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+            await suite.startWithClick();
+            await suite.typeText(city);
+            await suite.expectVisibleDropdown();
+
+            const choice = suite.selectableChoices.first();
+            await expect(choice).toHaveText(city);
+          });
         });
       });
 
       describe('on paste', () => {
         // playwright lacks clipboard isolation, so use serial mode to try to work around it.
         // https://github.com/microsoft/playwright/issues/13097
-        describe.configure({ mode: 'serial' });
+        describe.configure({ mode: 'serial', timeout: 30000 });
 
         cities.forEach(({ country, city }) => {
           test(`filters choices - ${country} = ${city}`, async ({ page, bundle }) => {
             const suite = new SelectTestSuit(page, bundle, testUrl, testId);
             await suite.startWithClick();
-            await suite.expectVisibleDropdown();
 
             await suite.pasteText(country);
 
             const choice = suite.selectableChoices.first();
             await expect(choice).toHaveText(city);
           });
+
+          test(`filters choices - ${city}`, async ({ page, bundle }) => {
+            const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+            await suite.startWithClick();
+
+            await suite.pasteText(city);
+
+            const choice = suite.selectableChoices.first();
+            await expect(choice).toHaveText(city);
+          });
         });
       });
     });

diff --git a/test-e2e/tests/select-one.spec.ts b/test-e2e/tests/select-one.spec.ts
@@ -125,7 +125,7 @@ describe(`Choices - select one`, () => {
         describe('on paste', () => {
           // playwright lacks clipboard isolation, so use serial mode to try to work around it.
           // https://github.com/microsoft/playwright/issues/13097
-          describe.configure({ mode: 'serial' });
+          describe.configure({ mode: 'serial', timeout: 30000 });
 
           describe('searching by label', () => {
             test('displays choices filtered by inputted value', async ({ page, bundle }) => {
@@ -556,25 +556,44 @@ describe(`Choices - select one`, () => {
             const choice = suite.selectableChoices.first();
             await expect(choice).toHaveText(city);
           });
+
+          test(`filters choices - ${city}`, async ({ page, bundle }) => {
+            const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+            await suite.startWithClick();
+            await suite.typeText(city);
+            await suite.expectVisibleDropdown();
+
+            const choice = suite.selectableChoices.first();
+            await expect(choice).toHaveText(city);
+          });
         });
       });
 
       describe('on paste', () => {
         // playwright lacks clipboard isolation, so use serial mode to try to work around it.
         // https://github.com/microsoft/playwright/issues/13097
-        describe.configure({ mode: 'serial' });
+        describe.configure({ mode: 'serial', timeout: 30000 });
 
         cities.forEach(({ country, city }) => {
           test(`filters choices - ${country} = ${city}`, async ({ page, bundle }) => {
             const suite = new SelectTestSuit(page, bundle, testUrl, testId);
             await suite.startWithClick();
-            await suite.expectVisibleDropdown();
 
             await suite.pasteText(country);
 
             const choice = suite.selectableChoices.first();
             await expect(choice).toHaveText(city);
           });
+
+          test(`filters choices - ${city}`, async ({ page, bundle }) => {
+            const suite = new SelectTestSuit(page, bundle, testUrl, testId);
+            await suite.startWithClick();
+
+            await suite.pasteText(city);
+
+            const choice = suite.selectableChoices.first();
+            await expect(choice).toHaveText(city);
+          });
         });
       });
     });