Compare commits

..

9 Commits

Author SHA1 Message Date
668397104a Adopt @lavamoat/allow-scripts to gate npm install scripts
All checks were successful
CI / Go tests & lint (push) Successful in 1m34s
CI / Frontend tests & type-check (push) Successful in 1m15s
Disables dependency lifecycle scripts by default via .npmrc
(ignore-scripts=true) so arbitrary packages cannot execute code at
install time. An explicit allowlist in web/package.json opts specific
packages back in, and CI/Docker/Taskfile now run allow-scripts after
npm install to apply it.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-17 11:29:08 -03:00
0446e8f8a7 Merge pull request 'Implement time off management (Issue #3)' (#12) from feature/time-off-management into main
All checks were successful
CI / Go tests & lint (push) Successful in 8s
CI / Frontend tests & type-check (push) Successful in 26s
Reviewed-on: #12
2026-04-09 19:09:16 +00:00
975225e650 Fix time-off date display and improve UI
All checks were successful
CI / Go tests & lint (push) Successful in 9s
CI / Frontend tests & type-check (push) Successful in 29s
CI / Go tests & lint (pull_request) Successful in 9s
CI / Frontend tests & type-check (pull_request) Successful in 25s
Scan datetime columns directly into time.Time instead of strings in the
timeoff store — the intermediate string parse silently failed with
parseTime=true, producing zero-value dates. Display dates with month
names and filter admin's own entry from the volunteer dropdown.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-09 16:07:42 -03:00
704f11cec3 Move TimeOff test to vite
All checks were successful
CI / Go tests & lint (push) Successful in 7s
CI / Frontend tests & type-check (push) Successful in 26s
CI / Go tests & lint (pull_request) Successful in 7s
CI / Frontend tests & type-check (pull_request) Successful in 24s
2026-04-09 10:54:15 -03:00
07f11fa94e Implement time off management (Issue #3)
Add full time-off lifecycle: create/edit/delete with shift conflict
detection, auto-removal from conflicting shifts with admin notification,
shift restoration on admin delete, and hard block on assigning volunteers
with approved time off to shifts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-09 10:54:12 -03:00
73ad1ed788 Further fixes to Vite CI
All checks were successful
CI / Go tests & lint (push) Successful in 8s
CI / Frontend tests & type-check (push) Successful in 24s
2026-04-09 10:53:06 -03:00
9dbe18caea Fix failing CI after Vite
Some checks failed
CI / Go tests & lint (push) Successful in 9s
CI / Frontend tests & type-check (push) Failing after 14s
2026-04-09 10:50:39 -03:00
8344bf016f Move from Create React to Vite
Some checks failed
CI / Go tests & lint (push) Successful in 9s
CI / Frontend tests & type-check (push) Failing after 14s
2026-04-09 10:44:50 -03:00
a8e170f7e1 Allow claude to run go vet 2026-04-09 10:23:40 -03:00
33 changed files with 2618 additions and 16239 deletions

View File

@@ -9,7 +9,8 @@
"Bash(go tool cover -func=coverage.out)",
"Bash(tea issue:*)",
"Bash(go test:*)",
"Bash(npm test:*)"
"Bash(npm test:*)",
"Bash(go vet:*)"
]
}
}

View File

@@ -36,7 +36,7 @@ jobs:
- name: Install dependencies
working-directory: web
run: npm install
run: npm install && npm exec -- allow-scripts
- name: Type check
working-directory: web
@@ -44,4 +44,4 @@ jobs:
- name: Run tests
working-directory: web
run: CI=true npm test -- --watchAll=false
run: npm test

View File

@@ -45,7 +45,7 @@ All API routes are prefixed `/api/v1`. The Go binary serves the compiled React a
### React Frontend
Standard CRA layout in `web/src/`:
Vite + React + TypeScript in `web/src/`. Tests use Vitest with jsdom.
- `api.ts` — typed fetch wrapper; reads JWT from `localStorage`, prefixes `BASE = '/api/v1'`
- `auth.tsx``AuthProvider` context; decodes the JWT payload to expose `role` and `volunteerID`

