From f23957e717ca4fe5838b2c60e0938bc1974511cb Mon Sep 17 00:00:00 2001
From: aahna-ashina <95955389+aahna-ashina@users.noreply.github.com>
Date: Tue, 25 Oct 2022 16:54:34 +0800
Subject: [PATCH] test(cypress): add more integration tests

---
 components/ProposalBadges.tsx |  2 +-
 cypress/e2e/proposals.cy.ts   | 63 +++++++++++++++++++++++++++++++++--
 package.json                  |  2 +-
 pages/proposals/[id].tsx      |  2 +-
 pages/proposals/create.tsx    |  4 +--
 pages/proposals/index.tsx     |  8 ++---
 pages/proposals/process.tsx   |  3 +-
 yarn.lock                     |  8 ++---
 8 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/components/ProposalBadges.tsx b/components/ProposalBadges.tsx
index 9ead9c1..35b28ec 100644
--- a/components/ProposalBadges.tsx
+++ b/components/ProposalBadges.tsx
@@ -2,7 +2,7 @@ import { Badge } from 'flowbite-react'
 
 const ProposalBadges = ({ proposal }: any) => {
   return (
-    <div className="flex flex-row flex-wrap gap-2">
+    <div className="proposalBadges flex flex-row flex-wrap gap-2">
       <Badge color="info">#{proposal.content.kind}</Badge>
       {proposal.approved === true ? (
         <Badge color="success">Approved</Badge>
diff --git a/cypress/e2e/proposals.cy.ts b/cypress/e2e/proposals.cy.ts
index e0494aa..9eab73c 100644
--- a/cypress/e2e/proposals.cy.ts
+++ b/cypress/e2e/proposals.cy.ts
@@ -1,8 +1,67 @@
 describe('Proposals', () => {
+  it('Should load /proposals list', () => {
+    cy.visit('/proposals')
+    cy.get('body').find('#proposalsPage')
+  })
+
+  it('Should open a random proposal page', () => {
+    cy.visit('/proposals')
+    cy.get('body')
+      .find('.proposalCard')
+      .then(proposalCards => {
+        const proposalCardCount: number = Cypress.$(proposalCards).length
+        cy.log('proposalCardCount:', proposalCardCount)
+        const randomProposalCardIndex: number = Math.round((Math.random() * proposalCardCount))
+        cy.log('randomProposalCardIndex:', randomProposalCardIndex)
+        cy.get(`.proposalCard:nth-child(${randomProposalCardIndex + 1})`).click()
+        cy.get('body').find('#proposalPage')
+      })
+  })
+
+  it('Should filter by outcome and open a random proposal page', () => {
+    cy.visit('/proposals')
+    cy.get('#outcomeSelector')
+      .find('option')
+      .then(options => {
+        // Select a random outome option
+        const optionsCount: number = Cypress.$(options).length
+        cy.log('optionsCount:', optionsCount)
+        const randomOptionIndex: number = 1 + Math.floor((Math.random() * (optionsCount - 1)))
+        cy.log('randomOptionIndex:', randomOptionIndex)
+        const randomOptionValue: string = options[randomOptionIndex].value
+        cy.log('randomOptionValue:', randomOptionValue)
+        const randomOptionText: string = options[randomOptionIndex].text
+        cy.log('randomOptionText:', randomOptionText)
+        cy.get('#outcomeSelector').select(randomOptionValue)
+
+        // Open a random proposal page
+        cy.get('body')
+          .find('.proposalCard')
+          .then(proposalCards => {
+            const proposalCardCount: number = Cypress.$(proposalCards).length
+            cy.log('proposalCardCount:', proposalCardCount)
+            const randomProposalCardIndex: number = Math.floor((Math.random() * proposalCardCount))
+            cy.log('randomProposalCardIndex:', randomProposalCardIndex)
+            cy.get(`.proposalCard:nth-child(${randomProposalCardIndex + 1})`).click()
+            cy.get('body').find('#proposalPage')
+            cy.get('.proposalBadges').contains(randomOptionText)
+          })
+      })
+  })
+})
+
+describe('Create Proposal', () => {
+  it('Should load /proposals/create', () => {
+    cy.visit('/proposals')
+    cy.get('#createButton').click()
+    cy.get('body').find('#createPage')
+  })
 
-  it('Should load /proposals page', () => {
+  it('Should load /proposals/process', () => {
     cy.visit('/proposals')
-    cy.get('h1').contains('Proposals')
+    cy.get('#createButton').click()
+    cy.get('#governanceProcessLink').click()
+    cy.get('body').find('#processPage')
   })
 })
 
diff --git a/package.json b/package.json
index 504211d..34a155b 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@types/react-dom": "18.0.6",
     "@types/react-syntax-highlighter": "^15.5.3",
     "autoprefixer": "^10.4.7",
-    "cypress": "^10.8.0",
+    "cypress": "^10.10.0",
     "eslint": "8.20.0",
     "eslint-config-next": "12.2.2",
     "postcss": "^8.4.14",
diff --git a/pages/proposals/[id].tsx b/pages/proposals/[id].tsx
index a19fbeb..482dfc3 100644
--- a/pages/proposals/[id].tsx
+++ b/pages/proposals/[id].tsx
@@ -120,7 +120,7 @@ const proposalComponents = (proposal: any) => {
 
 const Proposal: NextPage = ({ proposal }: any) => {
   return (
-    <div className="flex flex-col w-full xl:max-w-5xl">
+    <div id="proposalPage" className="flex flex-col w-full xl:max-w-5xl">
       <Link href="/proposals">
         <h3 className="ml-2 mb-2 cursor-pointer text-n3blue hover:underline">
           ← All proposals
diff --git a/pages/proposals/create.tsx b/pages/proposals/create.tsx
index 6a10dde..4125f22 100755
--- a/pages/proposals/create.tsx
+++ b/pages/proposals/create.tsx
@@ -29,7 +29,7 @@ const CreateProposals: NextPage = () => {
   }, [proposalDraft])
 
   return (
-    <div className="flex flex-col w-full xl:max-w-5xl">
+    <div id="createPage" className="flex flex-col w-full xl:max-w-5xl">
       <div className="flex flex-row justify-between">
         <Link href="/proposals">
           <a className="ml-2 mb-2 cursor-pointer text-n3blue hover:underline">
@@ -37,7 +37,7 @@ const CreateProposals: NextPage = () => {
           </a>
         </Link>
         <Link href="/proposals/process">
-          <a className="mr-2 mb-2 text-n3blue hover:underline">
+          <a id="governanceProcessLink" className="mr-2 mb-2 text-n3blue hover:underline">
             <div className="flex flex-row items-center gap-1">
               <span>Governance process</span>
             </div>
diff --git a/pages/proposals/index.tsx b/pages/proposals/index.tsx
index b366f64..015ea3a 100644
--- a/pages/proposals/index.tsx
+++ b/pages/proposals/index.tsx
@@ -30,7 +30,7 @@ const Proposals: NextPage = ({ proposals }: any) => {
   const [enactedFilter, setEnactedFilter] = useState('all')
 
   return (
-    <div className="m-auto max-w-3xl xl:max-w-6xl p-4 md:p-0 mb-4">
+    <div id="proposalsPage" className="m-auto max-w-3xl xl:max-w-6xl p-4 md:p-0 mb-4">
       <div className="flex flex-col">
         <div className="flex-1 flex flex-row justify-between w-full mb-8">
           <h1 className="text-3xl text-left font-display dark:text-white">
@@ -38,13 +38,13 @@ const Proposals: NextPage = ({ proposals }: any) => {
           </h1>
           <Link href="/proposals/create">
             <Button>
-              <span className="font-display">Create a proposal</span>
+              <span id="createButton" className="font-display">Create a proposal</span>
             </Button>
           </Link>
         </div>
         <div className="flex justify-end gap-4">
           <div className="w-32">
-            <Select onChange={(e) => setOutcomeFilter(e.target.value)}>
+            <Select id="outcomeSelector" onChange={(e) => setOutcomeFilter(e.target.value)}>
               <option value="all">All outcomes</option>
               <option value="true">Approved</option>
               <option value="false">Rejected</option>
@@ -97,7 +97,7 @@ const Proposals: NextPage = ({ proposals }: any) => {
 
             return (
               <Link href={`/proposals/${proposal.id}`} key={proposal.id}>
-                <div className="cursor-pointer h-full flex">
+                <div className="proposalCard cursor-pointer h-full flex">
                   <Card href="#" horizontal={true}>
                     <div className="h-full">
                       <div className="mb-2">
diff --git a/pages/proposals/process.tsx b/pages/proposals/process.tsx
index 47e4b9d..d03d9c4 100644
--- a/pages/proposals/process.tsx
+++ b/pages/proposals/process.tsx
@@ -24,7 +24,7 @@ const Process: NextPage = ({ markdown }: any) => {
   }, [markdown])
 
   return (
-    <div className="flex flex-col w-full xl:max-w-5xl">
+    <div id="processPage" className="flex flex-col w-full xl:max-w-5xl">
       <div className="flex flex-row justify-between">
         <Link href="/proposals">
           <a className="ml-2 mb-2 cursor-pointer text-n3blue hover:underline">
@@ -32,6 +32,7 @@ const Process: NextPage = ({ markdown }: any) => {
           </a>
         </Link>
         <a
+          id="viewOnGitHubLink"
           className="mr-2 mb-2 cursor-pointer text-n3blue hover:underline"
           href="https://github.com/nation3/gov"
           target="_blank"
diff --git a/yarn.lock b/yarn.lock
index 809a5a1..82f83bd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1611,10 +1611,10 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
   integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
 
-cypress@^10.8.0:
-  version "10.8.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.8.0.tgz#12a681f2642b6f13d636bab65d5b71abdb1497a5"
-  integrity sha512-QVse0dnLm018hgti2enKMVZR9qbIO488YGX06nH5j3Dg1isL38DwrBtyrax02CANU6y8F4EJUuyW6HJKw1jsFA==
+cypress@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.10.0.tgz#fd671297b2ca3e64dfffd55fe3857c388cfbb695"
+  integrity sha512-bU8r44x1NIYAUNNXt3CwJpLOVth7HUv2hUhYCxZmgZ1IugowDvuHNpevnoZRQx1KKOEisLvIJW+Xen5Pjn41pg==
   dependencies:
     "@cypress/request" "^2.88.10"
     "@cypress/xvfb" "^1.2.4"