From 1a6a1a1df53dc9a64e8c35ca4dfb85dfe768650e Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Mon, 2 May 2022 18:25:13 +0200 Subject: [PATCH 1/3] Incrementing line hits in MainProductTest --- .../src/components/products/MainProducts.tsx | 1 + .../products/tests/MainProducts.test.tsx | 31 ++++++++++++++++--- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/webapp/src/components/products/MainProducts.tsx b/webapp/src/components/products/MainProducts.tsx index 7eb9f46..43fc5c8 100644 --- a/webapp/src/components/products/MainProducts.tsx +++ b/webapp/src/components/products/MainProducts.tsx @@ -359,6 +359,7 @@ function MainProducts(props: MainProductsProps): JSX.Element { min={29.99} max={420.0} onChangeCommitted={(_e, value) => { filterMaxPrice(value as number) }} + data-testid="maxPricePanel" />

diff --git a/webapp/src/components/products/tests/MainProducts.test.tsx b/webapp/src/components/products/tests/MainProducts.test.tsx index 7d78d67..a353516 100644 --- a/webapp/src/components/products/tests/MainProducts.test.tsx +++ b/webapp/src/components/products/tests/MainProducts.test.tsx @@ -61,7 +61,8 @@ test("Filter is rendered properly", async () => { expect(screen.getByText('Min Price')).toBeInTheDocument(); expect(screen.getByText('Max Price')).toBeInTheDocument(); expect(screen.getByText('Rating')).toBeInTheDocument(); - + expect(screen.getByTestId('minPricePanel')).toBeInTheDocument(); + expect(screen.getByTestId('maxPricePanel')).toBeInTheDocument(); }); @@ -134,8 +135,29 @@ test("When listing products, use filter by color works as expected", async () => await waitFor(() => expect(screen.getByTestId("yellow")).toBeVisible()); let yellowOpt = screen.getByTestId("yellow"); fireEvent.click(yellowOpt); - expect(getByColor).toHaveBeenCalledWith("&color[eq]=yellow"); //we cannot expect to see the content changed to yellow cars as we're mocking the API call.. + expect(getByColor).toHaveBeenCalledWith("&color[eq]=yellow"); + + fireEvent.click(screen.getByTestId("orange")); + expect(getByColor).toHaveBeenCalledWith("&color[eq]=orange"); + + fireEvent.click(screen.getByTestId("red")); + expect(getByColor).toHaveBeenCalledWith("&color[eq]=red"); + + fireEvent.click(screen.getByTestId("gray")); + expect(getByColor).toHaveBeenCalledWith("&color[eq]=gray"); + + fireEvent.click(screen.getByTestId("green")); + expect(getByColor).toHaveBeenCalledWith("&color[eq]=green"); + + fireEvent.click(screen.getByTestId("blue")); + expect(getByColor).toHaveBeenCalledWith("&color[eq]=blue"); + + fireEvent.click(screen.getByTestId("white")); + expect(getByColor).toHaveBeenCalledWith("&color[eq]=white"); + + fireEvent.click(screen.getByTestId("black")); + expect(getByColor).toHaveBeenCalledWith("&color[eq]=black"); }); test("When listing products, use filter by brand works as expected", async () => { @@ -201,12 +223,11 @@ test("When listing products, use filter by rating works as expected", async () = await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument()); - - //we cannot expect to see the content changed to cars rated with 1 star as we're mocking the API call.. //thus, we can only test the parameters passed to the API let pricePn = screen.getByTestId('ratingPanel').firstChild as HTMLElement; pricePn.click(); expect(getByRating).toHaveBeenCalledWith("&rating[gte]=1"); -}); \ No newline at end of file +}); + From 2c9a7732e6abe90bc10b50b8e2f3bf669327e01c Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Mon, 2 May 2022 18:47:49 +0200 Subject: [PATCH 2/3] Refactoring to avoid code duplication (fixing Fail in quality) - main products test --- .../products/tests/MainProducts.test.tsx | 206 ++++++++++++++++++ 1 file changed, 206 insertions(+) diff --git a/webapp/src/components/products/tests/MainProducts.test.tsx b/webapp/src/components/products/tests/MainProducts.test.tsx index a353516..79fbfc4 100644 --- a/webapp/src/components/products/tests/MainProducts.test.tsx +++ b/webapp/src/components/products/tests/MainProducts.test.tsx @@ -159,6 +159,212 @@ test("When listing products, use filter by color works as expected", async () => fireEvent.click(screen.getByTestId("black")); expect(getByColor).toHaveBeenCalledWith("&color[eq]=black"); }); +test("When listing products, use filter by color gray works", 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 => { + return Promise.resolve(["1"]); + }); + //The products are retrieved from the getProducts method of the API. + const getByColorGray = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve([])); + + render( { + //intentional testing purposes + }} /> ); + + + //open filtering + fireEvent.click(screen.getByTestId("openFilterBtn")); + + + await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument()); + + let colorChooserGray = screen.getByTestId("colorPanel").firstChild as HTMLElement; + expect(colorChooserGray).toBeInTheDocument(); + fireEvent.mouseDown(colorChooserGray); + + await waitFor(() => expect(screen.getByTestId("gray")).toBeVisible()); + let grayOpt = screen.getByTestId("gray"); + fireEvent.click(grayOpt); + + //we cannot expect to see the content changed to gray cars as we're mocking the API call.. + expect(getByColorGray).toHaveBeenCalledWith("&color[eq]=gray"); + + + +}); +test("When listing products, use filter by color orange works", 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 => { + return Promise.resolve(["1"]); + }); + //The products are retrieved from the getProducts method of the API. + const getByColorOrange = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve([])); + render( { + //intentional testing purposes + }} /> ); + + //open filtering + fireEvent.click(screen.getByTestId("openFilterBtn")); + + await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument()); + + let colorChooserOrange = screen.getByTestId("colorPanel").firstChild as HTMLElement; + expect(colorChooserOrange).toBeInTheDocument(); + fireEvent.mouseDown(colorChooserOrange); + + await waitFor(() => expect(screen.getByTestId("orange")).toBeVisible()); + let orangeOpt = screen.getByTestId("orange"); + fireEvent.click(orangeOpt); + + //we cannot expect to see the content changed to orange cars as we're mocking the API call.. + expect(getByColorOrange).toHaveBeenCalledWith("&color[eq]=orange"); + + + +}); + +test("When listing products, use filter by color red works", 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 => { + return Promise.resolve(["1"]); + }); + //The products are retrieved from the getProducts method of the API. + const getByColorRed = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve([])); + render( { + //intentional testing purposes + }} /> ); + + //open filtering + fireEvent.click(screen.getByTestId("openFilterBtn")); + + await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument()); + + let colorChooserRed = screen.getByTestId("colorPanel").firstChild as HTMLElement; + expect(colorChooserRed).toBeInTheDocument(); + fireEvent.mouseDown(colorChooserRed); + + await waitFor(() => expect(screen.getByTestId("red")).toBeVisible()); + let redOpt = screen.getByTestId("red"); + fireEvent.click(redOpt); + + //we cannot expect to see the content changed to red cars as we're mocking the API call.. + expect(getByColorRed).toHaveBeenCalledWith("&color[eq]=red"); + +}); + +test("When listing products, use filter by color green works", 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 => { + return Promise.resolve(["1"]); + }); + //The products are retrieved from the getProducts method of the API. + const getByColorGreen = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve([])); + render( { + //intentional testing purposes + }} /> ); + + //open filtering + fireEvent.click(screen.getByTestId("openFilterBtn")); + + await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument()); + + let colorChooserGreen = screen.getByTestId("colorPanel").firstChild as HTMLElement; + expect(colorChooserGreen).toBeInTheDocument(); + fireEvent.mouseDown(colorChooserGreen); + + await waitFor(() => expect(screen.getByTestId("green")).toBeVisible()); + let greenOpt = screen.getByTestId("green"); + fireEvent.click(greenOpt); + + //we cannot expect to see the content changed to green cars as we're mocking the API call.. + expect(getByColorGreen).toHaveBeenCalledWith("&color[eq]=green"); + +}); +test("When listing products, use filter by color blue works", 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 => { + return Promise.resolve(["1"]); + }); + //The products are retrieved from the getProducts method of the API. + const getByColorBlue = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve([])); + render( { + //intentional testing purposes + }} /> ); + + //open filtering + fireEvent.click(screen.getByTestId("openFilterBtn")); + + await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument()); + + let colorChooserBlue = screen.getByTestId("colorPanel").firstChild as HTMLElement; + expect(colorChooserBlue).toBeInTheDocument(); + fireEvent.mouseDown(colorChooserBlue); + + await waitFor(() => expect(screen.getByTestId("blue")).toBeVisible()); + let blueOpt = screen.getByTestId("blue"); + fireEvent.click(blueOpt); + + //we cannot expect to see the content changed to blue cars as we're mocking the API call.. + expect(getByColorBlue).toHaveBeenCalledWith("&color[eq]=blue"); + +}); +test("When listing products, use filter by color white works", 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 => { + return Promise.resolve(["1"]); + }); + //The products are retrieved from the getProducts method of the API. + const getByColorWhite = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve([])); + render( { + //intentional testing purposes + }} /> ); + + //open filtering + fireEvent.click(screen.getByTestId("openFilterBtn")); + + await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument()); + + let colorChooserWhite = screen.getByTestId("colorPanel").firstChild as HTMLElement; + expect(colorChooserWhite).toBeInTheDocument(); + fireEvent.mouseDown(colorChooserWhite); + + await waitFor(() => expect(screen.getByTestId("white")).toBeVisible()); + let whiteOpt = screen.getByTestId("white"); + fireEvent.click(whiteOpt); + + //we cannot expect to see the content changed to white cars as we're mocking the API call.. + expect(getByColorWhite).toHaveBeenCalledWith("&color[eq]=white"); + +}); + +test("When listing products, use filter by color black works", 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 => { + return Promise.resolve(["1"]); + }); + //The products are retrieved from the getProducts method of the API. + const getByColorBlack = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve([])); + render( { + //intentional testing purposes + }} /> ); + + //open filtering + fireEvent.click(screen.getByTestId("openFilterBtn")); + + await waitFor(() => expect(screen.getByTestId("drawer-filter")).toBeInTheDocument()); + + let colorChooserBlack = screen.getByTestId("colorPanel").firstChild as HTMLElement; + expect(colorChooserBlack).toBeInTheDocument(); + fireEvent.mouseDown(colorChooserBlack); + + await waitFor(() => expect(screen.getByTestId("black")).toBeVisible()); + let blackOpt = screen.getByTestId("black"); + fireEvent.click(blackOpt); + + //we cannot expect to see the content changed to red cars as we're mocking the API call.. + expect(getByColorBlack).toHaveBeenCalledWith("&color[eq]=black"); + +}); 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. From fbedeefb7700f5a4ba3931a2251fa7810ce89c81 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Mon, 2 May 2022 18:49:50 +0200 Subject: [PATCH 3/3] I forgot to delete the duplicated lines that cause quality fail. Now it's fixed --- .../products/tests/MainProducts.test.tsx | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/webapp/src/components/products/tests/MainProducts.test.tsx b/webapp/src/components/products/tests/MainProducts.test.tsx index 79fbfc4..2ef2b12 100644 --- a/webapp/src/components/products/tests/MainProducts.test.tsx +++ b/webapp/src/components/products/tests/MainProducts.test.tsx @@ -138,26 +138,7 @@ test("When listing products, use filter by color works as expected", async () => //we cannot expect to see the content changed to yellow cars as we're mocking the API call.. expect(getByColor).toHaveBeenCalledWith("&color[eq]=yellow"); - fireEvent.click(screen.getByTestId("orange")); - expect(getByColor).toHaveBeenCalledWith("&color[eq]=orange"); - fireEvent.click(screen.getByTestId("red")); - expect(getByColor).toHaveBeenCalledWith("&color[eq]=red"); - - fireEvent.click(screen.getByTestId("gray")); - expect(getByColor).toHaveBeenCalledWith("&color[eq]=gray"); - - fireEvent.click(screen.getByTestId("green")); - expect(getByColor).toHaveBeenCalledWith("&color[eq]=green"); - - fireEvent.click(screen.getByTestId("blue")); - expect(getByColor).toHaveBeenCalledWith("&color[eq]=blue"); - - fireEvent.click(screen.getByTestId("white")); - expect(getByColor).toHaveBeenCalledWith("&color[eq]=white"); - - fireEvent.click(screen.getByTestId("black")); - expect(getByColor).toHaveBeenCalledWith("&color[eq]=black"); }); test("When listing products, use filter by color gray works", async () => { //We need to mock this function as the ProductCard calls it in order to render the img of each product.