Mar 8, 2024 · Feb 19, 2024 · Feb 19, 2024 · Feb 19, 2024 · Mar 3, 2024 · Mar 3, 2024
diff --git a/site/src/hooks/index.ts b/site/src/hooks/index.ts
 export * from "./useClickableTableRow";
 export * from "./useClipboard";
 export * from "./usePagination";
 export * from "./useTab";
diff --git a/site/src/hooks/usePaginatedQuery.test.ts b/site/src/hooks/usePaginatedQuery.test.ts
 import { waitFor } from "@testing-library/react";
 import { renderHookWithAuth } from "testHelpers/renderHelpers";
 import { renderHookWithAuth } from "testHelpers/hooks";
 import {
  type PaginatedData,
  type UsePaginatedQueryOptions,
  route?: `/?page=${string}`,
 ) {
  return renderHookWithAuth(({ options }) => usePaginatedQuery(options), {
    route,
    path: "/",
    initialProps: { options },
    routingOptions: {
      route,
      path: "/",
    },
    renderOptions: {
      initialProps: { options },
    },
  });
 }

diff --git a/site/src/hooks/useSearchParamsKey.test.ts b/site/src/hooks/useSearchParamsKey.test.ts
 import { act, waitFor } from "@testing-library/react";
 import { renderHookWithAuth } from "testHelpers/hooks";
 import { useSearchParamsKey } from "./useSearchParamsKey";

 /**
 * Tried to extract the setup logic into one place, but it got surprisingly
 * messy. Went with straightforward approach of calling things individually
 *
 * @todo See if there's a way to test the interaction with the history object
 * (particularly, for replace behavior). It's traditionally very locked off, and
 * React Router gives you no way of interacting with it directly.
 */
 describe(useSearchParamsKey.name, () => {
  describe("Render behavior", () => {
    it("Returns empty string if hook key does not exist in URL, and there is no default value", async () => {
      const { result } = await renderHookWithAuth(
        () => useSearchParamsKey({ key: "blah" }),
        { routingOptions: { route: `/` } },
      );

      expect(result.current.value).toEqual("");
    });

    it("Returns out 'defaultValue' property if defined while hook key does not exist in URL", async () => {
      const defaultValue = "dogs";
      const { result } = await renderHookWithAuth(
        () => useSearchParamsKey({ key: "blah", defaultValue }),
        { routingOptions: { route: `/` } },
      );

      expect(result.current.value).toEqual(defaultValue);
    });

    it("Returns out URL value if key exists in URL (always ignoring default value)", async () => {
      const key = "blah";
      const value = "cats";

      const { result } = await renderHookWithAuth(
        () => useSearchParamsKey({ key, defaultValue: "I don't matter" }),
        { routingOptions: { route: `/?${key}=${value}` } },
      );

      expect(result.current.value).toEqual(value);
    });

    it("Does not have methods change previous values if 'key' argument changes during re-renders", async () => {
      const readonlyKey = "readonlyKey";
      const mutableKey = "mutableKey";
      const initialReadonlyValue = "readonly";
      const initialMutableValue = "mutable";

      const { result, rerender, getLocationSnapshot } =
        await renderHookWithAuth(({ key }) => useSearchParamsKey({ key }), {
          routingOptions: {
            route: `/?${readonlyKey}=${initialReadonlyValue}&${mutableKey}=${initialMutableValue}`,
          },
          renderOptions: { initialProps: { key: readonlyKey } },
        });

      const swapValue = "dogs";
      await rerender({ key: mutableKey });
      act(() => result.current.setValue(swapValue));
      await waitFor(() => expect(result.current.value).toEqual(swapValue));

      const snapshot1 = getLocationSnapshot();
      expect(snapshot1.search.get(readonlyKey)).toEqual(initialReadonlyValue);
      expect(snapshot1.search.get(mutableKey)).toEqual(swapValue);

      act(() => result.current.deleteValue());
      await waitFor(() => expect(result.current.value).toEqual(""));

      const snapshot2 = getLocationSnapshot();
      expect(snapshot2.search.get(readonlyKey)).toEqual(initialReadonlyValue);
      expect(snapshot2.search.get(mutableKey)).toEqual(null);
    });
  });

  describe("setValue method", () => {
    it("Updates state and URL when called with a new value", async () => {
      const key = "blah";
      const initialValue = "cats";

      const { result, getLocationSnapshot } = await renderHookWithAuth(
        () => useSearchParamsKey({ key }),
        { routingOptions: { route: `/?${key}=${initialValue}` } },
      );

      const newValue = "dogs";
      act(() => result.current.setValue(newValue));
      await waitFor(() => expect(result.current.value).toEqual(newValue));

      const { search } = getLocationSnapshot();
      expect(search.get(key)).toEqual(newValue);
    });
  });

  describe("deleteValue method", () => {
    it("Clears value for the given key from the state and URL when called", async () => {
      const key = "blah";
      const initialValue = "cats";

      const { result, getLocationSnapshot } = await renderHookWithAuth(
        () => useSearchParamsKey({ key }),
        { routingOptions: { route: `/?${key}=${initialValue}` } },
      );

      act(() => result.current.deleteValue());
      await waitFor(() => expect(result.current.value).toEqual(""));

      const { search } = getLocationSnapshot();
      expect(search.get(key)).toEqual(null);
    });
  });

  describe("Override behavior", () => {
    it("Will dispatch state changes through custom URLSearchParams value if provided", async () => {
      const key = "love";
      const initialValue = "dogs";
      const customParams = new URLSearchParams({ [key]: initialValue });

      const { result } = await renderHookWithAuth(
        ({ key }) => useSearchParamsKey({ key, searchParams: customParams }),
        {
          routingOptions: { route: `/?=${key}=${initialValue}` },
          renderOptions: { initialProps: { key } },
        },
      );

      const newValue = "all animals";
      act(() => result.current.setValue(newValue));
      await waitFor(() => expect(customParams.get(key)).toEqual(newValue));
    });
  });
 });