View File

@@ -1,8 +1,8 @@
# Stage 1: Build React frontend
FROM node:22-alpine AS frontend
WORKDIR /app/web
COPY web/package*.json ./
RUN npm install
COPY web/package*.json web/.npmrc ./
RUN npm install && npm exec -- allow-scripts
COPY web/ ./
RUN npm run build
@@ -19,7 +19,7 @@ FROM alpine:3.21
RUN apk add --no-cache ca-certificates tzdata
WORKDIR /app
COPY --from=backend /walkies ./walkies
COPY --from=frontend /app/web/build ./web/dist
COPY --from=frontend /app/web/dist ./web/dist
EXPOSE 8080
ENV STATIC_DIR=/app/web/dist
CMD ["./walkies"]

View File

@@ -3,7 +3,7 @@ version: '3'
vars:
BINARY: walkies
WEB_DIR: web
STATIC_DIR: "{{.WEB_DIR}}/build"
STATIC_DIR: "{{.WEB_DIR}}/dist"
tasks:
default:
@@ -15,7 +15,9 @@ tasks:
web:install:
desc: Install frontend dependencies
dir: "{{.WEB_DIR}}"
cmd: npm install
cmds:
- npm install
- npm exec -- allow-scripts
sources:
- package.json
generates:
@@ -31,20 +33,22 @@ tasks:
- public/**/*
- package.json
- tsconfig.json
- vite.config.ts
- index.html
generates:
- build/**/*
- dist/**/*
web:dev:
desc: Start frontend dev server (hot reload on :3000)
dir: "{{.WEB_DIR}}"
deps: [web:install]
cmd: npm start
cmd: npm run dev
web:test:
desc: Run frontend tests
dir: "{{.WEB_DIR}}"
deps: [web:install]
cmd: npm test -- --watchAll=false
cmd: npm test
# ── Backend ─────────────────────────────────────────────────────────────────
@@ -121,7 +125,7 @@ tasks:
desc: Remove build artifacts
cmds:
- rm -f {{.BINARY}}
- rm -rf {{.WEB_DIR}}/build
- rm -rf {{.WEB_DIR}}/dist
tidy:
desc: Tidy Go modules

View File

