[UI v2] test: Adds tests for global concurrency view and task run view]

ui-v2/src/components/concurrency/global-concurrency-view/data-table/active-cell.tsx

@@ -41,6 +41,7 @@ export const ActiveCell = (
 
 	return (
 		<Switch
+			aria-label="toggle active"
 			checked={rowActive}
 			onCheckedChange={(checked) => handleCheckedChange(checked, rowId)}
 		/>

ui-v2/src/components/concurrency/global-concurrency-view/data-table/data-table.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createWrapper } from "@tests/utils";
+import { describe, expect, it, vi } from "vitest";
+import { Table } from "./data-table";
+
+const MOCK_DATA = [
+	{
+		id: "0",
+		created: "2021-01-01T00:00:00Z",
+		updated: "2021-01-01T00:00:00Z",
+		active: true,
+		name: "global concurrency limit 0",
+		limit: 0,
+		active_slots: 0,
+		slot_decay_per_second: 0,
+	},
+];
+
+describe("GlobalConcurrencyLimitTable -- table", () => {
+	it("renders row data", () => {
+		render(
+			<Table
+				data={MOCK_DATA}
+				onDeleteRow={vi.fn()}
+				onEditRow={vi.fn()}
+				searchValue=""
+				onSearchChange={vi.fn()}
+			/>,
+			{ wrapper: createWrapper() },
+		);
+		expect(
+			screen.getByRole("cell", { name: /global concurrency limit 0/i }),
+		).toBeVisible();
+		expect(
+			screen.getByRole("switch", { name: /toggle active/i }),
+		).toBeChecked();
+	});
+
+	it("calls onDelete upon clicking delete action menu item", async () => {
+		const user = userEvent.setup();
+
+		const mockFn = vi.fn();
+
+		render(
+			<Table
+				data={MOCK_DATA}
+				onDeleteRow={mockFn}
+				onEditRow={vi.fn()}
+				searchValue=""
+				onSearchChange={vi.fn()}
+			/>,
+			{ wrapper: createWrapper() },
+		);
+		await user.click(
+			screen.getByRole("button", { name: /open menu/i, hidden: true }),
+		);
+		await user.click(screen.getByRole("menuitem", { name: /delete/i }));
+		expect(mockFn).toHaveBeenCalledOnce();
+	});
+	it("calls onEdit upon clicking rest action menu item", async () => {
+		const user = userEvent.setup();
+		const mockFn = vi.fn();
+
+		render(
+			<Table
+				data={MOCK_DATA}
+				onDeleteRow={vi.fn()}
+				onEditRow={mockFn}
+				searchValue=""
+				onSearchChange={vi.fn()}
+			/>,
+			{ wrapper: createWrapper() },
+		);
+		await user.click(
+			screen.getByRole("button", { name: /open menu/i, hidden: true }),
+		);
+		await user.click(screen.getByRole("menuitem", { name: /edit/i }));
+		expect(mockFn).toHaveBeenCalledOnce();
+	});
+});

ui-v2/src/components/concurrency/global-concurrency-view/data-table/data-table.tsx

@@ -69,9 +69,40 @@ export const GlobalConcurrencyDataTable = ({
 		);
 	}, [data, deferredSearch]);
 
+	return (
+		<Table
+			data={filteredData}
+			onDeleteRow={onDeleteRow}
+			onEditRow={onEditRow}
+			searchValue={search}
+			onSearchChange={(value) =>
+				void navigate({
+					to: ".",
+					search: (prev) => ({ ...prev, search: value }),
+				})
+			}
+		/>
+	);
+};
+
+type TableProps = {
+	data: Array<GlobalConcurrencyLimit>;
+	onDeleteRow: (row: GlobalConcurrencyLimit) => void;
+	onEditRow: (row: GlobalConcurrencyLimit) => void;
+	onSearchChange: (value: string) => void;
+	searchValue: string | undefined;
+};
+
+export function Table({
+	data,
+	onDeleteRow,
+	onEditRow,
+	onSearchChange,
+	searchValue,
+}: TableProps) {
 	const table = useReactTable({
-		data: filteredData,
-		columns: createColumns({ onEditRow, onDeleteRow }),
+		data,
+		columns: createColumns({ onDeleteRow, onEditRow }),
 		getCoreRowModel: getCoreRowModel(),
 		getPaginationRowModel: getPaginationRowModel(), //load client-side pagination code
 	});
@@ -80,15 +111,10 @@ export const GlobalConcurrencyDataTable = ({
 		<div className="flex flex-col gap-4">
 			<SearchInput
 				placeholder="Search global concurrency limit"
-				value={search}
-				onChange={(e) =>
-					void navigate({
-						to: ".",
-						search: (prev) => ({ ...prev, search: e.target.value }),
-					})
-				}
+				value={searchValue}
+				onChange={(e) => onSearchChange(e.target.value)}
 			/>
 			<DataTable table={table} />
 		</div>
 	);
-};
+}

