@snapdragonsnursery/react-components 1.2.0 → 1.3.1

package/src/EmployeeSearchPage.test.jsx

@@ -0,0 +1,240 @@
+// Employee Search Page Component Tests
+// Tests the EmployeeSearchPage component functionality including search, filtering, pagination, and selection
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import EmployeeSearchPage from './EmployeeSearchPage';
+
+// Mock MSAL
+jest.mock('@azure/msal-react', () => ({
+  useMsal: () => ({
+    instance: {
+      acquireTokenSilent: jest.fn(),
+    },
+    accounts: [{ localAccountId: 'test-user-id' }],
+  }),
+}));
+
+// Mock telemetry
+jest.mock('./telemetry', () => ({
+  trackEvent: jest.fn(),
+}));
+
+// Mock utils
+jest.mock('./lib/utils', () => ({
+  cn: (...classes) => classes.filter(Boolean).join(' '),
+}));
+
+// Mock fetch
+global.fetch = jest.fn();
+
+// Mock process.env
+process.env.VITE_COMMON_API_FUNCTION_KEY = 'test-key';
+process.env.VITE_COMMON_API_BASE_URL = 'https://test-api.example.com';
+
+// Mock the UI components
+jest.mock('./components/ui/input', () => ({
+  Input: ({ value, onChange, placeholder, ...props }) => {
+    return (
+      <input
+        data-testid="input"
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        {...props}
+      />
+    );
+  }
+}));
+
+jest.mock('./components/ui/button', () => ({
+  Button: ({ children, onClick, variant, size, ...props }) => {
+    return (
+      <button
+        data-testid="button"
+        onClick={onClick}
+        data-variant={variant}
+        data-size={size}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+}));
+
+jest.mock('./components/ui/table', () => ({
+  Table: ({ children, ...props }) => <table data-testid="table" {...props}>{children}</table>,
+  TableBody: ({ children, ...props }) => <tbody data-testid="table-body" {...props}>{children}</tbody>,
+  TableCell: ({ children, ...props }) => <td data-testid="table-cell" {...props}>{children}</td>,
+  TableHead: ({ children, ...props }) => <th data-testid="table-head" {...props}>{children}</th>,
+  TableHeader: ({ children, ...props }) => <thead data-testid="table-header" {...props}>{children}</thead>,
+  TableRow: ({ children, ...props }) => <tr data-testid="table-row" {...props}>{children}</tr>,
+}));
+
+jest.mock('./components/ui/pagination', () => ({
+  Pagination: ({ children, ...props }) => <nav data-testid="pagination" {...props}>{children}</nav>,
+  PaginationContent: ({ children, ...props }) => <div data-testid="pagination-content" {...props}>{children}</div>,
+  PaginationEllipsis: ({ ...props }) => <span data-testid="pagination-ellipsis" {...props}>...</span>,
+  PaginationItem: ({ children, ...props }) => <div data-testid="pagination-item" {...props}>{children}</div>,
+  PaginationLink: ({ children, onClick, isActive, ...props }) => (
+    <button data-testid="pagination-link" onClick={onClick} data-active={isActive} {...props}>
+      {children}
+    </button>
+  ),
+  PaginationNext: ({ children, onClick, ...props }) => (
+    <button data-testid="pagination-next" onClick={onClick} {...props}>
+      {children}
+    </button>
+  ),
+  PaginationPrevious: ({ children, onClick, ...props }) => (
+    <button data-testid="pagination-previous" onClick={onClick} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+// Mock EmployeeSearchFilters
+jest.mock('./components/EmployeeSearchFilters', () => {
+  return function MockEmployeeSearchFilters({ filters, onFiltersChange, onApplyFilters, onClearFilters, ...props }) {
+    return (
+      <div data-testid="employee-search-filters">
+        <button onClick={() => onFiltersChange({ ...filters, status: 'Inactive' })}>
+          Change Status
+        </button>
+        <button onClick={() => onApplyFilters(filters)}>
+          Apply Filters
+        </button>
+        <button onClick={onClearFilters}>
+          Clear Filters
+        </button>
+      </div>
+    );
+  };
+});
+
+const defaultProps = {
+  title: 'Employee Search',
+  onSelect: jest.fn(),
+};
+
+describe('EmployeeSearchPage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    global.fetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        success: true,
+        data: {
+          employees: [],
+          pagination: {
+            page: 1,
+            pageSize: 20,
+            totalCount: 0,
+            totalPages: 0,
+            hasNextPage: false,
+            hasPreviousPage: false,
+          },
+        },
+      }),
+    });
+  });
+
+  describe('Basic Rendering', () => {
+    it('renders the page title', () => {
+      render(<EmployeeSearchPage {...defaultProps} />);
+      
+      expect(screen.getByText('Employee Search')).toBeInTheDocument();
+    });
+
+    it('renders the search input', () => {
+      render(<EmployeeSearchPage {...defaultProps} />);
+      
+      expect(screen.getByPlaceholderText('Search by name, employee ID, or email...')).toBeInTheDocument();
+    });
+
+    it('renders the employee search filters', () => {
+      render(<EmployeeSearchPage {...defaultProps} />);
+      
+      expect(screen.getByTestId('employee-search-filters')).toBeInTheDocument();
+    });
+
+    it('shows loading state initially', () => {
+      render(<EmployeeSearchPage {...defaultProps} />);
+      
+      expect(screen.getByRole('status')).toBeInTheDocument();
+    });
+  });
+
+  describe('Search Functionality', () => {
+    it('renders search input with correct placeholder', () => {
+      render(<EmployeeSearchPage {...defaultProps} />);
+      
+      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
+      expect(searchInput).toBeInTheDocument();
+      expect(searchInput).toHaveAttribute('type', 'text');
+    });
+
+    it('allows typing in search input', () => {
+      render(<EmployeeSearchPage {...defaultProps} />);
+      
+      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
+      fireEvent.change(searchInput, { target: { value: 'John' } });
+      
+      expect(searchInput).toHaveValue('John');
+    });
+  });
+
+  describe('Filter Integration', () => {
+    it('renders filter buttons', () => {
+      render(<EmployeeSearchPage {...defaultProps} />);
+      
+      expect(screen.getByText('Change Status')).toBeInTheDocument();
+      expect(screen.getByText('Apply Filters')).toBeInTheDocument();
+      expect(screen.getByText('Clear Filters')).toBeInTheDocument();
+    });
+
+    it('calls filter change handler when filter button is clicked', () => {
+      render(<EmployeeSearchPage {...defaultProps} />);
+      
+      const changeStatusButton = screen.getByText('Change Status');
+      fireEvent.click(changeStatusButton);
+      
+      // The mock should have been called
+      expect(changeStatusButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA labels', () => {
+      render(<EmployeeSearchPage {...defaultProps} />);
+      
+      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
+      expect(searchInput).toBeInTheDocument();
+    });
+
+    it('supports keyboard navigation', () => {
+      render(<EmployeeSearchPage {...defaultProps} />);
+      
+      const searchInput = screen.getByPlaceholderText('Search by name, employee ID, or email...');
+      searchInput.focus();
+      
+      expect(searchInput).toHaveFocus();
+    });
+  });
+
+  describe('Props Handling', () => {
+    it('renders custom title', () => {
+      render(<EmployeeSearchPage {...defaultProps} title="Custom Title" />);
+      
+      expect(screen.getByText('Custom Title')).toBeInTheDocument();
+    });
+
+    it('renders custom search placeholder', () => {
+      render(<EmployeeSearchPage {...defaultProps} searchPlaceholder="Custom placeholder" />);
+      
+      expect(screen.getByPlaceholderText('Custom placeholder')).toBeInTheDocument();
+    });
+  });
+}); 

