Fix pick list item sorting

src/screens/PickListsScreen.test.tsx

@@ -1,15 +1,15 @@
 import { MemoryRouter } from 'react-router-dom';
 import { render, screen, within } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { PickListsScreen } from './PickListsScreen';
 
-const areasMock = [
+let areasMock = [
   { id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 },
   { id: 'area-2', name: 'back room', created_at: 0, updated_at: 0 },
   { id: 'area-3', name: 'Cafe', created_at: 0, updated_at: 0 },
 ];
 
-const pickListsMock = [
+let pickListsMock = [
   { id: 'list-2', area_id: 'area-2', created_at: 3, categories: [], auto_add_new_products: false },
   { id: 'list-3', area_id: 'area-3', created_at: 4, categories: [], auto_add_new_products: false },
   { id: 'list-1', area_id: 'area-1', created_at: 5, categories: [], auto_add_new_products: false },
@@ -38,6 +38,20 @@ vi.mock('../context/DBProvider', () => ({
 }));
 
 describe('PickListsScreen sorting', () => {
+  beforeEach(() => {
+    areasMock = [
+      { id: 'area-1', name: 'Front Counter', created_at: 0, updated_at: 0 },
+      { id: 'area-2', name: 'back room', created_at: 0, updated_at: 0 },
+      { id: 'area-3', name: 'Cafe', created_at: 0, updated_at: 0 },
+    ];
+
+    pickListsMock = [
+      { id: 'list-2', area_id: 'area-2', created_at: 3, categories: [], auto_add_new_products: false },
+      { id: 'list-3', area_id: 'area-3', created_at: 4, categories: [], auto_add_new_products: false },
+      { id: 'list-1', area_id: 'area-1', created_at: 5, categories: [], auto_add_new_products: false },
+    ];
+  });
+
   it('sorts pick lists alphabetically by area name', () => {
     render(
       <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
@@ -51,4 +65,30 @@ describe('PickListsScreen sorting', () => {
     expect(within(listItems[1]).getByText('Cafe')).toBeVisible();
     expect(within(listItems[2]).getByText('Front Counter')).toBeVisible();
   });
+
+  it('ignores casing and whitespace when ordering pick lists', () => {
+    areasMock = [
+      { id: 'area-1', name: '  front counter', created_at: 0, updated_at: 0 },
+      { id: 'area-2', name: '  Cafe ', created_at: 0, updated_at: 0 },
+      { id: 'area-3', name: 'Back room', created_at: 0, updated_at: 0 },
+    ];
+
+    pickListsMock = [
+      { id: 'list-1', area_id: 'area-1', created_at: 5, categories: [], auto_add_new_products: false },
+      { id: 'list-2', area_id: 'area-2', created_at: 3, categories: [], auto_add_new_products: false },
+      { id: 'list-3', area_id: 'area-3', created_at: 4, categories: [], auto_add_new_products: false },
+    ];
+
+    render(
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+        <PickListsScreen />
+      </MemoryRouter>,
+    );
+
+    const listItems = screen.getAllByRole('listitem');
+
+    expect(within(listItems[0]).getByText(/back room/i)).toBeVisible();
+    expect(within(listItems[1]).getByText(/cafe/i)).toBeVisible();
+    expect(within(listItems[2]).getByText(/front counter/i)).toBeVisible();
+  });
 });