chore: update test for layout to be meaningful

package.json

@@ -92,6 +92,7 @@
 		"@tanstack/router-devtools": "^1.82.1",
 		"@tanstack/router-plugin": "^1.81.9",
 		"@testing-library/dom": "10.4.0",
+		"@testing-library/jest-dom": "6.6.3",
 		"@testing-library/react": "16.1.0",
 		"@types/eslint__js": "^8.42.3",
 		"@types/lint-staged": "^13.3.0",

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

@@ -1,7 +1,9 @@
-import { expect, test } from 'vitest'
+import { expect, test, vi } from 'vitest'
 
 import { getUtf8ByteLength } from './DeviceNamingScreen'
 
+vi.mock('@comapeo/core-react', () => ({}))
+
 test('should return the correct byte length for ASCII characters', () => {
 	const text = 'hello'
 	const result = getUtf8ByteLength(text)

src/renderer/src/routes/_Map.test.tsx

@@ -1,54 +1,100 @@
 import type { ReactNode } from 'react'
-import {
-	RouterProvider,
-	createRootRoute,
-	createRoute,
-	createRouter,
-} from '@tanstack/react-router'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { render, screen } from '@testing-library/react'
-import { expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 
 import { IntlProvider } from '../contexts/IntlContext'
-import { MapLayout } from './_Map'
+import { routeTree } from '../routeTree.gen'
 
-const rootRoute = createRootRoute({})
+vi.mock('../contexts/persistedState/PersistedProjectId', () => ({
+	...vi.importActual('../contexts/persistedState/PersistedProjectId'),
+	usePersistedProjectIdStore: vi.fn((selector) => {
+		// Provide the mocked store state here
+		const mockedState = {
+			projectId: 'mocked-project-id',
+			setProjectId: vi.fn(),
+		}
+		return selector(mockedState)
+	}),
+}))
+
+vi.mock('@comapeo/core-react', () => ({
+	useManyDocs: vi.fn(() => ({ data: [] })),
+}))
 
 const Wrapper = ({ children }: { children: ReactNode }) => (
 	<IntlProvider>{children}</IntlProvider>
 )
 
-// Creates a stubbed out router. We are just testing whether the navigation gets passed the correct route (aka "/tab1" or "/tab2") so we do not need the actual router and can just intecept the navgiation state.
-const mapRoute = createRoute({
-	getParentRoute: () => rootRoute,
-	id: 'map',
-	component: MapLayout,
+const router = createRouter({
+	routeTree,
+	context: { hasDeviceName: true, persistedProjectId: true },
 })
 
-const catchAllRoute = createRoute({
-	getParentRoute: () => mapRoute,
-	path: '$',
-	component: () => null,
-})
+describe('clicking tabs navigate to correct tab', () => {
+	router.navigate({ to: '/Tab1' })
+	render(<RouterProvider router={router} />, { wrapper: Wrapper })
 
-const routeTree = rootRoute.addChildren([mapRoute.addChildren([catchAllRoute])])
+	test('There are 4 tabs', async () => {
+		const AllTabs = await screen.findAllByRole('tab')
+		expect(AllTabs).toHaveLength(4)
+	})
 
-const router = createRouter({ routeTree })
+	test('Second tab has no children and is disabled', async () => {
+		const AllTabs = await screen.findAllByRole('tab')
+		const secondTab = AllTabs[1]
+		expect(secondTab?.childElementCount).toBe(0)
+		expect(secondTab).toBeDisabled()
+	})
 
-test('clicking tabs navigate to correct tab', () => {
-	// @ts-expect-error - typings
-	render(<RouterProvider router={router} />, { wrapper: Wrapper })
-	const settingsButton = screen.getByText('Settings')
-	settingsButton.click()
-	const settingsRouteName = router.state.location.pathname
-	expect(settingsRouteName).toStrictEqual('/tab2')
-
-	const observationTab = screen.getByTestId('tab-observation')
-	observationTab.click()
-	const observationTabRouteName = router.state.location.pathname
-	expect(observationTabRouteName).toStrictEqual('/tab1')
-
-	const aboutTab = screen.getByText('About')
-	aboutTab.click()
-	const aboutTabRoute = router.state.location.pathname
-	expect(aboutTabRoute).toStrictEqual('/tab2')
+	test('Tab 1 is selected by default', async () => {
+		const Tab1 = screen.getByTestId('tab-observation')
+		expect(Tab1.ariaSelected).toBe('true')
+	})
+
+	test('The other tabs are not selected by default', () => {
+		const AllTabs = screen.getAllByRole('tab')
+		const selectedTabs = AllTabs.filter(
+			(tab) => tab.getAttribute('aria-selected') === 'true',
+		)
+		expect(selectedTabs).toHaveLength(1)
+	})
+
+	test('Tab 1 Screen is showing', async () => {
+		const title = await screen.findByText('Tab 1')
+		expect(title).toBeVisible()
+	})
+
+	test('Clicking "Settings" propogates "/Tab 2" to the navigator', () => {
+		const settingsButton = screen.getByText('Settings')
+		settingsButton.click()
+		expect(router.state.location.pathname).toStrictEqual('/Tab2')
+	})
+
+	test('Tab 2 Screen is showing', () => {
+		const title = screen.getByText('Tab 2')
+		expect(title).toBeVisible()
+	})
+
+	test('Clicking Top Tab propogated "/Tab1" to the navigator', () => {
+		const firstTab = screen.getByTestId('tab-observation')
+		firstTab.click()
+		expect(router.state.location.pathname).toStrictEqual('/Tab1')
+	})
+
+	test('Tab 1 Screen is showing', async () => {
+		const title = await screen.findByText('Tab 1')
+		expect(title).toBeVisible()
+	})
+
+	test('Clicking "About" propogates "/Tab 2" to the navigator', () => {
+		const aboutTab = screen.getByText('About')
+		aboutTab.click()
+		expect(router.state.location.pathname).toStrictEqual('/Tab2')
+	})
+
+	test('Tab 2 Screen is showing', () => {
+		const title = screen.getByText('Tab 2')
+		expect(title).toBeDefined()
+	})
 })

src/renderer/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'

src/renderer/vite.config.js

@@ -43,6 +43,7 @@ export default defineConfig((configEnv) => {
 		],
 		test: {
 			environment: 'jsdom',
+			setupFiles: ['./src/test/setup.ts'],
 		},
 	}
 })