poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Extract reusable UI components and add TDD documentation

Browse Source 
- Add comprehensive TDD documentation to CLAUDE.md with coverage requirements and examples
- Extract reusable UI components to frontend/src/components/ui/ (Modal, FormInput, Button, Alert, etc.)
- Add shared constants (schedulePresets) and utility hooks (useCrudMutation, useFormValidation)
- Update frontend/CLAUDE.md with component documentation and usage examples
- Refactor CreateTaskModal to use shared components and constants
- Fix test assertions to be more robust and accurate across all test files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-10 15:27:27 -05:00
parent 18c9a69d75
commit 8c52d6a275
48 changed files with 2780 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/Schedule/__tests__/Sidebar.test.tsx
View File

@@ -217,8 +217,9 @@ describe('Sidebar', () => {
{ wrapper: createDndWrapper() }
);
const drSmith = screen.getByText('Dr. Smith').closest('div');
const confRoom = screen.getByText('Conference Room A').closest('div');
// The height style is on the resource row container (3 levels up from the text)
const drSmith = screen.getByText('Dr. Smith').closest('[style*="height"]');
const confRoom = screen.getByText('Conference Room A').closest('[style*="height"]');
expect(drSmith).toHaveStyle({ height: '100px' });
expect(confRoom).toHaveStyle({ height: '120px' });
@@ -420,7 +421,8 @@ describe('Sidebar', () => {
{ wrapper: createDndWrapper() }
);
const appointment = screen.getByText('John Doe').closest('div');
// Navigate up to the draggable container which has the svg
const appointment = screen.getByText('John Doe').closest('.cursor-grab');
const svg = appointment?.querySelector('svg');
expect(svg).toBeInTheDocument();
});
@@ -544,8 +546,9 @@ describe('Sidebar', () => {
{ wrapper: createDndWrapper() }
);
const appointmentCard = screen.getByText('John Doe').closest('div');
expect(appointmentCard).toHaveClass('cursor-grab');
// Use the specific class selector since .closest('div') returns the inner div
const appointmentCard = screen.getByText('John Doe').closest('.cursor-grab');
expect(appointmentCard).toBeInTheDocument();
});
it('should apply active cursor-grabbing class to draggable items', () => {
@@ -558,8 +561,9 @@ describe('Sidebar', () => {
{ wrapper: createDndWrapper() }
);
const appointmentCard = screen.getByText('John Doe').closest('div');
expect(appointmentCard).toHaveClass('active:cursor-grabbing');
// Verify the draggable container has the active:cursor-grabbing class
const appointmentCard = screen.getByText('John Doe').closest('[class*="active:cursor-grabbing"]');
expect(appointmentCard).toBeInTheDocument();
});
it('should render pending items with orange left border', () => {
@@ -572,8 +576,9 @@ describe('Sidebar', () => {
{ wrapper: createDndWrapper() }
);
const appointmentCard = screen.getByText('John Doe').closest('div');
expect(appointmentCard).toHaveClass('border-l-orange-400');
// Use the specific class selector
const appointmentCard = screen.getByText('John Doe').closest('.border-l-orange-400');
expect(appointmentCard).toBeInTheDocument();
});
it('should apply shadow on hover for draggable items', () => {
@@ -586,8 +591,9 @@ describe('Sidebar', () => {
{ wrapper: createDndWrapper() }
);
const appointmentCard = screen.getByText('John Doe').closest('div');
expect(appointmentCard).toHaveClass('hover:shadow-md');
// Use the specific class selector
const appointmentCard = screen.getByText('John Doe').closest('[class*="hover:shadow-md"]');
expect(appointmentCard).toBeInTheDocument();
});
});
@@ -649,7 +655,8 @@ describe('Sidebar', () => {
{ wrapper: createDndWrapper() }
);
const header = screen.getByText('Resources').parentElement;
// The height style is on the header div itself
const header = screen.getByText('Resources').closest('[style*="height"]');
expect(header).toHaveStyle({ height: '48px' });
});