@agility/plenum-ui 2.1.20-rc6 → 2.1.20-rc7

package/stories/organisms/DropdownWithMultiSelect/tests/DropdownWithMultiSelect.test.tsx

@@ -0,0 +1,69 @@
+import { vi } from "vitest";
+import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
+import DropdownWithMultiSelect from "../DropdownWithMultiSelect";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import Checkbox from "@/stories/molecules/inputs/checkbox/Checkbox";
+import { DynamicIcon } from "@/stories/atoms/icons";
+
+const defaultProps = {
+	label: "Filters",
+	options: [
+		{
+			label: "Option 1",
+			key: "1",
+			isSelected: false,
+			onClick: vi.fn()
+		},
+		{
+			label: "Option 2",
+			key: "2",
+			isSelected: false,
+			onClick: vi.fn()
+		},
+		{
+			label: "Option 3",
+			key: "3",
+			isSelected: false,
+			onClick: vi.fn()
+		}
+	]
+};
+
+describe("DropdownWithMultiSelect", () => {
+	beforeAll(() => {
+		class ResizeObserver {
+			observe() {}
+			unobserve() {}
+			disconnect() {}
+		}
+		vi.stubGlobal("ResizeObserver", ResizeObserver);
+	});
+
+	it("renders a button", () => {
+		const { container } = render(<DropdownWithMultiSelect {...defaultProps} />);
+		const button = screen.getByRole("button", { name: /Filters/i });
+		expect(button).toBeInTheDocument();
+		const icon = container.querySelector("svg");
+		expect(icon).toBeInTheDocument();
+	});
+
+	it("opens the popover and shows options", async () => {
+		render(<DropdownWithMultiSelect {...defaultProps} />);
+		const button = screen.getByRole("button", { name: /Filters/i });
+		fireEvent.click(button);
+		const checkboxes = screen.getAllByRole("checkbox");
+		expect(checkboxes).toHaveLength(3);
+	});
+
+	it("calls the onClick for an option", async () => {
+		const optionSpy = vi.fn();
+		render(
+			<DropdownWithMultiSelect {...defaultProps} options={[{ ...defaultProps.options[0], onClick: optionSpy }]} />
+		);
+		const button = screen.getByRole("button", { name: /Filters/i });
+		fireEvent.click(button);
+		const checkbox = screen.getByRole("checkbox", { name: /Option 1/i });
+		fireEvent.click(checkbox);
+		await waitFor(() => expect(optionSpy).toHaveBeenCalled());
+	});
+});

package/tsconfig.json

@@ -23,8 +23,7 @@
 		"paths": {
 			"@/*": ["./*"]
 		},
-		"types": ["vitest/globals"],
-		"typeRoots": ["./node_modules/@types"]
+		"types": ["vitest"]
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
 	"exclude": ["node_modules"]

package/vitest.config.js

@@ -1,5 +1,6 @@
 import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
+import path from "path";
 
 export default defineConfig({
 	plugins: [react()],
@@ -7,5 +8,10 @@ export default defineConfig({
 		globals: true,
 		environment: "jsdom",
 		setupFiles: "./setupTests.js"
+	},
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "./")
+		}
 	}
 });