Expand unit test coverage
modified: maintenance.sh modified: package-lock.json modified: package.json new file: src/screens/ActivePickListScreen.more.test.tsx new file: src/screens/ManageCategoriesScreen.additional.test.tsx new file: src/testUtils/mockDb.test.ts
This commit is contained in:
@@ -0,0 +1,133 @@
|
||||
// src/screens/ActivePickListScreen.more.test.tsx
|
||||
import { MemoryRouter, Route, Routes } from 'react-router-dom';
|
||||
import { render, screen, within, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import ActivePickListScreen from './ActivePickListScreen';
|
||||
import { PickItem } from '../models/PickItem';
|
||||
import { Product } from '../models/Product';
|
||||
|
||||
const addMock = vi.fn();
|
||||
const updateMock = vi.fn();
|
||||
const deleteMock = vi.fn();
|
||||
const pickItemsMock = vi.fn<() => PickItem[]>();
|
||||
const productsMock = vi.fn<() => Product[]>();
|
||||
const pickListMock = vi.fn();
|
||||
|
||||
vi.mock('../hooks/dataHooks', () => ({
|
||||
usePickItems: () => pickItemsMock(),
|
||||
useProducts: () => productsMock(),
|
||||
usePickList: () => pickListMock(),
|
||||
useAreas: () => [{ id: 'a1', name: 'Front', created_at: 0, updated_at: 0 }],
|
||||
useCategories: () => [{ id: 'c1', name: 'Drinks', created_at: 0, updated_at: 0 }],
|
||||
}));
|
||||
|
||||
vi.mock('../context/DBProvider', () => ({
|
||||
useDatabase: () => ({
|
||||
pickItems: {
|
||||
add: addMock,
|
||||
update: updateMock,
|
||||
get: vi.fn(async (id: string) => (pickItemsMock() || []).find((it) => it.id === id)),
|
||||
delete: deleteMock,
|
||||
where: (_f: string) => ({
|
||||
equals: (val: any) => ({
|
||||
toArray: async () => (pickItemsMock() || []).filter((it) => it.pick_list_id === val),
|
||||
count: async () => (pickItemsMock() || []).filter((it) => it.pick_list_id === val).length,
|
||||
}),
|
||||
}),
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
const products = [
|
||||
{ id: 'prod-1', name: 'Cola', category: 'c1', unit_type: 'unit', bulk_name: 'box', barcode: '111', archived: false, created_at: 0, updated_at: 0 },
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
addMock.mockReset();
|
||||
updateMock.mockReset();
|
||||
deleteMock.mockReset();
|
||||
pickItemsMock.mockReset();
|
||||
productsMock.mockReset();
|
||||
pickListMock.mockReset();
|
||||
|
||||
productsMock.mockReturnValue(products);
|
||||
pickListMock.mockReturnValue({ id: 'list-1', area_id: 'a1', created_at: 0, categories: ['c1'], auto_add_new_products: false });
|
||||
});
|
||||
|
||||
describe('ActivePickListScreen extra branches', () => {
|
||||
it('adds a pick item when a product is selected (listbox opens)', async () => {
|
||||
// Ensure the product is available (not already on the pick list)
|
||||
pickItemsMock.mockReturnValue([]);
|
||||
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/pick-lists/1']}>
|
||||
<Routes>
|
||||
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
|
||||
</Routes>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
// Get the combobox (product input), open it and select the option
|
||||
const combobox = screen.getByRole('combobox', { name: /search products/i }) || screen.getByTestId('product-search-input');
|
||||
await user.click(combobox);
|
||||
|
||||
// Wait for the listbox to appear and click the option
|
||||
const listbox = await screen.findByRole('listbox');
|
||||
await user.click(within(listbox).getByRole('option', { name: /cola/i }));
|
||||
|
||||
// Assert add was called
|
||||
await waitFor(() => {
|
||||
expect(addMock).toHaveBeenCalled();
|
||||
const added = addMock.mock.calls[0][0];
|
||||
expect(added).toEqual(expect.objectContaining({ product_id: 'prod-1', quantity: 1, is_carton: false }));
|
||||
});
|
||||
});
|
||||
|
||||
it('shows "No items match the filter" when visible items exist but none match search', async () => {
|
||||
pickItemsMock.mockReturnValue([
|
||||
{ id: 'item-1', pick_list_id: 'list-1', product_id: 'prod-1', quantity: 1, is_carton: false, status: 'pending', created_at: 0, updated_at: 0 },
|
||||
]);
|
||||
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/pick-lists/1']}>
|
||||
<Routes>
|
||||
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
|
||||
</Routes>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
const listSearch = screen.getByPlaceholderText(/search list/i) || screen.getByRole('textbox', { name: /search list/i });
|
||||
await user.type(listSearch, 'nomatchtext');
|
||||
|
||||
expect(await screen.findByText(/no items match the filter/i)).toBeVisible();
|
||||
});
|
||||
|
||||
it('categoryFilter restricts visible items to selected category', async () => {
|
||||
productsMock.mockReturnValue([
|
||||
...products,
|
||||
{ id: 'prod-2', name: 'Chips', category: 'other', unit_type: 'unit', bulk_name: 'box', created_at: 0, updated_at: 0, archived: false },
|
||||
]);
|
||||
pickItemsMock.mockReturnValue([
|
||||
{ id: 'item-1', pick_list_id: 'list-1', product_id: 'prod-1', quantity: 1, is_carton: false, status: 'pending', created_at: 0, updated_at: 0 },
|
||||
{ id: 'item-2', pick_list_id: 'list-1', product_id: 'prod-2', quantity: 1, is_carton: false, status: 'pending', created_at: 0, updated_at: 0 },
|
||||
]);
|
||||
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/pick-lists/1']}>
|
||||
<Routes>
|
||||
<Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
|
||||
</Routes>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
const select = screen.getByLabelText(/filter by category/i) as HTMLSelectElement;
|
||||
await user.selectOptions(select, ['c1']);
|
||||
|
||||
expect(screen.getByText(/cola/i)).toBeVisible();
|
||||
expect(screen.queryByText(/chips/i)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,122 @@
|
||||
// src/screens/ManageCategoriesScreen.additional.test.tsx
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import ManageCategoriesScreen from './ManageCategoriesScreen';
|
||||
|
||||
const categories = [
|
||||
{ id: 'cat-1', name: 'Snacks', created_at: 0, updated_at: 0 },
|
||||
{ id: 'cat-2', name: 'Drinks', created_at: 0, updated_at: 0 },
|
||||
];
|
||||
|
||||
const products = [
|
||||
{ id: 'prod-1', name: 'Chips', category: 'Snacks', archived: false, created_at: 0, updated_at: 0 },
|
||||
];
|
||||
|
||||
const categoryAddMock = vi.fn();
|
||||
const categoryUpdateMock = vi.fn();
|
||||
const categoryDeleteMock = vi.fn();
|
||||
const productModifyMock = vi.fn();
|
||||
const pickListsUpdateMock = vi.fn();
|
||||
|
||||
// Mock hooks
|
||||
vi.mock('../hooks/dataHooks', () => ({
|
||||
useCategories: () => categories,
|
||||
useProducts: () => products,
|
||||
}));
|
||||
|
||||
// Mock DBProvider to catch pickLists.update and categories.update/delete
|
||||
vi.mock('../context/DBProvider', () => ({
|
||||
useDatabase: () => ({
|
||||
transaction: async (...args: unknown[]) => {
|
||||
const cb = args[args.length - 1];
|
||||
if (typeof cb === 'function') await (cb as () => Promise<void>)();
|
||||
},
|
||||
categories: { add: categoryAddMock, update: categoryUpdateMock, delete: categoryDeleteMock },
|
||||
products: {
|
||||
where: () => ({
|
||||
equals: (_: string) => ({
|
||||
count: async () => 0,
|
||||
modify: async (changes: any) => productModifyMock(changes),
|
||||
}),
|
||||
}),
|
||||
},
|
||||
pickLists: {
|
||||
toArray: async () => [{ id: 'pl-1', categories: ['Snacks'], created_at: 0, updated_at: 0 }],
|
||||
update: pickListsUpdateMock,
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('ManageCategoriesScreen additional', () => {
|
||||
beforeEach(() => {
|
||||
categoryAddMock.mockReset();
|
||||
categoryUpdateMock.mockReset();
|
||||
categoryDeleteMock.mockReset();
|
||||
productModifyMock.mockReset();
|
||||
pickListsUpdateMock.mockReset();
|
||||
});
|
||||
|
||||
it('updates pickLists when category name is changed (legacy name in pickLists.categories)', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<ManageCategoriesScreen />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /edit snacks/i }));
|
||||
const editField = screen.getByDisplayValue(/snacks/i);
|
||||
await user.clear(editField);
|
||||
await user.type(editField, 'Treats');
|
||||
await user.click(screen.getByRole('button', { name: /save category/i }));
|
||||
|
||||
// categories.update should have been called
|
||||
expect(categoryUpdateMock).toHaveBeenCalled();
|
||||
|
||||
// and pickLists.update should have been called to update the categories array
|
||||
expect(pickListsUpdateMock).toHaveBeenCalled();
|
||||
expect(await screen.findByText(/category updated/i)).toBeVisible();
|
||||
});
|
||||
|
||||
it('deletes category when no products reference it', async () => {
|
||||
// products.where().equals().count() is 0 in our mock, so delete should proceed
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<ManageCategoriesScreen />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
// Click the "Delete Snacks" icon/button (specific aria-label)
|
||||
await user.click(screen.getByRole('button', { name: /delete snacks/i }));
|
||||
|
||||
// Wait for the delete mock to be called (component calls the onDelete handler)
|
||||
await waitFor(() => {
|
||||
expect(categoryDeleteMock).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// And assert the success alert is shown
|
||||
expect(await screen.findByText(/category deleted/i)).toBeVisible();
|
||||
});
|
||||
|
||||
it('prevents renaming to an existing name', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<ManageCategoriesScreen />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /edit snacks/i }));
|
||||
const editField = screen.getByDisplayValue(/snacks/i);
|
||||
await user.clear(editField);
|
||||
await user.type(editField, 'Drinks'); // name that already exists
|
||||
await user.click(screen.getByRole('button', { name: /save category/i }));
|
||||
|
||||
// Should show "already exists" and NOT call update
|
||||
expect(categoryUpdateMock).not.toHaveBeenCalled();
|
||||
expect(await screen.findByText(/already exists/i)).toBeVisible();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
// src/testUtils/mockDb.test.ts
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { MockTable, createMockDb } from './mockDb';
|
||||
|
||||
type Item = { id: string; category?: string; name?: string };
|
||||
|
||||
describe('MockTable basic operations', () => {
|
||||
it('supports toArray, add, get, put (update + insert) and delete', async () => {
|
||||
const t = new MockTable<Item>([{ id: 'a', name: 'alpha' }]);
|
||||
|
||||
// toArray
|
||||
expect(await t.toArray()).toHaveLength(1);
|
||||
|
||||
// add
|
||||
await t.add({ id: 'b', name: 'beta' });
|
||||
expect((await t.toArray()).map((i) => i.id)).toContain('b');
|
||||
|
||||
// get
|
||||
expect((await t.get('b'))?.name).toBe('beta');
|
||||
|
||||
// put (update)
|
||||
await t.put({ id: 'a', name: 'alpha-updated' });
|
||||
expect((await t.get('a'))?.name).toBe('alpha-updated');
|
||||
|
||||
// put (insert)
|
||||
await t.put({ id: 'c', name: 'gamma' });
|
||||
expect((await t.toArray()).map((i) => i.id)).toContain('c');
|
||||
|
||||
// delete
|
||||
await t.delete('b');
|
||||
expect(await t.get('b')).toBeUndefined();
|
||||
});
|
||||
|
||||
it('where().equals().first / count / filter works and filter.delete removes items', async () => {
|
||||
const t = new MockTable<Item>([
|
||||
{ id: '1', category: 'x' },
|
||||
{ id: '2', category: 'x' },
|
||||
{ id: '3', category: 'y' },
|
||||
]);
|
||||
|
||||
// first
|
||||
const firstX = await t.where('category').equals('x').first();
|
||||
expect(firstX?.id).toBe('1');
|
||||
|
||||
// count
|
||||
const countX = await t.where('category').equals('x').count();
|
||||
expect(countX).toBe(2);
|
||||
|
||||
// equals(...).filter(...).first()
|
||||
const filteredFirst = await t.where('category').equals('x').filter((it: any) => it.id === '2').first();
|
||||
expect(filteredFirst?.id).toBe('2');
|
||||
|
||||
// filter(pred).delete() and filter(...).first()
|
||||
const before = await t.toArray();
|
||||
expect(before.some((i) => i.category === 'y')).toBeTruthy();
|
||||
|
||||
const f = t.filter((it: any) => it.category === 'y');
|
||||
await f.delete();
|
||||
const after = await t.toArray();
|
||||
expect(after.some((i) => i.category === 'y')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('transaction executes callback when provided and returns undefined otherwise', async () => {
|
||||
const db = createMockDb({});
|
||||
let called = false;
|
||||
await db.transaction('rw', async () => {
|
||||
called = true;
|
||||
});
|
||||
expect(called).toBe(true);
|
||||
|
||||
// when last arg isn't a function, it should resolve and return undefined
|
||||
const res = await db.transaction('rw');
|
||||
expect(res).toBeUndefined();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user