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

Add global navigation search, cancellation policies, and UI improvements

Browse Source 
- Add global search in top bar for navigating to dashboard pages
- Add cancellation policy settings (window hours, late fee, deposit refund)
- Display booking policies on customer confirmation page
- Filter API tokens by sandbox/live mode
- Widen settings layout and full-width site builder
- Add help documentation search with OpenAI integration
- Add blocked time ranges API for calendar visualization
- Update business hours settings with holiday management

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-25 23:39:07 -05:00
parent 8391ecbf88
commit 416cd7059b
174 changed files with 31835 additions and 4921 deletions
Download Patch File Download Diff File Expand all files Collapse all files

421
frontend/src/components/navigation/__tests__/SidebarComponents.test.tsx Normal file
View File

@@ -0,0 +1,421 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import React from 'react';
import {
SidebarSection,
SidebarItem,
SidebarDropdown,
SidebarSubItem,
SidebarDivider,
SettingsSidebarSection,
SettingsAccordionSection,
SettingsSidebarItem,
} from '../SidebarComponents';
import { Home, Settings, Users, ChevronDown } from 'lucide-react';
const renderWithRouter = (component: React.ReactElement, initialPath = '/') => {
return render(
React.createElement(MemoryRouter, { initialEntries: [initialPath] }, component)
);
};
describe('SidebarComponents', () => {
describe('SidebarSection', () => {
it('renders children', () => {
render(
React.createElement(SidebarSection, {},
React.createElement('div', { 'data-testid': 'child' }, 'Child content')
)
);
expect(screen.getByTestId('child')).toBeInTheDocument();
});
it('renders title when provided and not collapsed', () => {
render(
React.createElement(SidebarSection, { title: 'Test Section', isCollapsed: false },
React.createElement('div', {}, 'Content')
)
);
expect(screen.getByText('Test Section')).toBeInTheDocument();
});
it('hides title when collapsed', () => {
render(
React.createElement(SidebarSection, { title: 'Test Section', isCollapsed: true },
React.createElement('div', {}, 'Content')
)
);
expect(screen.queryByText('Test Section')).not.toBeInTheDocument();
});
it('shows divider when collapsed with title', () => {
const { container } = render(
React.createElement(SidebarSection, { title: 'Test', isCollapsed: true },
React.createElement('div', {}, 'Content')
)
);
expect(container.querySelector('.border-t')).toBeInTheDocument();
});
});
describe('SidebarItem', () => {
it('renders link with icon and label', () => {
renderWithRouter(
React.createElement(SidebarItem, {
to: '/dashboard',
icon: Home,
label: 'Dashboard',
})
);
expect(screen.getByText('Dashboard')).toBeInTheDocument();
});
it('hides label when collapsed', () => {
renderWithRouter(
React.createElement(SidebarItem, {
to: '/dashboard',
icon: Home,
label: 'Dashboard',
isCollapsed: true,
})
);
expect(screen.queryByText('Dashboard')).not.toBeInTheDocument();
});
it('applies active styles when on matching path', () => {
renderWithRouter(
React.createElement(SidebarItem, {
to: '/dashboard',
icon: Home,
label: 'Dashboard',
}),
'/dashboard'
);
const link = screen.getByRole('link');
expect(link).toHaveClass('bg-brand-text/10');
});
it('matches exactly when exact prop is true', () => {
renderWithRouter(
React.createElement(SidebarItem, {
to: '/dashboard',
icon: Home,
label: 'Dashboard',
exact: true,
}),
'/dashboard/settings'
);
const link = screen.getByRole('link');
expect(link).not.toHaveClass('bg-brand-text/10');
});
it('renders as disabled div when disabled', () => {
renderWithRouter(
React.createElement(SidebarItem, {
to: '/dashboard',
icon: Home,
label: 'Dashboard',
disabled: true,
})
);
expect(screen.queryByRole('link')).not.toBeInTheDocument();
expect(screen.getByTitle('Dashboard')).toBeInTheDocument();
});
it('shows badge when provided', () => {
renderWithRouter(
React.createElement(SidebarItem, {
to: '/dashboard',
icon: Home,
label: 'Dashboard',
badge: '5',
})
);
expect(screen.getByText('5')).toBeInTheDocument();
});
it('shows badge element when provided', () => {
renderWithRouter(
React.createElement(SidebarItem, {
to: '/dashboard',
icon: Home,
label: 'Dashboard',
badgeElement: React.createElement('span', { 'data-testid': 'custom-badge' }, 'New'),
})
);
expect(screen.getByTestId('custom-badge')).toBeInTheDocument();
});
it('shows lock icon when locked', () => {
renderWithRouter(
React.createElement(SidebarItem, {
to: '/dashboard',
icon: Home,
label: 'Dashboard',
locked: true,
})
);
// Lock icon should be rendered
expect(screen.getByRole('link')).toBeInTheDocument();
});
it('uses settings variant styling', () => {
renderWithRouter(
React.createElement(SidebarItem, {
to: '/settings',
icon: Settings,
label: 'Settings',
variant: 'settings',
}),
'/settings'
);
const link = screen.getByRole('link');
expect(link).toHaveClass('bg-brand-50');
});
});
describe('SidebarDropdown', () => {
it('renders dropdown button with label', () => {
renderWithRouter(
React.createElement(SidebarDropdown, {
icon: Users,
label: 'Users',
children: React.createElement('div', {}, 'Content'),
})
);
expect(screen.getByText('Users')).toBeInTheDocument();
});
it('toggles content on click', () => {
renderWithRouter(
React.createElement(SidebarDropdown, {
icon: Users,
label: 'Users',
children: React.createElement('div', { 'data-testid': 'dropdown-content' }, 'Content'),
})
);
const button = screen.getByRole('button');
fireEvent.click(button);
expect(screen.getByTestId('dropdown-content')).toBeInTheDocument();
});
it('starts open when defaultOpen is true', () => {
renderWithRouter(
React.createElement(SidebarDropdown, {
icon: Users,
label: 'Users',
defaultOpen: true,
children: React.createElement('div', { 'data-testid': 'dropdown-content' }, 'Content'),
})
);
expect(screen.getByTestId('dropdown-content')).toBeInTheDocument();
});
it('opens when path matches isActiveWhen', () => {
renderWithRouter(
React.createElement(SidebarDropdown, {
icon: Users,
label: 'Users',
isActiveWhen: ['/users'],
children: React.createElement('div', { 'data-testid': 'dropdown-content' }, 'Content'),
}),
'/users/list'
);
expect(screen.getByTestId('dropdown-content')).toBeInTheDocument();
});
it('hides content when collapsed', () => {
renderWithRouter(
React.createElement(SidebarDropdown, {
icon: Users,
label: 'Users',
isCollapsed: true,
defaultOpen: true,
children: React.createElement('div', { 'data-testid': 'dropdown-content' }, 'Content'),
})
);
expect(screen.queryByTestId('dropdown-content')).not.toBeInTheDocument();
});
});
describe('SidebarSubItem', () => {
it('renders sub-item link', () => {
renderWithRouter(
React.createElement(SidebarSubItem, {
to: '/users/list',
icon: Users,
label: 'User List',
})
);
expect(screen.getByText('User List')).toBeInTheDocument();
expect(screen.getByRole('link')).toHaveAttribute('href', '/users/list');
});
it('applies active styles when on matching path', () => {
renderWithRouter(
React.createElement(SidebarSubItem, {
to: '/users/list',
icon: Users,
label: 'User List',
}),
'/users/list'
);
const link = screen.getByRole('link');
expect(link).toHaveClass('bg-brand-text/10');
});
});
describe('SidebarDivider', () => {
it('renders divider', () => {
const { container } = render(React.createElement(SidebarDivider, {}));
expect(container.querySelector('.border-t')).toBeInTheDocument();
});
it('applies collapsed styles', () => {
const { container } = render(React.createElement(SidebarDivider, { isCollapsed: true }));
expect(container.querySelector('.mx-3')).toBeInTheDocument();
});
it('applies expanded styles', () => {
const { container } = render(React.createElement(SidebarDivider, { isCollapsed: false }));
expect(container.querySelector('.mx-4')).toBeInTheDocument();
});
});
describe('SettingsSidebarSection', () => {
it('renders section with title and children', () => {
render(
React.createElement(SettingsSidebarSection, { title: 'General' },
React.createElement('div', { 'data-testid': 'child' }, 'Content')
)
);
expect(screen.getByText('General')).toBeInTheDocument();
expect(screen.getByTestId('child')).toBeInTheDocument();
});
});
describe('SettingsAccordionSection', () => {
it('renders accordion section', () => {
const onToggle = vi.fn();
render(
React.createElement(SettingsAccordionSection, {
title: 'Advanced',
sectionKey: 'advanced',
isOpen: false,
onToggle,
children: React.createElement('div', { 'data-testid': 'content' }, 'Content'),
})
);
expect(screen.getByText('Advanced')).toBeInTheDocument();
});
it('toggles on click', () => {
const onToggle = vi.fn();
render(
React.createElement(SettingsAccordionSection, {
title: 'Advanced',
sectionKey: 'advanced',
isOpen: false,
onToggle,
children: React.createElement('div', {}, 'Content'),
})
);
fireEvent.click(screen.getByRole('button'));
expect(onToggle).toHaveBeenCalledWith('advanced');
});
it('shows content when open', () => {
render(
React.createElement(SettingsAccordionSection, {
title: 'Advanced',
sectionKey: 'advanced',
isOpen: true,
onToggle: vi.fn(),
children: React.createElement('div', { 'data-testid': 'content' }, 'Content'),
})
);
expect(screen.getByTestId('content')).toBeInTheDocument();
});
it('does not render when hasVisibleItems is false', () => {
const { container } = render(
React.createElement(SettingsAccordionSection, {
title: 'Advanced',
sectionKey: 'advanced',
isOpen: true,
onToggle: vi.fn(),
hasVisibleItems: false,
children: React.createElement('div', {}, 'Content'),
})
);
expect(container.firstChild).toBeNull();
});
});
describe('SettingsSidebarItem', () => {
it('renders settings item link', () => {
renderWithRouter(
React.createElement(SettingsSidebarItem, {
to: '/settings/general',
icon: Settings,
label: 'General',
})
);
expect(screen.getByText('General')).toBeInTheDocument();
});
it('renders description when provided', () => {
renderWithRouter(
React.createElement(SettingsSidebarItem, {
to: '/settings/general',
icon: Settings,
label: 'General',
description: 'Basic settings',
})
);
expect(screen.getByText('Basic settings')).toBeInTheDocument();
});
it('shows lock icon when locked', () => {
const { container } = renderWithRouter(
React.createElement(SettingsSidebarItem, {
to: '/settings/premium',
icon: Settings,
label: 'Premium',
locked: true,
})
);
// Lock component should be rendered
expect(container.querySelector('svg')).toBeInTheDocument();
});
it('shows badge element when provided', () => {
renderWithRouter(
React.createElement(SettingsSidebarItem, {
to: '/settings/beta',
icon: Settings,
label: 'Beta Feature',
badgeElement: React.createElement('span', { 'data-testid': 'badge' }, 'Beta'),
})
);
expect(screen.getByTestId('badge')).toBeInTheDocument();
});
it('applies active styles when on matching path', () => {
renderWithRouter(
React.createElement(SettingsSidebarItem, {
to: '/settings/general',
icon: Settings,
label: 'General',
}),
'/settings/general'
);
const link = screen.getByRole('link');
expect(link).toHaveClass('bg-brand-50');
});
});
});