@torpor/ui 0.0.15 → 0.0.17

package/test/TabGroup/components/TabGroupList.torp

@@ -0,0 +1,26 @@
+import {
+	TabGroup,
+	TabList,
+	TabHeader,
+	TabTrigger,
+	TabContent,
+} from "../../../src/TabGroup/index";
+
+export default function TabGroupList() {
+	@render {
+		<TabGroup value={$props.value}>
+			<TabList>
+			@for (let item of $props.items) {
+				@key = item.id
+				<TabHeader as="h4">
+					<TabTrigger>{item.header}</TabTrigger>
+				</TabHeader>
+			}
+			</TabList>
+			@for (let item of $props.items) {
+				@key = item.id
+				<TabContent>{item.text}</TabContent>
+			}
+		</TabGroup>
+	}
+}

package/test/TabGroup/components/TabGroupTrigger.torp

@@ -0,0 +1,28 @@
+import {
+	TabGroup,
+	TabList,
+	TabHeader,
+	TabTrigger,
+	TabContent,
+} from "../../../src/TabGroup/index";
+
+export default function TabGroupTrigger() {
+	@render {
+		<TabGroup value={$props.value}>
+			<TabList>
+				<TabHeader as="h4">
+					<TabTrigger>Header 1</TabTrigger>
+				</TabHeader>
+				<TabHeader as="h4">
+					<TabTrigger>Header 2</TabTrigger>
+				</TabHeader>
+				<TabHeader as="h4">
+					<TabTrigger>Header 3</TabTrigger>
+				</TabHeader>
+			</TabList>
+			<TabContent>Content 1</TabContent>
+			<TabContent>Content 2</TabContent>
+			<TabContent>Content 3</TabContent>
+		</TabGroup>
+	}
+}

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

@@ -0,0 +1,54 @@
+import { getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import userEvent from "@testing-library/user-event";
+import { $watch, mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+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: [
+				{ id: 0, header: "Item 1", text: "Content 1" },
+				{ id: 1, header: "Item 2", text: "Content 2" },
+				{ id: 2, header: "Item 3", text: "Content 3" },
+			],
+		});
+
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, TabGroupList, $state);
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Item 2")).toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+
+		$state.items.splice(1, 1);
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Item 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+
+		// Clicking header 1 should reveal body 1
+		await user.click(getByText(container, "Item 1"));
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+
+		$state.items.push({ id: 3, header: "Item 4", text: "Content 4" });
+
+		expect(queryByText(container, "Content 1")).toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+		expect(queryByText(container, "Item 4")).toBeInTheDocument();
+		expect(queryByText(container, "Content 4")).not.toBeInTheDocument();
+
+		// Clicking header 4 should reveal body 4
+		await user.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

@@ -0,0 +1,34 @@
+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 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);
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+
+		// Clicking header 1 should reveal body 1
+		await user.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"));
+		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"));
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+	});
+});

package/test/TabGroup/item-value.test.ts

@@ -0,0 +1,17 @@
+import { queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import TabGroupTrigger from "./components/TabGroupTrigger.torp";
+
+describe("TabGroup", () => {
+	it("Item default value", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, TabGroupTrigger, { value: "1" });
+
+		expect(queryByText(container, "Content 1")).not.toBeInTheDocument();
+		expect(queryByText(container, "Content 2")).toBeInTheDocument();
+		expect(queryByText(container, "Content 3")).not.toBeInTheDocument();
+	});
+});

package/test/TabGroup/keyboard.test.ts

@@ -0,0 +1,72 @@
+import { fireEvent, getByText, queryByText } from "@testing-library/dom";
+import "@testing-library/jest-dom/vitest";
+import { mount } from "@torpor/view";
+import { describe, expect, it } from "vitest";
+import TabGroupKeyboard from "./components/TabGroupKeyboard.torp";
+
+describe("TabGroup", () => {
+	it("Keyboard", async () => {
+		const container = document.createElement("div");
+		document.body.appendChild(container);
+		mount(container, TabGroupKeyboard, { value: "0" });
+
+		// Tests from https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+
+		// Enter or Space:
+		//   * When focus is on the tab header for a collapsed panel, expands
+		//     the associated panel. If the implementation allows only one panel
+		//     to be expanded, and if another panel is expanded, collapses that
+		//     panel
+		//   * When focus is on the tab header for an expanded panel, collapses
+		//     the panel if the implementation supports collapsing. Some
+		//     implementations require one panel to be expanded at all times and
+		//     allow only one panel to be expanded; so, they do not support a
+		//     collapse function
+		// NOTE: I don't think we can test this
+		// NOTE: TabGroup headers are buttons so this functionality should be baked in by default
+		//screen.queryByText('Header 1').focus();
+		//expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+		//fireEvent(screen.getByText('Header 1'), { key: 'Space' });
+		//expect(screen.queryByText('Content 1')).toBeInTheDocument();
+		//fireEvent(screen.getByText('Header 1'), { key: 'Space' });
+		//expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+
+		// Tab: Moves focus to the next focusable element; all focusable
+		// elements in the tab are included in the page Tab sequence
+		// NOTE: I don't think we can test this
+		//fireEvent(screen.getByText('Header 1'), { key: 'Tab' });
+		//expect(document.activeElement).toBe(screen.queryByText('Header 2'));
+
+		// Shift + Tab: Moves focus to the previous focusable element; all
+		// focusable elements in the tab are included in the page Tab
+		// sequence
+		// NOTE: I don't think we can test this
+		//fireEvent(screen.getByText('Header 2'), { key: 'Tab', shiftKey: true });
+		//expect(document.activeElement).toBe(screen.queryByText('Header 1'));
+
+		// Right Arrow: If focus is on a tab header, moves focus to the next tab
+		// header. If focus is on the last tab header, either does nothing or
+		// moves focus to the first tab header
+		fireEvent(
+			getByText(container, "Header 1"),
+			new KeyboardEvent("keydown", { key: "ArrowRight" }),
+		);
+		expect(document.activeElement).toBe(queryByText(container, "Header 2"));
+
+		// Left Arrow: If focus is on a tab header, moves focus to the previous
+		// tab header. If focus is on the first tab header, either does nothing
+		// or moves focus to the last tab header
+		fireEvent(getByText(container, "Header 2"), new KeyboardEvent("keydown", { key: "ArrowLeft" }));
+		expect(document.activeElement).toBe(queryByText(container, "Header 1"));
+
+		// Home: When focus is on a tab header, moves focus to the first tab
+		// header
+		fireEvent(getByText(container, "Header 3"), new KeyboardEvent("keydown", { key: "Home" }));
+		expect(document.activeElement).toBe(queryByText(container, "Header 1"));
+
+		// End: When focus is on a tab header, moves focus to the last tab
+		// header
+		fireEvent(getByText(container, "Header 1"), new KeyboardEvent("keydown", { key: "End" }));
+		expect(document.activeElement).toBe(queryByText(container, "Header 3"));
+	});
+});

package/tsup.config.ts

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