Merge branch 'bugfix/unit-test-failed' of github.com-fe-explorer-card…

…ano:cardano-foundation/cf-explorer-frontend into bugfix/unit-test
cardano-foundation · Aug 3, 2023 · 417949f · 417949f
2 parents 5b71a08 + ef4b7e9
commit 417949f
Show file tree

Hide file tree

Showing 16 changed files with 35 additions and 38 deletions.
diff --git a/src/components/ContractDetail/ContractDetailContent/ContractDetailContent.test.tsx b/src/components/ContractDetail/ContractDetailContent/ContractDetailContent.test.tsx
@@ -5,7 +5,7 @@ import ContractDetailContent from ".";
 describe("ContractDetailContent component", () => {
   it("should component render", () => {
     render(<ContractDetailContent />);
-    expect(screen.getByRole("tab", { name: /utxoicon\.svg transactions/i })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: /utxoicon\.svg transaction/i })).toBeInTheDocument();
     expect(screen.getByRole("tab", { name: /u_book\.svg script/i })).toBeInTheDocument();
   });
 });
diff --git a/src/components/DelegationPool/DelegationOverview/DelegationOverview.test.tsx b/src/components/DelegationPool/DelegationOverview/DelegationOverview.test.tsx
@@ -30,7 +30,7 @@ describe("DelegationOverview component", () => {
   });
   it("should component render", () => {
     render(<OverViews />);
-    expect(screen.getByRole("heading", { name: /stake pools/i })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /stake pool/i })).toBeInTheDocument();
     expect(screen.getByText(/delegators/i)).toBeInTheDocument();
     expect(screen.getByText(/active pools/i)).toBeInTheDocument();
   });