ui-v2/src/components/concurrency/global-concurrency-view/dialog/create-or-edit-limit-dialog/create-or-edit-limit-dialog.test.tsx

@@ -0,0 +1,88 @@
+import { CreateOrEditLimitDialog } from "./create-or-edit-limit-dialog";
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createWrapper } from "@tests/utils";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+const MOCK_DATA = {
+	id: "0",
+	created: "2021-01-01T00:00:00Z",
+	updated: "2021-01-01T00:00:00Z",
+	active: false,
+	name: "global concurrency limit 0",
+	limit: 0,
+	active_slots: 0,
+	slot_decay_per_second: 0,
+};
+
+describe("CreateOrEditLimitDialog", () => {
+	beforeAll(() => {
+		class ResizeObserverMock {
+			observe() {}
+			unobserve() {}
+			disconnect() {}
+		}
+
+		global.ResizeObserver = ResizeObserverMock;
+	});
+
+	it("able to create a new limit", async () => {
+		const user = userEvent.setup();
+
+		// ------------ Setup
+		const mockOnSubmitFn = vi.fn();
+		render(
+			<CreateOrEditLimitDialog
+				onOpenChange={vi.fn()}
+				onSubmit={mockOnSubmitFn}
+			/>,
+			{ wrapper: createWrapper() },
+		);
+		// ------------ Act
+
+		await user.type(screen.getByLabelText(/name/i), MOCK_DATA.name);
+		await user.type(
+			screen.getByLabelText("Concurrency Limit"),
+			MOCK_DATA.limit.toString(),
+		);
+		await user.type(
+			screen.getByLabelText("Slot Decay Per Second"),
+			MOCK_DATA.slot_decay_per_second.toString(),
+		);
+		await user.click(screen.getByRole("button", { name: /save/i }));
+
+		// ------------ Assert
+		expect(mockOnSubmitFn).toHaveBeenCalledOnce();
+	});
+
+	it("able to edit a limit", async () => {
+		const user = userEvent.setup();
+
+		// ------------ Setup
+		const mockOnSubmitFn = vi.fn();
+		render(
+			<CreateOrEditLimitDialog
+				limitToUpdate={MOCK_DATA}
+				onOpenChange={vi.fn()}
+				onSubmit={mockOnSubmitFn}
+			/>,
+			{ wrapper: createWrapper() },
+		);
+		// ------------ Act
+
+		await user.type(screen.getByLabelText(/name/i), MOCK_DATA.name);
+		await user.type(
+			screen.getByLabelText("Concurrency Limit"),
+			MOCK_DATA.limit.toString(),
+		);
+		await user.type(
+			screen.getByLabelText("Slot Decay Per Second"),
+			MOCK_DATA.slot_decay_per_second.toString(),
+		);
+		await user.click(screen.getByRole("button", { name: /update/i }));
+
+		// ------------ Assert
+		expect(mockOnSubmitFn).toHaveBeenCalledOnce();
+	});
+});

ui-v2/src/components/concurrency/global-concurrency-view/dialog/create-or-edit-limit-dialog/index.ts

@@ -0,0 +1 @@
+export { CreateOrEditLimitDialog } from "./create-or-edit-limit-dialog";

ui-v2/src/components/concurrency/global-concurrency-view/dialog/delete-limit-dialog.test.tsx

