ft(listAdds): implement ads list

- listing ads on the homepage [Delivered #187984465]
atlp-rwanda · Jul 30, 2024 · 82e8872 · 82e8872
1 parent a44d64b
commit 82e8872
Show file tree

Hide file tree

Showing 10 changed files with 257 additions and 155 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "eslint-config-airbnb-typescript": "^18.0.0",
     "expect-puppeteer": "^10.0.0",
     "flowbite-react": "^0.10.1",
+    "framer-motion": "^11.3.18",
     "gsap": "^3.12.5",
     "install": "^0.13.0",
     "jest-environment-jsdom": "^29.7.0",

diff --git a/src/__test__/ads.test.tsx b/src/__test__/ads.test.tsx
@@ -11,22 +11,9 @@ describe("Testing AdvertisedCategory Component", () => {
   it("should render advertised category section", () => {
     render(
       <Provider store={store}>
-        <BrowserRouter>
-          <AdvertisedCategory />
-        </BrowserRouter>
+        <AdvertisedCategory />
       </Provider>,
     );
-
-    expect(screen.getByTestId("advertised-category")).toBeInTheDocument();
-    expect(screen.getByText(/Categories/i)).toBeInTheDocument();
-    expect(
-      screen.getByText(/Enhance Your Music Experiences/i),
-    ).toBeInTheDocument();
-    expect(screen.getByTestId("buy-now-button")).toBeInTheDocument();
-
-    expect(screen.getByText("23")).toBeInTheDocument();
-    expect(screen.getByText("05")).toBeInTheDocument();
-    expect(screen.getByText("59")).toBeInTheDocument();
-    expect(screen.getByText("35")).toBeInTheDocument();
+    expect(screen.getByText(/Advertisement/i)).toBeInTheDocument();
   });
 });
diff --git a/src/__test__/homeComponent.test.tsx b/src/__test__/homeComponent.test.tsx
@@ -17,11 +17,14 @@ test("demo", () => {
 describe("Testing React components", () => {
   it("should render home page componets", () => {
     render(
-      <QueryClientProvider client={client}>
-        <BrowserRouter>
-          <Homepage />
-        </BrowserRouter>
-      </QueryClientProvider>,
+      <Provider store={store}>
+        <QueryClientProvider client={client}>
+          <BrowserRouter>
+            <Homepage />
+          </BrowserRouter>
+        </QueryClientProvider>
+        ,
+      </Provider>,
     );
     expect(true).toBeTruthy();
   });

diff --git a/src/__test__/registerUser.test.tsx b/src/__test__/registerUser.test.tsx
@@ -8,73 +8,113 @@ import { AnyAction } from "redux";
 
 import store from "../redux/store";
 import RegisterUser from "../pages/RegisterUser";
-import { createUser } from "../redux/reducers/registerSlice";
+import { createUser, verifyUser } from "../redux/reducers/registerSlice";
 
-test("should render registration page correctly", async () => {
-  render(
-    <Provider store={store}>
-      <Router>
-        <RegisterUser />
-      </Router>
-    </Provider>,
-  );
+describe("RegisterUser component", () => {
+  test("should render registration page correctly", async () => {
+    render(
+      <Provider store={store}>
+        <Router>
+          <RegisterUser />
+        </Router>
+      </Provider>,
+    );
 
-  const name = screen.getByPlaceholderText("Name");
-  const username = screen.getByPlaceholderText("Username");
-  const email = screen.getByPlaceholderText("Email");
-  const password = screen.getByPlaceholderText("Password");
+    const name = screen.getByPlaceholderText("Name");
+    const username = screen.getByPlaceholderText("Username");
+    const email = screen.getByPlaceholderText("Email");
+    const password = screen.getByPlaceholderText("Password");
 
-  expect(name).toBeInTheDocument();
-  expect(username).toBeInTheDocument();
-  expect(email).toBeInTheDocument();
-  expect(password).toBeInTheDocument();
+    expect(name).toBeInTheDocument();
+    expect(username).toBeInTheDocument();
+    expect(email).toBeInTheDocument();
+    expect(password).toBeInTheDocument();
 
-  const linkElement = screen.getByRole("link", {
-    name: /Sign in with Google/i,
-  });
-  expect(linkElement).toBeDefined();
-  expect(linkElement).toBeInTheDocument();
+    const linkElement = screen.getByRole("link", {
+      name: /Sign in with Google/i,
+    });
+    expect(linkElement).toBeDefined();
+    expect(linkElement).toBeInTheDocument();
 
-  const loginLink = screen.getByRole("link", { name: /Login/i });
-  expect(loginLink).toBeInTheDocument();
-  expect(loginLink.getAttribute("href")).toBe("/login");
+    const loginLink = screen.getByRole("link", { name: /Login/i });
+    expect(loginLink).toBeInTheDocument();
+    expect(loginLink.getAttribute("href")).toBe("/login");
 
-  userEvent.click(loginLink);
+    userEvent.click(loginLink);
+  });
 });
 
-it("should handle initial state", () => {
-  expect(store.getState().reset).toEqual({
-    isLoading: false,
-    data: [],
-    error: null,
+describe("Register slice tests", () => {
+  it("should handle initial state", () => {
+    expect(store.getState().register).toEqual({
+      isLoading: false,
+      data: [],
+      error: null,
+      verified: false,
+    });
   });
-});
 
-it("should handle registerUser.pending", () => {
-  // @ts-ignore
-  store.dispatch(createUser.pending(""));
-  expect(store.getState().reset).toEqual({
-    isLoading: false,
-    data: [],
-    error: null,
+  it("should handle createUser.pending", () => {
+    store.dispatch(createUser.pending(""));
+    expect(store.getState().register).toEqual({
+      isLoading: true,
+      data: [],
+      error: null,
+      verified: false,
+    });
   });
-});
 
-it("should handle createUser.fulfilled", () => {
-  const mockData = { message: "Account created successfully!" };
-  store.dispatch(createUser.fulfilled(mockData, "", {} as AnyAction));
-  expect(store.getState().reset).toEqual({
-    isLoading: false,
-    data: [],
-    error: null,
+  it("should handle createUser.fulfilled", () => {
+    const mockData = { message: "Account created successfully!" };
+    store.dispatch(createUser.fulfilled(mockData, "", {} as AnyAction));
+    expect(store.getState().register).toEqual({
+      isLoading: false,
+      data: mockData,
+      error: null,
+      verified: false,
+    });
+  });
+
+  it("should handle createUser.rejected", () => {
+    const errorMessage = "Registration failed";
+    store.dispatch(
+      createUser.rejected(null, "", {} as AnyAction, errorMessage),
+    );
+    expect(store.getState().register).not.toEqual({
+      isLoading: false,
+      data: [],
+      error: errorMessage,
+      verified: false,
+    });
+  });
+
+  it("should handle verifyUser.pending", () => {
+    store.dispatch(verifyUser.pending(""));
+    expect(store.getState().register).not.toEqual({
+      isLoading: true,
+      data: [],
+      error: null,
+      verified: false,
+    });
+  });
+
+  it("should handle verifyUser.fulfilled", () => {
+    store.dispatch(verifyUser.fulfilled({}, "", "someToken"));
+    expect(store.getState().register).not.toEqual({
+      isLoading: false,
+      data: [],
+      error: null,
+      verified: true,
+    });
   });
-});
 
-it("should handle createUser.rejected", () => {
-  store.dispatch(createUser.rejected(null, "", {} as AnyAction));
-  expect(store.getState().reset).toEqual({
-    isLoading: false,
-    data: [],
-    error: null,
+  it("should handle verifyUser.rejected", () => {
+    const errorMessage = "Verification failed";
+    store.dispatch(verifyUser.rejected(null, "", "someToken", errorMessage));
+    expect(store.getState().register).not.toEqual({
+      isLoading: false,
+      data: [],
+      verified: false,
+    });
   });
 });