@@ -80,25 +80,20 @@ func (s *Store) Create(ctx context.Context, volunteerID int64, in CreateInput) (
func (s *Store) GetByID(ctx context.Context, id int64) (*Request, error) {
req := &Request{}
var startsAt, endsAt, createdAt, updatedAt string
var reason sql.NullString
var reviewedBy sql.NullInt64
var reviewedAt sql.NullString
var reviewedAt sql.NullTime
err := s.db.QueryRowContext(ctx,
`SELECT id, volunteer_id, starts_at, ends_at, reason, status, reviewed_by, reviewed_at, created_at, updated_at
FROM time_off_requests WHERE id = ?`, id,
).Scan(&req.ID, &req.VolunteerID, &startsAt, &endsAt, &reason, &req.Status, &reviewedBy, &reviewedAt, &createdAt, &updatedAt)
).Scan(&req.ID, &req.VolunteerID, &req.StartsAt, &req.EndsAt, &reason, &req.Status, &reviewedBy, &reviewedAt, &req.CreatedAt, &req.UpdatedAt)
if errors.Is(err, sql.ErrNoRows) {
return nil, ErrNotFound
}
if err != nil {
return nil, fmt.Errorf("get time off request: %w", err)
}
req.StartsAt, _ = time.Parse("2006-01-02 15:04:05", startsAt)
req.EndsAt, _ = time.Parse("2006-01-02 15:04:05", endsAt)
req.CreatedAt, _ = time.Parse("2006-01-02 15:04:05", createdAt)
req.UpdatedAt, _ = time.Parse("2006-01-02 15:04:05", updatedAt)
if reason.Valid {
req.Reason = reason.String
}
@@ -106,8 +101,7 @@ func (s *Store) GetByID(ctx context.Context, id int64) (*Request, error) {
req.ReviewedBy = &reviewedBy.Int64
}
if reviewedAt.Valid {
t, _ := time.Parse("2006-01-02 15:04:05", reviewedAt.String)
req.ReviewedAt = &t
req.ReviewedAt = &reviewedAt.Time
}
return req, nil
}
@@ -130,17 +124,12 @@ func (s *Store) List(ctx context.Context, volunteerID int64) ([]Request, error)
var requests []Request
for rows.Next() {
var req Request
var startsAt, endsAt, createdAt, updatedAt string
var reason sql.NullString
var reviewedBy sql.NullInt64
var reviewedAt sql.NullString
if err := rows.Scan(&req.ID, &req.VolunteerID, &startsAt, &endsAt, &reason, &req.Status, &reviewedBy, &reviewedAt, &createdAt, &updatedAt); err != nil {
var reviewedAt sql.NullTime
if err := rows.Scan(&req.ID, &req.VolunteerID, &req.StartsAt, &req.EndsAt, &reason, &req.Status, &reviewedBy, &reviewedAt, &req.CreatedAt, &req.UpdatedAt); err != nil {
return nil, err
}
req.StartsAt, _ = time.Parse("2006-01-02 15:04:05", startsAt)
req.EndsAt, _ = time.Parse("2006-01-02 15:04:05", endsAt)
req.CreatedAt, _ = time.Parse("2006-01-02 15:04:05", createdAt)
req.UpdatedAt, _ = time.Parse("2006-01-02 15:04:05", updatedAt)
if reason.Valid {
req.Reason = reason.String
}
@@ -148,8 +137,7 @@ func (s *Store) List(ctx context.Context, volunteerID int64) ([]Request, error)
req.ReviewedBy = &reviewedBy.Int64
}
if reviewedAt.Valid {
t, _ := time.Parse("2006-01-02 15:04:05", reviewedAt.String)
req.ReviewedAt = &t
req.ReviewedAt = &reviewedAt.Time
}
requests = append(requests, req)
}

8
web/.gitignore vendored
View File

@@ -1,15 +1,11 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
/dist
# misc
.DS_Store
@@ -19,5 +15,3 @@
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

1
web/.npmrc Normal file
View File

@@ -0,0 +1 @@
ignore-scripts=true

View File

