Basic unit testing for frontend /webview-ui (#1522)

* feat: very basic unit testing

* move dep -> devDeps

* correct other deps

* resync after i18n revert on main

* update package-lock.json

webview-ui/matchMedia.js

@@ -0,0 +1,16 @@
+// "Official" jest workaround for mocking window.matchMedia()
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+
+Object.defineProperty(window, "matchMedia", {
+	writable: true,
+	value: vi.fn().mockImplementation((query) => ({
+		matches: false,
+		media: query,
+		onchange: null,
+		addListener: vi.fn(), // Deprecated
+		removeListener: vi.fn(), // Deprecated
+		addEventListener: vi.fn(),
+		removeEventListener: vi.fn(),
+		dispatchEvent: vi.fn(),
+	})),
+})

webview-ui/package.json

@@ -3,13 +3,6 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
-		"@testing-library/jest-dom": "^5.17.0",
-		"@testing-library/react": "^13.4.0",
-		"@testing-library/user-event": "^13.5.0",
-		"@types/jest": "^27.5.2",
-		"@types/node": "^16.18.101",
-		"@types/react": "^18.3.3",
-		"@types/react-dom": "^18.3.0",
 		"@vscode/webview-ui-toolkit": "^1.4.0",
 		"debounce": "^2.1.1",
 		"fast-deep-equal": "^3.1.3",
@@ -34,7 +27,8 @@
 	"scripts": {
 		"start": "react-scripts start",
 		"build": "node ./scripts/build-react-no-split.js",
-		"test": "react-scripts test",
+		"test": "vitest run",
+		"test:watch": "vitest dev",
 		"eject": "react-scripts eject"
 	},
 	"eslintConfig": {
@@ -56,6 +50,15 @@
 		]
 	},
 	"devDependencies": {
-		"@types/vscode-webview": "^1.57.5"
+		"@testing-library/jest-dom": "^5.17.0",
+		"@testing-library/react": "^15.0.6",
+		"@testing-library/user-event": "^13.5.0",
+		"@types/vscode-webview": "^1.57.5",
+		"@types/jest": "^27.5.2",
+		"@types/node": "^20.x",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"jsdom": "^25.0.1",
+		"vitest": "^2.1.8"
 	}
 }

webview-ui/setupTests.js

@@ -0,0 +1,2 @@
+import "@testing-library/jest-dom"
+import "./matchMedia"

webview-ui/src/components/chat/__tests__/Announcement.spec.tsx

@@ -0,0 +1,39 @@
+import { render, screen, fireEvent } from "@testing-library/react"
+import { describe, it, expect, vi } from "vitest"
+import Announcement from "../Announcement"
+
+vi.mock("@vscode/webview-ui-toolkit/react", () => ({
+	useTheme: () => ({ themeType: "light" }),
+	VSCodeButton: (props: any) => <button {...props}>{props.children}</button>,
+	VSCodeLink: ({ children }: { children: React.ReactNode }) => <a>{children}</a>,
+}))
+
+describe("Announcement", () => {
+	const hideAnnouncement = vi.fn()
+
+	it("renders the announcement with the correct version", () => {
+		render(<Announcement version="2.0.0" hideAnnouncement={hideAnnouncement} />)
+		expect(screen.getByText(/New in v2.0/)).toBeInTheDocument()
+	})
+
+	it("calls hideAnnouncement when close button is clicked", () => {
+		render(<Announcement version="2.0.0" hideAnnouncement={hideAnnouncement} />)
+		fireEvent.click(screen.getByRole("button"))
+		expect(hideAnnouncement).toHaveBeenCalled()
+	})
+
+	it("renders the mcp server improvements announcement", () => {
+		render(<Announcement version="2.0.0" hideAnnouncement={hideAnnouncement} />)
+		expect(screen.getByText(/MCP server improvements:/)).toBeInTheDocument()
+	})
+
+	it("renders the 'See new changes' button feature", () => {
+		render(<Announcement version="2.0.0" hideAnnouncement={hideAnnouncement} />)
+		expect(screen.getByText(/See it in action here./)).toBeInTheDocument()
+	})
+
+	it("renders the demo link", () => {
+		render(<Announcement version="2.0.0" hideAnnouncement={hideAnnouncement} />)
+		expect(screen.getByText(/See a demo here./)).toBeInTheDocument()
+	})
+})

webview-ui/tsconfig.json

@@ -16,5 +16,6 @@
 		"noEmit": true,
 		"jsx": "react-jsx"
 	},
-	"include": ["src", "../src/shared"]
+	"include": ["src", "../src/shared"],
+	"exclude": ["src/**/*.spec.ts", "setupTests.js", "matchMedia.js"]
 }

webview-ui/vite.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config"
+
+export default defineConfig({
+	test: {
+		environment: "jsdom",
+		globals: true,
+		setupFiles: ["./setupTests.js"],
+	},
+})