diff --git a/site/src/hooks/useSearchParamsKey.ts b/site/src/hooks/useSearchParamsKey.ts
 import { useSearchParams } from "react-router-dom";

 export type UseSearchParamsKeyConfig = Readonly<{
  key: string;
  searchParams?: URLSearchParams;
  defaultValue?: string;
  replace?: boolean;
 }>;

 export type UseSearchParamKeyResult = Readonly<{
  value: string;
  setValue: (newValue: string) => void;
  deleteValue: () => void;
 }>;

 export const useSearchParamsKey = (
  config: UseSearchParamsKeyConfig,
 ): UseSearchParamKeyResult => {
  // Cannot use function update form for setSearchParams, because by default, it
  // will always be linked to innerSearchParams, ignoring the config's params
  const [innerSearchParams, setSearchParams] = useSearchParams();

  const {
    key,
    searchParams = innerSearchParams,
    defaultValue = "",
    replace = true,
  } = config;

  return {
    value: searchParams.get(key) ?? defaultValue,
    setValue: (newValue) => {
      searchParams.set(key, newValue);
      setSearchParams(searchParams, { replace });
    },
    deleteValue: () => {
      searchParams.delete(key);
      setSearchParams(searchParams, { replace });
    },
  };
 };
diff --git a/site/src/hooks/useTab.ts b/site/src/hooks/useTab.ts
diff --git a/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.test.tsx b/site/src/pages/CreateWorkspacePage/useWorkspaceDuplication.test.tsx
 import { waitFor } from "@testing-library/react";
 import {act,waitFor } from "@testing-library/react";
 import type { Workspace } from "api/typesGenerated";
 import * as M from "testHelpers/entities";
 import { renderHookWithAuth } from "testHelpers/renderHelpers";
 import { MockWorkspace } from "testHelpers/entities";
 import {
  type GetLocationSnapshot,
  renderHookWithAuth,
 } from "testHelpers/hooks";
 import * as M from "../../testHelpers/entities";
 import CreateWorkspacePage from "./CreateWorkspacePage";
 import { useWorkspaceDuplication } from "./useWorkspaceDuplication";

 function render(workspace?: Workspace) {
  return renderHookWithAuth(
    ({ workspace }) => {
      return useWorkspaceDuplication(workspace);
    },
    ({ workspace }) => useWorkspaceDuplication(workspace),
    {
      initialProps: { workspace },
      extraRoutes: [
        {
          path: "/templates/:template/workspace",
          element: <CreateWorkspacePage />,
        },
      ],
      renderOptions: { initialProps: { workspace } },
      routingOptions: {
        extraRoutes: [
          {
            path: "/templates/:template/workspace",
            element: <CreateWorkspacePage />,
          },
        ],
      },
    },
  );
 }

 type RenderResult = Awaited<ReturnType<typeof render>>;
 type RenderHookResult = RenderResult["result"];

 async function performNavigation(
  result:RenderResult["result"],
 router: RenderResult["router"],
  result:RenderHookResult,
 getLocationSnapshot: GetLocationSnapshot,
 ) {
  await waitFor(() => expect(result.current.isDuplicationReady).toBe(true));
  result.current.duplicateWorkspace();
 act(() =>result.current.duplicateWorkspace());

  const templateName = MockWorkspace.template_name;
  return waitFor(() => {
    expect(router.state.location.pathname).toEqual(
      `/templates/${M.MockWorkspace.template_name}/workspace`,
    );
    const { pathname } = getLocationSnapshot();
    expect(pathname).toEqual(`/templates/${templateName}/workspace`);
  });
 }

    expect(result.current.isDuplicationReady).toBe(false);

    for (let i = 0; i < 10; i++) {
      rerender({ workspace: undefined });
 awaitrerender({ workspace: undefined });
      expect(result.current.isDuplicationReady).toBe(false);
    }
  });

  it("Will become ready when workspace is provided and build params are successfully fetched", async () => {
    const { result } = await render(M.MockWorkspace);

    const { result } = await render(MockWorkspace);
    expect(result.current.isDuplicationReady).toBe(false);
    await waitFor(() => expect(result.current.isDuplicationReady).toBe(true));
  });

  it("Is able to navigate the user to the workspace creation page", async () => {
    const { result,router } = await render(M.MockWorkspace);
    await performNavigation(result,router);
    const { result,getLocationSnapshot } = await render(MockWorkspace);
    await performNavigation(result,getLocationSnapshot);
  });

  test("Navigating populates the URL search params with the workspace's build params", async () => {
    const { result, router } = await render(M.MockWorkspace);
    await performNavigation(result, router);

    const parsedParams = new URLSearchParams(router.state.location.search);
    const mockBuildParams = [
      M.MockWorkspaceBuildParameter1,
      M.MockWorkspaceBuildParameter2,
      M.MockWorkspaceBuildParameter5,
    ];

    const { result, getLocationSnapshot } = await render(MockWorkspace);
    await performNavigation(result, getLocationSnapshot);

    const { search } = getLocationSnapshot();
    for (const { name, value } of mockBuildParams) {
      const key = `param.${name}`;
      expect(parsedParams.get(key)).toEqual(value);
      expect(search.get(key)).toEqual(value);
    }
  });

  test("Navigating appends other necessary metadata to the search params", async () => {
    const { result, router } = await render(M.MockWorkspace);
    await performNavigation(result, router);

    const parsedParams = new URLSearchParams(router.state.location.search);
    const extraMetadataEntries = [
    const extraMetadataEntries: readonly [string, string][] = [
      ["mode", "duplicate"],
      ["name", `${M.MockWorkspace.name}-copy`],
      ["version", M.MockWorkspace.template_active_version_id],
    ] as const;
      ["name", `${MockWorkspace.name}-copy`],
      ["version", MockWorkspace.template_active_version_id],
    ];

    const { result, getLocationSnapshot } = await render(MockWorkspace);
    await performNavigation(result, getLocationSnapshot);

    const { search } = getLocationSnapshot();
    for (const [key, value] of extraMetadataEntries) {
      expect(parsedParams.get(key)).toBe(value);
      expect(search.get(key)).toBe(value);
    }
  });
 });
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,3 @@ export * from "./useClickable";
		export * from "./useClickableTableRow";
		export * from "./useClipboard";
		export * from "./usePagination";
		export * from "./useTab";
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		import { waitFor } from "@testing-library/react";
		import { renderHookWithAuth } from "testHelpers/renderHelpers";
		import { renderHookWithAuth } from "testHelpers/hooks";
		import {
		type PaginatedData,
		type UsePaginatedQueryOptions,
Expand All		@@ -23,9 +23,13 @@ function render<
		route?: `/?page=${string}`,
		) {
		return renderHookWithAuth(({ options }) => usePaginatedQuery(options), {
		route,
		path: "/",
		initialProps: { options },
		routingOptions: {
		route,
		path: "/",
		},
		renderOptions: {
		initialProps: { options },
		},
		});
		}

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,134 @@
		import { act, waitFor } from "@testing-library/react";
		import { renderHookWithAuth } from "testHelpers/hooks";
		import { useSearchParamsKey } from "./useSearchParamsKey";

		/**
		* Tried to extract the setup logic into one place, but it got surprisingly
		* messy. Went with straightforward approach of calling things individually
		*
		* @todo See if there's a way to test the interaction with the history object
		* (particularly, for replace behavior). It's traditionally very locked off, and
		* React Router gives you no way of interacting with it directly.
		*/
		describe(useSearchParamsKey.name, () => {
		describe("Render behavior", () => {
		it("Returns empty string if hook key does not exist in URL, and there is no default value", async () => {
		const { result } = await renderHookWithAuth(
		() => useSearchParamsKey({ key: "blah" }),
		{ routingOptions: { route: `/` } },
		);

		expect(result.current.value).toEqual("");
		});

		it("Returns out 'defaultValue' property if defined while hook key does not exist in URL", async () => {
		const defaultValue = "dogs";
		const { result } = await renderHookWithAuth(
		() => useSearchParamsKey({ key: "blah", defaultValue }),
		{ routingOptions: { route: `/` } },
		);

		expect(result.current.value).toEqual(defaultValue);
		});

		it("Returns out URL value if key exists in URL (always ignoring default value)", async () => {
		const key = "blah";
		const value = "cats";

		const { result } = await renderHookWithAuth(
		() => useSearchParamsKey({ key, defaultValue: "I don't matter" }),
		{ routingOptions: { route: `/?${key}=${value}` } },
		);

		expect(result.current.value).toEqual(value);
		});

		it("Does not have methods change previous values if 'key' argument changes during re-renders", async () => {
		const readonlyKey = "readonlyKey";
		const mutableKey = "mutableKey";
		const initialReadonlyValue = "readonly";
		const initialMutableValue = "mutable";

		const { result, rerender, getLocationSnapshot } =
		await renderHookWithAuth(({ key }) => useSearchParamsKey({ key }), {
		routingOptions: {
		route: `/?${readonlyKey}=${initialReadonlyValue}&${mutableKey}=${initialMutableValue}`,
		},
		renderOptions: { initialProps: { key: readonlyKey } },
		});

		const swapValue = "dogs";
		await rerender({ key: mutableKey });
		act(() => result.current.setValue(swapValue));
		await waitFor(() => expect(result.current.value).toEqual(swapValue));

		const snapshot1 = getLocationSnapshot();
		expect(snapshot1.search.get(readonlyKey)).toEqual(initialReadonlyValue);
		expect(snapshot1.search.get(mutableKey)).toEqual(swapValue);

		act(() => result.current.deleteValue());
		await waitFor(() => expect(result.current.value).toEqual(""));

		const snapshot2 = getLocationSnapshot();
		expect(snapshot2.search.get(readonlyKey)).toEqual(initialReadonlyValue);
		expect(snapshot2.search.get(mutableKey)).toEqual(null);
		});
		});

		describe("setValue method", () => {
		it("Updates state and URL when called with a new value", async () => {
		const key = "blah";
		const initialValue = "cats";

		const { result, getLocationSnapshot } = await renderHookWithAuth(
		() => useSearchParamsKey({ key }),
		{ routingOptions: { route: `/?${key}=${initialValue}` } },
		);

		const newValue = "dogs";
		act(() => result.current.setValue(newValue));
		await waitFor(() => expect(result.current.value).toEqual(newValue));

		const { search } = getLocationSnapshot();
		expect(search.get(key)).toEqual(newValue);
		});
		});

		describe("deleteValue method", () => {
		it("Clears value for the given key from the state and URL when called", async () => {
		const key = "blah";
		const initialValue = "cats";

		const { result, getLocationSnapshot } = await renderHookWithAuth(
		() => useSearchParamsKey({ key }),
		{ routingOptions: { route: `/?${key}=${initialValue}` } },
		);

		act(() => result.current.deleteValue());
		await waitFor(() => expect(result.current.value).toEqual(""));

		const { search } = getLocationSnapshot();
		expect(search.get(key)).toEqual(null);
		});
		});

		describe("Override behavior", () => {
		it("Will dispatch state changes through custom URLSearchParams value if provided", async () => {
		const key = "love";
		const initialValue = "dogs";
		const customParams = new URLSearchParams({ [key]: initialValue });

		const { result } = await renderHookWithAuth(
		({ key }) => useSearchParamsKey({ key, searchParams: customParams }),
		{
		routingOptions: { route: `/?=${key}=${initialValue}` },
		renderOptions: { initialProps: { key } },
		},
		);

		const newValue = "all animals";
		act(() => result.current.setValue(newValue));
		await waitFor(() => expect(customParams.get(key)).toEqual(newValue));
		});
		});
		});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,41 @@
		import { useSearchParams } from "react-router-dom";

		export type UseSearchParamsKeyConfig = Readonly<{
		key: string;
		searchParams?: URLSearchParams;
		defaultValue?: string;
		replace?: boolean;
		}>;

		export type UseSearchParamKeyResult = Readonly<{
		value: string;
		setValue: (newValue: string) => void;
		deleteValue: () => void;
		}>;

		export const useSearchParamsKey = (
		config: UseSearchParamsKeyConfig,
		): UseSearchParamKeyResult => {
		// Cannot use function update form for setSearchParams, because by default, it
		// will always be linked to innerSearchParams, ignoring the config's params
		const [innerSearchParams, setSearchParams] = useSearchParams();

		const {
		key,
		searchParams = innerSearchParams,
		defaultValue = "",
		replace = true,
		} = config;

		return {
		value: searchParams.get(key) ?? defaultValue,
		setValue: (newValue) => {
		searchParams.set(key, newValue);
		setSearchParams(searchParams, { replace });
		},
		deleteValue: () => {
		searchParams.delete(key);
		setSearchParams(searchParams, { replace });
		},
		};
		};
