test: added e2e tests

packages/cypress/src/integration/research/list.spec.ts

@@ -0,0 +1,41 @@
+describe('[Research - List Articles]', () => {
+  const researchPageUrl = '/research'
+
+  beforeEach(() => {
+    cy.visit(researchPageUrl)
+  })
+
+  it('[By Everyone - Lists all research articles]', () => {
+    cy.step('Verify page loads with research articles')
+    cy.get('[data-cy=ResearchList]').should('be.visible')
+    cy.get('[data-cy=ResearchListItem]').should('have.length.greaterThan', 0)
+  })
+
+  it('[Search Functionality - Filters articles]', () => {
+    const searchTerm = 'test'
+
+    cy.step('Type a keyword into the search bar')
+    cy.get('[data-cy=research-search-box]').clear().type(searchTerm)
+
+    cy.step('Verify filtered results are displayed')
+    cy.get('[data-cy=ResearchListItem]').should('have.length.at.least', 1)
+  })
+
+  it('[Pagination - Displays additional articles]', () => {
+    cy.step('Verify pagination is visible')
+    let itemCount
+    cy.get('[data-cy=ResearchListItem]').then((items) => {
+      itemCount = items.length
+    })
+    cy.get('[data-cy=loadMoreButton]').should('be.visible')
+    cy.get('[data-cy=loadMoreButton]').click()
+
+    cy.step('Verify additional articles are loaded')
+    cy.then(() => {
+      cy.get('[data-cy=ResearchListItem]').should(
+        'have.length.greaterThan',
+        itemCount,
+      )
+    })
+  })
+})

src/pages/Research/Content/ResearchList.tsx

@@ -91,15 +91,21 @@ const ResearchList = observer(() => {
       />
 
       {showDrafts ? (
-        <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+        <ul
+          style={{ listStyle: 'none', padding: 0, margin: 0 }}
+          data-cy="ResearchList"
+        >
           {drafts.map((item) => {
             return <ResearchListItem key={item._id} item={item} />
           })}
         </ul>
       ) : (
         <>
           {researchItems && researchItems.length !== 0 && (
-            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+            <ul
+              style={{ listStyle: 'none', padding: 0, margin: 0 }}
+              data-cy="ResearchList"
+            >
               {researchItems.map((item) => (
                 <ResearchListItem key={item._id} item={item} />
               ))}
@@ -121,6 +127,7 @@ const ResearchList = observer(() => {
               >
                 <Button
                   type="button"
+                  data-cy="loadMoreButton"
                   onClick={() => fetchResearchItems(lastId)}
                 >
                   {listing.loadMore}