diff --git a/components/Shared/IIIF/Share.test.tsx b/components/Shared/IIIF/Share.test.tsx new file mode 100644 index 00000000..264c48dd --- /dev/null +++ b/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(); + + // 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(); + + 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); + }); +}); diff --git a/components/Shared/IIIF/Share.tsx b/components/Shared/IIIF/Share.tsx index 95315381..e58720cd 100644 --- a/components/Shared/IIIF/Share.tsx +++ b/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 ( - - - + + + @@ -23,7 +29,7 @@ const IIIFShare = ({ uri }: { uri: string }) => { { 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");