coder · Parkreiner · Feb 28, 2024 · Feb 25, 2024 · Feb 25, 2024 · Feb 25, 2024
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -23,7 +23,11 @@ export const CodeExample: FC<CodeExampleProps> = ({
 }) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const triggerButton = (event: KeyboardEvent | MouseEvent) => {
-    if (event.target !== buttonRef.current) {
+    const clickTriggeredOutsideButton =
+      event.target instanceof HTMLElement &&
+      !buttonRef.current?.contains(event.target);
+
+    if (clickTriggeredOutsideButton) {
       buttonRef.current?.click();
     }
   };

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -32,7 +32,9 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       buttonStyles,
       tooltipTitle = Language.tooltipTitle,
     } = props;
-    const { isCopied, copyToClipboard } = useClipboard(text);
+    const { showCopiedSuccess, copyToClipboard } = useClipboard({
+      textToCopy: text,
+    });
 
     return (
       <Tooltip title={tooltipTitle} placement="top">
@@ -45,7 +47,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
             variant="text"
             onClick={copyToClipboard}
           >
-            {isCopied ? (
+            {showCopiedSuccess ? (
               <Check css={styles.copyIcon} />
             ) : (
               <FileCopyIcon css={styles.copyIcon} />

diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
@@ -16,12 +16,14 @@ export const CopyableValue: FC<CopyableValueProps> = ({
   children,
   ...attrs
 }) => {
-  const { isCopied, copyToClipboard } = useClipboard(value);
+  const { showCopiedSuccess, copyToClipboard } = useClipboard({
+    textToCopy: value,
+  });
   const clickableProps = useClickable<HTMLSpanElement>(copyToClipboard);
 
   return (
     <Tooltip
-      title={isCopied ? "Copied!" : "Click to copy"}
+      title={showCopiedSuccess ? "Copied!" : "Click to copy"}
       placement={placement}
       PopperProps={PopperProps}
     >

diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -24,37 +24,37 @@ const variantFromMsgType = (type: MsgType) => {
 };
 
 export const GlobalSnackbar: FC = () => {
-  const [open, setOpen] = useState<boolean>(false);
-  const [notification, setNotification] = useState<NotificationMsg>();
-
+  const [notificationMsg, setNotificationMsg] = useState<NotificationMsg>();
   useCustomEvent<NotificationMsg>(SnackbarEventType, (event) => {
-    setNotification(event.detail);
-    setOpen(true);
+    setNotificationMsg(event.detail);
   });
 
-  if (!notification) {
+  const hasNotification = notificationMsg !== undefined;
+  if (!hasNotification) {
     return null;
   }
 
   return (
     <EnterpriseSnackbar
-      key={notification.msg}
-      open={open}
-      variant={variantFromMsgType(notification.msgType)}
-      onClose={() => setOpen(false)}
-      autoHideDuration={notification.msgType === MsgType.Error ? 22000 : 6000}
+      key={notificationMsg.msg}
+      open={hasNotification}
+      variant={variantFromMsgType(notificationMsg.msgType)}
+      onClose={() => setNotificationMsg(undefined)}
+      autoHideDuration={
+        notificationMsg.msgType === MsgType.Error ? 22000 : 6000
+      }
       anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
       message={
         <div css={{ display: "flex" }}>
-          {notification.msgType === MsgType.Error && (
+          {notificationMsg.msgType === MsgType.Error && (
             <ErrorIcon css={styles.errorIcon} />
           )}
 
           <div css={{ maxWidth: 670 }}>
-            <span css={styles.messageTitle}>{notification.msg}</span>
+            <span css={styles.messageTitle}>{notificationMsg.msg}</span>
 
-            {notification.additionalMsgs &&
-              notification.additionalMsgs.map((msg, index) => (
+            {notificationMsg.additionalMsgs &&
+              notificationMsg.additionalMsgs.map((msg, index) => (
                 <AdditionalMessageDisplay key={index} message={msg} />
               ))}
           </div>

diff --git a/site/src/hooks/useClickableTableRow.test.tsx → site/src/hooks/useClickable.test.tsx b/site/src/hooks/useClickableTableRow.test.tsx → site/src/hooks/useClickable.test.tsx
diff --git a/site/src/hooks/useClipboard-http.test.ts b/site/src/hooks/useClipboard-http.test.ts
@@ -0,0 +1,15 @@
+/**
+ * This test is for all useClipboard functionality, with the browser context
+ * set to insecure (HTTP connections).
+ *
+ * See useClipboard.test-setup.ts for more info on why this file is set up the
+ * way that it is.
+ */
+import { useClipboard } from "./useClipboard";
+import { scheduleClipboardTests } from "./useClipboard.test-setup";
+
+describe(useClipboard.name, () => {
+  describe("HTTP (non-secure) connections", () => {
+    scheduleClipboardTests({ isHttps: false });
+  });
+});
diff --git a/site/src/hooks/useClipboard-https.test.ts b/site/src/hooks/useClipboard-https.test.ts
@@ -0,0 +1,15 @@
+/**
+ * This test is for all useClipboard functionality, with the browser context
+ * set to secure (HTTPS connections).
+ *
+ * See useClipboard.test-setup.ts for more info on why this file is set up the
+ * way that it is.
+ */
+import { useClipboard } from "./useClipboard";
+import { scheduleClipboardTests } from "./useClipboard.test-setup";
+
+describe(useClipboard.name, () => {
+  describe("HTTPS (secure/default) connections", () => {
+    scheduleClipboardTests({ isHttps: true });
+  });
+});
diff --git a/site/src/hooks/useClipboard.test-setup.tsx b/site/src/hooks/useClipboard.test-setup.tsx
@@ -0,0 +1,218 @@
+/**
+ * @file This is a very weird test setup.
+ *
+ * There are two main things that it's fighting against to insure that the
+ * clipboard functionality is working as expected:
+ * 1. userEvent.setup's default global behavior
+ * 2. The fact that we need to reuse the same set of test cases for two separate
+ *    contexts (secure and insecure), each with their own version of global
+ *    state.
+ *
+ * The goal of this file is to provide a shared set of test behavior that can
+ * be imported into two separate test files (one for HTTP, one for HTTPS),
+ * without any risk of global state conflicts.
+ *
+ * ---
+ * For (1), normally you could call userEvent.setup to enable clipboard mocking,
+ * but userEvent doesn't expose a teardown function. It also modifies the global
+ * 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 tests pass, even if they shouldn't. Have to avoid that by creating a
+ * custom clipboard mock.
+ *
+ * ---
+ * For (2), we're fighting against Jest's default behavior, which is to treat
+ * the test file as the main boundary for test environments, with each test case
+ * able to run in parallel. That works if you have one single global state, but
+ * we need two separate versions of the global state, while repeating the exact
+ * same test cases for each one.
+ *
+ * If both tests were to be placed in the same file, Jest would not isolate them
+ * and would let their setup steps interfere with each other. This leads to one
+ * of two things:
+ * 1. One of the global mocks overrides the other, making it so that one
+ *    connection type always fails
+ * 2. The two just happen not to conflict each other, through some convoluted
+ *    order of operations involving closure, but you have no idea why the code
+ *    is working, and it's impossible to debug.
+ */
+import {
+  type UseClipboardInput,
+  type UseClipboardResult,
+  useClipboard,
+} from "./useClipboard";
+import { act, renderHook } from "@testing-library/react";
+import { GlobalSnackbar } from "components/GlobalSnackbar/GlobalSnackbar";
+
+const initialExecCommand = global.document.execCommand;
+beforeAll(() => {
+  jest.useFakeTimers();
+});
+
+afterAll(() => {
+  jest.restoreAllMocks();
+  jest.useRealTimers();
+  global.document.execCommand = initialExecCommand;
+});
+
+type MockClipboardEscapeHatches = Readonly<{
+  getMockText: () => string;
+  setMockText: (newText: string) => void;
+  simulateFailure: boolean;
+  setSimulateFailure: (failureMode: boolean) => void;
+}>;
+
+type MockClipboard = Readonly<Clipboard & MockClipboardEscapeHatches>;
+function makeMockClipboard(isSecureContext: boolean): MockClipboard {
+  let mockClipboardValue = "";
+  let shouldFail = false;
+
+  return {
+    get simulateFailure() {
+      return shouldFail;
+    },
+    setSimulateFailure: (value) => {
+      shouldFail = value;
+    },
+
+    readText: async () => {
+      if (shouldFail) {
+        throw new Error("Clipboard deliberately failed");
+      }
+
+      if (!isSecureContext) {
+        throw new Error(
+          "Trying to read from clipboard outside secure context!",
+        );
+      }
+
+      return mockClipboardValue;
+    },
+    writeText: async (newText) => {
+      if (shouldFail) {
+        throw new Error("Clipboard deliberately failed");
+      }
+
+      if (!isSecureContext) {
+        throw new Error("Trying to write to clipboard outside secure context!");
+      }
+
+      mockClipboardValue = newText;
+    },
+
+    getMockText: () => mockClipboardValue,
+    setMockText: (newText) => {
+      mockClipboardValue = newText;
+    },
+
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+    read: jest.fn(),
+    write: jest.fn(),
+  };
+}
+
+function renderUseClipboard(inputs: UseClipboardInput) {
+  return renderHook<UseClipboardResult, UseClipboardInput>(
+    (props) => useClipboard(props),
+    {
+      initialProps: inputs,
+      wrapper: ({ children }) => (
+        <>
+          <>{children}</>
+          <GlobalSnackbar />
+        </>
+      ),
+    },
+  );
+}
+
+type ScheduleConfig = Readonly<{ isHttps: boolean }>;
+
+export function scheduleClipboardTests({ isHttps }: ScheduleConfig) {
+  const mockClipboardInstance = makeMockClipboard(isHttps);
+
+  const originalNavigator = window.navigator;
+  beforeAll(() => {
+    jest.spyOn(window, "navigator", "get").mockImplementation(() => ({
+      ...originalNavigator,
+      clipboard: mockClipboardInstance,
+    }));
+
+    if (!isHttps) {
+      // 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(() => {
+        if (mockClipboardInstance.simulateFailure) {
+          return false;
+        }
+
+        const dummyInput = document.querySelector("input[data-testid=dummy]");
+        const inputIsFocused =
+          dummyInput instanceof HTMLInputElement &&
+          document.activeElement === dummyInput;
+
+        let copySuccessful = false;
+        if (inputIsFocused) {
+          mockClipboardInstance.setMockText(dummyInput.value);
+          copySuccessful = true;
+        }
+
+        return copySuccessful;
+      });
+    }
+  });
+
+  afterEach(() => {
+    mockClipboardInstance.setMockText("");
+    mockClipboardInstance.setSimulateFailure(false);
+  });
+
+  const assertClipboardTextUpdate = async (
+    result: ReturnType<typeof renderUseClipboard>["result"],
+    textToCheck: string,
+  ): Promise<void> => {
+    await act(() => result.current.copyToClipboard());
+    expect(result.current.showCopiedSuccess).toBe(true);
+
+    const clipboardText = mockClipboardInstance.getMockText();
+    expect(clipboardText).toEqual(textToCheck);
+  };
+
+  /**
+   * Start of test cases
+   */
+  it("Copies the current text to the user's clipboard", async () => {
+    const textToCopy = "dogs";
+    const { result } = renderUseClipboard({ textToCopy });
+    await assertClipboardTextUpdate(result, textToCopy);
+  });
+
+  it("Should indicate to components not to show successful copy after a set period of time", async () => {
+    const textToCopy = "cats";
+    const { result } = renderUseClipboard({ textToCopy });
+    await assertClipboardTextUpdate(result, textToCopy);
+
+    setTimeout(() => {
+      expect(result.current.showCopiedSuccess).toBe(false);
+    }, 10_000);
+
+    await jest.runAllTimersAsync();
+  });
+
+  it("Should notify the user of an error using the provided callback", async () => {
+    const textToCopy = "birds";
+    const onError = jest.fn();
+    const { result } = renderUseClipboard({ textToCopy, onError });
+
+    mockClipboardInstance.setSimulateFailure(true);
+    await act(() => result.current.copyToClipboard());
+    expect(onError).toBeCalled();
+  });
+}