Skip to content

Commit

Permalink
Merge pull request #166 from Arquisoft/develop
Browse files Browse the repository at this point in the history 
Develop - adding more test cases in MainProducts
  • Loading branch information
@sebaslh01
sebaslh01 authored May 2, 2022
2 parents 02b67b7 + 90374fd commit 9731796
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 39 deletions.
20 changes: 11 additions & 9 deletions webapp/src/components/products/MainProducts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
</MenuItem>
<br></br>
<MenuItem>
<ListItem button key="orange" onClick={() => { filterColor("orange") }}>
<ListItem button data-testid="orange" key="orange" onClick={() => { filterColor("orange") }}>
<ListItemIcon>
<Brightness1Icon sx={{ color: orange[500] }}></Brightness1Icon>
</ListItemIcon>
Expand All @@ -245,7 +245,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
</MenuItem>
<br></br>
<MenuItem>
<ListItem button key="red" onClick={() => { filterColor("red") }}>
<ListItem button data-testid="red" key="red" onClick={() => { filterColor("red") }}>
<ListItemIcon>
<Brightness1Icon sx={{ color: red[500] }}></Brightness1Icon>
</ListItemIcon>
Expand All @@ -254,7 +254,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
</MenuItem>
<br></br>
<MenuItem>
<ListItem button key="gray" onClick={() => { filterColor("gray") }}>
<ListItem button data-testid="gray" key="gray" onClick={() => { filterColor("gray") }}>
<ListItemIcon>
<Brightness1Icon></Brightness1Icon>
</ListItemIcon>
Expand All @@ -263,7 +263,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
</MenuItem>
<br></br>
<MenuItem>
<ListItem button key="green" onClick={() => { filterColor("green") }}>
<ListItem button data-testid="green" key="green" onClick={() => { filterColor("green") }}>
<ListItemIcon>
<Brightness1Icon sx={{ color: green[500] }}></Brightness1Icon>
</ListItemIcon>
Expand All @@ -272,7 +272,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
</MenuItem>
<br></br>
<MenuItem>
<ListItem button key="blue" onClick={() => { filterColor("blue") }}>
<ListItem button data-testid="blue" key="blue" onClick={() => { filterColor("blue") }}>
<ListItemIcon>
<Brightness1Icon sx={{ color: blue[500] }}></Brightness1Icon>
</ListItemIcon>
Expand All @@ -281,7 +281,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
</MenuItem>
<br></br>
<MenuItem>
<ListItem id="black" button key="white" onClick={() => { filterColor("white") }}>
<ListItem id="white" data-testid="white" button key="white" onClick={() => { filterColor("white") }}>
<ListItemIcon>
<Brightness1Icon id="whiteIcon"></Brightness1Icon>
</ListItemIcon>
Expand All @@ -290,7 +290,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
</MenuItem>
<br></br>
<MenuItem>
<ListItem id="black" button key="black" onClick={() => { filterColor("black") }}>
<ListItem id="black" button data-testid="black" key="black" onClick={() => { filterColor("black") }}>
<ListItemIcon>
<Brightness1Icon id="blackIcon"></Brightness1Icon>
</ListItemIcon>
Expand All @@ -306,14 +306,15 @@ function MainProducts(props: MainProductsProps): JSX.Element {
<br />

<Select
data-testid="brandPanel"
id="brandChooser"
sx={{ width: 200 }}
>
<div id="brandChooserDiv">
<div data-testid="brandOptions" id="brandChooserDiv">
{['All', 'Toyota', 'Volvo', 'Renault', 'Nissan', 'Plymouth', 'BMW', 'Subaru', 'Honda', 'Lamborghini', 'Volkswagen', 'Chevy', 'Polestar', 'Porsche'].map((text, index) => (
<div>
<MenuItem>
<ListItem button key={text} onClick={() => { filterBrand(text) }} id={"li" + index}>
<ListItem button data-testid={text} key={text} onClick={() => { filterBrand(text) }} id={"li" + index}>
<ListItemIcon>
<DirectionsCarIcon />
</ListItemIcon>
Expand Down Expand Up @@ -342,6 +343,7 @@ function MainProducts(props: MainProductsProps): JSX.Element {
min={29.99}
max={420.0}
onChangeCommitted={(_e, value) => { filterMinPrice(value as number) }}
data-testid="minPricePanel"
/>

<br /><Divider /><br />
Expand Down
94 changes: 64 additions & 30 deletions webapp/src/components/products/tests/MainProducts.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ const productsList = [
"reviews": [],
"quantity": 2,
"product": fakeProd,
"_id": "prod1"
"_id": "prod1",
"color": "blue"

}, {
"id": "prod2",
Expand All @@ -35,7 +36,9 @@ const productsList = [
},
];


test("Filter is rendered properly", async () => {
//We need to mock this function as the ProductCard calls it in order to render the img of each product.
jest.spyOn(api, "getProductImages").mockImplementation((_id: string): Promise<string[]> => {
return Promise.resolve(["1"]);
});
Expand All @@ -58,6 +61,9 @@ test("Filter is rendered properly", async () => {
expect(screen.getByText('Min Price')).toBeInTheDocument();
expect(screen.getByText('Max Price')).toBeInTheDocument();
expect(screen.getByText('Rating')).toBeInTheDocument();



});

test("When listing products the proper function is called", async () => {
Expand All @@ -66,17 +72,17 @@ test("When listing products the proper function is called", async () => {
return Promise.resolve(["1"]);
});
//The products are retrieved from the getProducts method of the API.
const mockAPI = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));
const getProducts = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));

render(<MemoryRouter><MainProducts refreshCartList={() => {
//intentional for testing purposes
}} /> </MemoryRouter>);
}} /> </MemoryRouter>);
//When we first render the component, it will make an API call to getProducts.
expect(screen.getByText('Loading products!!')).toBeInTheDocument();
//We neeed to wait for the loader to be removed!!!!
await waitForElementToBeRemoved(() => screen.getByTestId('loader'));
//We make sure getProducts is called
await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1));
await waitFor(() => expect(getProducts).toHaveBeenCalledTimes(1));