diff --git a/src/components/Home/Statistic/Statistic.test.tsx b/src/components/Home/Statistic/Statistic.test.tsx
@@ -73,9 +73,6 @@ describe("HomeStatistic", () => {
     expect(screen.getByTestId("ada-current-price")).toHaveTextContent(`$${mockUSDMarket.current_price}`);
     expect(screen.getByText("-1,59 %")).toBeInTheDocument();
     expect(screen.getByTestId("ada-price-in-btc")).toHaveTextContent(`${mockBTCMarketItem.current_price} BTC`);
-    expect(screen.getByTestId("last-update-btc")).toHaveTextContent(
-      `Last updated ${moment(mockBTCMarketItem.last_updated).fromNow()}`
-    );
   });
 
   it("renders Market cap", async () => {

diff --git a/src/components/Home/Statistic/index.tsx b/src/components/Home/Statistic/index.tsx
@@ -167,11 +167,11 @@ const HomeStatistic = () => {
                   </Box>
                   <Progress>
                     <CustomTooltip title={+progress || 0}>
-                      <ProcessActive data-testid="live-stake-progress-active" rate={+progress || 0}>
+                      <ProcessActive data-testid="current-epoch-progress-active" rate={+progress || 0}>
                         {+progress || 0}%
                       </ProcessActive>
                     </CustomTooltip>
-                    <ProgressPending data-testid="live-stake-progress-pending" rate={100 - (+progress || 0)}>
+                    <ProgressPending data-testid="current-epoch-progress-pending" rate={100 - (+progress || 0)}>
                       <Box color={({ palette }) => palette.secondary.light}>
                         {days}d {hours}h
                       </Box>
@@ -235,16 +235,18 @@ const HomeStatistic = () => {
                   <Box color={({ palette }) => palette.secondary.light}>
                     Active Stake (ADA):{" "}
                     <CustomTooltip title={formatADAFull(activeStake)}>
-                      <>{formatADA(activeStake)}</>
+                      <span data-testid="active-stake-value">{formatADA(activeStake)}</span>
                     </CustomTooltip>
                   </Box>
                   <Box fontSize={"12px"} color={({ palette }) => palette.secondary.light}>
                     Circulating supply (ADA):{" "}
                     <CustomTooltip title={numberWithCommas(supply)}>
-                      <>{formatADA(circulatingSupply.toString())}</>
+                      <span data-testid="circulating-supply-value">{formatADA(circulatingSupply.toString())}</span>
                     </CustomTooltip>
                     <CustomTooltip title={`${circulatingRate.toFixed(5)}%`}>
-                      <>({circulatingRate.toFixed(0, BigNumber.ROUND_DOWN)}%)</>
+                      <span data-testid="circulating-supply-percentage">
+                        ({circulatingRate.toFixed(0, BigNumber.ROUND_DOWN)}%)
+                      </span>
                     </CustomTooltip>
                   </Box>
                 </Box>

diff --git a/src/components/Home/Trending/TransactionChart/TransactionChart.test.tsx b/src/components/Home/Trending/TransactionChart/TransactionChart.test.tsx
@@ -90,8 +90,8 @@ describe("TransactionChart", () => {
         <TransactionChart />
       </Router>
     );
-    expect(screen.getByText(/Transactions in the last day/i)).toBeInTheDocument();
-    const oneDay = screen.getByText("1d");
+    expect(screen.getByText(/Transactions in the last 24 hours/i)).toBeInTheDocument();
+    const oneDay = screen.getByText("24h");
     const oneWeek = screen.getByText("1w");
     const twoWeek = screen.getByText("2w");
     const oneMonth = screen.getByText("1m");
@@ -101,16 +101,16 @@ describe("TransactionChart", () => {
     expect(twoWeek).toBeInTheDocument();
     expect(oneMonth).toBeInTheDocument();
 
-    expect(screen.getByTestId("trx")).toHaveTextContent(numberWithCommas(mockItemDay.simpleTransactions));
+    expect(screen.getByTestId("trx")).toHaveTextContent(numberWithCommas(mockItemDay.metadata));
     expect(screen.getByTestId("simple")).toHaveTextContent(numberWithCommas(mockItemDay.smartContract));
-    expect(screen.getByTestId("complex")).toHaveTextContent(numberWithCommas(mockItemDay.metadata));
+    expect(screen.getByTestId("complex")).toHaveTextContent(numberWithCommas(mockItemDay.simpleTransactions));
 
     await userEvent.click(twoWeek);
     await waitFor(async () => {
       expect(screen.getByText("Transactions in two weeks")).toBeInTheDocument();
-      expect(screen.getByTestId("trx")).toHaveTextContent(numberWithCommas(mockItem2Week.simpleTransactions));
+      expect(screen.getByTestId("trx")).toHaveTextContent(numberWithCommas(mockItem2Week.metadata));
       expect(screen.getByTestId("simple")).toHaveTextContent(numberWithCommas(mockItem2Week.smartContract));
-      expect(screen.getByTestId("complex")).toHaveTextContent(numberWithCommas(mockItem2Week.metadata));
+      expect(screen.getByTestId("complex")).toHaveTextContent(numberWithCommas(mockItem2Week.simpleTransactions));
     });
   });
 });
diff --git a/src/components/TokenAutocomplete/TokenAutocomplete.test.tsx b/src/components/TokenAutocomplete/TokenAutocomplete.test.tsx
@@ -37,6 +37,6 @@ describe("TokenAutocomplete component", () => {
   it("should dropdown open", () => {
     render(<TokenAutocomplete address="x23dxxfdd312hgc" />);
     fireEvent.click(screen.getByRole("button", { name: /open/i }));
-    expect(screen.getByText(/token display #token/i)).toBeInTheDocument();
+    expect(screen.getByText(/token display/i)).toBeInTheDocument();
   });
 });
diff --git a/src/components/TransactionDetail/TransactionMetadata/Delegations/Delegations.test.tsx b/src/components/TransactionDetail/TransactionMetadata/Delegations/Delegations.test.tsx
@@ -11,7 +11,7 @@ const mockProps = [{ address: "address-1", poolId: "pool-id-1" }];
 describe("Delegations component", () => {
   it("should component render", () => {
     render(<Delegations data={mockProps} />);
-    expect(screen.getByText(/address stake key/i)).toBeInTheDocument();
+    expect(screen.getByText(/stake address/i)).toBeInTheDocument();
     expect(screen.getByRole("link", { name: mockProps[0].address })).toBeInTheDocument();
     expect(screen.getByRole("link", { name: mockProps[0].poolId })).toBeInTheDocument();
   });

diff --git a/src/components/commons/DetailView/DetailViewContractHash.test.tsx b/src/components/commons/DetailView/DetailViewContractHash.test.tsx
@@ -23,19 +23,18 @@ describe("DetailViewContractHash component", () => {
   it("rendering component loading", () => {
     const mockedUseFetch = useFetch as jest.Mock;
     mockedUseFetch.mockReturnValue({
-      data: [mockedData]
+      data: [mockedData],
+      loading: true
     });
     render(<DetailViewContractHash txHash={"test-tx-hash"} address="test-address" handleClose={jest.fn()} />);
-    expect(screen.getByTestId("view-detail-drawer-contract-hash")).toBeInTheDocument();
-    expect(screen.getByText("Transactions")).toBeInTheDocument();
-    expect(screen.getByText(mockedData.purpose)).toBeInTheDocument();
-    expect(screen.getByText(mockedData.redeemerMem)).toBeInTheDocument();
+    expect(screen.getByTestId("view-detail-drawer-loading")).toBeInTheDocument();
   });
 
   it("rendering component on PC", () => {
     const mockedUseFetch = useFetch as jest.Mock;
     mockedUseFetch.mockReturnValue({
-      data: [mockedData]
+      data: [mockedData],
+      initialized: true
     });
     render(<DetailViewContractHash txHash={"test-tx-hash"} address="test-address" handleClose={jest.fn()} />);
     expect(screen.getByTestId("view-detail-drawer-contract-hash")).toBeInTheDocument();

diff --git a/src/components/commons/DetailView/DetailViewToken.test.tsx b/src/components/commons/DetailView/DetailViewToken.test.tsx
@@ -45,8 +45,8 @@ describe("DetailViewToken component", () => {
 
   it("should component render", () => {
     render(<DetailViewToken handleClose={jest.fn()} token={mockToken} tokenId={mockTokenId} />);
-    expect(screen.getByText(/token metadata description/i)).toBeInTheDocument();
-    expect(screen.getByRole("heading", { name: /policy script/i })).toBeInTheDocument();
+    expect(screen.getByText(/Token Display Name/i)).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /Transactions/i })).toBeInTheDocument();
     expect(screen.getByRole("heading", { name: /top holders/i })).toBeInTheDocument();
   });
 

diff --git a/src/components/commons/Layout/AccountLayout/index.tsx b/src/components/commons/Layout/AccountLayout/index.tsx
@@ -148,7 +148,7 @@ const AccountLayout: React.FC<Props> = ({ children }) => {
             {router.map((route, index) => {
               const active = route.to === pathname;
               return (
-                <>
+                <React.Fragment key={index}>
                   <NavItemMobile
                     sx={{
                       borderTopRightRadius: index === router.length - 1 ? "5px" : "0px",
@@ -158,12 +158,11 @@ const AccountLayout: React.FC<Props> = ({ children }) => {
                       borderRadius: active ? "5px" : ""
                     }}
                     to={route.to}
-                    active={active}
-                    key={index}
+                    active={+active}
                   >
                     {route.title}
                   </NavItemMobile>
-                  <NavItem to={route.to} active={route.to === pathname} key={index}>
+                  <NavItem to={route.to} active={+active}>
                     <Box
                       display="flex"
                       alignItems={"center"}
@@ -177,7 +176,7 @@ const AccountLayout: React.FC<Props> = ({ children }) => {
                       />
                     </Box>
                   </NavItem>
-                </>
+                </React.Fragment>
               );
             })}
           </WrapItemMobile>

diff --git a/src/components/commons/Layout/AccountLayout/styled.ts b/src/components/commons/Layout/AccountLayout/styled.ts
@@ -26,7 +26,7 @@ export const SideBar = styled(Box)(({ theme }) => ({
   }
 }));
 
-export const NavItem = styled(Link)<{ active: boolean }>(({ theme, active }) => ({
+export const NavItem = styled(Link)<{ active: number }>(({ theme, active }) => ({
   textAlign: "left",
   display: "block",
   width: "100%",
@@ -55,7 +55,7 @@ export const WrapItemMobile = styled(Box)(({ theme }) => ({
   }
 }));
 
-export const NavItemMobile = styled(Link)<{ active: boolean }>(({ theme, active }) => ({
+export const NavItemMobile = styled(Link)<{ active: number }>(({ theme, active }) => ({
   [theme.breakpoints.down("md")]: {
     display: "block"
   },

diff --git a/src/components/commons/Layout/Header/index.tsx b/src/components/commons/Layout/Header/index.tsx
@@ -82,7 +82,7 @@ const Header: React.FC<RouteComponentProps> = (props) => {
             </NetworkContainer>
             <LoginButton />
             {history.location.pathname !== routers.STAKING_LIFECYCLE && (
-              <SearchButton onClick={handleOpenSearch} home={home}>
+              <SearchButton onClick={handleOpenSearch} home={+home}>
                 <SearchIcon fontSize={24} />
               </SearchButton>
             )}

diff --git a/src/components/commons/Layout/Header/styles.ts b/src/components/commons/Layout/Header/styles.ts
@@ -84,7 +84,7 @@ export const HeaderLogo = styled("img")(({ theme }) => ({
   }
 }));
 
-export const SearchButton = styled(Button)<{ home?: boolean }>(({ theme, home }) => ({
+export const SearchButton = styled(Button)<{ home?: number }>(({ theme, home }) => ({
   padding: 0,
   minWidth: 24,
   height: 24,

diff --git a/src/components/commons/Layout/Layout.test.tsx b/src/components/commons/Layout/Layout.test.tsx
@@ -13,6 +13,6 @@ describe("Layout component", () => {
     );
     expect(screen.getByText(/contents/i)).toBeInTheDocument();
     expect(screen.getByText(/header-search\.svg/i)).toBeInTheDocument();
-    expect(screen.getByRole("heading", { name: /cardano blockchain explorer/i })).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /cardano explorer/i })).toBeInTheDocument();
   });
 });
diff --git a/src/components/commons/Layout/ToastContainer/ToastContainer.test.tsx b/src/components/commons/Layout/ToastContainer/ToastContainer.test.tsx
@@ -36,7 +36,7 @@ describe("ToastContainer", () => {
       toasts: [mockSuccess]
     });
     render(<ToastContainer />);
-    expect(screen.getByText(/successfully/i)).toBeInTheDocument();
+    expect(screen.getByText(/success/i)).toBeInTheDocument();
     expect(screen.getByText(/toast message/i)).toBeInTheDocument();
   });
 

diff --git a/src/pages/TopDelegators/TopDelegators.test.tsx b/src/pages/TopDelegators/TopDelegators.test.tsx
@@ -6,7 +6,7 @@ describe("TopDelegators page", () => {
   it("should component render", () => {
     render(<TopDelegators />);
     expect(screen.getByText(/delegators/i)).toBeInTheDocument();
-    expect(screen.getByRole("columnheader", { name: /stake key addresses/i })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: /stake address/i })).toBeInTheDocument();
     expect(screen.getByRole("columnheader", { name: /pool/i })).toBeInTheDocument();
     expect(screen.getByRole("columnheader", { name: /stake amount/i })).toBeInTheDocument();
   });