Add tests for index page

README.md

@@ -144,6 +144,4 @@ More for the frontend, but backend doesn't have the best either. More checks mak
 
 Even if it's just a few, it will show off how I unit test for the frontend.
 
-### Error loading states
-
 ### Add some comments around

frontend/leeds-beer-quest/jest.config.cjs

@@ -1,5 +0,0 @@
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-};

frontend/leeds-beer-quest/jest.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from "jest";
+
+const config: Config = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom"
+};
+
+export default config;

frontend/leeds-beer-quest/package.json

@@ -14,19 +14,23 @@
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.10.11",
     "@tanstack/react-query": "^4.13.4",
+    "@testing-library/jest-dom": "^5.16.5",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.2",
-    "sort-by": "^1.2.0"
+    "sort-by": "^1.2.0",
+    "ts-node": "^10.9.1"
   },
   "devDependencies": {
     "@testing-library/react": "^13.4.0",
     "@types/react": "^18.0.22",
     "@types/react-dom": "^18.0.7",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react": "^2.2.0",
     "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
     "ts-jest": "^29.0.3",
     "typescript": "^4.6.4",
     "vite": "^3.2.0"

frontend/leeds-beer-quest/src/pages/index.tsx

@@ -14,11 +14,13 @@ export function Index() {
 
     const api = new API(Environment.BaseAPIUrl);
 
-    const { data: venueData } = useQuery<TVenue[], Error>(["venues", filteredCategories, filteredTags, nameTextFilter], () => api.getVenues({nameFilter: nameTextFilter, categories: filteredCategories, tags: filteredTags}));
+    const { data: venueData, isError: venueError } = useQuery<TVenue[], Error>(["venues", filteredCategories, filteredTags, nameTextFilter], () => api.getVenues(
+        {nameFilter: nameTextFilter, categories: filteredCategories, tags: filteredTags}
+    ));
 
-    const { data: categoryData } = useQuery<TCategory[], Error>(["categories"], api.getCategories);
+    const { data: categoryData, isError: categoryError } = useQuery<TCategory[], Error>(["categories"], api.getCategories);
 
-    const { data: tagData } = useQuery<TTag[], Error>(["tags"], api.getTags);
+    const { data: tagData, isError: tagError } = useQuery<TTag[], Error>(["tags"], api.getTags);
 
     const handleSearchChange = (event: any) => {
         const { value } = event.target;
@@ -33,12 +35,20 @@ export function Index() {
     return(
         <>
             <h1>Leeds Beer Quest</h1>
-            <div style={{ display: "flex", justifyContent: "space-around" }}>
-                <TextField label={"Name"} variant="outlined" onChange={handleSearchChange} />
-                <DropdownFilter filters={tagData ?? []} setSelectedFilters={setFilteredTags} prefillText={"Tags"} />
-                <DropdownFilter filters={categoryData ?? []} setSelectedFilters={setFilteredCategories} prefillText={"Categories"} />
-            </div>
-            <VenueGrid venueData={venueData ?? []} />
+            {venueError || categoryError || tagError ?
+                <div>
+                    There has been an error fetching data!
+                </div>
+                :
+                <div>
+                    <div style={{ display: "flex", justifyContent: "space-around" }}>
+                        <TextField label={"Name"} variant="outlined" onChange={handleSearchChange} />
+                        <DropdownFilter filters={tagData ?? []} setSelectedFilters={setFilteredTags} prefillText={"Tags"} />
+                        <DropdownFilter filters={categoryData ?? []} setSelectedFilters={setFilteredCategories} prefillText={"Categories"} />
+                    </div>
+                    <VenueGrid venueData={venueData ?? []} />
+                </div>
+            }
         </>
     );
 };

frontend/leeds-beer-quest/src/tests/api.spec.ts

@@ -1,4 +1,3 @@
-import { expect, jest, describe, it } from '@jest/globals';
 import { API } from '../lib/api';
 import { TCategory, TTag } from '../lib/types';
 

frontend/leeds-beer-quest/src/tests/pages/index.spec.tsx

@@ -0,0 +1,38 @@
+// import { expect, jest, describe, it } from '@jest/globals';
+import { render } from '@testing-library/react';
+import { Index } from '../../pages';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            retry: false,
+        },
+    },
+});
+
+describe("Given the index page", () => {
+    it ("should render the page heading", () => {
+        const { getByText } = render(
+            <QueryClientProvider client={queryClient} >
+                <Index/>
+            </QueryClientProvider>
+        );
+
+        let el = getByText("Leeds Beer Quest");
+
+        expect(el).not.toBeNull();
+    });
+
+    it ("should show an error when data fails to load", async () => {
+        const { findByText } = render(
+            <QueryClientProvider client={queryClient} >
+                <Index/>
+            </QueryClientProvider>
+        );
+
+        let el = await findByText("There has been an error fetching data!");
+
+        expect(el).not.toBeNull();
+    });
+});