//We check that we can see both products info
expect(screen.getByText('bmw')).toBeInTheDocument();
Expand All @@ -86,7 +92,7 @@ test("When listing products the proper function is called", async () => {

expect(api.getProductImages).toHaveBeenCalledWith(productsList[0].id);
expect(api.getProductImages).toHaveBeenCalledWith(productsList[1].id);
expect(mockAPI).toHaveBeenCalledWith("");
expect(getProducts).toHaveBeenCalledWith("");
});


Expand All @@ -97,48 +103,76 @@ test("When listing products, use filter by color works as expected", async () =>
return Promise.resolve(["1"]);
});
//The products are retrieved from the getProducts method of the API.
const mockAPI = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));
const getByColor = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));

render(<MemoryRouter><MainProducts refreshCartList={() => {
//intentional testing purpose
render(<MemoryRouter><MainProducts refreshCartList={() => {
//intentional testing purposes
}} /> </MemoryRouter>);

//We neeed to wait for the loader to be removed!!!!
await waitForElementToBeRemoved(() => screen.getByTestId('loader'));
//We make sure getProducts is called
await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1));
await waitFor(() => expect(getByColor).toHaveBeenCalledTimes(1));

//We check that we can see both products info
expect(screen.getByText('bmw')).toBeInTheDocument();
expect(screen.getByAltText('bmw')).toBeInTheDocument();
expect(screen.getByText('nissan')).toBeInTheDocument();
expect(screen.getByAltText('nissan')).toBeInTheDocument();
let filter = screen.getByTestId("openFilterBtn");
expect(filter).toBeInTheDocument();
fireEvent.click(filter);
fireEvent.click(filter);


await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument());

expect(screen.getByText('Color')).toBeInTheDocument();
let colorChooser = screen.getByTestId("colorPanel");
let colorChooser = screen.getByTestId("colorPanel").firstChild as HTMLElement;
expect(colorChooser).toBeInTheDocument();
fireEvent.click(colorChooser);
/* let yellowOpt = screen.getByTestId("yellow");
await waitFor(() => expect(screen.getByTestId("yellow")).toBeInTheDocument());
fireEvent.click(yellowOpt);
/*
fireEvent.mouseDown(colorChooser);

await waitFor(() => expect(screen.getByTestId("yellow")).toBeVisible());
let yellowOpt = screen.getByTestId("yellow");
expect(yellowOpt).toBeInTheDocument();
fireEvent.click(yellowOpt);
*//*
expect(mockAPI).toHaveBeenCalledWith("&color[eq]=yellow");
expect(colorChooser).toBeInTheDocument();
fireEvent.click(colorChooser);
let yellowOpt = screen.getByTestId("yellow");
expect(yellowOpt).toBeInTheDocument();
fireEvent.click(yellowOpt);
//
expect(mockAPI).toHaveBeenCalledWith("&color[eq]=yellow");
*/
});
expect(getByColor).toHaveBeenCalledWith("&color[eq]=yellow");
//we cannot expect to see the content changed to yellow cars as we're mocking the API call..
});

test("When listing products, use filter by brand works as expected", async () => {
//We need to mock this function as the ProductCard calls it in order to render the img of each product.
jest.spyOn(api, "getProductImages").mockImplementation((_id: string): Promise<string[]> => {
return Promise.resolve(["1"]);
});
//The products are retrieved from the getProducts method of the API.
const getByBrand = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));

render(<MemoryRouter><MainProducts refreshCartList={() => { // intentional for testing
}} /> </MemoryRouter>);

//We neeed to wait for the loader to be removed!!!!
await waitForElementToBeRemoved(() => screen.getByTestId('loader'));
//We make sure getProducts is called
await waitFor(() => expect(getByBrand).toHaveBeenCalledTimes(1));


let filter = screen.getByTestId("openFilterBtn");
expect(filter).toBeInTheDocument();
fireEvent.click(filter);


await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument());

expect(screen.getByText('Brand')).toBeInTheDocument();
let brandChooser = screen.getByTestId("brandPanel").firstChild as HTMLElement;
expect(brandChooser).toBeInTheDocument();
fireEvent.mouseDown(brandChooser);

await waitFor(() => expect(screen.getByTestId("brandOptions")).toBeVisible());
await waitFor(() => expect(screen.getByTestId("Toyota")).toBeVisible());
let yellowOpt = screen.getByTestId("Toyota");
fireEvent.click(yellowOpt);
//we cannot expect to see the content changed to Toyota cars as we're mocking the API call..
//thus, we can only test the parameters passed to the API
expect(getByBrand).toHaveBeenCalledWith("&brand[eq]=Toyota");

});

0 comments on commit 9731796

Please sign in to comment.