@torpor/ui 0.0.17 → 0.1.1

package/src/utils/setPopoverPosition.ts

@@ -0,0 +1,138 @@
+export default function setPopoverPosition(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	side: "top" | "right" | "bottom" | "left",
+	alignment: "start" | "center" | "end",
+): void {
+	var anchorRect = anchor.getBoundingClientRect();
+	var contentRect = content.getBoundingClientRect();
+
+	content.style.position = "fixed";
+
+	// Check that we there is enough room to show the content on the side requested
+	// Otherwise, if there is enough room on the other side, show it there instead
+	let calculatedSide = side;
+	const canShowOnTop = anchorRect.top - contentRect.height >= 0;
+	const canShowAtRight = anchorRect.right + contentRect.width <= window.innerWidth;
+	const canShowOnBottom = anchorRect.bottom + contentRect.height <= window.innerHeight;
+	const canShowAtLeft = anchorRect.left - contentRect.width >= 0;
+	switch (side) {
+		case "top": {
+			if (!canShowOnTop && canShowOnBottom) {
+				calculatedSide = "bottom";
+			}
+			break;
+		}
+		case "right": {
+			if (!canShowAtRight && canShowAtLeft) {
+				calculatedSide = "left";
+			}
+			break;
+		}
+		case "bottom": {
+			if (!canShowOnBottom && canShowOnTop) {
+				calculatedSide = "top";
+			}
+			break;
+		}
+		case "left": {
+			if (!canShowAtLeft && canShowAtRight) {
+				calculatedSide = "right";
+			}
+			break;
+		}
+		default: {
+			throw new Error(`Invalid MenuPopout side: ${side}`);
+		}
+	}
+
+	switch (calculatedSide) {
+		case "top": {
+			content.style.top = anchorRect.top - contentRect.height + "px";
+			setVerticalAlignment(content, anchorRect, contentRect, alignment);
+			break;
+		}
+		case "right": {
+			content.style.left = anchorRect.right + "px";
+			setHorizontalAlignment(content, anchorRect, contentRect, alignment);
+			break;
+		}
+		case "bottom": {
+			content.style.top = anchorRect.bottom + "px";
+			setVerticalAlignment(content, anchorRect, contentRect, alignment);
+			break;
+		}
+		case "left": {
+			content.style.left = anchorRect.left - contentRect.width + "px";
+			setHorizontalAlignment(content, anchorRect, contentRect, alignment);
+			break;
+		}
+		default: {
+			throw new Error(`Invalid MenuPopout side: ${side}`);
+		}
+	}
+}
+
+function setVerticalAlignment(
+	content: HTMLElement,
+	anchorRect: DOMRect,
+	contentRect: DOMRect,
+	alignment: "start" | "center" | "end",
+) {
+	let left = 0;
+	switch (alignment) {
+		case "start": {
+			left = anchorRect.left;
+			break;
+		}
+		case "center": {
+			left = anchorRect.left + anchorRect.width / 2 - contentRect.width / 2;
+			break;
+		}
+		case "end": {
+			left = anchorRect.right - contentRect.width;
+			break;
+		}
+		default: {
+			throw new Error(`Invalid Popout alignment: ${alignment}`);
+		}
+	}
+
+	// Try to make sure the content is entirely on the screen horizontally
+	left = Math.min(left, window.innerWidth - contentRect.width);
+	left = Math.max(left, 0);
+
+	content.style.left = left + "px";
+}
+
+function setHorizontalAlignment(
+	content: HTMLElement,
+	anchorRect: DOMRect,
+	contentRect: DOMRect,
+	alignment: "start" | "center" | "end",
+) {
+	let top = 0;
+	switch (alignment) {
+		case "start": {
+			top = anchorRect.top;
+			break;
+		}
+		case "center": {
+			top = anchorRect.top + anchorRect.height / 2 - contentRect.height / 2;
+			break;
+		}
+		case "end": {
+			top = anchorRect.bottom - contentRect.height;
+			break;
+		}
+		default: {
+			throw new Error(`Invalid Popout alignment: ${alignment}`);
+		}
+	}
+
+	// Try to make sure the content is entirely on the screen vertically
+	top = Math.min(top, window.innerHeight - contentRect.height);
+	top = Math.max(top, 0);
+
+	content.style.top = top + "px";
+}

