Add basic smoke tests to all pages

CivicActions · Jan 28, 2025 · 3cf67d6 · 3cf67d6
1 parent ccebd3a
commit 3cf67d6
Show file tree

Hide file tree

Showing 8 changed files with 274 additions and 65 deletions.
diff --git a/docs/cypress-tags.md b/docs/cypress-tags.md
@@ -0,0 +1,25 @@
+# Cypress tags available for grep
+
+The list below contains tags currently used in the Cypress tests. These are available as variables when using cypress-grep.
+
+## Test type
+- @smoke (Used for quick checks to make sure elements load and look correct. Does not test all interactable actions.)
+
+## Viewport
+- @mobile
+- @desktop
+
+## Component
+- @header
+- @footer
+- @goalSearch
+
+## Page
+- @homepage (The site homepage.)
+- @agencies (This is the /agencies listing page.)
+- @agencyPage (An individual agency, like NASA.)
+- @goalPage (An individual goal.)
+
+## Goal types
+- @apg
+- @strategic
diff --git a/src/frontend/components/view--goal-search--fulltext.tsx b/src/frontend/components/view--goal-search--fulltext.tsx
@@ -18,7 +18,7 @@ export function ViewGoalSearchFulltext({
       <input 
         id="search-goals"
         className="usa-input"
-        name="search"
+        name="Search goals"
         type="search"
         value={fulltext}
         onChange={(e) => setFulltext(e.target.value)}

diff --git a/tests/cypress/e2e/agencies.cy.js b/tests/cypress/e2e/agencies.cy.js
@@ -1,9 +1,23 @@
-// Title
-// List of agencies
-// cards have logo, title, and explore button
-// all are present on load
-
-// USA banner
-// mvp banner
-// header is there
-// Check breadcrumb
+describe('The /agencies page', () => {
+  beforeEach(() => {
+    cy.visit('/agencies');
+  });
+  it('successfully loads', {tags: ['@agencies', '@smoke']}, () => {
+    cy.findByRole('img', {name: "Performance.gov logo"}).should('exist');
+    cy.findByRole('link', {name: 'Home'}).should('exist');
+    cy.get('.usa-breadcrumb').within(($group) => {
+      cy.findByText('Agencies').should('exist');
+      cy.findAllByRole('listitem').should('have.length', 2);
+    });
+    cy.findByRole('heading', {level: 1, name: 'Explore federal goals'}).should('exist');
+    cy.get('.usa-card-group').within(($group) => {
+      cy.findAllByRole('listitem').should('have.length', 29);
+      cy.findAllByRole('listitem').each(($card) => {
+        cy.wrap($card).within(($innerGroup) => {
+          cy.findByRole('heading', {level: 4}).should('exist');
+          cy.findByRole('link', {name: 'Explore agency goals'}).should('exist');
+        });
+      });
+    });
+  });
+});
diff --git a/tests/cypress/e2e/footer.cy.js b/tests/cypress/e2e/footer.cy.js
@@ -1,2 +1,10 @@
-// Make sure footer exists
-// There is nothing in it
+describe('The site footer', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+  it('successfully loads', {tags: ['@footer', '@smoke']}, () => {
+    cy.get('footer').should('exist');
+    cy.get('footer').should('have.class', 'height-8');
+    cy.get('footer').should('have.class', 'bg-black');
+  });
+});
diff --git a/tests/cypress/e2e/goal.cy.js b/tests/cypress/e2e/goal.cy.js
@@ -1,15 +1,121 @@
-// Check for decoration per goal type
+describe('An individual goal page', () => {
+  it('successfully loads an Agency priority goal', {tags: ['@goalPage', '@goals', '@apg', '@smoke']}, () => {
+    cy.visit('/agencies/nasa/space-technology-leadership');
+    cy.findByRole('img', {name: "Performance.gov logo"}).should('exist');
+    cy.get('.usa-breadcrumb').within(($group) => {
+      cy.findByRole('link', {name: 'Home'}).should('exist');
+      cy.findByRole('link', {name: 'Agencies'}).should('exist');
+      cy.findByRole('link', {name: 'NASA'}).should('exist');
+      cy.findByText('Space Technology Leadership').should('exist');
+      cy.findAllByRole('listitem').should('have.length', 4);
+    });
+    cy.get('.goal-type').within(($item) => {
+      cy.wrap($item).should('have.class', 'goal-type--apg');
+      cy.findByText('Agency priority goal').should('exist');
+      cy.get('span').should('has.class', 'bg-primary-vivid');
+      cy.get('span').should('has.class', 'usa-tag');
+    });
+    cy.findByRole('img', {name: 'NASA-Seal'}).should('exist');
+    cy.findByRole('heading', {level: 1, name: 'Space Technology Leadership'}).should('exist');
+    cy.findByRole('heading', {level: 2, name: 'About this NASA priority goal'}).should('exist');
+    cy.get('#goal-description + div.font-body-md').should('exist');
+    cy.findByText('Strategic plan:').should('exist');
+    cy.findByRole('link', {name: 'National Aeronautics and Space Administration Strategic Plan (FY2022-26)'}).should('exist');
+    cy.findByRole('heading', {level: 2, name: 'Objectives'}).should('exist');
+    cy.get('#objectives + ol').should('exist');
+    cy.get('#objectives + ol > li').each(($item) => {
+      cy.wrap($item).within(($inner) => {
+        cy.findByRole('heading', {level: 3}).should('exist');
+        cy.findByRole('heading', {level: 4, name: 'Performance indicators'}).should('exist');
+        cy.get('p').should('exist');
+        cy.get('table').should('exist');
+        cy.findByRole('columnheader', {name: 'Start date'}).should('exist');
+        cy.findByRole('columnheader', {name: 'End date'}).should('exist');
+        cy.findByRole('columnheader', {name: 'Actual result'}).should('exist');
+        cy.findByRole('columnheader', {name: 'Target result'}).should('exist');
+      });
+    });
+    cy.get('div + ul > li').each(($item) => {
+      cy.wrap($item).within(($inner) => {
+        cy.findByText('General science/space/technology').should('exist');
+        cy.get('span').should('have.class', 'usa-tag');
+      })
+    });
+    // Test side nav.
+    cy.findByRole('heading', {level: 4, name: 'On this page'}).should('exist');
+    cy.get('.usa-in-page-nav__nav').within(($nav) => {
+      cy.findAllByRole('listitem').should('have.length', 6);
+      cy.findAllByRole('link').should('have.length', 6);
+      cy.findAllByRole('listitem').each(($item, $index) => {
+        const primaryIndexes = [0,1];
+        cy.wrap($item).should('have.class', 'usa-in-page-nav__item');
+        if(primaryIndexes.includes($index)) {
+          cy.wrap($item).should('have.class', 'usa-in-page-nav__item--primary');
+        }
+      })
+    });
+  });
 
-// sidebar check
-// title
-// about section
-// link to strategic plan
-// objectives
-// performance indicators if they exist
-// fallback for no indicators
-
-
-// USA banner
-// mvp banner
-// header is there
-// Check breadcrumb
+  it('successfully loads an Strategic goal', {tags: ['@goalPage', '@goals', '@strategic', '@smoke']}, () => {
+    cy.visit('/agencies/nasa/expand-human-knowledge-through-new-scientific-discoveries');
+    cy.findByRole('img', {name: "Performance.gov logo"}).should('exist');
+
+    cy.get('.usa-breadcrumb').within(($group) => {
+      cy.findByRole('link', {name: 'Home'}).should('exist');
+      cy.findByRole('link', {name: 'Agencies'}).should('exist');
+      cy.findByRole('link', {name: 'NASA'}).should('exist');
+      cy.findByText('Expand human knowledge through new scientific discoveries').should('exist');
+      cy.findAllByRole('listitem').should('have.length', 4);
+    });
+    cy.get('.goal-type').within(($item) => {
+      cy.wrap($item).should('have.class', 'goal-type--strategic');
+      cy.findByText('Strategic goal').should('exist');
+      cy.get('span').should('has.class', 'bg-base-darkest');
+      cy.get('span').should('has.class', 'usa-tag');
+    });
+    cy.findByRole('img', {name: 'NASA-Seal'}).should('exist');
+    cy.findByRole('heading', {level: 1, name: 'Expand human knowledge through new scientific discoveries'}).should('exist');
+    cy.findByRole('heading', {level: 2, name: 'About this NASA strategic goal'}).should('exist');
+    cy.get('#goal-description + div.font-body-md').should('exist');
+    cy.findByText('Strategic plan:').should('exist');
+    cy.findByRole('link', {name: 'National Aeronautics and Space Administration Strategic Plan (FY2022-26)'}).should('exist');
+    cy.findByRole('heading', {level: 2, name: 'Objectives'}).should('exist');
+    cy.get('#objectives + ol').should('exist');
+    cy.get('#objectives + ol > li').each(($item) => {
+      cy.wrap($item).within(($inner) => {
+
+        cy.findByRole('heading', {level: 3}).should('exist');
+        cy.findByRole('heading', {level: 4, name: 'Performance indicators'}).should('exist');
+        cy.get('p').should('exist');
+        cy.get('ol > li').each(($subItem) => {
+          cy.wrap($subItem).within(($subInner) => {
+            cy.get('table').should('exist');
+            cy.findByRole('columnheader', {name: 'Start date'}).should('exist');
+            cy.findByRole('columnheader', {name: 'End date'}).should('exist');
+            cy.findByRole('columnheader', {name: 'Actual result'}).should('exist');
+            cy.findByRole('columnheader', {name: 'Target result'}).should('exist');
+          });
+        });
+      });
+    });
+    cy.get('div + ul > li').each(($item) => {
+      cy.wrap($item).within(($inner) => {
+        cy.findByText('General science/space/technology').should('exist');
+        cy.get('span').should('have.class', 'usa-tag');
+      })
+    });
+    // Test side nav.
+    cy.findByRole('heading', {level: 4, name: 'On this page'}).should('exist');
+    cy.get('.usa-in-page-nav__nav').within(($nav) => {
+      cy.findAllByRole('listitem').should('have.length', 5);
+      cy.findAllByRole('link').should('have.length', 5);
+      cy.findAllByRole('listitem').each(($item, $index) => {
+        const primaryIndexes = [0,1];
+        cy.wrap($item).should('have.class', 'usa-in-page-nav__item');
+        if(primaryIndexes.includes($index)) {
+          cy.wrap($item).should('have.class', 'usa-in-page-nav__item--primary');
+        }
+      })
+    });
+  });
+});
diff --git a/tests/cypress/e2e/header.cy.js b/tests/cypress/e2e/header.cy.js
@@ -1,11 +1,33 @@
-// Check to see if it exists
-// check for logo 
-// check for goals, agencies links
-// check for search bar
+describe('The site header', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+  it('successfully loads on desktop', {tags: ['@header', '@smoke', '@desktop']}, () => {
+    cy.viewport('macbook-13');
+    cy.findByRole('img', {name: "Performance.gov logo"}).should('exist');
+    cy.get('.usa-header--basic').within(($group) => {
+      cy.findAllByRole('link').should('have.length', 2);
+    });
+    cy.findByLabelText('Search', {selector: 'input'}).should('exist');
+    cy.findByRole('button', {name: 'Search'}).should('exist');
+    cy.findByRole('button', {name: 'Menu'}).should('not.exist');
+  });
 
-// for mobile
-// logo is there
-// menu button is there
-// menu button opens panel 
-// links in panel
-// search in panel
+  it('successfully loads on mobile', {tags: ['@header', '@smoke', '@mobile']}, () => {
+    cy.viewport('iphone-8');
+    cy.findByRole('img', {name: "Performance.gov logo"}).should('exist');
+    cy.get('.usa-header--basic').within(($group) => {
+      cy.findAllByRole('link').should('have.length', 0);
+    });
+    cy.findByLabelText('Search', {selector: 'input'}).should('not.to.be.visible');
+    cy.findByRole('button', {name: 'Search'}).should('not.exist');
+    cy.findByRole('button', {name: 'Menu'}).should('exist');
+    cy.findByRole('button', {name: 'Menu'}).click();
+    cy.get('.usa-header--basic').within(($group) => {
+      cy.findAllByRole('link').should('have.length', 2);
+    });
+    cy.findByLabelText('Search', {selector: 'input'}).should('exist');
+    cy.findByRole('button', {name: 'Search'}).should('exist');
+    cy.findByRole('button', {name: 'Close Navigation Menu'}).should('exist');
+  });
+});
diff --git a/tests/cypress/e2e/homepage.cy.js b/tests/cypress/e2e/homepage.cy.js
@@ -2,27 +2,28 @@ describe('The home page', () => {
   beforeEach(() => {
     cy.visit('/');
   });
+
   it('successfully loads', {tags: ['@homepage', '@smoke']}, () => {
+    cy.findByRole('img', {name: "Performance.gov logo"}).should('exist');
     cy.findByRole('heading', {level: 1, name: "Track the U.S. Government's goals"}).should('exist');
+    cy.get('.usa-breadcrumb').should('not.exist');
   });
 
-  it('has 9 goal cards on load', {tags: ['@homepage', '@smoke', '@goalSearch', '@goals']}, () => {
+  it('has goal search', {tags: ['@homepage', '@smoke', '@goalSearch', '@goals']}, () => {
+    cy.findByLabelText('Search goals', {selector: 'input'}).should('exist');
+    cy.findByRole('button', {name: 'Search goals'}).should('exist');
+    // 30 tags
+    cy.get('form + ul').within(($group) => {
+      cy.findAllByRole('listitem').should('have.length', 30);
+      cy.findAllByRole('listitem').each(($item) => {
+        cy.wrap($item).within(($inner) => {
+          cy.findByRole('button').should('have.class', 'usa-button--outline');
+        });
+      });
+    });
     cy.get('.usa-card-group').within(($group) => {
       cy.findAllByRole('listitem').should('have.length', 9);
     });
+    cy.findByRole('button', {name: 'Show more'}).should('exist');
   });
 });
-
-// search is there
-// search filters goals when used
-// tags are present
-// tags filter when used
-// tags are disabled when they don't match
-// clearing tags enables previously disabled ones
-// Show more button works
-// cards have title, description if present, and explore goal button
-
-// USA banner
-// mvp banner
-// header is there
-// Check breadcrumb doesn't exist
diff --git a/tests/cypress/e2e/individual_agency.cy.js b/tests/cypress/e2e/individual_agency.cy.js
@@ -1,15 +1,48 @@
-// Test sidebar links
-// Test for logo
-// Title
-// Mission
-// Description
-// strategicplan
-// strategic goals
-// APGs
-// Related documents
-// Do strategic plan again 
+describe('The NASA agency page', () => {
+  beforeEach(() => {
+    cy.visit('/agencies/nasa');
+  });
+  it('successfully loads', {tags: ['@agencyPage', '@smoke']}, () => {
+    cy.findByRole('img', {name: "Performance.gov logo"}).should('exist');
+    cy.findByRole('link', {name: 'Home'}).should('exist');
+    cy.findByRole('link', {name: 'Agencies'}).should('exist');
+    cy.get('.usa-breadcrumb').within(($group) => {
+      cy.findByText('NASA').should('exist');
+      cy.findAllByRole('listitem').should('have.length', 3);
+    });
+    cy.findByRole('img', {name: 'NASA-Seal'}).should('exist');
+    cy.findByRole('heading', {level: 1, name: 'National Aeronautics and Space Administration'}).should('exist');
+    cy.findByRole('heading', {level: 2, name: 'Mission'}).should('exist');
+    cy.findByText('NASA explores the unknown in air and space, innovates for the benefit of humanity, and inspires the world through discovery.').should('exist');
+    cy.findAllByRole('heading', {level: 2, name: 'National Aeronautics and Space Administration Strategic Plan (FY2022-26)'}).should('have.length', 2);
+    // Should there be double?
+    // cy.findByRole('heading', {level: 2, name: 'National Aeronautics and Space Administration Strategic Plan (FY2022-26)'}).should('exist');
+    cy.findByRole('heading', {level: 3, name: 'Strategic goals'}).should('exist');
+    cy.findByRole('heading', {level: 3, name: 'Agency priority goals'}).should('exist');
+    cy.findAllByRole('heading', {level: 3, name: 'Related documents'}).should('have.length', 2);
+    cy.findAllByRole('heading', {level: 2, name: 'Related Resources'}).should('exist');
+    cy.get('main section').within(($main) => {
+      cy.findAllByRole('listitem').should('have.length', 13);
+      cy.findAllByRole('link').should('have.length', 13);
+    });
+    cy.get('#related-resources + ul').within(($list) => {
+      cy.findAllByRole('listitem').should('have.length', 1);
+      cy.findByRole('link', {name: 'Visit the NASA website'});
+    });
+  });
 
-// USA banner
-// mvp banner
-// header is there
-// Check breadcrumb
+  it('has a side nav', {tags: ['@agencyPage', '@smoke']}, () => {
+    cy.findByRole('heading', {level: 4, name: 'On this page'}).should('exist');
+    cy.get('.usa-in-page-nav__nav').within(($nav) => {
+      cy.findAllByRole('listitem').should('have.length', 8);
+      cy.findAllByRole('link').should('have.length', 8);
+      cy.findAllByRole('listitem').each(($item, $index) => {
+        const primaryIndexes = [0,1,5,7];
+        cy.wrap($item).should('have.class', 'usa-in-page-nav__item');
+        if(primaryIndexes.includes($index)) {
+          cy.wrap($item).should('have.class', 'usa-in-page-nav__item--primary');
+        }
+      })
+    });
+  });
+});