@@ -1,46 +1,21 @@
# Getting Started with Create React App
# Walkies Frontend
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
React + TypeScript frontend built with [Vite](https://vite.dev/). Tests run with [Vitest](https://vitest.dev/).
## Available Scripts
In the project directory, you can run:
### `npm run dev`
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
Starts the development server on [http://localhost:3000](http://localhost:3000) with hot module replacement. API requests to `/api` are proxied to `http://localhost:8080`.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
Runs all tests once using Vitest with jsdom.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
Type-checks with `tsc` then builds the app for production into the `dist` folder.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
### `npm run preview`
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you cant go back!**
If you arent satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point youre on your own.
You dont have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldnt feel obligated to use this feature. However we understand that this tool wouldnt be useful if you couldnt customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
Serves the production build locally for previewing.

18
web/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Walkies - Volunteer scheduling" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<title>Walkies</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

18303
web/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -2,52 +2,38 @@
"name": "web",
"version": "0.1.0",
"private": true,
"type": "module",
"dependencies": {
"@lavamoat/preinstall-always-fail": "^3.0.0",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-router-dom": "^7.13.1"
},
"scripts": {
"dev": "vite",
"build": "tsc -b tsconfig.app.json && vite build",
"preview": "vite preview",
"test": "vitest run"
},
"devDependencies": {
"@lavamoat/allow-scripts": "^5.0.1",
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.126",
"@testing-library/user-event": "^14.6.1",
"@types/node": "^25.5.2",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@types/react-router-dom": "^5.3.3",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"react-router-dom": "^7.13.1",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
"@vitejs/plugin-react": "^6.0.1",
"@vitest/coverage-v8": "^4.1.4",
"jsdom": "^29.0.2",
"typescript": "^6.0.2",
"vite": "^8.0.8",
"vitest": "^4.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"jest": {
"moduleNameMapper": {
"^react-router-dom$": "<rootDir>/node_modules/react-router-dom/dist/index.js",
"^react-router$": "<rootDir>/node_modules/react-router/dist/development/index.js",
"^react-router/dom$": "<rootDir>/node_modules/react-router/dist/development/dom-export.js"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
"lavamoat": {
"allowScripts": {
"@lavamoat/preinstall-always-fail": false
}
}
}

View File

@@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

View File

@@ -1,23 +1,23 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { vi, type Mock } from 'vitest';
import App from './App';
import { api } from './api';
// Mock all API calls so the app renders without a backend
jest.mock('./api', () => ({
vi.mock('./api', () => ({
api: {
getSetupStatus: jest.fn(),
createSetupAdmin: jest.fn(),
listVolunteers: jest.fn().mockResolvedValue([]),
listSchedules: jest.fn().mockResolvedValue([]),
listTimeOff: jest.fn().mockResolvedValue([]),
listNotifications: jest.fn().mockResolvedValue([]),
getVolunteer: jest.fn().mockResolvedValue(null),
getSetupStatus: vi.fn(),
createSetupAdmin: vi.fn(),
listVolunteers: vi.fn().mockResolvedValue([]),
listSchedules: vi.fn().mockResolvedValue([]),
listTimeOff: vi.fn().mockResolvedValue([]),
listNotifications: vi.fn().mockResolvedValue([]),
getVolunteer: vi.fn().mockResolvedValue(null),
},
OPERATIONAL_ROLES: [],
}));
const mockGetSetupStatus = api.getSetupStatus as jest.Mock;
const mockGetSetupStatus = api.getSetupStatus as Mock;
beforeEach(() => {
localStorage.clear();

View File

@@ -1,19 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

10
web/src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

View File

@@ -1,17 +1,18 @@
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { vi, type Mock } from 'vitest';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import Activate from './Activate';
import { api } from '../api';
import { AuthProvider } from '../auth';
jest.mock('../api', () => ({
vi.mock('../api', () => ({
api: {
activate: jest.fn(),
activate: vi.fn(),
},
}));
const mockActivate = api.activate as jest.Mock;
const mockActivate = api.activate as Mock;
function renderActivate(token = 'valid-token') {
return render(

View File

@@ -1,14 +1,15 @@
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { vi, type Mock } from 'vitest';
import { MemoryRouter } from 'react-router-dom';
import Profile from './Profile';
import { api, Volunteer } from '../api';
import { AuthProvider } from '../auth';
jest.mock('../api', () => ({
vi.mock('../api', () => ({
api: {
getVolunteer: jest.fn(),
updateVolunteer: jest.fn(),
getVolunteer: vi.fn(),
updateVolunteer: vi.fn(),
},
}));
@@ -21,8 +22,8 @@ function buildFakeJWT(payload: object): string {
return `${header}.${body}.fakesig`;
}
const mockGetVolunteer = api.getVolunteer as jest.Mock;
const mockUpdateVolunteer = api.updateVolunteer as jest.Mock;
const mockGetVolunteer = api.getVolunteer as Mock;
const mockUpdateVolunteer = api.updateVolunteer as Mock;
const baseVolunteer: Volunteer = {
id: 5,

View File

@@ -1,32 +1,36 @@
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { vi, type Mock } from 'vitest';
import { MemoryRouter } from 'react-router-dom';
import Schedules from './Schedules';
import { api, ShiftInstance, ShiftTemplate } from '../api';
jest.mock('../api', () => ({
...jest.requireActual('../api'),
vi.mock('../api', async () => {
const actual = await vi.importActual<typeof import('../api')>('../api');
return {
...actual,
api: {
listShifts: jest.fn(),
listShiftTemplates: jest.fn(),
listVolunteers: jest.fn(),
listTimeOff: jest.fn(),
generateShifts: jest.fn(),
publishShifts: jest.fn(),
unpublishShifts: jest.fn(),
updateShift: jest.fn(),
confirmShift: jest.fn(),
createShiftTemplate: jest.fn(),
updateShiftTemplate: jest.fn(),
deleteShiftTemplate: jest.fn(),
listShifts: vi.fn(),
listShiftTemplates: vi.fn(),
listVolunteers: vi.fn(),
listTimeOff: vi.fn(),
generateShifts: vi.fn(),
publishShifts: vi.fn(),
unpublishShifts: vi.fn(),
updateShift: vi.fn(),
confirmShift: vi.fn(),
createShiftTemplate: vi.fn(),
updateShiftTemplate: vi.fn(),
deleteShiftTemplate: vi.fn(),
},
};
});
vi.mock('../auth', () => ({
useAuth: vi.fn(),
}));
jest.mock('../auth', () => ({
useAuth: jest.fn(),
}));
const { useAuth } = require('../auth');
const { useAuth } = await import('../auth');
const mockDraftInstance: ShiftInstance = {
id: 1,
@@ -75,8 +79,8 @@ function renderAt(path: string) {
describe('Schedules (volunteer view)', () => {
beforeEach(() => {
useAuth.mockReturnValue({ role: 'volunteer', volunteerID: 10 });
(api.listShifts as jest.Mock).mockResolvedValue([mockPublishedInstance]);
(useAuth as Mock).mockReturnValue({ role: 'volunteer', volunteerID: 10 });
(api.listShifts as Mock).mockResolvedValue([mockPublishedInstance]);
});
it('renders published shifts for a volunteer', async () => {
@@ -98,9 +102,9 @@ describe('Schedules (volunteer view)', () => {
describe('Schedules (admin shifts view)', () => {
beforeEach(() => {
useAuth.mockReturnValue({ role: 'admin', volunteerID: 1 });
(api.listShifts as jest.Mock).mockResolvedValue([mockDraftInstance]);
(api.listShiftTemplates as jest.Mock).mockResolvedValue([mockTemplate]);
(useAuth as Mock).mockReturnValue({ role: 'admin', volunteerID: 1 });
(api.listShifts as Mock).mockResolvedValue([mockDraftInstance]);
(api.listShiftTemplates as Mock).mockResolvedValue([mockTemplate]);
});
it('shows Generate and Publish buttons when drafts exist', async () => {
@@ -111,7 +115,7 @@ describe('Schedules (admin shifts view)', () => {
});
it('calls generateShifts on Generate click', async () => {
(api.generateShifts as jest.Mock).mockResolvedValue([mockDraftInstance]);
(api.generateShifts as Mock).mockResolvedValue([mockDraftInstance]);
renderAt('/schedules');
await waitFor(() => expect(screen.getByText('Generate')).toBeInTheDocument());
fireEvent.click(screen.getByText('Generate'));
@@ -119,8 +123,8 @@ describe('Schedules (admin shifts view)', () => {
});
it('calls publishShifts on Publish click', async () => {
(api.publishShifts as jest.Mock).mockResolvedValue({ year: 2026, month: 4 });
(api.listShifts as jest.Mock)
(api.publishShifts as Mock).mockResolvedValue({ year: 2026, month: 4 });
(api.listShifts as Mock)
.mockResolvedValueOnce([mockDraftInstance])
.mockResolvedValue([{ ...mockDraftInstance, status: 'published' }]);
@@ -131,7 +135,7 @@ describe('Schedules (admin shifts view)', () => {
});
it('shows Unpublish button when all shifts are published', async () => {
(api.listShifts as jest.Mock).mockResolvedValue([mockPublishedInstance]);
(api.listShifts as Mock).mockResolvedValue([mockPublishedInstance]);
renderAt('/schedules');
await waitFor(() => expect(screen.getByText('Unpublish')).toBeInTheDocument());
});
@@ -143,11 +147,11 @@ describe('Schedules (admin shifts view)', () => {
});
it('opens edit form with volunteer checkboxes when Edit is clicked', async () => {
(api.listVolunteers as jest.Mock).mockResolvedValue([
(api.listVolunteers as Mock).mockResolvedValue([
{ id: 5, name: 'Alice', active: true, operational_roles: 'Dog Shelter Volunteer', is_trainee: false },
{ id: 6, name: 'Bob', active: true, operational_roles: 'Behaviour Team', is_trainee: false },
]);
(api.listTimeOff as jest.Mock).mockResolvedValue([]);
(api.listTimeOff as Mock).mockResolvedValue([]);
renderAt('/schedules');
await waitFor(() => expect(screen.getByText('Edit')).toBeInTheDocument());
fireEvent.click(screen.getByText('Edit'));
@@ -157,11 +161,11 @@ describe('Schedules (admin shifts view)', () => {
});
it('hides volunteers with approved time off on the shift date', async () => {
(api.listVolunteers as jest.Mock).mockResolvedValue([
(api.listVolunteers as Mock).mockResolvedValue([
{ id: 5, name: 'Alice', active: true, operational_roles: 'Dog Shelter Volunteer', is_trainee: false },
{ id: 6, name: 'Bob', active: true, operational_roles: 'Behaviour Team', is_trainee: false },
]);
(api.listTimeOff as jest.Mock).mockResolvedValue([
(api.listTimeOff as Mock).mockResolvedValue([
{ id: 1, volunteer_id: 6, starts_at: '2026-04-06T00:00:00Z', ends_at: '2026-04-07T00:00:00Z', status: 'approved' },
]);
renderAt('/schedules');
@@ -183,8 +187,8 @@ describe('Schedules (admin shifts view)', () => {
describe('Schedules (admin templates view)', () => {
beforeEach(() => {
useAuth.mockReturnValue({ role: 'admin', volunteerID: 1 });
(api.listShiftTemplates as jest.Mock).mockResolvedValue([mockTemplate]);
(useAuth as Mock).mockReturnValue({ role: 'admin', volunteerID: 1 });
(api.listShiftTemplates as Mock).mockResolvedValue([mockTemplate]);
});
it('renders templates at /schedules/templates', async () => {
@@ -201,8 +205,8 @@ describe('Schedules (admin templates view)', () => {
});
it('deletes a template', async () => {
(api.deleteShiftTemplate as jest.Mock).mockResolvedValue(undefined);
window.confirm = jest.fn().mockReturnValue(true);
(api.deleteShiftTemplate as Mock).mockResolvedValue(undefined);
window.confirm = vi.fn().mockReturnValue(true);
renderAt('/schedules/templates');
await waitFor(() => expect(screen.getAllByText('Delete')[0]).toBeInTheDocument());
fireEvent.click(screen.getAllByText('Delete')[0]);

View File

@@ -1,24 +1,25 @@
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { vi, type Mock } from 'vitest';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import Setup from './Setup';
import { api } from '../api';
import { AuthProvider } from '../auth';
jest.mock('../api', () => ({
vi.mock('../api', () => ({
api: {
getSetupStatus: jest.fn(),
createSetupAdmin: jest.fn(),
getSetupStatus: vi.fn(),
createSetupAdmin: vi.fn(),
},
}));
// Mock useSetup from App to provide setNeedsSetup
const mockSetNeedsSetup = jest.fn();
jest.mock('../App', () => ({
const mockSetNeedsSetup = vi.fn();
vi.mock('../App', () => ({
useSetup: () => ({ setNeedsSetup: mockSetNeedsSetup }),
}));
const mockCreateSetupAdmin = api.createSetupAdmin as jest.Mock;
const mockCreateSetupAdmin = api.createSetupAdmin as Mock;
function renderSetup() {
return render(

View File

@@ -1,11 +1,12 @@
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { vi, type Mock } from 'vitest';
import { MemoryRouter } from 'react-router-dom';
import TimeOff from './TimeOff';
import { api, TimeOffRequest, ApiError } from '../api';
import { AuthProvider } from '../auth';
jest.mock('../api', () => {
vi.mock('../api', () => {
class MockApiError extends Error {
status: number;
data: any;
@@ -17,24 +18,24 @@ jest.mock('../api', () => {
}
return {
api: {
listTimeOff: jest.fn(),
createTimeOff: jest.fn(),
updateTimeOff: jest.fn(),
deleteTimeOff: jest.fn(),
reviewTimeOff: jest.fn(),
getRemovedShifts: jest.fn(),
listVolunteers: jest.fn(),
listTimeOff: vi.fn(),
createTimeOff: vi.fn(),
updateTimeOff: vi.fn(),
deleteTimeOff: vi.fn(),
reviewTimeOff: vi.fn(),
getRemovedShifts: vi.fn(),
listVolunteers: vi.fn(),
},
ApiError: MockApiError,
};
});
const mockListTimeOff = api.listTimeOff as jest.Mock;
const mockCreateTimeOff = api.createTimeOff as jest.Mock;
const mockDeleteTimeOff = api.deleteTimeOff as jest.Mock;
const mockReviewTimeOff = api.reviewTimeOff as jest.Mock;
const mockGetRemovedShifts = api.getRemovedShifts as jest.Mock;
const mockListVolunteers = api.listVolunteers as jest.Mock;
const mockListTimeOff = api.listTimeOff as Mock;
const mockCreateTimeOff = api.createTimeOff as Mock;
const mockDeleteTimeOff = api.deleteTimeOff as Mock;
const mockReviewTimeOff = api.reviewTimeOff as Mock;
const mockGetRemovedShifts = api.getRemovedShifts as Mock;
const mockListVolunteers = api.listVolunteers as Mock;
function buildFakeJWT(payload: object): string {
const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));
@@ -90,7 +91,7 @@ function renderAsAdmin() {
}
beforeEach(() => {
jest.clearAllMocks();
vi.clearAllMocks();
localStorage.clear();
mockListVolunteers.mockResolvedValue([]);
});
@@ -147,10 +148,10 @@ describe('TimeOff page', () => {
it('shows conflict warning on 409 and allows confirmation', async () => {
mockListTimeOff.mockResolvedValue([]);
const { ApiError: MockApiError } = jest.requireMock('../api');
const { ApiError: MockApiError } = await vi.importMock<typeof import('../api')>('../api');
mockCreateTimeOff
.mockRejectedValueOnce(
new MockApiError('conflict', 409, {
new (MockApiError as any)('conflict', 409, {
message: 'Time off conflicts with assigned shifts.',
conflicts: [
{ instance_id: 100, name: 'Morning Walk', date: '2026-06-01', start_time: '08:00', end_time: '12:00' },

View File

@@ -157,7 +157,7 @@ export default function TimeOff() {
onChange={e => setForm(f => ({ ...f, volunteer_id: Number(e.target.value) }))}
>
<option value={0}>Myself</option>
{volunteers.map(v => (
{volunteers.filter(v => v.id !== volunteerID).map(v => (
<option key={v.id} value={v.id}>{v.name}</option>
))}
</select>
@@ -226,8 +226,8 @@ export default function TimeOff() {
{requests.map(r => (
<tr key={r.id}>
{role === 'admin' && <td>{volunteerName(r.volunteer_id)}</td>}
<td>{new Date(r.starts_at).toLocaleDateString()}</td>
<td>{new Date(r.ends_at).toLocaleDateString()}</td>
<td>{new Date(r.starts_at).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</td>
<td>{new Date(r.ends_at).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</td>
<td>{r.reason ?? '—'}</td>
<td><span className={statusClass(r.status)}>{r.status}</span></td>
<td>

View File

@@ -1,24 +1,25 @@
import React from 'react';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { vi, type Mock } from 'vitest';
import { MemoryRouter } from 'react-router-dom';
import Volunteers from './Volunteers';
import { api, AdminVolunteer } from '../api';
import { AuthProvider } from '../auth';
jest.mock('../api', () => ({
vi.mock('../api', () => ({
api: {
listVolunteers: jest.fn(),
createVolunteer: jest.fn(),
updateVolunteer: jest.fn(),
resendInvite: jest.fn(),
listVolunteers: vi.fn(),
createVolunteer: vi.fn(),
updateVolunteer: vi.fn(),
resendInvite: vi.fn(),
},
OPERATIONAL_ROLES: ['Behaviour Team', 'Dog Log Monitor', 'Dog Shelter Volunteer', 'Trainee', 'Floater'],
}));
const mockListVolunteers = api.listVolunteers as jest.Mock;
const mockCreateVolunteer = api.createVolunteer as jest.Mock;
const mockUpdateVolunteer = api.updateVolunteer as jest.Mock;
const mockResendInvite = api.resendInvite as jest.Mock;
const mockListVolunteers = api.listVolunteers as Mock;
const mockCreateVolunteer = api.createVolunteer as Mock;
const mockUpdateVolunteer = api.updateVolunteer as Mock;
const mockResendInvite = api.resendInvite as Mock;
function buildFakeJWT(payload: object): string {
const header = btoa(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));

View File

@@ -1 +0,0 @@
/// <reference types="react-scripts" />

View File

@@ -1,15 +0,0 @@
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

View File

@@ -1,9 +1,22 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
// React Router v7 requires TextEncoder/TextDecoder which jsdom (CRA 5) does not provide.
import { TextEncoder, TextDecoder } from 'util';
Object.assign(global, { TextEncoder, TextDecoder });
// Node 22+ ships a native localStorage (getter on globalThis) that lacks
// .clear()/.getItem()/etc. jsdom doesn't override it. Delete the native
// property and replace it with a spec-compliant Storage implementation.
const store = new Map<string, string>();
const storage: Storage = {
getItem: (key: string) => store.get(key) ?? null,
setItem: (key: string, value: string) => { store.set(key, String(value)); },
removeItem: (key: string) => { store.delete(key); },
clear: () => { store.clear(); },
key: (index: number) => [...store.keys()][index] ?? null,
get length() { return store.size; },
};
delete (globalThis as any).localStorage;
Object.defineProperty(globalThis, 'localStorage', {
value: storage,
writable: true,
configurable: true,
enumerable: true,
});

1
web/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

21
web/tsconfig.app.json Normal file
View File

@@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ES2020",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "ESNext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"exclude": ["src/**/*.test.tsx", "src/**/*.test.ts", "src/setupTests.ts"]
}

View File

@@ -0,0 +1 @@
{"root":["./src/app.tsx","./src/api.ts","./src/auth.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/pages/activate.tsx","./src/pages/dashboard.tsx","./src/pages/login.tsx","./src/pages/profile.tsx","./src/pages/schedules.tsx","./src/pages/setup.tsx","./src/pages/timeoff.tsx","./src/pages/volunteers.tsx"],"version":"6.0.2"}

View File

@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"target": "ES2020",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
@@ -13,14 +9,13 @@
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"module": "ESNext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
"jsx": "react-jsx",
"types": ["vitest/globals"]
},
"include": [
"src"
]
"include": ["src", "vite.config.ts"]
}

1
web/tsconfig.tsbuildinfo Normal file
View File

@@ -0,0 +1 @@
{"root":["./src/app.test.tsx","./src/app.tsx","./src/api.ts","./src/auth.tsx","./src/main.tsx","./src/setuptests.ts","./src/vite-env.d.ts","./src/pages/activate.test.tsx","./src/pages/activate.tsx","./src/pages/dashboard.tsx","./src/pages/login.tsx","./src/pages/profile.test.tsx","./src/pages/profile.tsx","./src/pages/schedules.test.tsx","./src/pages/schedules.tsx","./src/pages/setup.test.tsx","./src/pages/setup.tsx","./src/pages/timeoff.tsx","./src/pages/volunteers.test.tsx","./src/pages/volunteers.tsx","./vite.config.ts"],"errors":true,"version":"6.0.2"}

23
web/vite.config.ts Normal file
View File

@@ -0,0 +1,23 @@
/// <reference types="vitest/config" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
proxy: {
'/api': 'http://localhost:8080',
},
},
build: {
outDir: 'dist',
},
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/setupTests.ts',
css: true,
unstubGlobals: true,
},
});