import react from "@vitejs/plugin-react";
import { playwright } from "@vitest/browser-playwright";
import { fileURLToPath, URL } from "node:url";
import { configDefaults, defineConfig } from "vitest/config";

const CI_TEST_TIMEOUT_MS = 15_000;
const LAYOUT_VIEWPORT_HEIGHT = 900;
const LAYOUT_NARROW_WIDTH = 375;
const LAYOUT_WIDE_WIDTH = 1280;

export default defineConfig({
	plugins: [react()],
	resolve: { alias: { "@": fileURLToPath(new URL("src", import.meta.url)) } },
	test: {
		coverage: {
			exclude: ["src/test/**", "**/*.test.{ts,tsx}", "**/*.stories.tsx"],
			include: ["src/**/*.{ts,tsx}", "packages/*/src/**/*.{ts,tsx}"],
			reporter: ["text", "html", "lcov"],
			thresholds: {
				branches: 75,
				functions: 75,
				lines: 83,
				statements: 82,
			},
		},
		projects: [
			{
				extends: true,
				test: {
					environment: "jsdom",
					exclude: [...configDefaults.exclude, "**/*.browser.test.tsx"],
					name: "unit",
					setupFiles: "./src/test/setup.ts",
				},
			},
			{
				extends: true,
				test: {
					browser: {
						enabled: true,
						headless: true,
						instances: [
							{
								browser: "chromium",
								name: "browser-narrow",
								viewport: {
									height: LAYOUT_VIEWPORT_HEIGHT,
									width: LAYOUT_NARROW_WIDTH,
								},
							},
							{
								browser: "chromium",
								name: "browser-wide",
								viewport: {
									height: LAYOUT_VIEWPORT_HEIGHT,
									width: LAYOUT_WIDE_WIDTH,
								},
							},
						],
						provider: playwright(),
					},
					include: ["src/**/*.browser.test.tsx"],
					name: "browser",
				},
			},
		],
		// CI runs the UI scenarios with coverage on a slower runner.
		testTimeout: process.env.CI ? CI_TEST_TIMEOUT_MS : undefined,
	},
});