StevenJW/x-lab-lbq-technical-test
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add tests for index page

Browse Source
This commit is contained in:
Stedoss
2022-11-01 22:37:37 +00:00
parent a36604ea4b
commit b3ebd978d9
8 changed files with 1802 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/leeds-beer-quest/src/pages/index.tsx
View File

@@ -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>
}
</>
);
};

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

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

38
frontend/leeds-beer-quest/src/tests/pages/index.spec.tsx Normal file
View File

@@ -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();
});
});