UX updates

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

README.md

@@ -32,3 +32,24 @@ npm start
 ```
 npm run build
 ```
+
+# Testing
+
+## Smoke Testing
+
+The project uses Jest and React Testing Library for smoke testing. 
+All smoke tests are located in the `src/__smoke__testing__` directory.
+
+### Running Tests
+
+1. Run all tests:
+```
+npm test
+```
+
+2. Run a specific test file:
+```
+npm test -- file.test.tsx
+# or
+npm test -- path/to/test/file.test.tsx
+```

jest.config.js

@@ -0,0 +1,31 @@
+export default {
+    preset: 'ts-jest',
+    testEnvironment: 'jsdom',
+    moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+        '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+            '<rootDir>/src/__mocks__/fileMock.js',
+        'roundware-web-framework': '<rootDir>/node_modules/roundware-web-framework/dist/index.js'
+    },
+    setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+    transform: {
+        '^.+\\.(ts|tsx)$': ['ts-jest', {
+            useESM: true,
+            tsconfig: 'tsconfig.json'
+        }],
+        '^.+\\.js$': ['babel-jest', {
+            presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
+        }]
+    },
+    testMatch: ['**/__smoke__testing__/**/*.test.(ts|tsx)'],
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    extensionsToTreatAsEsm: ['.ts', '.tsx'],
+    transformIgnorePatterns: ['node_modules/(?!(.*\\.mjs$|@testing-library|@emotion|roundware-web-framework))'],
+    globals: {
+        'ts-jest': {
+            useESM: true,
+            tsconfig: 'tsconfig.json'
+        },
+    },
+}; 

package.json

@@ -3,7 +3,7 @@
 	"version": "1.0.0",
 	"description": "",
 	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1",
+		"test": "jest",
 		"dev": "vite",
 		"start": "vite",
 		"preview": "vite preview",
@@ -23,6 +23,7 @@
 		"@mui/styles": "^5.8.7",
 		"@mui/x-date-pickers": "^5.0.16",
 		"@react-google-maps/api": "^2.2.0",
+		"@react-google-maps/marker-clusterer": "^2.20.0",
 		"@turf/boolean-point-in-polygon": "^7.1.0",
 		"@turf/center-of-mass": "^6.5.0",
 		"@turf/destination": "^6.5.0",
@@ -41,6 +42,7 @@
 		"i": "^0.3.7",
 		"interweave": "^12.9.0",
 		"lodash": "^4.17.21",
+		"marker-clusterer": "link:@types/@react-google-maps/marker-clusterer",
 		"moment": "^2.29.4",
 		"nanoid": "^4.0.0",
 		"nosleep.js": "^0.12.0",
@@ -53,11 +55,11 @@
 		"react-device-detect": "^2.1.2",
 		"react-dom": "^17.0.2",
 		"react-helmet": "^6.1.0",
-		"react-router": "^5.2.0",
+		"react-router": "^5.3.4",
 		"react-router-dom": "^5.2.0",
 		"react-share": "^4.4.0",
 		"regenerator-runtime": "^0.13.9",
-		"roundware-web-framework": "0.13.0-alpha.1",
+		"roundware-web-framework": "0.13.1-alpha.1",
 		"ts-overlapping-marker-spiderfier": "^1.0.3",
 		"wavesurfer-react": "https://github.com/shreyas-jadhav/wavesurfer-react/raw/tarball/wavesurfer-react-2.0.13.tgz",
 		"wavesurfer.js": "^5.2.0",
