@torpor/ui 0.0.17 → 0.1.0

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>
+	}
+}

package/test/NavMenu/components/NavMenuAccessibility.torp

@@ -0,0 +1,35 @@
+import {
+	NavMenu,
+	NavMenuLink,
+	NavMenuPopout,
+	NavMenuPopoutButton,
+	NavMenuPopoutContent,
+	NavMenuGroup,
+	NavMenuGroupHeader,
+	NavMenuSeparator
+} from "../../../src/NavMenu";
+
+export default function NavMenuAccessibility($props: any) {
+	@render {
+		<NavMenu ariaLabel="Site navigation">
+			<NavMenuLink href="/">Home</NavMenuLink>
+			<NavMenuLink href="/page1">Page</NavMenuLink>
+			<NavMenuLink href="/disabled" disabled>Disabled</NavMenuLink>
+			<NavMenuSeparator>/</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>
+			<NavMenuGroup>
+				<NavMenuGroupHeader as="h4">Group header</NavMenuGroupHeader>
+				<NavMenuLink href="/grouped-page">Grouped page</NavMenuLink>
+			</NavMenuGroup>
+		</NavMenu>
+	}
+}

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

@@ -7,8 +7,6 @@ import TabGroupList from "./components/TabGroupList.torp";
 
 describe("TabGroup", () => {
 	it("Items in a for loop", async () => {
-		const user = userEvent.setup();
-
 		let $state = $watch({
 			value: "1",
 			items: [
@@ -35,7 +33,7 @@ describe("TabGroup", () => {
 		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("TabGroup", () => {
 		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/TabGroup/item-trigger.test.ts

@@ -7,8 +7,6 @@ import TabGroupTrigger from "./components/TabGroupTrigger.torp";
 
 describe("TabGroup", () => {
 	it("Item trigger", async () => {
-		const user = userEvent.setup();
-
 		const container = document.createElement("div");
 		document.body.appendChild(container);
 		mount(container, TabGroupTrigger);
@@ -18,16 +16,16 @@ describe("TabGroup", () => {
 		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 keep 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();
 	});

package/tsup.config.ts

@@ -6,7 +6,14 @@ type Config =
 	| ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
 
 export default defineConfig({
-	entry: ["src/Accordion/index.ts", "src/TabGroup/index.ts", "src/motion.ts"],
+	entry: [
+		"src/Accordion/index.ts",
+		"src/Dialog/index.ts",
+		"src/NavMenu/index.ts",
+		"src/Popover/index.ts",
+		"src/TabGroup/index.ts",
+		"src/motion.ts",
+	],
 	format: ["esm", "cjs"],
 	dts: { entry: ["src/motion.ts"] },
 	clean: true,