@snapdragonsnursery/react-components 1.3.0 → 1.3.1

package/src/components/EmployeeSearchFilters.test.jsx

@@ -0,0 +1,546 @@
+// Employee Search Filters Component Tests
+// Tests the EmployeeSearchFilters component functionality including filter changes, validation, and UI interactions
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import EmployeeSearchFilters from './EmployeeSearchFilters';
+
+// Mock the UI components
+jest.mock('./ui/input', () => ({
+  Input: ({ value, onChange, placeholder, ...props }) => {
+    return (
+      <input
+        data-testid="input"
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        {...props}
+      />
+    );
+  }
+}));
+
+jest.mock('./ui/select', () => {
+  const MockSelect = ({ value, onChange, children, ...props }) => {
+    return (
+      <select data-testid="select" value={value} onChange={onChange} {...props}>
+        {children}
+      </select>
+    );
+  };
+  
+  const MockSelectOption = ({ value, children, ...props }) => {
+    return (
+      <option value={value} {...props}>
+        {children}
+      </option>
+    );
+  };
+  
+  return {
+    Select: MockSelect,
+    SelectOption: MockSelectOption,
+  };
+});
+
+jest.mock('./ui/date-range-picker', () => ({
+  DateRangePicker: ({ selectedRange, onSelect, placeholder, ...props }) => {
+    return (
+      <div data-testid="date-range-picker">
+        <input
+          data-testid="date-range-input"
+          placeholder={placeholder}
+          value={selectedRange ? `${selectedRange.from?.toISOString() || ''} - ${selectedRange.to?.toISOString() || ''}` : ''}
+          onChange={(e) => {
+            // Simulate date range selection
+            if (e.target.value.includes('2024-01-01')) {
+              onSelect({
+                from: new Date('2024-01-01'),
+                to: new Date('2024-01-31')
+              });
+            } else {
+              onSelect(null);
+            }
+          }}
+          {...props}
+        />
+      </div>
+    );
+  }
+}));
+
+jest.mock('./ui/button', () => ({
+  Button: ({ children, onClick, variant, size, ...props }) => {
+    return (
+      <button
+        data-testid="button"
+        onClick={onClick}
+        data-variant={variant}
+        data-size={size}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+}));
+
+const mockSites = [
+  { site_id: 1, site_name: "Nursery A" },
+  { site_id: 2, site_name: "Nursery B" },
+  { site_id: 3, site_name: "Nursery C" },
+];
+
+const mockRoles = [
+  { role_id: 1, role_name: "Manager" },
+  { role_id: 2, role_name: "Deputy Manager" },
+  { role_id: 3, role_name: "Room Leader" },
+];
+
+const mockManagers = [
+  { entra_id: "manager1", full_name: "John Smith" },
+  { entra_id: "manager2", full_name: "Jane Doe" },
+];
+
+const defaultFilters = {
+  status: "Active",
+  selectedSiteId: "",
+  roleId: "",
+  managerId: "",
+  startDateFrom: "",
+  startDateTo: "",
+  endDateFrom: "",
+  endDateTo: "",
+  termTimeOnly: "",
+  onMaternityLeave: "",
+  dbsNumber: "",
+  minHoursPerWeek: "",
+  sortBy: "surname",
+  sortOrder: "asc",
+};
+
+const defaultProps = {
+  filters: defaultFilters,
+  onFiltersChange: jest.fn(),
+  onApplyFilters: jest.fn(),
+  onClearFilters: jest.fn(),
+  onCancelChanges: jest.fn(),
+  sites: mockSites,
+  roles: mockRoles,
+  managers: mockManagers,
+  activeOnly: true,
+  isAdvancedFiltersOpen: false,
+  onToggleAdvancedFilters: jest.fn(),
+};
+
+describe('EmployeeSearchFilters', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Basic Rendering', () => {
+    it('renders the advanced filters toggle button', () => {
+      render(<EmployeeSearchFilters {...defaultProps} />);
+      
+      expect(screen.getByText('Advanced Filters')).toBeInTheDocument();
+      expect(screen.getByText('Clear Filters')).toBeInTheDocument();
+    });
+
+    it('shows advanced filters when isAdvancedFiltersOpen is true', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      // Use getAllByText to handle multiple elements with same text
+      const statusLabels = screen.getAllByText('Status');
+      expect(statusLabels.length).toBeGreaterThan(0);
+      const siteLabels = screen.getAllByText('Site');
+      expect(siteLabels.length).toBeGreaterThan(0);
+    });
+
+    it('hides advanced filters when isAdvancedFiltersOpen is false', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={false} />);
+      
+      expect(screen.queryByText('Status')).not.toBeInTheDocument();
+      expect(screen.queryByText('Site')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Filter Interactions', () => {
+    it('calls onToggleAdvancedFilters when toggle button is clicked', () => {
+      render(<EmployeeSearchFilters {...defaultProps} />);
+      
+      fireEvent.click(screen.getByText('Advanced Filters'));
+      
+      expect(defaultProps.onToggleAdvancedFilters).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onClearFilters when clear filters button is clicked', () => {
+      render(<EmployeeSearchFilters {...defaultProps} />);
+      
+      fireEvent.click(screen.getByText('Clear Filters'));
+      
+      expect(defaultProps.onClearFilters).toHaveBeenCalledTimes(1);
+    });
+
+    it('updates status filter when changed', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      const statusSelect = screen.getAllByTestId('select')[0];
+      fireEvent.change(statusSelect, { target: { value: 'Inactive' } });
+      
+      expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
+        ...defaultFilters,
+        status: 'Inactive',
+      });
+    });
+
+    it('updates site filter when changed', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      const siteSelect = screen.getAllByTestId('select')[1];
+      fireEvent.change(siteSelect, { target: { value: '2' } });
+      
+      expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
+        ...defaultFilters,
+        selectedSiteId: '2',
+      });
+    });
+
+    it('updates role filter when changed', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      const roleSelect = screen.getAllByTestId('select')[2];
+      fireEvent.change(roleSelect, { target: { value: '3' } });
+      
+      expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
+        ...defaultFilters,
+        roleId: '3',
+      });
+    });
+
+    it('updates manager filter when changed', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      const managerSelect = screen.getAllByTestId('select')[3];
+      fireEvent.change(managerSelect, { target: { value: 'manager2' } });
+      
+      expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
+        ...defaultFilters,
+        managerId: 'manager2',
+      });
+    });
+
+    it('updates DBS number filter when changed', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      const dbsInput = screen.getAllByTestId('input')[0];
+      fireEvent.change(dbsInput, { target: { value: 'DBS123456' } });
+      
+      expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
+        ...defaultFilters,
+        dbsNumber: 'DBS123456',
+      });
+    });
+
+    it('updates working hours filter when changed', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      const hoursInput = screen.getAllByTestId('input')[1];
+      fireEvent.change(hoursInput, { target: { value: '30' } });
+      
+      expect(defaultProps.onFiltersChange).toHaveBeenCalledWith({
+        ...defaultFilters,
+        minHoursPerWeek: '30',
+      });
+    });
+  });
+
+  describe('Date Range Filters', () => {
+    it('handles start date range selection', async () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      const startDatePicker = screen.getAllByTestId('date-range-input')[0];
+      fireEvent.change(startDatePicker, { target: { value: '2024-01-01T00:00:00.000Z - 2024-01-31T00:00:00.000Z' } });
+      
+      // The component uses local state, so we just check that the unsaved changes indicator appears
+      await waitFor(() => {
+        expect(screen.getByText('You have unsaved filter changes')).toBeInTheDocument();
+      });
+    });
+
+    it('handles end date range selection', async () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      const endDatePicker = screen.getAllByTestId('date-range-input')[1];
+      fireEvent.change(endDatePicker, { target: { value: '2024-01-01T00:00:00.000Z - 2024-01-31T00:00:00.000Z' } });
+      
+      // The component uses local state, so we just check that the unsaved changes indicator appears
+      await waitFor(() => {
+        expect(screen.getByText('You have unsaved filter changes')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Filter Visibility', () => {
+    it('shows all filters by default', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      // Use getAllByText to get all elements with "Role" text and check the label specifically
+      const roleLabels = screen.getAllByText('Role');
+      expect(roleLabels.length).toBeGreaterThan(0);
+      
+      // Use getAllByText to get all elements with "Manager" text and check the label specifically
+      const managerLabels = screen.getAllByText('Manager');
+      expect(managerLabels.length).toBeGreaterThan(0);
+      
+      // Use getAllByText for other filters that might have conflicts
+      const termTimeLabels = screen.getAllByText('Term Time Only');
+      expect(termTimeLabels.length).toBeGreaterThan(0);
+      
+      const maternityLabels = screen.getAllByText('Maternity Leave');
+      expect(maternityLabels.length).toBeGreaterThan(0);
+      
+      expect(screen.getByText('Start Date Range')).toBeInTheDocument();
+      expect(screen.getByText('End Date Range')).toBeInTheDocument();
+      expect(screen.getByText('DBS Number')).toBeInTheDocument();
+      expect(screen.getByText('Min Hours Per Week')).toBeInTheDocument();
+    });
+
+    it('hides role filter when showRoleFilter is false', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          isAdvancedFiltersOpen={true}
+          showRoleFilter={false}
+        />
+      );
+      
+      // Check that the role label is not present (but the sort option might still be there)
+      const roleLabels = screen.queryAllByText('Role');
+      const roleLabel = roleLabels.find(element => element.tagName === 'LABEL');
+      expect(roleLabel).toBeUndefined();
+    });
+
+    it('hides manager filter when showManagerFilter is false', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          isAdvancedFiltersOpen={true}
+          showManagerFilter={false}
+        />
+      );
+      
+      // Check that the manager label is not present (but role options might still be there)
+      const managerLabels = screen.queryAllByText('Manager');
+      const managerLabel = managerLabels.find(element => element.tagName === 'LABEL');
+      expect(managerLabel).toBeUndefined();
+    });
+
+    it('hides term time filter when showTermTimeFilter is false', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          isAdvancedFiltersOpen={true}
+          showTermTimeFilter={false}
+        />
+      );
+      
+      const termTimeLabels = screen.queryAllByText('Term Time Only');
+      const termTimeLabel = termTimeLabels.find(element => element.tagName === 'LABEL');
+      expect(termTimeLabel).toBeUndefined();
+    });
+
+    it('hides maternity filter when showMaternityFilter is false', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          isAdvancedFiltersOpen={true}
+          showMaternityFilter={false}
+        />
+      );
+      
+      const maternityLabels = screen.queryAllByText('Maternity Leave');
+      const maternityLabel = maternityLabels.find(element => element.tagName === 'LABEL');
+      expect(maternityLabel).toBeUndefined();
+    });
+
+    it('hides start date filter when showStartDateFilter is false', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          isAdvancedFiltersOpen={true}
+          showStartDateFilter={false}
+        />
+      );
+      
+      expect(screen.queryByText('Start Date Range')).not.toBeInTheDocument();
+    });
+
+    it('hides end date filter when showEndDateFilter is false', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          isAdvancedFiltersOpen={true}
+          showEndDateFilter={false}
+        />
+      );
+      
+      expect(screen.queryByText('End Date Range')).not.toBeInTheDocument();
+    });
+
+    it('hides DBS filter when showDbsFilter is false', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          isAdvancedFiltersOpen={true}
+          showDbsFilter={false}
+        />
+      );
+      
+      expect(screen.queryByText('DBS Number')).not.toBeInTheDocument();
+    });
+
+    it('hides working hours filter when showWorkingHoursFilter is false', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          isAdvancedFiltersOpen={true}
+          showWorkingHoursFilter={false}
+        />
+      );
+      
+      expect(screen.queryByText('Min Hours Per Week')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Apply/Cancel Buttons', () => {
+    it('shows apply/cancel buttons when there are unsaved changes', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      // Change a filter to trigger unsaved changes
+      const statusSelect = screen.getAllByTestId('select')[0];
+      fireEvent.change(statusSelect, { target: { value: 'Inactive' } });
+      
+      expect(screen.getByText('You have unsaved filter changes')).toBeInTheDocument();
+      expect(screen.getByText('Cancel')).toBeInTheDocument();
+      expect(screen.getByText('Apply Filters')).toBeInTheDocument();
+    });
+
+    it('calls onApplyFilters when apply button is clicked', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      // Change a filter to trigger unsaved changes
+      const statusSelect = screen.getAllByTestId('select')[0];
+      fireEvent.change(statusSelect, { target: { value: 'Inactive' } });
+      
+      fireEvent.click(screen.getByText('Apply Filters'));
+      
+      expect(defaultProps.onApplyFilters).toHaveBeenCalledWith({
+        ...defaultFilters,
+        status: 'Inactive',
+      });
+    });
+
+    it('calls onCancelChanges when cancel button is clicked', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      // Change a filter to trigger unsaved changes
+      const statusSelect = screen.getAllByTestId('select')[0];
+      fireEvent.change(statusSelect, { target: { value: 'Inactive' } });
+      
+      fireEvent.click(screen.getByText('Cancel'));
+      
+      expect(defaultProps.onCancelChanges).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Sorting Options', () => {
+    it('updates sort by field when changed', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      const sortBySelect = screen.getAllByTestId('select').find(select => 
+        select.querySelector('option[value="first_name"]')
+      );
+      fireEvent.change(sortBySelect, { target: { value: 'first_name' } });
+      
+      // The component should show unsaved changes indicator
+      expect(screen.getByText('You have unsaved filter changes')).toBeInTheDocument();
+    });
+
+    it('updates sort order when changed', () => {
+      render(<EmployeeSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+      
+      const sortOrderSelect = screen.getAllByTestId('select').find(select => 
+        select.querySelector('option[value="desc"]')
+      );
+      fireEvent.change(sortOrderSelect, { target: { value: 'desc' } });
+      
+      // The component should show unsaved changes indicator
+      expect(screen.getByText('You have unsaved filter changes')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty sites array', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          sites={[]}
+          isAdvancedFiltersOpen={true}
+        />
+      );
+      
+      // When sites array is empty, the site filter should not be rendered
+      const siteLabels = screen.queryAllByText('Site');
+      const siteLabel = siteLabels.find(element => element.tagName === 'LABEL');
+      expect(siteLabel).toBeUndefined();
+    });
+
+    it('handles empty roles array', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          roles={[]}
+          isAdvancedFiltersOpen={true}
+        />
+      );
+      
+      // When roles array is empty, the role filter should not be rendered
+      const roleLabels = screen.queryAllByText('Role');
+      const roleLabel = roleLabels.find(element => element.tagName === 'LABEL');
+      expect(roleLabel).toBeUndefined();
+    });
+
+    it('handles empty managers array', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          managers={[]}
+          isAdvancedFiltersOpen={true}
+        />
+      );
+      
+      // When managers array is empty, the manager filter should not be rendered
+      const managerLabels = screen.queryAllByText('Manager');
+      const managerLabel = managerLabels.find(element => element.tagName === 'LABEL');
+      expect(managerLabel).toBeUndefined();
+    });
+
+    it('handles null props gracefully', () => {
+      render(
+        <EmployeeSearchFilters 
+          {...defaultProps} 
+          sites={null}
+          roles={null}
+          managers={null}
+          isAdvancedFiltersOpen={true}
+        />
+      );
+      
+      // Should still render basic filters
+      const statusLabels = screen.getAllByText('Status');
+      expect(statusLabels.length).toBeGreaterThan(0);
+      expect(screen.getByText('Sort By')).toBeInTheDocument();
+    });
+  });
+}); 

package/src/index.js

@@ -10,6 +10,13 @@ export { default as DateRangePickerDemo } from "./DateRangePickerDemo";
 export { default as CalendarDemo } from "./CalendarDemo";
 export { default as DateRangePickerTest } from "./DateRangePickerTest";
 export { default as ApplyButtonDemo } from "./ApplyButtonDemo";
+
+// Employee Search Components
+export { default as EmployeeSearchPage } from "./EmployeeSearchPage";
+export { default as EmployeeSearchModal } from "./EmployeeSearchModal";
+export { default as EmployeeSearchDemo } from "./EmployeeSearchDemo";
+export { default as EmployeeSearchFilters } from "./components/EmployeeSearchFilters";
+
 export { configureTelemetry } from "./telemetry";
 
 // UI Components