Original file line number	Diff line number	Diff line change
		@@ -1,40 +1,45 @@
		import { waitFor } from "@testing-library/react";
		import {act,waitFor } from "@testing-library/react";
		import type { Workspace } from "api/typesGenerated";
		import * as M from "testHelpers/entities";
		import { renderHookWithAuth } from "testHelpers/renderHelpers";
		import { MockWorkspace } from "testHelpers/entities";
		import {
		type GetLocationSnapshot,
		renderHookWithAuth,
		} from "testHelpers/hooks";
		import * as M from "../../testHelpers/entities";
		import CreateWorkspacePage from "./CreateWorkspacePage";
		import { useWorkspaceDuplication } from "./useWorkspaceDuplication";

		function render(workspace?: Workspace) {
		return renderHookWithAuth(
		({ workspace }) => {
		return useWorkspaceDuplication(workspace);
		},
		({ workspace }) => useWorkspaceDuplication(workspace),
		{
		initialProps: { workspace },
		extraRoutes: [
		{
		path: "/templates/:template/workspace",
		element: <CreateWorkspacePage />,
		},
		],
		renderOptions: { initialProps: { workspace } },
		routingOptions: {
		extraRoutes: [
		{
		path: "/templates/:template/workspace",
		element: <CreateWorkspacePage />,
		},
		],
		},
		},
		);
		}

		type RenderResult = Awaited<ReturnType<typeof render>>;
		type RenderHookResult = RenderResult["result"];

		async function performNavigation(
		result:RenderResult["result"],
		router: RenderResult["router"],
		result:RenderHookResult,
		getLocationSnapshot: GetLocationSnapshot,
		) {
		await waitFor(() => expect(result.current.isDuplicationReady).toBe(true));
		result.current.duplicateWorkspace();
		act(() =>result.current.duplicateWorkspace());

		const templateName = MockWorkspace.template_name;
		return waitFor(() => {
		expect(router.state.location.pathname).toEqual(
		`/templates/${M.MockWorkspace.template_name}/workspace`,
		);
		const { pathname } = getLocationSnapshot();
		expect(pathname).toEqual(`/templates/${templateName}/workspace`);
		});
		}

