#7756: add playwright test for Zapier modal (#8633)

end-to-end-tests/tests/extensionConsole/zapierModal.spec.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { test, expect } from "../../fixtures/testBase";
+import { LocalIntegrationsPage } from "../../pageObjects/extensionConsole/localIntegrationsPage";
+// @ts-expect-error -- https://youtrack.jetbrains.com/issue/AQUA-711/Provide-a-run-configuration-for-Playwright-tests-in-specs-with-fixture-imports-only
+import { test as base } from "@playwright/test";
+
+test.describe("Zapier Integration Modal", () => {
+  test("can copy Zapier key and close modal", async ({ page, extensionId }) => {
+    const localIntegrationsPage = new LocalIntegrationsPage(page, extensionId);
+    await localIntegrationsPage.goto();
+
+    await page.getByRole("button", { name: "View Key" }).click();
+    await page.getByRole("button", { name: "Copy" }).click();
+    await page.getByRole("button", { name: "Close" }).click();
+
+    // Modal should close when clicked
+    await expect(page.getByRole("button", { name: "Copy" })).toBeHidden();
+  });
+});

src/extensionConsole/pages/integrations/ZapierIntegrationModal.tsx

@@ -55,7 +55,11 @@ const ZapierIntegrationModal: React.FunctionComponent<OwnProps> = ({
           <InputGroup>
             <Form.Control type="text" readOnly defaultValue={data?.api_key} />
             <InputGroup.Append>
-              <Button variant="info" onClick={handleCopy}>
+              <Button
+                variant="info"
+                onClick={handleCopy}
+                aria-label="Copy PixieBrix Zapier key to clipboard"
+              >
                 {/* eslint-disable-next-line react/jsx-max-depth -- Not worth extracting */}
                 <FontAwesomeIcon icon={faCopy} />
               </Button>