Additional e2e tests for copy & paste support

Choices-js · Aug 29, 2024 · 336bbd3 · 336bbd3
1 parent 345e595
commit 336bbd3
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 48 deletions.
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -44,7 +44,13 @@ const config: PlaywrightTestConfig = {
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        contextOptions: {
+          // chromium-specific permissions
+          permissions: ['clipboard-read', 'clipboard-write'],
+        },
+      },
     },
     {
       name: 'firefox',

diff --git a/test-e2e/test-suit.ts b/test-e2e/test-suit.ts
@@ -97,36 +97,40 @@ export class TestSuit {
     await this.advanceClock();
   }
 
-  async ctrlA(): Promise<void> {
-    await this.input.focus();
+  async keyPress(key: string, _locator?: Locator): Promise<void> {
+    const locator = _locator || this.input;
+    await locator.focus();
     await this.advanceClock();
-
-    await this.input.press('ControlOrMeta+a');
+    await locator.press(key);
     await this.advanceClock();
   }
 
-  async enterKey(): Promise<void> {
-    await this.input.focus();
-    await this.advanceClock();
+  ctrlA(locator?: Locator): Promise<void> {
+    return this.keyPress('ControlOrMeta+KeyA', locator);
+  }
 
-    await this.input.press('Enter');
-    await this.advanceClock();
+  ctrlX(locator?: Locator): Promise<void> {
+    return this.keyPress('ControlOrMeta+KeyX', locator);
   }
 
-  async escapeKey(): Promise<void> {
-    await this.input.focus();
-    await this.advanceClock();
+  ctrlC(locator?: Locator): Promise<void> {
+    return this.keyPress('ControlOrMeta+KeyC', locator);
+  }
 
-    await this.input.press('Escape');
-    await this.advanceClock();
+  ctrlV(locator?: Locator): Promise<void> {
+    return this.keyPress('ControlOrMeta+KeyV', locator);
   }
 
-  async backspaceKey(): Promise<void> {
-    await this.input.focus();
-    await this.advanceClock();
+  enterKey(locator?: Locator): Promise<void> {
+    return this.keyPress('Enter', locator);
+  }
 
-    await this.input.press('Backspace');
-    await this.advanceClock();
+  escapeKey(locator?: Locator): Promise<void> {
+    return this.keyPress('Escape', locator);
+  }
+
+  backspaceKey(locator?: Locator): Promise<void> {
+    return this.keyPress('Backspace', locator);
   }
 
   async expectVisibleDropdown(): Promise<void> {

diff --git a/test-e2e/tests/select-multiple.spec.ts b/test-e2e/tests/select-multiple.spec.ts
@@ -614,21 +614,22 @@ describe(`Choices - select multiple`, () => {
 
     describe('custom properties via config', () => {
       const testId = 'custom-properties';
+      const cities = [
+        {
+          country: 'Germany',
+          city: 'Berlin',
+        },
+        {
+          country: 'United Kingdom',
+          city: 'London',
+        },
+        {
+          country: 'Portugal',
+          city: 'Lisbon',
+        },
+      ];
       describe('on input', () => {
-        [
-          {
-            country: 'Germany',
-            city: 'Berlin',
-          },
-          {
-            country: 'United Kingdom',
-            city: 'London',
-          },
-          {
-            country: 'Portugal',
-            city: 'Lisbon',
-          },
-        ].forEach(({ country, city }) => {
+        cities.forEach(({ country, city }) => {
           test(`filters choices - ${country} = ${city}`, async ({ page, bundle }) => {
             const suite = new SelectTestSuit(page, bundle, testUrl, testId);
             await suite.startWithClick();
@@ -640,6 +641,26 @@ 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' });
+
+        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 page.evaluate(`navigator.clipboard.writeText('${country}')`);
+            await suite.ctrlV();
+
+            const choice = suite.selectableChoices.first();
+            await expect(choice).toHaveText(city);
+          });
+        });
+      });
     });
 
     describe('custom properties via html', () => {

diff --git a/test-e2e/tests/select-one.spec.ts b/test-e2e/tests/select-one.spec.ts
@@ -489,21 +489,22 @@ describe(`Choices - select one`, () => {
 
     describe('custom properties via config', () => {
       const testId = 'custom-properties';
+      const cities = [
+        {
+          country: 'Germany',
+          city: 'Berlin',
+        },
+        {
+          country: 'United Kingdom',
+          city: 'London',
+        },
+        {
+          country: 'Portugal',
+          city: 'Lisbon',
+        },
+      ];
       describe('on input', () => {
-        [
-          {
-            country: 'Germany',
-            city: 'Berlin',
-          },
-          {
-            country: 'United Kingdom',
-            city: 'London',
-          },
-          {
-            country: 'Portugal',
-            city: 'Lisbon',
-          },
-        ].forEach(({ country, city }) => {
+        cities.forEach(({ country, city }) => {
           test(`filters choices - ${country} = ${city}`, async ({ page, bundle }) => {
             const suite = new SelectTestSuit(page, bundle, testUrl, testId);
             await suite.startWithClick();
@@ -515,6 +516,26 @@ 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' });
+
+        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 page.evaluate(`navigator.clipboard.writeText('${country}')`);
+            await suite.ctrlV();
+
+            const choice = suite.selectableChoices.first();
+            await expect(choice).toHaveText(city);
+          });
+        });
+      });
     });
 
     describe('custom properties via html', () => {