package/src/components/ChildSearchFilters.test.jsx

@@ -1,5 +1,5 @@
 // ChildSearchFilters Component Tests
-// Tests the filter functionality including status, site, date of birth, age, and sorting options
+// Tests the filter functionality including status, site, date of birth, and age options
 
 import React from "react";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
@@ -68,8 +68,6 @@ describe("ChildSearchFilters", () => {
     dobTo: "",
     ageFrom: "",
     ageTo: "",
-    sortBy: "last_name",
-    sortOrder: "asc",
   };
 
   const mockSites = [
@@ -107,8 +105,6 @@ describe("ChildSearchFilters", () => {
     expect(screen.getByText("Date of Birth Range")).toBeInTheDocument();
     expect(screen.getByText("Age From (months)")).toBeInTheDocument();
     expect(screen.getByText("Age To (months)")).toBeInTheDocument();
-    expect(screen.getByText("Sort By")).toBeInTheDocument();
-    expect(screen.getByText("Sort Order")).toBeInTheDocument();
   });
 
   it("hides advanced filters when isAdvancedFiltersOpen is false", () => {
@@ -157,7 +153,7 @@ describe("ChildSearchFilters", () => {
     );
     
     const selects = screen.getAllByTestId("select");
-    expect(selects).toHaveLength(3); // Status, Sort By, Sort Order (no site filter when sites=null)
+    expect(selects).toHaveLength(1); // Only Status filter (no site filter when sites=null)
   });
 
   it("shows apply button when filters are changed", () => {
@@ -220,22 +216,6 @@ describe("ChildSearchFilters", () => {
     );
   });
 
-  it("calls onApplyFilters when apply button is clicked with sort filter", () => {
-    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
-    
-    const sortBySelect = screen.getAllByTestId("select")[2];
-    fireEvent.change(sortBySelect, { target: { value: "first_name" } });
-    
-    const applyButton = screen.getByText("Apply Filters");
-    fireEvent.click(applyButton);
-    
-    expect(defaultProps.onApplyFilters).toHaveBeenCalledWith(
-      expect.objectContaining({
-        sortBy: "first_name"
-      })
-    );
-  });
-
   it("displays correct filter values", () => {
     const filtersWithValues = {
       ...mockFilters,
@@ -245,8 +225,6 @@ describe("ChildSearchFilters", () => {
       dobTo: "2020-12-31",
       ageFrom: "12",
       ageTo: "60",
-      sortBy: "first_name",
-      sortOrder: "desc",
     };
 
     render(
@@ -262,16 +240,12 @@ describe("ChildSearchFilters", () => {
     const dateRangePicker = screen.getByTestId("date-range-picker");
     const ageFromInput = screen.getAllByTestId("input")[0];
     const ageToInput = screen.getAllByTestId("input")[1];
-    const sortBySelect = screen.getAllByTestId("select")[2];
-    const sortOrderSelect = screen.getAllByTestId("select")[3];
     
     expect(statusSelect).toHaveValue("inactive");
     expect(siteSelect).toHaveValue("1");
     expect(dateRangePicker).toBeInTheDocument();
     expect(ageFromInput).toHaveValue(12);
     expect(ageToInput).toHaveValue(60);
-    expect(sortBySelect).toHaveValue("first_name");
-    expect(sortOrderSelect).toHaveValue("desc");
   });
 
   it("has correct accessibility attributes", () => {
@@ -283,8 +257,6 @@ describe("ChildSearchFilters", () => {
     expect(screen.getByText("Date of Birth Range")).toBeInTheDocument();
     expect(screen.getByText("Age From (months)")).toBeInTheDocument();
     expect(screen.getByText("Age To (months)")).toBeInTheDocument();
-    expect(screen.getByText("Sort By")).toBeInTheDocument();
-    expect(screen.getByText("Sort Order")).toBeInTheDocument();
   });
 
   it("applies correct CSS classes for dark mode support", () => {