test(cypress): add more integration tests

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>

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')
   })
 })
 

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",

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

pages/proposals/create.tsx

@@ -29,15 +29,15 @@ 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">
             ← All proposals
           </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>

pages/proposals/index.tsx

@@ -30,21 +30,21 @@ 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">
             Proposals
           </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">

pages/proposals/process.tsx

@@ -24,14 +24,15 @@ 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">
             ← All proposals
           </a>
         </Link>
         <a
+          id="viewOnGitHubLink"
           className="mr-2 mb-2 cursor-pointer text-n3blue hover:underline"
           href="https://github.com/nation3/gov"
           target="_blank"

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"