Expand All		@@ -44,28 +49,23 @@ describe(`${useWorkspaceDuplication.name}`, () => {
		expect(result.current.isDuplicationReady).toBe(false);

		for (let i = 0; i < 10; i++) {
		rerender({ workspace: undefined });
		awaitrerender({ workspace: undefined });
		expect(result.current.isDuplicationReady).toBe(false);
		}
		});

		it("Will become ready when workspace is provided and build params are successfully fetched", async () => {
		const { result } = await render(M.MockWorkspace);

		const { result } = await render(MockWorkspace);
		expect(result.current.isDuplicationReady).toBe(false);
		await waitFor(() => expect(result.current.isDuplicationReady).toBe(true));
		});

		it("Is able to navigate the user to the workspace creation page", async () => {
		const { result,router } = await render(M.MockWorkspace);
		await performNavigation(result,router);
		const { result,getLocationSnapshot } = await render(MockWorkspace);
		await performNavigation(result,getLocationSnapshot);
		});

		test("Navigating populates the URL search params with the workspace's build params", async () => {
		const { result, router } = await render(M.MockWorkspace);
		await performNavigation(result, router);

		const parsedParams = new URLSearchParams(router.state.location.search);
		const mockBuildParams = [
		M.MockWorkspaceBuildParameter1,
		M.MockWorkspaceBuildParameter2,
Expand All		@@ -74,25 +74,29 @@ describe(`${useWorkspaceDuplication.name}`, () => {
		M.MockWorkspaceBuildParameter5,
		];

		const { result, getLocationSnapshot } = await render(MockWorkspace);
		await performNavigation(result, getLocationSnapshot);

		const { search } = getLocationSnapshot();
		for (const { name, value } of mockBuildParams) {
		const key = `param.${name}`;
		expect(parsedParams.get(key)).toEqual(value);
		expect(search.get(key)).toEqual(value);
		}
		});

		test("Navigating appends other necessary metadata to the search params", async () => {
		const { result, router } = await render(M.MockWorkspace);
		await performNavigation(result, router);

		const parsedParams = new URLSearchParams(router.state.location.search);
		const extraMetadataEntries = [
		const extraMetadataEntries: readonly [string, string][] = [
Copy link Member aslilacMar 6, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. why the switch from`as const`? Copy link MemberAuthor ParkreinerMar 8, 2024• edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I felt like it would surface any accidental errors in a better way, and that it does a better job of communicating intent With the previous code, I could do something like this: constextraMetadataEntries=[["mode","duplicate"],["name",`${MockWorkspace.name}-copy`],["version",MockWorkspace.template_active_version_id],functionobviouslyWrong(){},null,["forgotToAddTheSecondTupleElement"]]asconst; And this would be valid still – the underlying type would get broadened. So while the type mismatch would get caught down the line, redefining the type to be an array of string tuples tells you what types should go in, and is more defensive against typos
		["mode", "duplicate"],
		["name", `${M.MockWorkspace.name}-copy`],
		["version", M.MockWorkspace.template_active_version_id],
		] as const;
		["name", `${MockWorkspace.name}-copy`],
		["version", MockWorkspace.template_active_version_id],
		];

		const { result, getLocationSnapshot } = await render(MockWorkspace);
		await performNavigation(result, getLocationSnapshot);

		const { search } = getLocationSnapshot();
		for (const [key, value] of extraMetadataEntries) {
		expect(parsedParams.get(key)).toBe(value);
		expect(search.get(key)).toBe(value);
		}
		});
		});