@@ -66,19 +68,29 @@
 	"devDependencies": {
 		"@babel/preset-react": "^7.14.5",
 		"@svgr/webpack": "^6.2.1",
+		"@testing-library/jest-dom": "^5.17.0",
+		"@testing-library/react": "^12.1.5",
+		"@testing-library/react-hooks": "^8.0.1",
+		"@testing-library/user-event": "^13.5.0",
 		"@types/autosuggest-highlight": "^3.1.1",
 		"@types/dom-mediacapture-record": "^1.0.10",
 		"@types/gtag.js": "^0.0.10",
+		"@types/jest": "^29.5.14",
 		"@types/lodash": "^4.14.172",
 		"@types/node": "^22.13.1",
 		"@types/react": "^17.0.16",
 		"@types/react-dom": "^17.0.9",
 		"@types/react-helmet": "^6.1.2",
+		"@types/react-router": "^5.1.20",
 		"@types/react-router-dom": "^5.1.8",
 		"@types/wavesurfer.js": "^5.2.2",
 		"@vitejs/plugin-react": "^4.3.4",
 		"dotenv": "^10.0.0",
+		"identity-obj-proxy": "^3.0.0",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
 		"nth-check": "^2.0.0",
+		"ts-jest": "^29.3.2",
 		"typescript": "^5.7.2",
 		"vite": "^6.1.0"
 	},

src/__mocks__/fileMock.js

@@ -0,0 +1 @@
+export default 'test-file-stub'; 

src/__mocks__/jest.d.ts

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom';
+
+declare global {
+  namespace jest {
+    interface Matchers<R> extends jest.Matchers<R> {
+      toBeInTheDocument(): R;
+      toHaveAttribute(attr: string, value?: any): R;
+      toHaveStyle(style: Record<string, any>): R;
+    }
+  }
+} 

src/__smoke__testing__/App/App.test.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { BrowserRouter } from 'react-router-dom';
+import { App as AppType } from '../../components/App/App';
+
+// Mock the App component
+jest.mock('../../components/App/App', () => ({
+  App: () => (
+    <div>
+      <header role="banner">
+        <nav role="navigation">
+          <h1>Test Project</h1>
+          <img src="logo.png" alt="Logo" className="nav-logo" />
+        </nav>
+      </header>
+      <div data-testid="app-container">
+        <div data-testid="platform-message"></div>
+        <div data-testid="main-content">
+          <div data-testid="landing-page"></div>
+          <div data-testid="listen-page"></div>
+          <div data-testid="speak-page"></div>
+        </div>
+      </div>
+      <footer role="contentinfo">
+        <div data-testid="bottom-bar">
+          <button data-testid="share-button">Share</button>
+          <button data-testid="speak-button">Speak</button>
+          <div data-testid="info-popup"></div>
+        </div>
+      </footer>
+    </div>
+  )
+}));
+
+const { App } = require('../../components/App/App');
+
+describe('App Component Smoke Tests', () => {
+  it('renders without crashing', () => {
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+  });
+
+  it('renders the project name in the title', () => {
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+
+    const titleElement = screen.getByText('Test Project');
+    expect(titleElement).toBeInTheDocument();
+  });
+
+  it('renders the main navigation elements', () => {
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+
+    // Check for main navigation elements
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+    expect(screen.getByRole('navigation')).toBeInTheDocument();
+  });
+
+  it('renders the main content area with all sections', () => {
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+
+    expect(screen.getByTestId('app-container')).toBeInTheDocument();
+    expect(screen.getByTestId('platform-message')).toBeInTheDocument();
+    expect(screen.getByTestId('main-content')).toBeInTheDocument();
+  });
+
+  it('renders the bottom bar with all controls', () => {
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+
+    expect(screen.getByTestId('bottom-bar')).toBeInTheDocument();
+    expect(screen.getByTestId('share-button')).toBeInTheDocument();
+    expect(screen.getByTestId('speak-button')).toBeInTheDocument();
+    expect(screen.getByTestId('info-popup')).toBeInTheDocument();
+  });
+
+  it('renders all main page sections', () => {
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+
+    expect(screen.getByTestId('landing-page')).toBeInTheDocument();
+    expect(screen.getByTestId('listen-page')).toBeInTheDocument();
+    expect(screen.getByTestId('speak-page')).toBeInTheDocument();
+  });
+});