Browser mode with vitest & test suite improvements

.github/workflows/validate.yml

@@ -47,6 +47,7 @@ jobs:
           node-version-file: "package.json"
           cache: "pnpm"
       - run: pnpm install --prefer-offline --frozen-lockfile
+      - run: pnpm exec playwright install chromium --with-deps
       - run: pnpm run test:cov
       - name: "Report Coverage"
         # Only works if you set `reportOnFailure: true` in your vite config as specified above

.gitignore

@@ -75,18 +75,6 @@ blob-report
 .idea/usage.statistics.xml
 .idea/shelf
 
-
-# Make it harder to accidentally commit files in the root
-/*.json
-/*.yaml
-/*.yml
-/*.toml
-/*.ts
-/*.tsx
-/*.js
-/*.jsx
-/*.sh
-
 # Dont commit sqlite database files
 *.db
 *.sqlite

.vscode/settings.json

@@ -34,7 +34,7 @@
 		"*.ts": "${basename}.*.${extname}",
 		".env": ".env.*",
 		"*.tsx": "${basename}.*.${extname},${basename}.*.ts",
-		"package.json": "*.json, *.yml, *.config.js, *.config.ts, *.yaml",
+		"package.json": "*.json, *.yml, *.config.js, *.config.ts, *.yaml, *.workspace.ts",
 		"readme*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
 		"Readme*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
 		"README*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",

app/localization/i18n.server.test.ts

@@ -0,0 +1,21 @@
+import remixI18n from "./i18n.server"
+
+describe("Remix I18n", () => {
+	it("returns the correct default language from the request", async () => {
+		const request = new Request("http://localhost:3000")
+		const defaultLanguage = await remixI18n.getLocale(request)
+		expect(defaultLanguage).toBe("en")
+	})
+
+	it("returns the correct default language from the request if search param lang is invalid", async () => {
+		const request = new Request("http://localhost:3000?lng=invalid")
+		const defaultLanguage = await remixI18n.getLocale(request)
+		expect(defaultLanguage).toBe("en")
+	})
+
+	it("returns the correct language when specified in the search params from the request", async () => {
+		const request = new Request("http://localhost:3000?lng=bs")
+		const defaultLanguage = await remixI18n.getLocale(request)
+		expect(defaultLanguage).toBe("bs")
+	})
+})

app/routes/_index.test.tsx → app/routes/_index.browser.test.tsx

@@ -1,11 +1,8 @@
 import * as Module from "./_index"
 
 describe("Home route", () => {
-	it("should render the home page text properly in english", async ({
-		renderStub,
-		/** debug */
-	}) => {
-		const { container } = await renderStub({
+	it("should render the home page text properly in english", async ({ renderStub }) => {
+		const { getByText } = await renderStub({
 			entries: [
 				{
 					id: "home",
@@ -14,16 +11,16 @@ describe("Home route", () => {
 				},
 			],
 		})
-		// debug()
+
 		expect(
-			container.queryByText("React Router is awesome!", {
+			getByText("React Router is awesome!", {
 				exact: false,
 			})
 		).not.toBeNull()
 	})
 
 	it("should render the home page text properly in bosnian", async ({ renderStub }) => {
-		const { container } = await renderStub({
+		const { getByText } = await renderStub({
 			entries: [
 				{
 					id: "home",
@@ -37,7 +34,7 @@ describe("Home route", () => {
 		})
 
 		expect(
-			container.queryByText("React Router je zakon!", {
+			getByText("React Router je zakon!", {
 				exact: false,
 			})
 		).not.toBeNull()

knip.json

@@ -4,15 +4,12 @@
 		"scripts/*.{ts,js}",
 		"app/routes.ts",
 		"vite.config.ts",
+		"vitest.workspace.ts",
+		"vitest.config.ts",
 		"app/server/*.ts"
 	],
 	"remix": true,
 	"lefthook": true,
-	"project": [
-		"**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}",
-		"vite.config.ts"
-	],
-	"ignore": [
-		"app/library/icon/icons/types.ts"
-	]
-}
+	"project": ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}", "vite.config.ts", "vitest.workspace.ts", "vitest.config.ts"],
+	"ignore": ["app/library/icon/icons/types.ts", "**/*.server.test.{ts,tsx}", "**/*.browser.test.{ts,tsx}"]
+}

package.json

@@ -14,11 +14,9 @@
 		"build": "react-router build",
 		"dev": "react-router dev",
 		"start": "NODE_ENV=production node ./build/server/index.js",
-		"test": "vitest run",
-		"test:ui": "vitest --ui --api 9527",
+		"test": "vitest run --browser.headless",
+		"test:ui": "vitest",
 		"test:cov": "vitest run --coverage",
-		"test:debug": "jest-preview",
-		"test:live": "npm-run-all -p test:ui test:debug",
 		"typecheck": "tsc",
 		"validate": "pnpm run check && pnpm run typecheck && pnpm run test && pnpm run check:unused",
 		"check": "biome check .",
@@ -58,15 +56,15 @@
 		"@types/prompt": "1.1.9",
 		"@types/react": "18.3.12",
 		"@types/react-dom": "18.3.1",
-		"@vitest/coverage-v8": "2.1.5",
-		"@vitest/ui": "2.1.5",
+		"@vitest/browser": "2.1.8",
+		"@vitest/coverage-v8": "2.1.8",
+		"@vitest/ui": "2.1.8",
 		"autoprefixer": "10.4.20",
 		"chalk": "5.3.0",
 		"happy-dom": "15.11.6",
-		"jest-preview": "0.3.1",
 		"knip": "5.37.2",
 		"lefthook": "1.8.4",
-		"npm-run-all": "4.1.5",
+		"playwright": "1.49.0",
 		"postcss": "8.4.49",
 		"prompt": "1.3.0",
 		"react-router-devtools": "1.0.5",
@@ -76,7 +74,8 @@
 		"vite": "5.4.11",
 		"vite-plugin-icons-spritesheet": "2.2.1",
 		"vite-tsconfig-paths": "5.1.3",
-		"vitest": "2.1.5"
+		"vitest": "2.1.8",
+		"vitest-browser-react": "0.0.4"
 	},
 	"packageManager": "[email protected]",
 	"optionalDependencies": {
@@ -86,4 +85,4 @@
 		"node": ">=22.11.0",
 		"pnpm": ">=9.14.2"
 	}
-}
+}