Add tests.

components/Shared/IIIF/Share.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@/test-utils";
+
+import IIIFShare from "@/components/Shared/IIIF/Share";
+import React from "react";
+import exp from "constants";
+
+describe("IIIFShare", () => {
+  const uri =
+    "https://iiif.io/api/cookbook/recipe/0001-mvm-image/manifest.json";
+
+  it("renders a dropdown with IIIF viewers", async () => {
+    render(<IIIFShare uri={uri} />);
+
+    // Verify that initial elements are present
+    expect(screen.getByTestId("iiif-share")).toBeInTheDocument();
+
+    const trigger = screen.getByTestId("iiif-share-trigger");
+    expect(trigger).toHaveTextContent("View as IIIF");
+  });
+
+  it("renders dropdown content with expected items", async () => {
+    render(<IIIFShare uri={uri} dropdownMenuProps={{ open: true }} />);
+
+    const content = screen.getByTestId("iiif-share-content");
+    expect(screen.getByText("View in...")).toBeInTheDocument();
+
+    const links = Array.from(content.querySelectorAll("a"));
+    const expectedLinks = {
+      "Clover IIIF":
+        "https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=https%3A%2F%2Fiiif.io%2Fapi%2Fcookbook%2Frecipe%2F0001-mvm-image%2Fmanifest.json",
+      Mirador:
+        "https://projectmirador.org/embed?iiif-content=https%3A%2F%2Fiiif.io%2Fapi%2Fcookbook%2Frecipe%2F0001-mvm-image%2Fmanifest.json",
+      Theseus:
+        "https://theseusviewer.org/?iiif-content=https%3A%2F%2Fiiif.io%2Fapi%2Fcookbook%2Frecipe%2F0001-mvm-image%2Fmanifest.json",
+      "View Raw JSON": uri,
+      "What is IIIF?": "https://iiif.io/get-started/why-iiif/",
+    };
+
+    // verify that the links have the expected hrefs
+    expect(links.length).toEqual(Object.keys(expectedLinks).length);
+    links.forEach((link) => {
+      expect(link).toBeInTheDocument();
+      expect(link).toBeInstanceOf(HTMLAnchorElement);
+      expect(link).toHaveAttribute("target", "_blank");
+      const key = link.textContent as keyof typeof expectedLinks;
+      const expectedHref = expectedLinks[key];
+      if (expectedHref) {
+        expect(link).toHaveAttribute("href", expectedHref);
+      }
+    });
+
+    // verify that the copy button is present
+    const copyText = screen.getByText("Copy IIIF JSON");
+    expect(copyText).toBeInTheDocument();
+    expect(copyText).toBeInstanceOf(HTMLButtonElement);
+  });
+});

components/Shared/IIIF/Share.tsx

@@ -9,11 +9,17 @@ import Icon from "../Icon";
 import Link from "next/link";
 import { styled } from "@/stitches.config";
 
-const IIIFShare = ({ uri }: { uri: string }) => {
+const IIIFShare = ({
+  uri,
+  dropdownMenuProps,
+}: {
+  uri: string;
+  dropdownMenuProps?: Dropdown.DropdownMenuProps;
+}) => {
   return (
-    <StyledIIIFShare>
-      <Dropdown.Root>
-        <Dropdown.Trigger>
+    <StyledIIIFShare data-iiif-uri={uri} data-testid="iiif-share">
+      <Dropdown.Root {...dropdownMenuProps}>
+        <Dropdown.Trigger data-testid="iiif-share-trigger">
           <Icon>
             <IIIFLogo />
           </Icon>
@@ -23,7 +29,7 @@ const IIIFShare = ({ uri }: { uri: string }) => {
           </Icon>
         </Dropdown.Trigger>
         <StyledIIIFShareContent
-          data-id="iiif-share-content"
+          data-testid="iiif-share-content"
           side="bottom"
           sideOffset={3}
           collisionPadding={19}

components/Work/TopInfo.styled.ts

@@ -83,9 +83,11 @@ const TopInfoHeaderContent = styled("div", {
     display: "flex",
     alignItems: "flex-start",
     justifyContent: "flex-end",
+    width: "38.2%",
 
     "@sm": {
       justifyContent: "center",
+      width: "100%",
     },
   },
 });

lib/dc-api.test.ts

@@ -8,7 +8,11 @@ describe("iiifSearchUri", () => {
     const uri = new URL(iiifSearchUri(query));
     const params = new URLSearchParams(uri.search);
 
-    expect(uri.origin).toEqual(DC_API_SEARCH_URL);
+    // check that the URI has the expected origin and path
+    expect(DC_API_SEARCH_URL).toContain(uri.origin);
+    expect(DC_API_SEARCH_URL).toContain(uri.pathname);
+
+    // check that the query string has the expected params
     expect(params.get("query")).toEqual("Joan Baez");
     expect(params.get("as")).toEqual("iiif");
   });
@@ -18,12 +22,13 @@ describe("iiifSearchUri", () => {
     const uri = new URL(iiifSearchUri(query, 100));
     const params = new URLSearchParams(uri.search);
 
+    // check that the size param is set to 100
     expect(params.get("query")).toEqual("John Fahey");
     expect(params.get("as")).toEqual("iiif");
     expect(params.get("size")).toEqual("100");
   });
 
-  it("returns the expected uri with a custom size", () => {
+  it("returns the expected uri with appended facets as params", () => {
     const query = {
       q: "Muddy Waters",
       workType: "Image",
@@ -32,6 +37,7 @@ describe("iiifSearchUri", () => {
     const uri = new URL(iiifSearchUri(query));
     const params = new URLSearchParams(uri.search);
 
+    // check that the facets are appended as params
     expect(params.get("query")).toEqual("Muddy Waters");
     expect(params.get("as")).toEqual("iiif");
     expect(params.get("workType")).toEqual("Image");