Browser mode with vitest & test suite improvements (#21)

# Description

Adds the following setup to our vitest runner:
- Runs generic test files (`.test`) in both server and browser
environments
- Runs browser test files `.browser.test` in browser environments
- Runs server test files `.server.test` in server environments

## Type of change

Please mark relevant options with an `x` in the brackets.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update
- [ ] Algorithm update - updates algorithm
documentation/questions/answers etc.
- [ ] Other (please describe):

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also
list any relevant details for your test configuration

- [ ] Integration tests
- [ ] Unit tests
- [ ] Manual tests
- [ ] No tests required

# Reviewer checklist

Mark everything that needs to be checked before merging the PR.

- [ ] Check if the UI is working as expected and is satisfactory
- [ ] Check if the code is well documented
- [ ] Check if the behavior is what is expected
- [ ] Check if the code is well tested
- [ ] Check if the code is readable and well formatted
- [ ] Additional checks (document below if any)

# Screenshots (if appropriate):

# Questions (if appropriate):

Author: AlemTuzlak

.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.tsxapp/routes/_index.test.tsx renamed to 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 .",
@@ -59,16 +57,16 @@
 		"@types/prompt": "1.1.9",
 		"@types/react": "19.0.0",
 		"@types/react-dom": "19.0.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",
 		"babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
 		"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",
@@ -79,7 +77,8 @@
 		"vite-plugin-babel": "1.3.0",
 		"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": "pnpm@9.14.2",
 	"optionalDependencies": {
@@ -89,4 +88,4 @@
 		"node": ">=22.11.0",
 		"pnpm": ">=9.14.2"
 	}
-}
+}