Force Cypress to wait for page load

Author: mwtrew

cypress/support/component-ada.ts

@@ -48,8 +48,9 @@ Cypress.on('test:before:run:async', async () => {
 });
 
 // Skip visual regression tests in interactive mode - the results are not consistent with headless.
+// It may be useful to comment this out when debugging tests locally, but don't commit the snapshots.
 if (Cypress.config('isInteractive')) {
   Cypress.Commands.add('matchImage', () => {
-    cy.log('Skipping visual regression test assertion ("matchImage()") - results will not match headless mode.');
+    cy.log('Skipping snapshot 👀');
   });
 }

cypress/support/component-phy.ts

@@ -47,7 +47,8 @@ Cypress.on('test:before:run:async', async () => {
   await worker.start();
 });
 
-// Skip visual regression tests in interactive mode - the results are not consistent with headless
+// Skip visual regression tests in interactive mode - the results are not consistent with headless.
+// It may be useful to comment this out when debugging tests locally, but don't commit the snapshots.
 if (Cypress.config('isInteractive')) {
   Cypress.Commands.add('matchImage', () => {
     cy.log('Skipping snapshot 👀');

src/app/components/handlers/IsaacSpinner.tsx

@@ -14,7 +14,7 @@ export interface IsaacSpinnerProps {
 export const IsaacSpinner = ({size = "md", className, color = "primary", inline = false, displayText = "Loading..."} : IsaacSpinnerProps) => {
     const contents = <>
         <img style={siteSpecific({width: "auto", height: "5.5rem"}, {})} className={classNames(`isaac-spinner-${size}`, className)} alt="" src={siteSpecific("/assets/phy/isaac-phy-apple-grow.svg", "/assets/cs/icons/loading-spinner-placeholder.svg")}/>
-        <span className="sr-only">{displayText}</span>
+        <span data-testid={"loading"} className="sr-only">{displayText}</span>
     </>;
     return inline
         ? <span role="status">{contents}</span>

src/test/pages/MyAssignments.cy.tsx

@@ -21,5 +21,7 @@ it('My Assignments should render', () => {
         </Provider>
     );
 
+    cy.get('[data-testid="loading"]').should('not.exist');
+
     cy.matchImage();
 });