Merge pull request #47 from the-collab-lab/add-tests-and-fixtures

Add foundational tests and mock fixtures for core components

src/mocks/__fixtures__/auth.js

@@ -0,0 +1,28 @@
+// This file contains mock authentication data.
+
+export const mockUser = {
+	uid: 'mockUser123',
+	email: 'mockuser@example.com',
+	emailVerified: true,
+	displayName: 'Mock User',
+	isAnonymous: false,
+	photoURL: 'https://example.com/photo.jpg',
+	providerData: [
+		{
+			providerId: 'google.com',
+			uid: 'mockProviderId123',
+			displayName: 'Mock User',
+			email: 'mockuser@example.com',
+			photoURL: 'https://example.com/photo.jpg',
+		},
+	],
+	stsTokenManager: {
+		refreshToken: 'mockRefreshToken',
+		accessToken: 'mockAccessToken',
+		expirationTime: 1726112168980,
+	},
+	createdAt: '1723320388225',
+	lastLoginAt: '1726108569039',
+	apiKey: 'mockApiKey',
+	appName: '[DEFAULT]',
+};

src/mocks/__fixtures__/shoppingListData.js

@@ -0,0 +1,46 @@
+// This file contains mock data for shopping lists with Firestore-like timestamps that include a toDate() method.
+
+export const mockShoppingListData = [
+	{
+		name: 'nutella',
+		dateNextPurchased: {
+			toDate: () => new Date('2024-01-01T10:00:00Z'),
+		},
+		dateLastPurchased: {
+			toDate: () => new Date('2023-12-01T10:00:00Z'),
+		},
+		totalPurchases: 6,
+		dateCreated: {
+			toDate: () => new Date('2023-11-01T10:00:00Z'),
+		},
+		id: '0T1ByXr8YJSOzujOlLMI',
+	},
+	{
+		name: 'Cheese',
+		dateNextPurchased: {
+			toDate: () => new Date('2024-01-05T10:00:00Z'),
+		},
+		dateLastPurchased: {
+			toDate: () => new Date('2023-12-05T12:00:00Z'),
+		},
+		totalPurchases: 3,
+		dateCreated: {
+			toDate: () => new Date('2023-11-05T12:00:00Z'),
+		},
+		id: '1MFWOWMCzDtEHQboFZfR',
+	},
+	{
+		name: 'Jam',
+		dateNextPurchased: {
+			toDate: () => new Date('2024-01-10T12:00:00Z'),
+		},
+		dateLastPurchased: {
+			toDate: () => new Date('2023-12-10T12:00:00Z'),
+		},
+		totalPurchases: 4,
+		dateCreated: {
+			toDate: () => new Date('2023-11-10T12:00:00Z'),
+		},
+		id: 'MnUiYUmhg8iCzX1eMxW8',
+	},
+];

src/mocks/__fixtures__/shoppingLists.js

@@ -0,0 +1,24 @@
+// This file contains mock data for a shopping list’s items.
+
+export const mockShoppingLists = [
+	{
+		name: 'Groceries',
+		path: 'user123/groceries',
+	},
+	{
+		name: 'Hardware',
+		path: 'user123/hardware',
+	},
+	{
+		name: 'Electronics',
+		path: 'user123/electronics',
+	},
+	{
+		name: 'Furniture',
+		path: 'user123/furniture',
+	},
+	{
+		name: 'Clothing',
+		path: 'user123/clothing',
+	},
+];

tests/Home.test.jsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Home } from '../src/views/Home';
+import { mockShoppingLists } from '../src/mocks/__fixtures__/shoppingLists';
+
+describe('Home Component', () => {
+	test('renders all shopping lists from fixture data', () => {
+		render(
+			<MemoryRouter>
+				<Home data={mockShoppingLists} />
+			</MemoryRouter>,
+		);
+
+		mockShoppingLists.forEach((list) => {
+			expect(screen.getByText(list.name)).toBeInTheDocument();
+		});
+	});
+});

