Merge pull request #162 from Arquisoft/Testing

Testing - adding test of address form

webapp/src/components/products/tests/MainProducts.test.tsx

@@ -91,3 +91,52 @@ test("When listing products the proper function is called", async () => {
 
 
 
+test("When listing products, use filter by color 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 mockAPI = jest.spyOn(api, "getProducts").mockReturnValue(Promise.resolve(productsList));
+
+  const {container}=render(<MemoryRouter><MainProducts refreshCartList={() => { }} /> </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));
+
+  //We check that we can see both products info
+  expect(screen.getByText('bmw')).toBeInTheDocument();
+  expect(screen.getByAltText('bmw')).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");
+  expect(colorChooser).toBeInTheDocument();
+  fireEvent.click(colorChooser);
+ /* let yellowOpt = screen.getByTestId("yellow");
+  await waitFor(() =>  expect(screen.getByTestId("yellow")).toBeInTheDocument());
+  fireEvent.click(yellowOpt);
+  /*
+  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");
+    */
+});        

webapp/src/components/user/AddressForm.test.tsx

@@ -0,0 +1,29 @@
+import { screen, render, queryByText, waitForElementToBeRemoved } from "@testing-library/react";
+
+import AddressForm from './AddressForm';
+
+import userEvent from "@testing-library/user-event";
+
+import { ReactNotifications } from "react-notifications-component";
+/**
+ * Chek that the CheckoutItem component is working as expected with a product.
+ */
+
+
+    test('Check alert is shown when an address field is missing', async () => {
+
+        render(<div><ReactNotifications/><div><AddressForm/></div></div>);
+        expect(screen.getByTestId("street-input")).toBeInTheDocument();
+        expect(screen.getByTestId("locality-input")).toBeInTheDocument();
+        expect(screen.getByTestId("zipcode-input")).toBeInTheDocument();
+        expect(screen.getByTestId("country-input")).toBeInTheDocument();
+        expect(screen.getByText("Example: Valdés Salas.")).toBeInTheDocument();
+        expect(screen.getByText("Example: Oviedo.")).toBeInTheDocument();
+        expect(screen.getByText("Example: 33007.")).toBeInTheDocument();
+        expect(screen.getByText("Example: Spain.")).toBeInTheDocument();
+        expect(screen.getByText('Set Address')).toBeInTheDocument();
+        userEvent.click(screen.getByText('Set Address'));
+        expect(screen.getByText('Attention!')).toBeInTheDocument();
+        expect(screen.getByText('Please, fill all form fields.')).toBeInTheDocument();
+
+    })

webapp/src/components/user/AddressForm.tsx

@@ -107,19 +107,19 @@ export default function AddressForm() {
             <Typography id="addressTitle" variant='h4'>Create / Update DedEx Address</Typography>
             <br></br>
             <form id="myform">
-                <TextField sx={{ width: '85%' }} label="Street" id="Street" aria-describedby="Street-helper-text" required={true} />
+                <TextField data-testid="street-input" sx={{ width: '85%' }} label="Street" id="Street" aria-describedby="Street-helper-text" required={true} />
                 <FormHelperText id="Street-helper-text">Example: Valdés Salas.</FormHelperText>
                 <br></br>
-                <TextField sx={{ width: '85%' }} label="City" id="City" aria-describedby="City-helper-text" required={true} />
+                <TextField data-testid="city-input" sx={{ width: '85%' }} label="City" id="City" aria-describedby="City-helper-text" required={true} />
                 <FormHelperText id="City-helper-text">Example: Oviedo.</FormHelperText>
                 <br></br>
-                <TextField sx={{ width: '85%' }} label="Locality" id="Locality" aria-describedby="Locality-helper-text" required={true} />
+                <TextField data-testid="locality-input" sx={{ width: '85%' }} label="Locality" id="Locality" aria-describedby="Locality-helper-text" required={true} />
                 <FormHelperText id="Locality-helper-text">Example: Asturias.</FormHelperText>
                 <br></br>
-                <TextField sx={{ width: '85%' }} label="ZIP Code" id="ZIPCode" aria-describedby="ZIPCode-helper-text" required={true} />
+                <TextField data-testid="zipcode-input" sx={{ width: '85%' }} label="ZIP Code" id="ZIPCode" aria-describedby="ZIPCode-helper-text" required={true} />
                 <FormHelperText id="ZIPCode-helper-text">Example: 33007.</FormHelperText>
                 <br></br>
-                <TextField sx={{ width: '85%' }} label="Country" id="Country" aria-describedby="Country-helper-text" required={true} />
+                <TextField data-testid="country-input" sx={{ width: '85%' }} label="Country" id="Country" aria-describedby="Country-helper-text" required={true} />
                 <FormHelperText id="Country-helper-text">Example: Spain.</FormHelperText>
                 <Alert sx={{ width: '82%' }} severity="info">Attention! By clicking "Set Address" you are giving us persmission to write on your VCARD, a public place.</Alert>
                 <Button type="button" onClick={addAddress} id="addAddress" variant="contained">Set Address</Button>