package/test/Accordion/accessibility.test.ts

@@ -1,14 +1,11 @@
 import { queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
-import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
 import AccordionAccessibility from "./components/AccordionAccessibility.torp";
 
 describe("Accordion", () => {
 	it("Accessibility", async () => {
-		const user = userEvent.setup();
-
 		const container = document.createElement("div");
 		document.body.appendChild(container);
 		mount(container, AccordionAccessibility, { value: ["1", "3"] });

package/test/Accordion/for-items.test.ts

@@ -7,8 +7,6 @@ import AccordionList from "./components/AccordionList.torp";
 
 describe("Accordion", () => {
 	it("Items in a for loop", async () => {
-		const user = userEvent.setup();
-
 		let $state = $watch({
 			value: "1",
 			items: [
@@ -35,7 +33,7 @@ describe("Accordion", () => {
 		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
 
 		// Clicking header 1 should reveal body 1
-		await user.click(getByText(container, "Item 1"));
+		await userEvent.click(getByText(container, "Item 1"));
 		expect(queryByText(container, "Content 1")).toBeInTheDocument();
 
 		$state.items.push({ id: 3, header: "Item 4", text: "Content 4" });
@@ -47,7 +45,7 @@ describe("Accordion", () => {
 		expect(queryByText(container, "Content 4")).not.toBeInTheDocument();
 
 		// Clicking header 4 should reveal body 4
-		await user.click(getByText(container, "Item 4"));
+		await userEvent.click(getByText(container, "Item 4"));
 		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
 		expect(queryByText(container, "Content 4")).toBeInTheDocument();
 	});

package/test/Accordion/keyboard.test.ts

@@ -1,14 +1,11 @@
 import { fireEvent, getByText, queryByText } from "@testing-library/dom";
 import "@testing-library/jest-dom/vitest";
-import userEvent from "@testing-library/user-event";
 import { mount } from "@torpor/view";
 import { describe, expect, it } from "vitest";
 import AccordionKeyboard from "./components/AccordionKeyboard.torp";
 
 describe("Accordion", () => {
 	it("Keyboard", async () => {
-		const user = userEvent.setup();
-
 		const container = document.createElement("div");
 		document.body.appendChild(container);
 		mount(container, AccordionKeyboard, { value: ["1", "2"] });

package/test/Accordion/multiple-item-toggle.test.ts

@@ -7,8 +7,6 @@ import AccordionMultiple from "./components/AccordionMultiple.torp";
 
 describe("Accordion", () => {
 	it("Multiple item toggle", async () => {
-		const user = userEvent.setup();
-
 		const container = document.createElement("div");
 		document.body.appendChild(container);
 		mount(container, AccordionMultiple);
@@ -18,16 +16,16 @@ describe("Accordion", () => {
 		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
 
 		// Clicking header 1 should reveal body 1
-		await user.click(getByText(container, "Header 1"));
+		await userEvent.click(getByText(container, "Header 1"));
 		expect(queryByText(container, "Content 1")).toBeInTheDocument();
 
 		// Clicking header 2 should reveal body 1 and body 2
-		await user.click(getByText(container, "Header 2"));
+		await userEvent.click(getByText(container, "Header 2"));
 		expect(queryByText(container, "Content 1")).toBeInTheDocument();
 		expect(queryByText(container, "Content 2")).toBeInTheDocument();
 
 		// Clicking header 2 again should hide body 2
-		await user.click(getByText(container, "Header 2"));
+		await userEvent.click(getByText(container, "Header 2"));
 		expect(queryByText(container, "Content 1")).toBeInTheDocument();
 		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
 	});

package/test/Accordion/single-item-toggle.test.ts

@@ -7,8 +7,6 @@ import AccordionSingle from "./components/AccordionSingle.torp";
 
 describe("Accordion", () => {
 	it("Single item toggle", async () => {
-		const user = userEvent.setup();
-
 		const container = document.createElement("div");
 		document.body.appendChild(container);
 		mount(container, AccordionSingle);
@@ -18,16 +16,16 @@ describe("Accordion", () => {
 		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
 
 		// Clicking header 1 should reveal body 1
-		await user.click(getByText(container, "Header 1"));
+		await userEvent.click(getByText(container, "Header 1"));
 		expect(queryByText(container, "Content 1")).toBeInTheDocument();
 
 		// Clicking header 2 should hide body 1 and reveal body 2
-		await user.click(getByText(container, "Header 2"));
+		await userEvent.click(getByText(container, "Header 2"));
 		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
 		expect(queryByText(container, "Content 2")).toBeInTheDocument();
 
 		// Clicking header 2 again should hide body 2
-		await user.click(getByText(container, "Header 2"));
+		await userEvent.click(getByText(container, "Header 2"));
 		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
 	});
 });

package/test/Dialog/accessibility-alert.test.ts

@@ -0,0 +1,40 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { assert, describe, expect, it } from "vitest";
+import DialogAccessibility from "./components/DialogAccessibility.torp";
+
+describe("Dialog", () => {
+	it("Accessibility -- alert", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, DialogAccessibility, { alert: true });
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+		// This is for a Dialog with its alert property set to true
+
+		// The element that contains all elements of the dialog, including the
+		// alert message and any dialog buttons, has role alertdialog
+		let dialog = queryByText(container, "Which color do you prefer?");
+		assert(dialog, "Dialog not found");
+		assert(dialog.parentElement, "Dialog parent not found");
+		dialog = dialog.parentElement;
+		expect(dialog).toHaveAttribute("role", "alertdialog");
+
+		// The element with role alertdialog has either:
+		//   * A value for aria-labelledby that refers to the element containing
+		//     the title of the dialog if the dialog has a visible label
+		//   * A value for aria-label if the dialog does not have a visible
+		//     label
+		const header = queryByText(container, "Color preference");
+		assert(header, "Header not found");
+		expect(dialog).toHaveAttribute("aria-labelledby", header.id);
+
+		// The element with role alertdialog has a value set for
+		// aria-describedby that refers to the element containing the alert
+		// message
+		const body = queryByText(container, "Which color do you prefer?");
+		assert(body, "Body not found");
+		expect(dialog).toHaveAttribute("aria-describedby", body.id);
+	});
+});

package/test/Dialog/accessibility-modal.test.ts

@@ -0,0 +1,52 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { assert, describe, expect, it } from "vitest";
+import DialogAccessibility from "./components/DialogAccessibility.torp";
+
+describe("Dialog", () => {
+	it("Accessibility -- modal", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, DialogAccessibility, { modal: true, ariaAnnounce: false });
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
+		// This is for a Dialog in a Popover with its modal property set to true
+
+		// The element that serves as the dialog container has a role of dialog
+		let dialog = queryByText(container, "Which color do you prefer?");
+		assert(dialog, "Dialog not found");
+		assert(dialog.parentElement, "Dialog parent not found");
+		dialog = dialog.parentElement;
+		expect(dialog).toHaveAttribute("role", "dialog");
+
+		// All elements required to operate the dialog are descendants of the
+		// element that has role dialog
+
+		// The dialog container element has aria-modal set to true
+		expect(dialog).toHaveAttribute("aria-modal", "true");
+
+		// The dialog has either:
+		//   * A value set for the aria-labelledby property that refers to a
+		//     visible dialog title
+		//   * A label specified by aria-label
+		const header = queryByText(container, "Color preference");
+		assert(header, "Header not found");
+		expect(dialog).toHaveAttribute("aria-labelledby", header.id);
+
+		// Optionally, the aria-describedby property is set on the element with
+		// the dialog role to indicate which element or elements in the dialog
+		// contain content that describes the primary purpose or message of the
+		// dialog. Specifying descriptive elements enables screen readers to
+		// announce the description along with the dialog title and initially
+		// focused element when the dialog opens, which is typically helpful
+		// only when the descriptive content is simple and can easily be
+		// understood without structural information. It is advisable to omit
+		// specifying aria-describedby if the dialog content includes semantic
+		// structures, such as lists, tables, or multiple paragraphs, that need
+		// to be perceived in order to easily understand the content, i.e., if
+		// the content would be difficult to understand when announced as a
+		// single unbroken string
+		expect(dialog).not.toHaveAttribute("aria-describedby");
+	});
+});

package/test/Dialog/components/CustomDialog.torp

@@ -0,0 +1,20 @@
+import { Popover, PopoverContent } from "../../../src/Popover/index";
+import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
+
+export default function CustomDialog($props: any) {
+	@render {
+		<Popover visible callback={$props.callback}>
+			<PopoverContent>
+				<Dialog>
+					<DialogBody>
+						<p>Which color do you prefer?</p>
+					</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue">Blue</DialogButton>
+						<DialogButton value="red">Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</PopoverContent>
+		</Popover>
+	}
+}

package/test/Dialog/components/DialogAccessibility.torp

@@ -0,0 +1,31 @@
+import { Popover, PopoverContent } from '../../../src/Popover/index';
+import {
+	Dialog,
+	DialogHeader,
+	DialogBody,
+	DialogFooter,
+	DialogButton
+} from '../../../src/Dialog/index';
+
+export default function DialogAccessibility($props: any) {
+	$props.modal ??= false;
+	$props.alert ??= false;
+	$props.ariaAnnounce ??= true;
+
+	let color = '';
+
+	@render {
+		<Popover visible modal={$props.modal}>
+			<PopoverContent>
+				<Dialog alert={$props.alert}>
+					<DialogHeader>Color preference</DialogHeader>
+					<DialogBody ariaAnnounce={$props.ariaAnnounce}>Which color do you prefer?</DialogBody>
+					<DialogFooter>
+						<DialogButton value="blue" onclick={() => (color = 'blue')}>Blue</DialogButton>
+						<DialogButton value="red" onclick={() => (color = 'red')}>Red</DialogButton>
+					</DialogFooter>
+				</Dialog>
+			</PopoverContent>
+		</Popover>
+	}
+}

package/test/Dialog/components/DialogFunction.torp

@@ -0,0 +1,22 @@
+import { showPopoverPrompt } from "../../../src/Popover";
+import CustomDialog from "./CustomDialog.torp";
+
+export default function DialogFunction($props: any) {
+	let $state = $watch({ color: "" });
+
+	async function show() {
+		// @ts-ignore
+		$state.color = await showPopoverPrompt(CustomDialog, null, $parent);
+	}
+
+	@render {
+		<div>
+			<button type="button" onclick={show}>Show the modal</button>
+
+			@if ($state.color) {
+				<p>Your favorite color is {$state.color}?!</p>
+			}
+		</div>
+	}
+}
+

package/test/Dialog/components/DialogVariable.torp

@@ -0,0 +1,35 @@
+import { Popover, PopoverContent } from "../../../src/Popover/index";
+import { Dialog, DialogBody, DialogFooter, DialogButton } from "../../../src/Dialog/index";
+
+export default function DialogVariable($props: any) {
+	let $state = $watch({
+		color: "",
+		showPopover: false
+	});
+
+	@render {
+		<div>
+			<button type="button" onclick={(e) => ($state.showPopover = !$state.showPopover)}>
+				Show the modal
+			</button>
+
+			@if ($state.color) {
+				<p>Your favorite color is {$state.color}?!</p>
+			}
+
+			<Popover visible={$state.showPopover}>
+				<PopoverContent>
+					<Dialog>
+						<DialogBody>
+							<p>Which color do you prefer?</p>
+						</DialogBody>
+						<DialogFooter>
+							<DialogButton value="blue" onclick={() => ($state.color = "blue")}>Blue</DialogButton>
+							<DialogButton value="red" onclick={() => ($state.color = "red")}>Red</DialogButton>
+						</DialogFooter>
+					</Dialog>
+				</PopoverContent>
+			</Popover>
+		</div>
+	}
+}

package/test/Dialog/function.test.ts

@@ -0,0 +1,26 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import DialogFunction from "./components/DialogFunction.torp";
+
+describe("Dialog", () => {
+	it("Showing with a function", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, DialogFunction);
+
+		// By default, the modal shouldn't be shown
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+
+		// Clicking the button should show the modal
+		await userEvent.click(getByText(container, "Show the modal"));
+		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
+
+		// Clicking the blue button should hide the modal and set the value
+		await userEvent.click(getByText(container, "Blue"));
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+		expect(queryByText(container, "Your favorite color is blue?!")).toBeInTheDocument();
+	});
+});

package/test/Dialog/variable.test.ts

@@ -0,0 +1,27 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import DialogVariable from "./components/DialogVariable.torp";
+
+describe("Dialog", () => {
+	it("Showing with a variable", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, DialogVariable);
+
+		// By default, the modal shouldn't be shown
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+		expect(queryByText(container, "Your favorite color is blue?!")).not.toBeInTheDocument();
+
+		// Clicking the button should show the modal
+		await userEvent.click(getByText(container, "Show the modal"));
+		expect(queryByText(container, "Which color do you prefer?")).toBeInTheDocument();
+
+		// Clicking the blue button should hide the modal and set the value
+		await userEvent.click(getByText(container, "Blue"));
+		expect(queryByText(container, "Which color do you prefer?")).not.toBeInTheDocument();
+		expect(queryByText(container, "Your favorite color is blue?!")).toBeInTheDocument();
+	});
+});

package/test/NavMenu/accessibility.test.ts

@@ -0,0 +1,97 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import NavMenuAccessibility from "./components/NavMenuAccessibility.torp";
+
+describe("NavMenu", () => {
+	it("Accessibility", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, NavMenuAccessibility);
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/menu/
+		// NOTE: NavMenu is a menubar
+
+		// A menu is a container of items that represent choices. The element serving as the menu has
+		// a role of either menu or menubar
+		expect(queryByText(container, "Home")?.parentElement).toHaveAttribute("role", "menubar");
+
+		// The items contained in a menu are child elements of the containing menu or menubar and have
+		// any of the following roles:
+		//   * menuitem
+		//   * menuitemcheckbox
+		//   * menuitemradio
+		expect(queryByText(container, "Home")).toHaveAttribute("role", "menuitem");
+		expect(queryByText(container, "Page")).toHaveAttribute("role", "menuitem");
+		expect(queryByText(container, "Disabled")).toHaveAttribute("role", "menuitem");
+		expect(queryByText(container, "Subpages")).toHaveAttribute("role", "menuitem");
+
+		// If activating a menuitem opens a submenu, the menuitem is known as a parent menuitem. A submenu's
+		// menu element is:
+		//   * Contained inside the same menu element as its parent menuitem
+		//   * Is the sibling element immediately following its parent menuitem
+
+		// A parent menuitem has aria-haspopup set to either menu or true
+		expect(queryByText(container, "Subpages")).toHaveAttribute("aria-haspopup", "true");
+
+		// A parent menuitem has aria-expanded set to false when its child menu is not visible and set
+		// to true when the child menu is visible
+		expect(queryByText(container, "Subpages")).toHaveAttribute("aria-expanded", "false");
+		await userEvent.click(getByText(container, "Subpages"));
+		expect(queryByText(container, "Subpages")).toHaveAttribute("aria-expanded", "true");
+
+		// One of the following approaches is used to enable scripts to move focus among items in a
+		// menu as described in Keyboard Navigation Inside Components:
+		//   * The menu container has tabindex set to -1 or 0 and aria-activedescendant set to the ID
+		//     of the focused item
+		//   * Each item in the menu has tabindex set to -1, except in a menubar, where the first item
+		//     has tabindex set to 0
+
+		// When a menuitemcheckbox or menuitemradio is checked, aria-checked is set to true
+		// NOTE: We don't (currently?) have checkboxes or radios in NavMenus
+
+		// When a menu item is disabled, aria-disabled is set to true
+		expect(queryByText(container, "Page")).not.toHaveAttribute("aria-disabled");
+		expect(queryByText(container, "Disabled")).toHaveAttribute("aria-disabled", "true");
+
+		// Items in a menu may be divided into groups by placing an element with a role of separator
+		// between groups. For example, this technique should be used when a menu contains a set of
+		// menuitemradio items
+		expect(queryByText(container, "/")).toHaveAttribute("role", "separator");
+
+		// All separators should have aria-orientation consistent with the separator's orientation
+		// NOTE: What does this mean? None of the example separators have aria-orientation set
+
+		// If a menubar has a visible label, the element with role menubar has aria-labelledby set to
+		// a value that refers to the labelling element. Otherwise, the menubar element has a label
+		// provided by aria-label
+		// NOTE: We only support aria-label and it's required
+		expect(queryByText(container, "Home")?.parentElement).toHaveAttribute(
+			"aria-label",
+			"Site navigation",
+		);
+
+		// If a menubar is vertically oriented, it has aria-orientation set to vertical. The default
+		// value of aria-orientation for a menubar is horizontal
+		expect(queryByText(container, "Home")?.parentElement).toHaveAttribute(
+			"aria-orientation",
+			"horizontal",
+		);
+		expect(queryByText(container, "Subpage 1")?.parentElement).toHaveAttribute(
+			"aria-orientation",
+			"vertical",
+		);
+
+		// Our own tests
+
+		// The group should be labeled
+		expect(queryByText(container, "Group header")).toBeInTheDocument();
+		const headerId = queryByText(container, "Group header")?.id;
+		expect(queryByText(container, "Group header")?.parentElement).toHaveAttribute(
+			"aria-labelledby",
+			headerId,
+		);
+	});
+});

package/test/NavMenu/basic.test.ts

@@ -0,0 +1,22 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import NavMenu from "./components/NavMenu.torp";
+
+describe("NavMenu", () => {
+	it("Basic operation", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, NavMenu);
+
+		// By default, body 1 should be displayed
+		expect(queryByText(container, "Home")).toBeInTheDocument();
+		expect(queryByText(container, "Subpage 1")).not.toBeInTheDocument();
+
+		// Clicking header 2 should hide body 1 and reveal body 2
+		await userEvent.click(getByText(container, "Subpages"));
+		expect(queryByText(container, "Subpage 1")).toBeInTheDocument();
+	});
+});

package/test/NavMenu/components/NavMenu.torp

@@ -0,0 +1,28 @@
+import {
+	NavMenu,
+	NavMenuLink,
+	NavMenuPopout,
+	NavMenuPopoutButton,
+	NavMenuPopoutContent,
+	NavMenuSeparator
+} from "../../../src/NavMenu";
+
+export default function NavMenu($props: any) {
+	@render {
+		<NavMenu ariaLabel="Site navigation">
+			<NavMenuLink href="/">Home</NavMenuLink>
+			<NavMenuLink href="/page1">Page 1</NavMenuLink>
+			<NavMenuSeparator />
+			<NavMenuPopout>
+				<NavMenuPopoutButton>Subpages</NavMenuPopoutButton>
+				<NavMenuPopoutContent>
+					<NavMenu ariaLabel="Sub site navigation" orientation="vertical">
+						<NavMenuLink href="/sub/page1">Subpage 1</NavMenuLink>
+						<NavMenuLink href="/sub/page2">Subpage 2</NavMenuLink>
+						<NavMenuLink href="/sub/page3">Subpage 3</NavMenuLink>
+					</NavMenu>
+				</NavMenuPopoutContent>
+			</NavMenuPopout>
+		</NavMenu>
+	}
+}