From 7a31ae58ce52146eda1588cc625c22bd94bf522b Mon Sep 17 00:00:00 2001
From: Maria Rykova <maria.nigay@yandex.ru>
Date: Thu, 21 Dec 2023 19:45:03 +0800
Subject: [PATCH] add more cypress tests

---
 web/leaderboard/cypress/e2e/page.cy.ts        | 22 ++++++
 web/leaderboard/cypress/e2e/profile.cy.ts     | 12 +++
 .../ConnectWalletModal/ConnectWallet.cy.tsx   |  0
 .../connectedWalletModal.cy.tsx               | 78 +++++++++++++++++++
 .../app/components/Dropdown/dropdown.cy.tsx   | 44 +++++++++++
 .../src/app/components/Footer/footer.cy.tsx   |  8 ++
 .../src/app/components/Profile/index.tsx      |  5 +-
 .../src/app/components/Profile/profile.cy.tsx |  8 ++
 web/leaderboard/src/app/page.tsx              |  4 +-
 web/leaderboard/src/pages/api/users.ts        | 40 ++++++++++
 10 files changed, 217 insertions(+), 4 deletions(-)
 create mode 100644 web/leaderboard/cypress/e2e/profile.cy.ts
 create mode 100644 web/leaderboard/src/app/components/ConnectWallet/ConnectWalletModal/ConnectWallet.cy.tsx
 create mode 100644 web/leaderboard/src/app/components/ConnectWallet/ConnectedWalletModal/connectedWalletModal.cy.tsx
 create mode 100644 web/leaderboard/src/app/components/Dropdown/dropdown.cy.tsx
 create mode 100644 web/leaderboard/src/app/components/Footer/footer.cy.tsx
 create mode 100644 web/leaderboard/src/app/components/Profile/profile.cy.tsx
 create mode 100644 web/leaderboard/src/pages/api/users.ts

diff --git a/web/leaderboard/cypress/e2e/page.cy.ts b/web/leaderboard/cypress/e2e/page.cy.ts
index ddb642e4b..d19ae68a4 100644
--- a/web/leaderboard/cypress/e2e/page.cy.ts
+++ b/web/leaderboard/cypress/e2e/page.cy.ts
@@ -8,4 +8,26 @@ describe("Home Page Tests", () => {
     cy.get('[class*="header"]').should("exist");
     cy.contains("h1", "Fluidity Leaderboard").should("exist");
   });
+
+  it("change filters on click all time", () => {
+    cy.get("[data-cy=all-btn]").click();
+    cy.get("[data-cy=title]").contains("ALL TIME");
+  });
+
+  it("open Connect Wallet Modal", () => {
+    cy.get('[class*="connected_wallet"]').should("exist");
+    cy.get('[class*="connected_wallet"]').click();
+    cy.wait(10000);
+    cy.get('[class*="connect-wallet-outer-container"]').should("exist");
+  });
+
+  it("Confirms the number of adresses in the table", () => {
+    cy.visit("http://localhost:3001");
+    cy.request("GET", "api/users").then((response) => {
+      expect(response.status).to.eq(200);
+      expect(response).to.have.property("headers");
+      expect(response).to.have.property("duration");
+      expect(response.body).to.have.length(3);
+    });
+  });
 });
