May 3, 2024 · May 2, 2024 · May 2, 2024 · May 2, 2024 · May 2, 2024 · May 2, 2024
diff --git a/site/src/hooks/useEmbeddedMetadata.test.ts b/site/src/hooks/useEmbeddedMetadata.test.ts
 /**
 * Qualities I want to test:
 * 1. Logic is able to detect when specific types of metadata are available
 * 2. Logic detects when metadata just doesn't exist
 * 2. Lets external systems subscribe to React changes
 * 3. Hook lets external systems know when metadata is deleted
 * 4. Metadata is treated as an immutable value when anything is deleted
 *
 * Setup helpers I'll need
 * 1. A way to populate the DOM with fake metadata nodes
 */
 import { act, renderHook } from "@testing-library/react";
 import type { Region } from "api/typesGenerated";
 import type { Region, User } from "api/typesGenerated";
 import {
  MockAppearanceConfig,
  MockBuildInfo,
    // itself
    act(() => manager.clearMetadataByKey(tag1));
    expect(reactResult.current.metadata).toEqual(expectedUpdate1);
    expect(nonReactSubscriber).toBeCalledWith(
      expect.objectContaining(expectedUpdate1),
    );
    expect(nonReactSubscriber).toBeCalledWith(expectedUpdate1);

    nonReactSubscriber.mockClear();
    const expectedUpdate2: RuntimeHtmlMetadata = {
    // through the React hooks
    act(() => reactResult.current.clearMetadataByKey("appearance"));
    expect(reactResult.current.metadata).toEqual(expectedUpdate2);
    expect(nonReactSubscriber).toBeCalledWith(
      expect.objectContaining(expectedUpdate2),
    );
    expect(nonReactSubscriber).toBeCalledWith(expectedUpdate2);

    cleanupTags();
  });

  // Need to guarantee this, or else we could have a good number of bugs in the
  // React UI
  it("Always treats metadata as immutable values during all deletions", () => {
    const key = "hamster";
    const tagToDelete = "user";
    const initialResult = result.current.metadata;
    act(() => result.current.clearMetadataByKey(tagToDelete));
    const newResult = result.current.metadata;

    // Need to use toBe, not toEqual here
    expect(initialResult).not.toBe(newResult);

    // Mutate the initial result, and make sure the change doesn't propagate to
    // the updated result
    const mutableUser = initialResult.user as {
      available: boolean;
      value: User | undefined;
    };

    mutableUser.available = false;
    mutableUser.value = undefined;
    expect(mutableUser).toEqual(newResult.user);
    expect(mutableUser).not.toBe(newResult.user);

    cleanupTags();
  });
 });
diff --git a/site/src/hooks/useEmbeddedMetadata.ts b/site/src/hooks/useEmbeddedMetadata.ts
 * so they will never exist when using a JavaScript runtime for the backend
 *
 * If you want to add new metadata in a type-safe way, add it to this type.
 * Each key should the name of the "property" attribute that will be used on the
 * HTML elements themselves (current selector is meta[property=${key}]), and the
 * Each key shouldbethe name of the "property" attribute that will be used on
 *theHTMLmetaelements themselves (e.g., meta[property=${key}]), and the
 * values should be the data you get back from parsing those element's content
 * attributes
 */
 type AvailableMetadata = Readonly<{
  user: User;
Original file line number	Diff line number	Diff line change
		@@ -1,16 +1,5 @@
		/**
		* Qualities I want to test:
		* 1. Logic is able to detect when specific types of metadata are available
		* 2. Logic detects when metadata just doesn't exist
		* 2. Lets external systems subscribe to React changes
		* 3. Hook lets external systems know when metadata is deleted
		* 4. Metadata is treated as an immutable value when anything is deleted
		*
		* Setup helpers I'll need
		* 1. A way to populate the DOM with fake metadata nodes
		*/
		import { act, renderHook } from "@testing-library/react";
		import type { Region } from "api/typesGenerated";
		import type { Region, User } from "api/typesGenerated";
		import {
		MockAppearanceConfig,
		MockBuildInfo,
Expand DownExpand Up		@@ -192,9 +181,7 @@ describe(useEmbeddedMetadata.name, () => {
		// itself
		act(() => manager.clearMetadataByKey(tag1));
		expect(reactResult.current.metadata).toEqual(expectedUpdate1);
		expect(nonReactSubscriber).toBeCalledWith(
		expect.objectContaining(expectedUpdate1),
		);
		expect(nonReactSubscriber).toBeCalledWith(expectedUpdate1);

		nonReactSubscriber.mockClear();
		const expectedUpdate2: RuntimeHtmlMetadata = {
Expand All		@@ -209,13 +196,13 @@ describe(useEmbeddedMetadata.name, () => {
		// through the React hooks
		act(() => reactResult.current.clearMetadataByKey("appearance"));
		expect(reactResult.current.metadata).toEqual(expectedUpdate2);
		expect(nonReactSubscriber).toBeCalledWith(
		expect.objectContaining(expectedUpdate2),
		);
		expect(nonReactSubscriber).toBeCalledWith(expectedUpdate2);

		cleanupTags();
		});

		// Need to guarantee this, or else we could have a good number of bugs in the
		// React UI
		it("Always treats metadata as immutable values during all deletions", () => {
		const key = "hamster";
		const tagToDelete = "user";
Expand All		@@ -226,9 +213,20 @@ describe(useEmbeddedMetadata.name, () => {
		const initialResult = result.current.metadata;
		act(() => result.current.clearMetadataByKey(tagToDelete));
		const newResult = result.current.metadata;

		// Need to use toBe, not toEqual here
		expect(initialResult).not.toBe(newResult);

		// Mutate the initial result, and make sure the change doesn't propagate to
		// the updated result
		const mutableUser = initialResult.user as {
		available: boolean;
		value: User \| undefined;
		};

		mutableUser.available = false;
		mutableUser.value = undefined;
		expect(mutableUser).toEqual(newResult.user);
		expect(mutableUser).not.toBe(newResult.user);

		cleanupTags();
		});
		});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,9 +16,10 @@ export const DEFAULT_METADATA_KEY = "property";
		* so they will never exist when using a JavaScript runtime for the backend
		*
		* If you want to add new metadata in a type-safe way, add it to this type.
		* Each key should the name of the "property" attribute that will be used on the
		* HTML elements themselves (current selector is meta[property=${key}]), and the
		* Each key shouldbethe name of the "property" attribute that will be used on
		*theHTMLmetaelements themselves (e.g., meta[property=${key}]), and the
		* values should be the data you get back from parsing those element's content
		* attributes
		*/
		type AvailableMetadata = Readonly<{
		user: User;
Expand Down