test(layout): add simple page tests

src/App.test.tsx

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import App from './App'
+
+describe('Root/App Page', () => {
+  it('load page', () => {
+    render(<App />)
+
+    expect(
+      screen.getByText(
+        "Drag 'n' drop GPX- or FIT-files, or click to select files."
+      )
+    ).toBeInTheDocument()
+  })
+})

src/pages/About.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import About from './About'
+
+const mocks = vi.hoisted(() => ({ get: vi.fn() }))
+
+vi.mock('axios', async (importActual) => {
+  const actual = await importActual<typeof import('axios')>()
+  const mockAxios = {
+    default: {
+      ...actual.default,
+      create: vi.fn(() => ({
+        ...actual.default.create(),
+        get: mocks.get,
+      })),
+    },
+  }
+  return mockAxios
+})
+
+describe('About Page', () => {
+  it('load page', () => {
+    render(<About />)
+    expect(
+      screen.getByText('An app dealing with GPS files.')
+    ).toBeInTheDocument()
+  })
+
+  it('show version of backend', async () => {
+    const version = 'v1.2.3'
+    mocks.get.mockResolvedValueOnce({
+      data: { app: version, git: 'githash' },
+    })
+
+    render(<About />)
+
+    expect(await screen.findByText(version)).toBeInTheDocument()
+    expect(mocks.get).toHaveBeenCalled()
+  })
+})

src/pages/About.tsx

@@ -25,7 +25,7 @@ const About = () => {
 
   return (
     <>
-      <h1 className='text-6xl mb-4'>GPS Tools</h1>
+      <h1 className='text-6xl mb-4'>GPS-Tools</h1>
       <p className='mb-4 text-2xl font-light'>An app dealing with GPS files.</p>
       <p className='text-lg'>
         <a

src/pages/Home.test.tsx

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Home from './Home'
+
+describe('Home Page', () => {
+  it('load page', () => {
+    render(<Home />)
+    expect(screen.getByText('GPS-Tools')).toBeInTheDocument()
+  })
+})

src/pages/Home.tsx

@@ -2,7 +2,7 @@ import { FaAngleRight } from 'react-icons/fa6'
 
 const Home = () => (
   <div>
-    <h1 className='text-6xl mb-4'>GPS Tools</h1>
+    <h1 className='text-6xl mb-4'>GPS-Tools</h1>
     <p className='mb-4 text-2xl font-light'>
       First functionallity that can be used:{' '}
       <a href='/merge' className='flex'>

src/pages/Merge.tsx

@@ -5,7 +5,7 @@ import { UploadProvider } from '../context/UploadContext'
 
 const Merge = () => (
   <div>
-    <h1 className='text-6xl'>GPS-Tool</h1>
+    <h1 className='text-6xl'>GPS-Tools</h1>
     <UploadProvider>
       <Intro />
       <UploadForm />