Merge 8620452 into 0ba2e31

.env.test.example

@@ -18,6 +18,9 @@ CYPRESS_PROJECT_ID=
 # -------------------------------------------------------------------------------------------------------------------- #
 # Test Configuration
 # -------------------------------------------------------------------------------------------------------------------- #
+# Firebase Admin Project ID  
+CYPRESS_FIREBASE_ADMIN_PROJECT_ID=
+
 # Clever Auth Credentials
 CYPRESS_CLEVER_USERNAME=
 CYPRESS_CLEVER_PASSWORD=
@@ -36,8 +39,11 @@ CYPRESS_PARTNER_ADMIN_ID=
 CYPRESS_PARTICIPANT_USERNAME=
 CYPRESS_PARTICIPANT_PASSWORD=
 CYPRESS_PARTICIPANT_UID=
-CYPRESS_PARTICIPANT_EMAIL=
-CYPRESS_PARTICIPANT_EMAIL_PASSWORD=
+
+# ROAR Participant Account Credentials for Legal Document Testing
+CYPRESS_PARTICIPANT_TESTLEGAL_USERNAME=
+CYPRESS_PARTICIPANT_TESTLEGAL_PASSWORD=
+CYPRESS_PARTICIPANT_TESTLEGAL_UID=
 
 # ROAR Parent Account Credentials
 CYPRESS_PARENT_FIRST_NAME=

.github/workflows/ci.yml

@@ -113,6 +113,7 @@ jobs:
           COMMIT_INFO_MESSAGE: '${{ github.event.pull_request.title }} (#${{ github.event.pull_request.number }})'
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
+          build: npm run build
           start: npm run preview -- --host
           tag: ${{ github.event_name }},e2e,${{ matrix.browser }}
           wait-on: ${{ env.CYPRESS_BASE_URL }}
@@ -159,6 +160,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           component: true
+          build: npm run build
           start: npm run preview -- --host
           tag: ${{ github.event_name }},component,${{ matrix.browser }}
           wait-on: ${{ env.CYPRESS_BASE_URL }}

cypress.config.cjs

@@ -6,6 +6,30 @@ const UnheadVite = require('@unhead/addons/vite');
 const path = require('path');
 const fs = require('fs');
 
+/**
+ * Injects environment variables parsed by dotenvx into the Cypress environment.
+ *
+ * This is necessary as Cypress itself does not load environment variables from .env files. The dotenvx package is used
+ * to load the .env files. To mimick the default Cypress behaviour, only inject the parsed variables that start with
+ * CYPRESS_ and remove that prefix before setting them in the Cypress environment.
+ *
+ * @param {Object} config – The Cypress configuration object.
+ * @returns {Object} The modified Cypress configuration object.
+ */
+const injectEnvVars = (config, envVars) => {
+  // Inject environment variables parsed by dotenvx into the Cypress environment. This is necessary as Cypress
+  // itself does not load environment variables from .env files. The dotenvx package is used to load the .env files
+  // Note: To mimick the default Cypress behaviour, only inject the parsed variables that start with CYPRESS_ and
+  // remove that prefix before setting them in the Cypress environment.
+  for (const [key, value] of Object.entries(envVars)) {
+    if (key.startsWith('CYPRESS_')) {
+      config.env[key.replace('CYPRESS_', '')] = value;
+    }
+  }
+
+  return config;
+};
+
 // Load environment variables
 // Using a similar approach as in vite.config.js, we conditionally load the .env.test files from the env-configs/
 // directory and the root of the project. This is done to properly support dotenvx.