@@ -0,0 +1,43 @@
+import { DeleteLimitDialog } from "./delete-limit-dialog";
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { createWrapper } from "@tests/utils";
+import { expect, test, vi } from "vitest";
+
+const MOCK_DATA = {
+	id: "0",
+	created: "2021-01-01T00:00:00Z",
+	updated: "2021-01-01T00:00:00Z",
+	active: false,
+	name: "global concurrency limit 0",
+	limit: 0,
+	active_slots: 0,
+	slot_decay_per_second: 0,
+};
+
+test("DeleteLimitDialog can successfully call delete", async () => {
+	const user = userEvent.setup();
+
+	// ------------ Setup
+	const mockOnDeleteFn = vi.fn();
+	render(
+		<DeleteLimitDialog
+			limit={MOCK_DATA}
+			onDelete={mockOnDeleteFn}
+			onOpenChange={vi.fn()}
+		/>,
+		{ wrapper: createWrapper() },
+	);
+
+	// ------------ Act
+	expect(screen.getByRole("heading", { name: /delete concurrency limit/i }));
+	await user.click(
+		screen.getByRole("button", {
+			name: /delete/i,
+		}),
+	);
+
+	// ------------ Assert
+	expect(mockOnDeleteFn).toHaveBeenCalledOnce();
+});

ui-v2/src/components/concurrency/global-concurrency-view/empty-state/global-concurrency-limit-empty-state.test.tsx

@@ -1,18 +1,16 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { expect, test, vi } from "vitest";
 import { GlobalConcurrencyLimitEmptyState } from "./global-concurrency-limit-empty-state";
 
-describe("GlobalConcurrencyLimitEmptyState", () => {
-	it("when adding limit, callback gets fired", async () => {
-		const user = userEvent.setup();
+test("GlobalConcurrencyLimitEmptyState", async () => {
+	const user = userEvent.setup();
 
-		const mockFn = vi.fn();
+	const mockFn = vi.fn();
 
-		render(<GlobalConcurrencyLimitEmptyState onAdd={mockFn} />);
-		await user.click(
-			screen.getByRole("button", { name: /Add Concurrency Limit/i }),
-		);
-		expect(mockFn).toHaveBeenCalledOnce();
-	});
+	render(<GlobalConcurrencyLimitEmptyState onAdd={mockFn} />);
+	await user.click(
+		screen.getByRole("button", { name: /Add Concurrency Limit/i }),
+	);
+	expect(mockFn).toHaveBeenCalledOnce();
 });

ui-v2/src/components/concurrency/global-concurrency-view/header/global-concurrency-limits-header.test.tsx

@@ -0,0 +1,26 @@
+import { GlobalConcurrencyLimitsHeader } from "./global-concurrency-limits-header";
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expect, test, vi } from "vitest";
+
+test("GlobalConcurrencyLimitsHeader can successfully call onAdd", async () => {
+	const user = userEvent.setup();
+
+	// ------------ Setup
+	const mockOnAddFn = vi.fn();
+	render(<GlobalConcurrencyLimitsHeader onAdd={mockOnAddFn} />);
+
+	// ------------ Act
+	expect(
+		screen.getByRole("heading", { name: /global concurrency limits/i }),
+	).toBeVisible();
+	await user.click(
+		screen.getByRole("button", {
+			name: /add global concurrency limit/i,
+		}),
+	);
+
+	// ------------ Assert
+	expect(mockOnAddFn).toHaveBeenCalledOnce();
+});

ui-v2/src/components/concurrency/global-concurrency-view/header/index.ts

@@ -0,0 +1 @@
+export { GlobalConcurrencyLimitsHeader } from "./global-concurrency-limits-header";

ui-v2/src/components/concurrency/global-concurrency-view/index.tsx

@@ -7,7 +7,7 @@ import { useState } from "react";
 import { GlobalConcurrencyDataTable } from "./data-table";
 import { type DialogState, DialogView } from "./dialog";
 import { GlobalConcurrencyLimitEmptyState } from "./empty-state";
-import { GlobalConcurrencyLimitsHeader } from "./global-concurrency-limits-header";
+import { GlobalConcurrencyLimitsHeader } from "./header";
 
 export const GlobalConcurrencyView = () => {
 	const [openDialog, setOpenDialog] = useState<DialogState>({