Merge branch 'main' into chore-style-tabs

.github/workflows/CI.yml

@@ -11,7 +11,24 @@ on:
     types: [opened, synchronize, reopened, ready_for_review]
 
 jobs:
-  all:
+  lint:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    strategy:
+      fail-fast: false
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install deps
+        run: npm ci
+      - name: Build translations
+        run: npm run intl:translations
+      - name: Run lint
+        run: npm run lint
+  test:
     runs-on: ubuntu-latest
     timeout-minutes: 10
     strategy:

docs/DEVELOPMENT.md

@@ -77,6 +77,12 @@ npm start                  # Build translations, then build the app in developme
 - The configuration for the renderer app is defined in the [Vite configuration file](../src/renderer/vite.config.js) that lives in the `src/renderer`.
 - The configuration for the Electron app is located in [`forge.config.js`](/forge.config.js).
 
+### Testing
+
+The renderer app (aka React code) can run unit test with [Vitest](https://vitest.dev/) (and integration tests with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)).
+
+To run unit or integration tests run `npm run vitest:run` or `npm run vitest:watch`. See [vitest run](https://vitest.dev/guide/cli.html#vitest-run) and [vitest watch](https://vitest.dev/guide/cli.html#vitest-watch) to understand the difference.
+
 ## Translations
 
 The `messages/` directory contains the translation strings used by the app. Within this directory are directories for the main process (`messages/main/`) and renderer process (`messages/renderer/`). Messages found in `messages/main/` are typically needed for translating text that lives in native UI (e.g. the menu bar), whereas messages in `messages/renderer/` are needed for translating text that's used in the rendered web app.

package.json

@@ -38,14 +38,15 @@
 		"intl:translations": "npm-run-all --print-label --parallel intl:translations:*",
 		"lint:eslint": "eslint --cache .",
 		"lint:format": "prettier --cache --check .",
-		"lint": "npm-run-all --print-label --parallel lint:*",
+		"lint": "npm-run-all --print-label --parallel --aggregate-output lint:*",
 		"types:main": "tsc -p src/main/tsconfig.json",
 		"types:services": "tsc -p src/services/tsconfig.json",
 		"types:preload": "tsc -p src/preload/tsconfig.json",
 		"types:renderer": "tsc -p src/renderer/tsconfig.json",
-		"types": "npm-run-all --print-label --parallel --continue-on-error types:*",
-		"test": "npm-run-all --print-label --parallel --continue-on-error lint types vitest ",
-		"vitest": "vitest --config ./src/renderer/vite.config.js",
+		"types": "npm-run-all --print-label --parallel --continue-on-error --aggregate-output types:*",
+		"test": "npm-run-all --print-label --parallel --aggregate-output types vitest:run",
+		"vitest:run": "vitest run --config ./src/renderer/vite.config.js",
+		"vitest:watch": "vitest watch --config ./src/renderer/vite.config.js",
 		"vite:dev": "vite dev src/renderer",
 		"vite:build": "vite build src/renderer"
 	},
@@ -91,7 +92,6 @@
 		"@tanstack/router-plugin": "^1.81.9",
 		"@testing-library/dom": "10.4.0",
 		"@testing-library/react": "16.1.0",
-		"@testing-library/user-event": "14.5.2",
 		"@types/eslint__js": "^8.42.3",
 		"@types/lint-staged": "^13.3.0",
 		"@types/node": "^20.17.6",

src/renderer/src/routes/(MapTabs)/_Map.tsx

@@ -35,10 +35,10 @@ const MapTabStyled = styled(MapTab)({
 })
 
 export const Route = createFileRoute('/(MapTabs)/_Map')({
-	component: Map,
+	component: MapLayout,
 })
 
-export function Map() {
+export function MapLayout() {
 	const navigate = useNavigate()
 	const { formatMessage } = useIntl()
 	return (

src/renderer/src/routes/Onboarding/DeviceNamingScreen.test.tsx

@@ -0,0 +1,9 @@
+import { expect, test } from 'vitest'
+
+import { getUtf8ByteLength } from './DeviceNamingScreen'
+
+test('should return the correct byte length for ASCII characters', () => {
+	const text = 'hello'
+	const result = getUtf8ByteLength(text)
+	expect(result).toBe(5) // Each ASCII character is 1 byte
+})

src/renderer/src/routes/Onboarding/DeviceNamingScreen.tsx

@@ -125,10 +125,6 @@ export function DeviceNamingScreenComponent() {
 		return result
 	}
 
-	function getUtf8ByteLength(text: string): number {
-		return new TextEncoder().encode(text).length
-	}
-
 	const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
 		const value = event.target.value
 		const graphemeCount = countGraphemes(value.trim())
@@ -227,3 +223,7 @@ export function DeviceNamingScreenComponent() {
 		</Container>
 	)
 }
+
+export function getUtf8ByteLength(text: string): number {
+	return new TextEncoder().encode(text).length
+}