Merge pull request #74 from the-collab-lab/update-tests-from-list-vie…

…w-refactor-66

Reimplementation of managelist tests on list view.

src/views/List.jsx

@@ -35,10 +35,20 @@ export function List({ data, listPath }) {
 		return <p>Loading...</p>;
 	}
 
+	if (!listPath) {
+		return (
+			<>
+				<h2 data-testid="noListErrorMsg">You don't have a list selected!</h2>
+			</>
+		);
+	}
+
 	return (
 		<>
 			<h2>{listName}</h2>
-			{data.data.length === 0 && <h2>You have no items in this list!</h2>}
+			{data.data.length === 0 && (
+				<h2 data-testid="noItemsErrorMsg">You have no items in this list!</h2>
+			)}
 			{data.data.length !== 0 && (
 				<div className="searchInput">
 					<form action="" onSubmit={(e) => e.preventDefault()}>

tests/components/List/List.test.jsx

@@ -1,48 +1,54 @@
-// import { render, screen } from '@testing-library/react';
-// import { List } from '../../../src/views';
+import { render, screen } from '@testing-library/react';
+import { List } from '../../../src/views';
 import { vi } from 'vitest';
-// import { QueryClientProvider } from 'react-query';
-// import { queryClient } from '../../../src/App';
-
-// describe('List', () => {
-// 	afterEach(() => {
-// 		vi.resetAllMocks();
-// 		vi.clearAllMocks();
-// 	});
-
-// 	const renderList = ({ listPath, data }) => {
-// 		return render(
-// 			<QueryClientProvider client={queryClient}>
-// 				<List listPath={listPath} data={data} />
-// 			</QueryClientProvider>,
-// 		);
-// 	};
-
-// 	it('renders AddItemForm and ShareForm if listPath is passed in', async () => {
-// 		const data = { data: [{ name: 'apple' }], loading: false };
-// 		renderList({ listPath: '/test-list', data });
-
-// 		const addItemForm = screen.queryByTestId('addItemForm-header');
-// 		const shareForm = screen.queryByTestId('shareForm-header');
-// 		expect(addItemForm).toBeInTheDocument();
-// 		expect(shareForm).toBeInTheDocument();
-
-// 		const noListPathMessage = screen.queryByTestId('no-listpath-span');
-// 		expect(noListPathMessage).toBeFalsy();
-// 	});
-// 	it('does not render AddItemForm and ShareForm if listPath is not passed in', async () => {
-// 		renderList({});
-
-// 		const addItemForm = screen.queryByTestId('addItemForm-header');
-// 		const shareForm = screen.queryByTestId('shareForm-header');
-// 		expect(addItemForm).not.toBeInTheDocument();
-// 		expect(shareForm).not.toBeInTheDocument();
-
-// 		const noListPathMessage = screen.queryByTestId('no-listpath-span');
-// 		expect(noListPathMessage).toBeTruthy();
-// 	});
-// });
-
-test.skip('List', () => {
-	return null;
+import { QueryClientProvider } from 'react-query';
+import { queryClient } from '../../../src/App';
+
+describe('List', () => {
+	afterEach(() => {
+		vi.resetAllMocks();
+		vi.clearAllMocks();
+	});
+
+	const renderList = ({ listPath, data }) => {
+		return render(
+			<QueryClientProvider client={queryClient}>
+				<List listPath={listPath} data={data} />
+			</QueryClientProvider>,
+		);
+	};
+
+	it('renders AddItemForm and ShareForm if listPath is passed in', async () => {
+		const data = { data: [{ name: 'apple' }], loading: false };
+		renderList({ listPath: '/test-list', data });
+
+		const addItemForm = screen.queryByTestId('addItemForm-header');
+		const shareForm = screen.queryByTestId('shareForm-header');
+		expect(addItemForm).toBeInTheDocument();
+		expect(shareForm).toBeInTheDocument();
+
+		const noListPathMessage = screen.queryByTestId('no-listpath-span');
+		expect(noListPathMessage).toBeFalsy();
+	});
+
+	it('renders error message when listPath is not passed in', async () => {
+		const data = { data: [] };
+		renderList({ listPath: '', data });
+
+		const addItemForm = screen.queryByTestId('addItemForm-header');
+		const shareForm = screen.queryByTestId('shareForm-header');
+		const errorMessage = screen.getByTestId('noListErrorMsg');
+
+		expect(errorMessage).toBeInTheDocument();
+		expect(addItemForm).not.toBeInTheDocument();
+		expect(shareForm).not.toBeInTheDocument();
+	});
+
+	it('renders error message when items are not passed in', async () => {
+		const data = { data: [] };
+		renderList({ listPath: '/test-list', data });
+		const errorMessage = screen.getByTestId('noItemsErrorMsg');
+
+		expect(errorMessage).toBeInTheDocument();
+	});
 });