wip: commit progress on useClipboard test

Parkreiner · Parkreiner · commit ba0dad811a08 · 2024-02-26T01:15:53.000Z
diff --git a/site/src/hooks/useClipboard.test.ts b/site/src/hooks/useClipboard.test.ts
@@ -4,10 +4,10 @@ import { act, renderHook } from "@testing-library/react";
 /*
   Normally, you could call userEvent.setup to enable clipboard mocking, but
   userEvent doesn't expose a teardown function. It also modifies the global
-  clipboard, so enabling just one userEvent session will make a mock clipboard
-  exist for all other tests, even though you didn't tell them to set up a
-  session. The mock also assumes that the clipboard API will always be
-  available, which is not true on HTTP-only connections
+  scope for the whole test file, so enabling just one userEvent session will
+  make a mock clipboard exist for all other tests, even though you didn't tell
+  them to set up a session. The mock also assumes that the clipboard API will
+  always be available, which is not true on HTTP-only connections
 
   Since these tests need to split hairs and differentiate between HTTP and HTTPS
   connections, setting up a single userEvent is disastrous. It will make all the
@@ -16,7 +16,9 @@ import { act, renderHook } from "@testing-library/react";
 */
 type MockClipboard = Readonly<
   Clipboard & {
-    resetText: () => void;
+    getMockText: () => string;
+    setMockText: (newText: string) => void;
+    resetMockText: () => void;
     setIsSecureContext: (newContext: boolean) => void;
   }
 >;
@@ -42,7 +44,12 @@ function makeMockClipboard(): MockClipboard {
 
       mockClipboardValue = newText;
     },
-    resetText: () => {
+
+    getMockText: () => mockClipboardValue,
+    setMockText: (newText) => {
+      mockClipboardValue = newText;
+    },
+    resetMockText: () => {
       mockClipboardValue = "";
     },
     setIsSecureContext: (newContext) => {
@@ -60,18 +67,34 @@ function makeMockClipboard(): MockClipboard {
 const mockClipboard = makeMockClipboard();
 
 beforeAll(() => {
+  jest.useFakeTimers();
+
   const originalNavigator = window.navigator;
   jest.spyOn(window, "navigator", "get").mockImplementation(() => ({
     ...originalNavigator,
     clipboard: mockClipboard,
   }));
 
-  jest.spyOn(document, "hasFocus").mockImplementation(() => true);
-  jest.useFakeTimers();
+  // Not the biggest fan of exposing implementation details like this, but
+  // making any kind of mock for execCommand is really gnarly in general
+  global.document.execCommand = jest.fn(() => {
+    const dummyInput = document.querySelector("input[data-testid=dummy]");
+    const inputIsFocused =
+      dummyInput instanceof HTMLInputElement &&
+      document.activeElement === dummyInput;
+
+    let copySuccessful = false;
+    if (inputIsFocused) {
+      mockClipboard.setMockText(dummyInput.value);
+      copySuccessful = true;
+    }
+
+    return copySuccessful;
+  });
 });
 
 afterEach(() => {
-  mockClipboard.resetText();
+  mockClipboard.resetMockText();
 });
 
 afterAll(() => {
@@ -87,17 +110,15 @@ function renderUseClipboard(textToCopy: string) {
   );
 }
 
-type UseClipboardTestResult = ReturnType<typeof renderUseClipboard>["result"];
-
 async function assertClipboardTextUpdate(
-  result: UseClipboardTestResult,
+  result: ReturnType<typeof renderUseClipboard>["result"],
   textToCheck: string,
 ): Promise<void> {
   await act(() => result.current.copyToClipboard());
   expect(result.current.showCopiedSuccess).toBe(true);
 
-  const clipboardText = await window.navigator.clipboard.readText();
-  expect(textToCheck).toEqual(clipboardText);
+  const clipboardText = mockClipboard.getMockText();
+  expect(clipboardText).toEqual(textToCheck);
 }
 
 function scheduleTests(isHttps: boolean) {
@@ -127,7 +148,7 @@ describe(useClipboard.name, () => {
     scheduleTests(false);
   });
 
-  describe("HTTPS connections", () => {
-    scheduleTests(true);
-  });
+  // describe("HTTPS connections", () => {
+  //   scheduleTests(true);
+  // });
 });
