@gradio/tabitem 0.6.5 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @gradio/tabitem
 
+## 0.7.0
+
+### Features
+
+- [#13467](https://github.com/gradio-app/gradio/pull/13467) [`feba2e1`](https://github.com/gradio-app/gradio/commit/feba2e1e41c68f4bbdacf4c963d8d9689d4b3346) - `Tab`, `TabItem`, `Plot` Unit tests.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/tabs@0.6.0
+
+## 0.6.6
+
+### Dependency updates
+
+- @gradio/tabs@0.5.10
+
+## 0.6.6
+
+### Dependency updates
+
+- @gradio/column@0.3.3
+
+## 0.6.6
+
+### Dependency updates
+
+- @gradio/utils@0.12.2
+- @gradio/tabs@0.5.9
+
+## 0.6.6
+
+### Dependency updates
+
+- @gradio/utils@0.12.1
+- @gradio/column@0.3.2
+
+## 0.6.6
+
+### Dependency updates
+
+- @gradio/tabs@0.5.8
+- @gradio/utils@0.12.0
+- @gradio/column@0.3.2
+
+## 0.6.5
+
+### Dependency updates
+
+- @gradio/tabs@0.5.7
+
+## 0.6.5
+
+### Dependency updates
+
+- @gradio/utils@0.11.3
+- @gradio/tabs@0.5.6
+
 ## 0.6.5
 
 ### Fixes

package/TabItem.test.ts

@@ -0,0 +1,75 @@
+import { test, describe, afterEach, expect, vi } from "vitest";
+import { cleanup, render, waitFor } from "@self/tootils/render";
+
+import TabItemHarness from "./TabItemHarness.svelte";
+
+describe("TabItem", () => {
+	afterEach(() => cleanup());
+
+	test("renders its slot content inside a tabpanel", async () => {
+		const { getByRole, getByTestId } = await render(TabItemHarness, {
+			tab_selected: "t1"
+		});
+
+		expect(getByRole("tabpanel", { hidden: true })).toBeInTheDocument();
+		expect(getByTestId("tab-content")).toHaveTextContent("tab panel content");
+	});
+
+	test("content is visible when this tab is the selected tab", async () => {
+		const { getByTestId } = await render(TabItemHarness, {
+			tab_selected: "t1"
+		});
+
+		expect(getByTestId("tab-content")).toBeVisible();
+	});
+
+	test("content is hidden when a different tab is selected", async () => {
+		const { getByTestId } = await render(TabItemHarness, {
+			tab_selected: "t2"
+		});
+
+		expect(getByTestId("tab-content")).not.toBeVisible();
+	});
+
+	test("content stays hidden when visible is false even if selected", async () => {
+		const { getByTestId } = await render(TabItemHarness, {
+			tab_selected: "t1",
+			tab_visible: false
+		});
+
+		expect(getByTestId("tab-content")).not.toBeVisible();
+	});
+});
+
+describe("Events: select", () => {
+	afterEach(() => cleanup());
+
+	test("fires when this tab is the active index on mount", async () => {
+		const on_tab_select = vi.fn();
+
+		await render(TabItemHarness, {
+			tab_selected: "t1",
+			tab_selected_index: 0,
+			on_tab_select
+		});
+
+		await waitFor(() => {
+			expect(on_tab_select).toHaveBeenCalledWith({
+				value: "First Tab",
+				index: 0
+			});
+		});
+	});
+
+	test("does not fire when this tab is not the active index", async () => {
+		const on_tab_select = vi.fn();
+
+		await render(TabItemHarness, {
+			tab_selected: "t2",
+			tab_selected_index: 1,
+			on_tab_select
+		});
+
+		expect(on_tab_select).not.toHaveBeenCalled();
+	});
+});

package/TabItemHarness.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+	import { TABS } from "@gradio/tabs";
+	import { BaseTabItem } from "./Index.svelte";
+
+	let all = $props();
+	const cfg = (all as any).props ?? {};
+
+	const selected_tab = writable<string | number | false>(
+		cfg.tab_selected ?? "t1"
+	);
+	const selected_tab_index = writable<number>(cfg.tab_selected_index ?? 0);
+
+	setContext(TABS, {
+		register_tab: (_tab: any, order: number) => order,
+		unregister_tab: () => {},
+		selected_tab,
+		selected_tab_index
+	});
+</script>
+
+<BaseTabItem
+	label="First Tab"
+	id="t1"
+	order={0}
+	visible={cfg.tab_visible ?? true}
+	interactive={true}
+	scale={0}
+	component_id={1}
+	on:select={(e) => cfg.on_tab_select?.(e.detail)}
+>
+	<div data-testid="tab-content">tab panel content</div>
+</BaseTabItem>

package/dist/TabItemHarness.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+	import { TABS } from "@gradio/tabs";
+	import { BaseTabItem } from "./Index.svelte";
+
+	let all = $props();
+	const cfg = (all as any).props ?? {};
+
+	const selected_tab = writable<string | number | false>(
+		cfg.tab_selected ?? "t1"
+	);
+	const selected_tab_index = writable<number>(cfg.tab_selected_index ?? 0);
+
+	setContext(TABS, {
+		register_tab: (_tab: any, order: number) => order,
+		unregister_tab: () => {},
+		selected_tab,
+		selected_tab_index
+	});
+</script>
+
+<BaseTabItem
+	label="First Tab"
+	id="t1"
+	order={0}
+	visible={cfg.tab_visible ?? true}
+	interactive={true}
+	scale={0}
+	component_id={1}
+	on:select={(e) => cfg.on_tab_select?.(e.detail)}
+>
+	<div data-testid="tab-content">tab panel content</div>
+</BaseTabItem>

package/dist/TabItemHarness.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TabItemHarness: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabItemHarness = ReturnType<typeof TabItemHarness>;
+export default TabItemHarness;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/tabitem",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -16,12 +16,12 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/column": "^0.3.2",
-    "@gradio/tabs": "^0.5.5",
-    "@gradio/utils": "^0.11.2"
+    "@gradio/tabs": "^0.6.0",
+    "@gradio/column": "^0.3.3",
+    "@gradio/utils": "^0.12.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.15.2"
+    "@gradio/preview": "^0.16.2"
   },
   "peerDependencies": {
     "svelte": "^5.48.0"