Stub web project

This commit is contained in:
2024-11-02 11:55:03 +01:00
parent 17a70e08d5
commit 092a05c3aa
19 changed files with 324 additions and 36 deletions

4
web/.dockerignore Normal file
View File

@@ -0,0 +1,4 @@
node_modules
dist
coverage
.gitignore

4
web/.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
node_modules
dist
coverage
.DS_Store

12
web/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>

10
web/jest.config.js Normal file
View File

@@ -0,0 +1,10 @@
export default {
testEnvironment: 'jsdom',
transform: {
'^.+\\.(js|jsx)$': 'babel-jest',
},
moduleNameMapper: {
'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
},
setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
}

33
web/package.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "my-react-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"test": "jest",
"test:watch": "jest --watch"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/preset-env": "^7.23.9",
"@babel/preset-react": "^7.23.9",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.1",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.17",
"babel-jest": "^29.7.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"vite": "^5.1.0"
}
}

View File

@@ -0,0 +1,25 @@
import React from 'react'
import { add } from '../utils/calculator.js' // Note the .js extension
function App() {
const [result, setResult] = React.useState(0)
const handleCalculate = () => {
setResult(add(5, 3))
}
return (
<div className="p-4">
<h1 className="text-2xl font-bold mb-4">React App</h1>
<button
className="bg-blue-500 text-white px-4 py-2 rounded"
onClick={handleCalculate}
>
Calculate 5 + 3
</button>
<p className="mt-4">Result: {result}</p>
</div>
)
}
export default App

View File

@@ -0,0 +1,15 @@
import { render, screen, fireEvent } from '@testing-library/react'
import App from './App'
describe('App', () => {
it('renders without crashing', () => {
render(<App />)
expect(screen.getByText(/React App/i)).toBeInTheDocument()
})
it('calculates correctly when button is clicked', () => {
render(<App />)
fireEvent.click(screen.getByText(/Calculate/i))
expect(screen.getByText(/Result: 8/i)).toBeInTheDocument()
})
})

9
web/src/index.jsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './components/App'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

View File

@@ -0,0 +1,7 @@
export const add = (a, b) => a + b
export const subtract = (a, b) => a - b
export const multiply = (a, b) => a * b
export const divide = (a, b) => {
if (b === 0) throw new Error('Division by zero')
return a / b
}

View File

@@ -0,0 +1,16 @@
// calculator.test.js
import { add, subtract, multiply, divide } from './calculator.js' // Note the .js extension
describe('Calculator', () => {
describe('add', () => {
it('adds two numbers correctly', () => {
expect(add(2, 3)).toBe(5)
})
})
describe('divide', () => {
it('throws error on division by zero', () => {
expect(() => divide(1, 0)).toThrow('Division by zero')
})
})
})

11
web/vite.config.js Normal file
View File

@@ -0,0 +1,11 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
build: {
outDir: 'dist',
assetsDir: 'assets',
base: '/'
}
})