Scan: Add UI test for all pages

CHANGELOG_UNRELEASED.md

@@ -27,6 +27,7 @@
 
 ### Scan
 
+- (impv) [\#2740](https://github.com/bandprotocol/bandchain/pull/2740) Add UI test for all pages
 - (impv) [\#2725](https://github.com/bandprotocol/bandchain/pull/2725) Show validator name if voter is validator
 - (impv) [\#2719](https://github.com/bandprotocol/bandchain/pull/2719) Implement query Band supply
 - (bugs) [\#2716](https://github.com/bandprotocol/bandchain/pull/2716) Fixed no decimal balance bug on account index

scan/cypress/integration/all_pages.spec.js

@@ -0,0 +1,152 @@
+/// <reference types="cypress" />
+
+describe("Navigation", () => {
+  describe("Home", () => {
+    describe("Should be able to render Home page", () => {
+      before(() => {
+        cy.visit("/").wait(1000);
+      });
+
+      it("Validate highlight info", () => {
+        cy.get('[id="highlight-Band Price"] > span:nth-of-type(1)').should(
+          "contain",
+          "Band Price"
+        );
+        cy.get('[id="highlight-Market Cap"] > span:nth-of-type(1)').should(
+          "contain",
+          "Market Cap"
+        );
+        cy.get('[id="highlight-Latest Block"] > span:nth-of-type(1)').should(
+          "contain",
+          "Latest Block"
+        );
+        cy.get(
+          '[id="highlight-Active Validators"] > span:nth-of-type(1)'
+        ).should("contain", "Active Validators");
+      });
+
+      it("Validate total request graph", () => {
+        cy.get('[id="totalRequestsGraphSection"] > h4:nth-of-type(1)').should(
+          "contain",
+          "Total Requests"
+        );
+      });
+
+      it("Validate latest requests", () => {
+        cy.get(
+          '[id="latestRequestsSectionHeader"] > div:nth-of-type(1) > span:nth-of-type(1)'
+        ).should("contain", "Latest Requests");
+      });
+
+      it("Validate latest blocks", () => {
+        cy.get(
+          '[id="latestBlocksSectionHeader"] > div:nth-of-type(1) > span:nth-of-type(1)'
+        ).should("contain", "Latest Blocks");
+      });
+
+      it("Validate latest transactions", () => {
+        cy.get(
+          '[id="latestTransactionsSectionHeader"] > div:nth-of-type(1) > span:nth-of-type(1)'
+        ).should("contain", "Latest Transactions");
+      });
+    });
+  });
+
+  describe("Validators", () => {
+    before(() => {
+      cy.visit("/validators").wait(1000);
+    });
+
+    describe("Should be able to render Validators page", () => {
+      it("Validate title", () => {
+        cy.get(
+          '[id="validatorsSection"] > div:nth-of-type(1) > div:nth-of-type(1) > *:nth-child(1)'
+        ).should("contain", "All Validators");
+      });
+    });
+  });
+
+  describe("Blocks", () => {
+    before(() => {
+      cy.visit("/blocks").wait(1000);
+    });
+
+    describe("Should be able to render Blocks page", () => {
+      it("Validate title", () => {
+        cy.get(
+          '[id="blocksSection"] > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > *:nth-child(1)'
+        ).should("contain", "All Blocks");
+      });
+    });
+  });
+
+  describe("Transactions", () => {
+    before(() => {
+      cy.visit("/txs").wait(1000);
+    });
+
+    describe("Should be able to render Transactions page", () => {
+      it("Validate title", () => {
+        cy.get(
+          '[id="transactionsSection"] > div:nth-of-type(1) > div:nth-of-type(1) > *:nth-child(1)'
+        ).should("contain", "All Transactions");
+      });
+    });
+  });
+
+  describe("Proposals", () => {
+    before(() => {
+      cy.visit("/proposals").wait(1000);
+    });
+
+    describe("Should be able to render Transactions page", () => {
+      it("Validate title", () => {
+        cy.get(
+          '[id="proposalsSection"] > div:nth-of-type(1) > div:nth-of-type(1) > *:nth-child(1)'
+        ).should("contain", "All Proposals");
+      });
+    });
+  });
+
+  describe("Data Sources", () => {
+    before(() => {
+      cy.visit("/data-sources").wait(1000);
+    });
+
+    describe("Should be able to render Data Sources page", () => {
+      it("Validate title", () => {
+        cy.get(
+          '[id="datasourcesSection"] > div:nth-of-type(1) > div:nth-of-type(1) > div:nth-of-type(1) > *:nth-child(1)'
+        ).should("contain", "All Data Sources");
+      });
+    });
+  });
+
+  describe("Oracle Scripts", () => {
+    before(() => {
+      cy.visit("/oracle-scripts").wait(1000);
+    });
+
+    describe("Should be able to render Oracle Scripts page", () => {
+      it("Validate title", () => {
+        cy.get(
+          '[id="oraclescriptsSection"] > div:nth-of-type(1) > *:nth-child(1)'
+        ).should("contain", "All Oracle Scripts");
+      });
+    });
+  });
+
+  describe("Requests", () => {
+    before(() => {
+      cy.visit("/requests").wait(1000);
+    });
+
+    describe("Should be able to render Requests page", () => {
+      it("Validate title", () => {
+        cy.get(
+          '[id="requestsSection"] > div:nth-of-type(1) > div:nth-of-type(1) > *:nth-child(1)'
+        ).should("contain", "All Requests");
+      });
+    });
+  });
+});

scan/src/components/ChainInfoHighlights.re

@@ -48,6 +48,7 @@ module HighlightCard = {
        | _ => React.null
        }}
       <div
+        id={"highlight-" ++ label}
         className={Css.merge([
           Styles.innerCard,
           CssHelper.flexBox(~direction=`column, ~justify=`spaceBetween, ~align=`flexStart, ()),

scan/src/components/LatestBlocks.re

@@ -121,7 +121,9 @@ let renderDesktop = (~blocksSub) => {
 [@react.component]
 let make = (~blocksSub) => {
   <>
-    <div className={CssHelper.flexBox(~justify=`spaceBetween, ~align=`flexEnd, ())}>
+    <div
+      className={CssHelper.flexBox(~justify=`spaceBetween, ~align=`flexEnd, ())}
+      id="latestBlocksSectionHeader">
       <div>
         <Text
           value="Latest Blocks"

scan/src/components/LatestRequests.re

@@ -80,7 +80,9 @@ let make = () => {
   let requestsSub = RequestSub.getList(~page=1, ~pageSize=requestCount, ());
 
   <>
-    <div className={CssHelper.flexBox(~justify=`spaceBetween, ~align=`flexEnd, ())}>
+    <div
+      className={CssHelper.flexBox(~justify=`spaceBetween, ~align=`flexEnd, ())}
+      id="latestRequestsSectionHeader">
       <div>
         <Text
           value="Latest Requests"

scan/src/components/LatestTxTable.re

@@ -86,7 +86,9 @@ let make = () => {
   let txsSub = TxSub.getList(~page=1, ~pageSize=txCount, ());
 
   <>
-    <div className={CssHelper.flexBox(~justify=`spaceBetween, ~align=`flexEnd, ())}>
+    <div
+      className={CssHelper.flexBox(~justify=`spaceBetween, ~align=`flexEnd, ())}
+      id="latestTransactionsSectionHeader">
       <div>
         <Text
           value="Latest Transactions"

scan/src/components/TotalRequestsGraph.re

@@ -182,6 +182,7 @@ let make = () => {
 
   <div className=Styles.card>
     <div
+      id="totalRequestsGraphSection"
       className={Css.merge([
         CssHelper.flexBox(),
         Styles.infoHeader,

scan/src/pages/BlockHomePage.re

@@ -107,7 +107,7 @@ let make = () => {
   let isMobile = Media.isMobile();
 
   <Section>
-    <div className=CssHelper.container>
+    <div className=CssHelper.container id="blocksSection">
       <div className=CssHelper.mobileSpacing>
         <Row.Grid alignItems=Row.Center marginBottom=40 marginBottomSm=24>
           <Col.Grid col=Col.Twelve>

scan/src/pages/DataSourceHomePage.re

@@ -159,7 +159,7 @@ let make = () => {
   );
 
   <Section>
-    <div className=CssHelper.container>
+    <div className=CssHelper.container id="datasourcesSection">
       <div className=CssHelper.mobileSpacing>
         <Row.Grid alignItems=Row.Center marginBottom=40 marginBottomSm=24>
           <Col.Grid col=Col.Twelve>

scan/src/pages/OracleScriptHomePage.re

@@ -279,7 +279,7 @@ let make = () => {
   let allSub = Sub.all2(oracleScriptsSub, oracleScriptsCountSub);
 
   <Section>
-    <div className=CssHelper.container>
+    <div className=CssHelper.container id="oraclescriptsSection">
       <div className=CssHelper.mobileSpacing>
         <Heading value="All Oracle Scripts" size=Heading.H2 marginBottom=40 marginBottomSm=24 />
         <Heading value="Most Requested" size=Heading.H4 marginBottom=16 />

scan/src/pages/ProposalHomePage.re

@@ -159,7 +159,7 @@ let make = () => {
   let allSub = Sub.all3(proposalsSub, bondedTokenCountSub, voteStatSub);
 
   <Section>
-    <div className=CssHelper.container>
+    <div className=CssHelper.container id="proposalsSection">
       <Row.Grid alignItems=Row.Center marginBottom=40 marginBottomSm=24>
         <Col.Grid col=Col.Twelve> <Heading value="All Proposals" size=Heading.H2 /> </Col.Grid>
       </Row.Grid>

scan/src/pages/RequestHomePage.re

@@ -132,7 +132,7 @@ let make = () => {
   let allSub = Sub.all2(requestsSub, totalRequestCountSub);
 
   <Section>
-    <div className=CssHelper.container>
+    <div className=CssHelper.container id="requestsSection">
       <Row.Grid alignItems=Row.Center marginBottom=40 marginBottomSm=24>
         <Col.Grid col=Col.Twelve>
           <Heading value="All Requests" size=Heading.H2 marginBottom=40 marginBottomSm=24 />

scan/src/pages/TxHomePage.re

@@ -9,7 +9,7 @@ let make = () => {
   let isMobile = Media.isMobile();
 
   <Section>
-    <div className=CssHelper.container>
+    <div className=CssHelper.container id="transactionsSection">
       <Row.Grid alignItems=Row.Center marginBottom=40 marginBottomSm=24>
         <Col.Grid col=Col.Twelve>
           <Heading value="All Transactions" size=Heading.H2 marginBottom=40 marginBottomSm=24 />

scan/src/pages/ValidatorHomePage.re

@@ -60,7 +60,7 @@ let make = () => {
   let isMobile = Media.isMobile();
 
   <Section>
-    <div className=CssHelper.container>
+    <div className=CssHelper.container id="validatorsSection">
       <Row.Grid alignItems=Row.Center marginBottom=40 marginBottomSm=24>
         <Col.Grid>
           <Heading value="All Validators" size=Heading.H2 marginBottom=40 marginBottomSm=24 />