diff --git a/web/leaderboard/cypress/e2e/profile.cy.ts b/web/leaderboard/cypress/e2e/profile.cy.ts
new file mode 100644
index 000000000..4d4998bd4
--- /dev/null
+++ b/web/leaderboard/cypress/e2e/profile.cy.ts
@@ -0,0 +1,12 @@
+describe("Connect Wallet Modal Open Test", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3001");
+  });
+
+  it("open Connect Wallet Modal", () => {
+    cy.get('[class*="connected_wallet"]').should("exist");
+    cy.get('[class*="connected_wallet"]').click();
+    cy.wait(10000);
+    cy.get('[class*="connect-wallet-outer-container"]').should("exist");
+  });
+});
diff --git a/web/leaderboard/src/app/components/ConnectWallet/ConnectWalletModal/ConnectWallet.cy.tsx b/web/leaderboard/src/app/components/ConnectWallet/ConnectWalletModal/ConnectWallet.cy.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/leaderboard/src/app/components/ConnectWallet/ConnectedWalletModal/connectedWalletModal.cy.tsx b/web/leaderboard/src/app/components/ConnectWallet/ConnectedWalletModal/connectedWalletModal.cy.tsx
new file mode 100644
index 000000000..eb68b7848
--- /dev/null
+++ b/web/leaderboard/src/app/components/ConnectWallet/ConnectedWalletModal/connectedWalletModal.cy.tsx
@@ -0,0 +1,78 @@
+import { ConnectedWalletModal } from "./ConnectedWalletModal";
+import React from "react";
+
+const addressSize = 12 / 2;
+const trimAddress = (address: string) => {
+  const leftSide = address.substring(0, addressSize);
+
+  const rightSide = address.substring(
+    address.length - addressSize,
+    address.length
+  );
+
+  return `${leftSide}..${rightSide}`;
+};
+
+describe("ConnectedWalletModal Component Tests", () => {
+  it("Renders the modal when visible is true", () => {
+    const props = {
+      visible: true,
+      address: "0x0x3a568E31540E2179b4833b21C6a45710b569D595",
+      close: cy.stub().as("close"),
+      disconnect: cy.stub().as("disconnect"),
+    };
+
+    cy.mount(<ConnectedWalletModal {...props} />);
+    cy.get('[class*="show-modal"]').should("exist");
+  });
+
+  it("Does not render the modal when visible is false", () => {
+    const props = {
+      visible: false,
+      address: "0x0x3a568E31540E2179b4833b21C6a45710b569D595",
+      close: cy.stub().as("close"),
+      disconnect: cy.stub().as("disconnect"),
+    };
+
+    cy.mount(<ConnectedWalletModal {...props} />);
+
+    cy.get('[class*="show-modal"]').should("not.exist");
+  });
+
+  it("Displays the address correctly", () => {
+    const props = {
+      visible: true,
+      address: "0x0x3a568E31540E2179b4833b21C6a45710b569D595",
+      close: cy.stub().as("close"),
+      disconnect: cy.stub().as("disconnect"),
+    };
+    cy.mount(<ConnectedWalletModal {...props} />);
+    cy.contains(trimAddress(props.address)).should("be.visible");
+  });
+
+  it("Calls the disconnect function on disconnect button click", () => {
+    const props = {
+      visible: true,
+      address: "0x0x3a568E31540E2179b4833b21C6a45710b569D595",
+      close: cy.stub().as("close"),
+      disconnect: cy.stub().as("disconnect"),
+    };
+
+    cy.mount(<ConnectedWalletModal {...props} />);
+    cy.get('[class*="disconnect-wallet-btn-in-modal"]').click();
+    cy.get("@disconnect").should("have.been.calledOnce");
+  });
+
+  it("Calls the close function on close (cross) button click", () => {
+    const props = {
+      visible: true,
+      address: "0x0x3a568E31540E2179b4833b21C6a45710b569D595",
+      close: cy.stub().as("close"),
+      disconnect: cy.stub().as("disconnect"),
+    };
+
+    cy.mount(<ConnectedWalletModal {...props} />);
+    cy.get('[class*="modal-cancel-btn"]').click();
+    cy.get("@close").should("have.been.calledOnce");
+  });
+});
diff --git a/web/leaderboard/src/app/components/Dropdown/dropdown.cy.tsx b/web/leaderboard/src/app/components/Dropdown/dropdown.cy.tsx
new file mode 100644
index 000000000..c9beea82b
--- /dev/null
+++ b/web/leaderboard/src/app/components/Dropdown/dropdown.cy.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { DropdownOptions } from "./index";
+import "@fluidity-money/surfing";
+import "./Dropdown.module.scss";
+
+describe("DropdownOptions Component", () => {
+  let setSortedByItem: any;
+  let setOpenDropdown: any;
+  let sortData: any;
+
+  beforeEach(() => {
+    setSortedByItem = cy.stub();
+    setOpenDropdown = cy.stub();
+    sortData = cy.stub();
+
+    cy.mount(
+      <DropdownOptions
+        setSortedByItem={setSortedByItem}
+        setOpenDropdown={setOpenDropdown}
+        sortData={sortData}
+      />
+    );
+  });
+
+  it("renders correctly", () => {
+    cy.get("[class*='dropdown_options']").should("exist");
+    cy.get("[class*='dropdown_options'] ul li").should("have.length", 3);
+  });
+
+  it("handles option click correctly", () => {
+    const optionTitles = ["volume", "rewards", "number"];
+
+    optionTitles.forEach((title, index) => {
+      cy.get("[class*='dropdown_options'] ul li")
+        .eq(index)
+        .click()
+        .then(() => {
+          expect(setSortedByItem).to.be.calledWith(optionTitles[index]);
+          expect(setOpenDropdown).to.be.calledWith(false);
+          expect(sortData).to.be.calledWith(optionTitles[index].toLowerCase());
+        });
+    });
+  });
+});
diff --git a/web/leaderboard/src/app/components/Footer/footer.cy.tsx b/web/leaderboard/src/app/components/Footer/footer.cy.tsx
new file mode 100644
index 000000000..205efc206
--- /dev/null
+++ b/web/leaderboard/src/app/components/Footer/footer.cy.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import Footer from "./index";
+
+describe("<Footer />", () => {
+  it("mounts <Footer />", () => {
+    cy.mount(<Footer />);
+  });
+});
diff --git a/web/leaderboard/src/app/components/Profile/index.tsx b/web/leaderboard/src/app/components/Profile/index.tsx
index eb5d7e008..cf42d0738 100644
--- a/web/leaderboard/src/app/components/Profile/index.tsx
+++ b/web/leaderboard/src/app/components/Profile/index.tsx
@@ -32,6 +32,7 @@ export const Profile = () => {
         />
       ) : (
         <GeneralButton
+          data-cy="connect-wallet-btn"
           type={isConnected || isConnecting ? "transparent" : "primary"}
           size={"medium"}
           handleClick={() =>
@@ -43,7 +44,7 @@ export const Profile = () => {
         </GeneralButton>
       )}
 
-      <Modal id="connect-wallet" visible={walletModalVisibility}>
+      <Modal visible={walletModalVisibility}>
         <div className={styles.cover}>
           <ConnectWalletModal
             visible={walletModalVisibility}
@@ -51,7 +52,7 @@ export const Profile = () => {
           />
         </div>
       </Modal>
-      <Modal id="connect-wallet" visible={connectedWalletModalVisibility}>
+      <Modal id="connected-wallet" visible={connectedWalletModalVisibility}>
         <div className={styles.cover}>
           <ConnectedWalletModal
             visible={connectedWalletModalVisibility}
diff --git a/web/leaderboard/src/app/components/Profile/profile.cy.tsx b/web/leaderboard/src/app/components/Profile/profile.cy.tsx
new file mode 100644
index 000000000..c907d9274
--- /dev/null
+++ b/web/leaderboard/src/app/components/Profile/profile.cy.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import { Profile } from "./index";
+
+describe("<Profile />", () => {
+  it("mounts <Profile />", () => {
+    cy.mount(<Profile />);
+  });
+});
diff --git a/web/leaderboard/src/app/page.tsx b/web/leaderboard/src/app/page.tsx
index 9307640e0..975853ad3 100644
--- a/web/leaderboard/src/app/page.tsx
+++ b/web/leaderboard/src/app/page.tsx
@@ -315,7 +315,7 @@ export default function Home() {
                 Leaderboard
               </Heading>
             </div>
-            <Text>
+            <Text data-cy="title">
               This leaderboard shows your rank among other users
               {filterIndex === 0 ? " per" : " for"}
               &nbsp;
@@ -355,7 +355,7 @@ export default function Home() {
                     : `${styles.btn} ${styles.btn_highlited}`
                 }
               >
-                <Text code size="sm">
+                <Text code size="sm" data-cy="all-btn">
                   ALL TIME
                 </Text>
               </GeneralButton>
diff --git a/web/leaderboard/src/pages/api/users.ts b/web/leaderboard/src/pages/api/users.ts
new file mode 100644
index 000000000..42f6a618b
--- /dev/null
+++ b/web/leaderboard/src/pages/api/users.ts
@@ -0,0 +1,40 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+type User = {
+  address: string;
+  number_of_transactions: number;
+  rank: number;
+  volume: number;
+  yield_earned: number;
+};
+
+export default function users(
+  req: NextApiRequest,
+  res: NextApiResponse<User[]>
+) {
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "application/json");
+  return res.json([
+    {
+      address: "0x21f2275f26611fba1d486153b5d2d78164568435",
+      number_of_transactions: 21898,
+      rank: 2388,
+      volume: 255.13345799999914,
+      yield_earned: 18.985949367059586,
+    },
+    {
+      address: "0x1cb94adfd3314d48ca8145b2c6983419257c0486",
+      number_of_transactions: 12520,
+      rank: 3682,
+      volume: 894699.873285003,
+      yield_earned: 482.0982366909158,
+    },
+    {
+      address: "0xe776ffdab7b40147fc0b8e93676eb444fb3650b6",
+      number_of_transactions: 7135,
+      rank: 4260,
+      volume: 240194.4372060101,
+      yield_earned: 920.81961067,
+    },
+  ]);
+}