tests/Layout.test.jsx

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { Layout } from '../src/views/Layout';
+import { useAuth } from '../src/api/useAuth';
+import { mockUser } from '../src/mocks/__fixtures__/auth';
+
+vi.mock('../src/api/useAuth', () => ({
+	useAuth: vi.fn(),
+	SignInButton: () => <button>Sign In</button>,
+	SignOutButton: () => <button>Sign Out</button>,
+}));
+
+describe('Layout Component', () => {
+	beforeEach(() => {
+		useAuth.mockReturnValue({ user: null });
+	});
+
+	test('renders the layout with heading and navigation links', () => {
+		render(
+			<MemoryRouter>
+				<Layout />
+			</MemoryRouter>,
+		);
+
+		expect(screen.getByText('Smart shopping list')).toBeInTheDocument();
+		expect(screen.getByText('Home')).toBeInTheDocument();
+		expect(screen.getByText('List')).toBeInTheDocument();
+		expect(screen.getByText('Manage List')).toBeInTheDocument();
+	});
+
+	test('renders SignInButton when user is not authenticated', () => {
+		useAuth.mockReturnValue({ user: null });
+
+		render(
+			<MemoryRouter>
+				<Layout />
+			</MemoryRouter>,
+		);
+
+		expect(screen.getByText('Sign In')).toBeInTheDocument();
+	});
+
+	test('renders SignOutButton when user is authenticated using mock data', () => {
+		useAuth.mockReturnValue({ user: mockUser });
+
+		render(
+			<MemoryRouter>
+				<Layout />
+			</MemoryRouter>,
+		);
+
+		expect(screen.getByText('Sign Out')).toBeInTheDocument();
+	});
+});

tests/List.test.jsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import { List } from '../src/views/List';
+import { mockShoppingListData } from '../src/mocks/__fixtures__/shoppingListData';
+import { useStateWithStorage } from '../src/utils';
+
+vi.mock('../src/utils', () => ({
+	useStateWithStorage: vi.fn(),
+}));
+
+beforeEach(() => {
+	useStateWithStorage.mockReturnValue(['/groceries']);
+});
+
+describe('List Component', () => {
+	test('renders the shopping list name, search field, and all list items from the data prop', () => {
+		render(<List data={mockShoppingListData} />);
+
+		expect(screen.getByText('groceries')).toBeInTheDocument();
+		expect(screen.getByLabelText('Search Item:')).toBeInTheDocument();
+
+		mockShoppingListData.forEach((item) => {
+			expect(screen.getByText(item.name)).toBeInTheDocument();
+		});
+	});
+
+	test('shows welcome message and AddItems component when no items are present', () => {
+		render(<List data={[]} />);
+
+		expect(screen.getByText('Welcome to groceries!')).toBeInTheDocument();
+		expect(screen.getByLabelText('Item Name:')).toBeInTheDocument();
+		expect(screen.getByLabelText('Soon')).toBeInTheDocument();
+		expect(screen.getByLabelText('Kind of soon')).toBeInTheDocument();
+		expect(screen.getByLabelText('Not Soon')).toBeInTheDocument();
+		expect(screen.getByText('Submit')).toBeInTheDocument();
+	});
+});

tests/ManageList.test.jsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import { ManageList } from '../src/views/ManageList';
+
+describe('ManageList Component', () => {
+	test('renders AddItems component with submit button and radio buttons', () => {
+		render(<ManageList />);
+
+		expect(screen.getByLabelText('Item Name:')).toBeInTheDocument();
+		expect(screen.getByLabelText('Soon')).toBeInTheDocument();
+		expect(screen.getByLabelText('Kind of soon')).toBeInTheDocument();
+		expect(screen.getByLabelText('Not Soon')).toBeInTheDocument();
+		expect(screen.getByText('Submit')).toBeInTheDocument();
+	});
+
+	test('renders ShareList component with email input and invite button', () => {
+		render(<ManageList />);
+
+		expect(screen.getByPlaceholderText('Enter email')).toBeInTheDocument();
+		expect(screen.getByText('Invite User')).toBeInTheDocument();
+	});
+});