Stub web project
This commit is contained in:
4
web/.dockerignore
Normal file
4
web/.dockerignore
Normal file
@@ -0,0 +1,4 @@
|
||||
node_modules
|
||||
dist
|
||||
coverage
|
||||
.gitignore
|
||||
4
web/.gitignore
vendored
Normal file
4
web/.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
node_modules
|
||||
dist
|
||||
coverage
|
||||
.DS_Store
|
||||
12
web/index.html
Normal file
12
web/index.html
Normal 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
10
web/jest.config.js
Normal 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
33
web/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
25
web/src/components/App.jsx
Normal file
25
web/src/components/App.jsx
Normal 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
|
||||
15
web/src/components/App.test.jsx
Normal file
15
web/src/components/App.test.jsx
Normal 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
9
web/src/index.jsx
Normal 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>
|
||||
)
|
||||
7
web/src/utils/calculator.js
Normal file
7
web/src/utils/calculator.js
Normal 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
|
||||
}
|
||||
16
web/src/utils/calculator.test.js
Normal file
16
web/src/utils/calculator.test.js
Normal 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
11
web/vite.config.js
Normal 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: '/'
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user