@@ -30,15 +54,7 @@ module.exports = defineConfig({
       openMode: 0,
     },
     setupNodeEvents(on, config) {
-      // Inject environment variables parsed by dotenvx into the Cypress environment. This is necessary as Cypress
-      // itself does not load environment variables from .env files. The dotenvx package is used to load the .env files
-      // Note: To mimick the default Cypress behaviour, only inject the parsed variables that start with CYPRESS_ and
-      // remove that prefix before setting them in the Cypress environment.
-      for (const [key, value] of Object.entries(envConfig.parsed)) {
-        if (key.startsWith('CYPRESS_')) {
-          config.env[key.replace('CYPRESS_', '')] = value;
-        }
-      }
+      injectEnvVars(config, envConfig.parsed);
 
       on('task', {
         log(message) {
@@ -93,6 +109,7 @@ module.exports = defineConfig({
       },
     },
     setupNodeEvents(on, config) {
+      injectEnvVars(config, envConfig.parsed);
       require('cypress-fs/plugins')(on);
       return config;
     },
@@ -105,17 +122,6 @@ module.exports = defineConfig({
     firestoreAppUrl:
       'https://firestore.googleapis.com/v1/projects/gse-roar-assessment-dev/databases/(default)/documents',
     timeout: 10000,
-    superAdminUsername: process.env.CYPRESS_SUPER_ADMIN_USERNAME,
-    superAdminPassword: process.env.CYPRESS_SUPER_ADMIN_PASSWORD,
-    superAdminId: process.env.CYPRESS_SUPER_ADMIN_ID,
-    partnerAdminUsername: process.env.CYPRESS_PARTNER_ADMIN_USERNAME,
-    partnerAdminPassword: process.env.CYPRESS_PARTNER_ADMIN_PASSWORD,
-    partnerAdminId: process.env.CYPRESS_PARTNER_ADMIN_ID,
-    participantUsername: process.env.CYPRESS_PARTICIPANT_USERNAME,
-    participantPassword: process.env.CYPRESS_PARTICIPANT_PASSWORD,
-    participantUid: process.env.CYPRESS_PARTICIPANT_UID,
-    participantEmail: process.env.CYPRESS_PARTICIPANT_EMAIL,
-    participantEmailPassword: process.env.CYPRESS_PARTICIPANT_EMAIL_PASSWORD,
     cleverOAuthLink: 'https://clever.com/oauth/authorize',
     cleverSchoolName: '61e8aee84cf0e71b14295d45',
     cleverUsername: process.env.CYPRESS_CLEVER_USERNAME,
@@ -163,15 +169,15 @@ module.exports = defineConfig({
     testGrade: 'Grade 5',
     stanfordUniversityAddress: '450 Jane Stanford Way, Stanford, CA 94305, USA',
     testTag: 'stanford university',
-    cypressDownloads: 'cypress/downloads',
     testRoarAppsAdministration: 'Cypress Test Roar Apps Administration',
     testRoarAppsAdministrationId: 'K8UaI8p79Dntj5Z2CJk8',
     testOptionalRoarAppsAdministration: 'Cypress Test Optional Roar Apps Administration',
     testOptionalRoarAppsAdministrationId: 'Fuy4nQaMu6YmfNg1eBYH',
     testSpanishRoarAppsAdministration: 'Cypress Test Spanish Roar Apps Administration',
     testSpanishRoarAppsAdministrationId: '',
-    // Generate a list of test users CypressTestStudent0, CypressTestStudent1, ..., CypressTestStudent50 and push the test_legal_doc user
     testUserList: (() => {
+      // Generate a list of test users and push the test_legal_doc user to the end of the list.
+      // These users exist in the Firestore dev database and are used in the tests.
       const list = Array.from({ length: 51 }, (_, i) => `CypressTestStudent${i}`);
       list.push('test_legal_doc');
       return list;

cypress/component/components/RoarDataTable.cy.js

@@ -15,7 +15,6 @@ const props = {
   groupheaders: true,
 };
 
-const timeout = Cypress.env('timeout');
 const tableHeaderOffset = 4;
 
 // Use this data to compare against the data being filtered by the component
@@ -49,8 +48,8 @@ function mockFilterBySupportLevelCategory(task, supportLevel) {
 
 function setFilterByCategory(header, category) {
   cy.contains('div.p-column-header-content', header).find('button').click();
-  cy.get('[data-cy="score-filter-dropdown"]', { timeout: timeout }).click();
-  cy.get('ul > li', { timeout: timeout }).contains(category).click();
+  cy.get('[data-cy="score-filter-dropdown"]').click();
+  cy.get('ul > li').contains(category).click();
   cy.get('button').contains('Apply').click();
 }
 

cypress/e2e/participant/default-tests/auth.cy.js

@@ -0,0 +1,35 @@
+const PARTICIPANT_USERNAME = Cypress.env('PARTICIPANT_USERNAME');
+const PARTICIPANT_PASSWORD = Cypress.env('PARTICIPANT_PASSWORD');
+
+const CLEVER_SCHOOL_NAME = Cypress.env('cleverSchoolName');
+const CLEVER_USERNAME = Cypress.env('CLEVER_USERNAME');
+const CLEVER_PASSWORD = Cypress.env('CLEVER_PASSWORD');
+
+describe('Participant: Auth', () => {
+  it('Logs in as participant using username and password', () => {
+    cy.login(PARTICIPANT_USERNAME, PARTICIPANT_PASSWORD);
+    cy.get('[data-cy="user-display-name"]').should('contain', 'Hi, Cypress!');
+  });
+
+  // @TODO: Enable test once test account is properly provisioned on test environment.
+  it.skip('Logs in as participant using email and password', () => {
+    // cy.login(PARTICIPANT_EMAIL, PARTICIPANT_EMAIL_PASSWORD);
+    // cy.get('[data-cy="user-display-name"]').should('contain', PARTICIPANT_USERNAME);
+  });
+
+  it('Logs in as participant using Clever SSO', () => {
+    // Perform SSO login flow.
+    cy.loginWithClever(CLEVER_SCHOOL_NAME, CLEVER_USERNAME, CLEVER_PASSWORD);
+
+    // Validate that the participant homepage is loaded.
+    cy.visit('/');
+    cy.waitForParticipantHomepage();
+    cy.get('[data-cy="home-participant__administration-emptystate"]').should('not.exist');
+    cy.get('[data-cy="home-participant__administration"]').should('contain', 'Cypress Test Roar Apps Administration');
+  });
+
+  it('Logs out', () => {
+    cy.login(PARTICIPANT_USERNAME, PARTICIPANT_PASSWORD);
+    cy.logout();
+  });
+});

cypress/e2e/participant/default-tests/legal.cy.js

@@ -0,0 +1,18 @@
+const PARTICIPANT_TESTLEGAL_USERNAME = Cypress.env('PARTICIPANT_TESTLEGAL_USERNAME');
+const PARTICIPANT_TESTLEGAL_PASSWORD = Cypress.env('PARTICIPANT_TESTLEGAL_PASSWORD');
+
+describe('Participant: Legal Docs', () => {
+  it('Renders an assent form for un-assented users', () => {
+    // Login as the participant with the test legal document.
+    cy.login(PARTICIPANT_TESTLEGAL_USERNAME, PARTICIPANT_TESTLEGAL_PASSWORD);
+
+    // Wait for the participant home page to load.
+    cy.waitForParticipantHomepage();
+
+    // Validate that the mock assent form is shown.
+    // @TODO: Replace this with an actual legal document using cy.intercept once the legal document is available.
+    cy.get('.p-dialog-title').contains('CONSENT').should('be.visible');
+    cy.get('.p-confirm-dialog-accept').contains('Continue').should('be.visible');
+    cy.get('button').contains('Continue').should('be.visible');
+  });
+});

cypress/e2e/participant/default-tests/playVideo.cy.js

@@ -1,12 +1,9 @@
-const timeout = Cypress.env('timeout');
 describe('Playing Video', () => {
   it('plays-video', () => {
-    cy.login(Cypress.env('participantUsername'), Cypress.env('participantPassword'));
-    cy.visit('/', { timeout: 2 * timeout });
+    cy.login(Cypress.env('PARTICIPANT_USERNAME'), Cypress.env('PARTICIPANT_PASSWORD'));
+    cy.visit('/');
     cy.selectAdministration(Cypress.env('testRoarAppsAdministration'));
-    cy.get('.tabview-nav-link-label', { timeout: 2 * timeout })
-      .contains('ROAR - Word')
-      .click();
-    cy.get('.video-player-wrapper', { timeout: 2 * timeout }).click();
+    cy.get('.tabview-nav-link-label').contains('ROAR - Word').click();
+    cy.get('.video-player-wrapper').click();
   });
 });

cypress/e2e/participant/old-tests/playButtonGames.cy.js

@@ -1,54 +1,46 @@
 import { games } from '../../../fixtures/participant/buttonGamesList.js';
 
-const timeout = Cypress.env('timeout');
-
 describe('Testing play through of vocab, cva, letter, and multichoice games as a participant', () => {
   games.forEach((game) => {
     it(`${game.name} Play through Test`, () => {
-      cy.login(Cypress.env('participantUsername'), Cypress.env('participantPassword'));
-      cy.visit('/', { timeout: 2 * timeout });
+      cy.login(Cypress.env('PARTICIPANT_USERNAME'), Cypress.env('PARTICIPANT_PASSWORD'));
+      cy.visit('/');
 
       cy.selectAdministration(Cypress.env('testRoarAppsAdministration'));
-      cy.get('.tabview-nav-link-label', { timeout: 2 * timeout }).contains(game.name);
+      cy.get('.tabview-nav-link-label').contains(game.name);
 
-      cy.visit(`/game/${game.id}`, { timeout: 2 * timeout });
+      cy.visit(`/game/${game.id}`);
 
       // Long timeout is needed for picture vocab
-      cy.get(game.startBtn, { timeout: 10 * timeout })
-        .should('be.visible')
-        .click();
+      cy.get(game.startBtn).should('be.visible').click();
 
       // case for game/pa -- it has two initiation buttons that need to be clicked
       if (game.startBtn2) {
-        cy.get(game.startBtn2, { timeout: 8 * timeout })
-          .should('be.visible')
-          .click();
+        cy.get(game.startBtn2).should('be.visible').click();
       }
 
       // handles error where full screen throws a permissions error
-      cy.wait(0.2 * timeout);
+      cy.wait(0.2 * Cypress.env('timeout'));
       Cypress.on('uncaught:exception', () => {
         return false;
       });
 
       // if the game prompts some setup, make the choice
       if (game.setUpChoice) {
-        cy.get(game.setUpChoice, { timeout: timeout }).should('be.visible').first().click();
+        cy.get(game.setUpChoice).should('be.visible').first().click();
       }
 
       // clicks through first introduction pages
       for (let i = 0; i < game.introIters; i++) {
-        cy.get(game.introBtn, { timeout: timeout }).should('be.visible').click();
+        cy.get(game.introBtn).should('be.visible').click();
       }
 
       playROARGame(game);
 
       cy.visit('/');
-      cy.wait(0.2 * timeout);
+      cy.wait(0.2 * Cypress.env('timeout'));
       cy.selectAdministration(Cypress.env('testRoarAppsAdministration'));
-      cy.get('.tabview-nav-link-label', { timeout: 5 * timeout })
-        .contains(game.name)
-        .should('exist');
+      cy.get('.tabview-nav-link-label').contains(game.name).should('exist');
     });
   });
 });
@@ -68,7 +60,7 @@ function makeChoiceOrContinue(game, overflow) {
   }
   cy.get('body').then((body) => {
     if (body.find(game.introBtn).length > 0) {
-      cy.get(game.introBtn, { timeout: timeout }).click();
+      cy.get(game.introBtn).click();
     } else {
       // Timing issues with the stimulus prevent this assertion from being used -- tabling until next sprint
       // cy.get(game.stimulus).should("be.visible")

cypress/e2e/partner-admin/default-tests/auth.cy.js

@@ -0,0 +1,15 @@
+const PARTNER_ADMIN_USERNAME = Cypress.env('PARTNER_ADMIN_USERNAME');
+const PARTNER_ADMIN_PASSWORD = Cypress.env('PARTNER_ADMIN_PASSWORD');
+
+describe('Partner Admin: Auth', () => {
+  it('Logs in as a partner admin', () => {
+    cy.login(PARTNER_ADMIN_USERNAME, PARTNER_ADMIN_PASSWORD);
+
+    cy.get('[data-cy="user-display-name"]').should('contain', PARTNER_ADMIN_USERNAME);
+  });
+
+  it('Logs out', () => {
+    cy.login(PARTNER_ADMIN_USERNAME, PARTNER_ADMIN_PASSWORD);
+    cy.logout();
+  });
+});