Merge branch 'main' into ref/project-config-ci-e2e

.eslintrc.json

@@ -15,6 +15,7 @@
     "func-names": 0,
     "object-shorthand": 0,
     "implicit-arrow-linebreak": 0,
+    "vue/multi-word-component-names": "off",
     "vue/no-undef-components": [
       "error",
       {

.github/workflows/cypress-component-tests.yml

@@ -68,5 +68,5 @@ jobs:
           wait-on-timeout: 120
           record: true
           parallel: true
-          spec: 'cypress/component/**/*'
+          spec: 'src/components/**/*.cy.js'
           ci-build-id: ${{ github.run_id }}-${{ matrix.browser }}

cypress.config.cjs

@@ -77,6 +77,8 @@ module.exports = defineConfig({
   },
 
   component: {
+    viewportWidth: 1536,
+    viewportHeight: 960,
     devServer: {
       framework: 'vue',
       bundler: 'vite',

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

@@ -21,7 +21,7 @@ describe('Parent: Auth', () => {
     cy.get('input[type="password"]').eq(1).type(PARENT_PASSWORD);
 
     // Accept terms and conditions.
-    cy.get('div.p-checkbox-box').click();
+    cy.get('div.p-checkbox-input').click();
 
     // Verify consent dialog.
     cy.get('[data-cy="consent-modal"]').should('be.visible').find('button').contains('Continue').click();
@@ -52,7 +52,7 @@ describe('Parent: Auth', () => {
       cy.get('input[type="password"]').eq(1).type(PARENT_PASSWORD);
 
       // Accept terms and conditions.
-      cy.get('div.p-checkbox-box').click();
+      cy.get('div.p-checkbox-input').click();
 
       // Verify consent dialog.
       cy.get('[data-cy="consent-modal"]').should('be.visible').find('button').contains('Continue').click();

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

@@ -6,7 +6,7 @@ describe('Participant Assessments', () => {
 
     cy.selectAdministration(Cypress.env('testRoarAppsAdministration'));
 
-    cy.get('.tabview-nav-link-label').contains('ROAR - Word').click();
+    cy.get('.p-tablist-tab-list').contains('ROAR - Word').click();
 
     // @TODO: Extend tests to actually test that the video is playing.
     cy.get('.video-player-wrapper').click();

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

@@ -14,7 +14,6 @@ describe('Participant: Legal Docs', () => {
     // 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(translations.consentModal.consentTitle).should('be.visible');
-    cy.get('.p-confirm-dialog-accept').contains('Continue').should('be.visible');
-    cy.get('button').contains('Continue').should('be.visible');
+    cy.get('.p-dialog-footer').contains('Continue').should('be.visible');
   });
 });

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

@@ -29,7 +29,7 @@ describe('Partner Admin: Orgs', () => {
         cy.waitForOrganisationsList();
 
         // Navigate to the org tab.
-        cy.get('ul > li').contains(org.tabName).click();
+        cy.get('.p-tabview-tablist').contains(org.tabName).click();
         cy.log('Tab ' + org.tabName + ' found.');
 
         // Validate that the org exists.

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

@@ -0,0 +1,67 @@
+const baseUrl = Cypress.env('baseUrl');
+import { APP_ROUTES } from '../../../../src/constants/routes';
+
+const orgs = [
+  {
+    tabName: 'Districts',
+    orgName: Cypress.env('testPartnerDistrictName'),
+    orgVerified: 'Districts - Cypress Test District',
+  },
+];
+
+function visitSignUpPage(activationCode) {
+  const registerUrl = `${baseUrl}/register/?code=${activationCode}`;
+  cy.visit(registerUrl);
+}
+
+function inputLoginValues() {
+  cy.get('[data-cy="input-parent-first-name"]').type(Cypress.env('parentFirstName')); // First Name
+  cy.get('[data-cy="input-parent-last-name"]').type(Cypress.env('parentLastName')); // Last Name
+  cy.get('[data-cy="input-parent-email"]').type(Cypress.env('parentEmail')); // Email
+  cy.get('[data-cy="password-parent-password"]').first().type(Cypress.env('parentPassword')); // Password
+  cy.get('[data-cy="password-parent-password-confirm"]').type(Cypress.env('parentPassword')); // Confirm Password
+  cy.get('.p-checkbox-input').click(); // Terms and Conditions
+}
+
+function completeParentSignUp(org) {
+  cy.get('button').contains('Continue').click();
+  cy.get('button').contains('Next').click();
+  cy.get('div').should('contain.text', org.orgVerified);
+}
+
+describe('The partner admin user', () => {
+  beforeEach(() => {
+    cy.login(Cypress.env('partnerAdminUsername'), Cypress.env('partnerAdminPassword'));
+    cy.visit(APP_ROUTES.HOME);
+    cy.visit(APP_ROUTES.LIST_ORGS);
+  });
+
+  orgs.forEach((org) => {
+    context(`when navigating to the ${org.tabName} tab`, () => {
+      it(`should see the organization ${org.orgName} and should click on Invite Users`, () => {
+        cy.checkOrgExists(org);
+
+        // Locate the row with the orgName and click the "Invite Users" button specifically for that org
+        cy.contains('td', org.orgName)
+          .parents('tr')
+          .find('button')
+          .contains('Invite Users') // Ensure the button contains the text "Invite Users"
+          .click();
+
+        cy.log(`Invite Users button clicked for ${org.orgName}.`);
+
+        // Invoke the activation code input field to get the value
+        cy.get('[data-cy="input-text-activation-code"]')
+          .invoke('attr', 'value')
+          .then((value) => {
+            expect(value).to.not.be.empty;
+
+            // Visit the sign-up page with the activation code
+            visitSignUpPage(value);
+            inputLoginValues();
+            completeParentSignUp(org);
+          });
+      });
+    });
+  });
+});

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

@@ -96,9 +96,9 @@ describe('Partner Admin: Progress Reports', () => {
     cy.get('[data-cy="data-table__export-selected-btn"]').should('be.disabled');
 
     // Select a user to export.
-    cy.get('.p-checkbox-box').eq(1).click();
-    cy.get('.p-checkbox-box').eq(3).click();
-    cy.get('.p-checkbox-box').eq(5).click();
+    cy.get('.p-checkbox-input').eq(1).click();
+    cy.get('.p-checkbox-input').eq(3).click();
+    cy.get('.p-checkbox-input').eq(5).click();
 
     // Export the score report.
     cy.get('[data-cy="data-table__export-selected-btn"]').contains('Export Selected').click();

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

@@ -38,7 +38,7 @@ describe('Partner Admin: Score Reports', () => {
       const tableHeaders = $header.map((index, elem) => Cypress.$(elem).text()).get();
 
       testAssignments.forEach((assignment) => {
-        expect(tableHeaders).to.include(assignment);
+        expect(tableHeaders).to.include(assignment, `Expected header to include ${assignment}`);
       });
     });
   });
@@ -85,9 +85,9 @@ describe('Partner Admin: Score Reports', () => {
     cy.get('[data-cy="data-table__export-selected-btn"]').should('be.disabled');
 
     // Select a user to export.
-    cy.get('.p-checkbox-box').eq(1).click();
-    cy.get('.p-checkbox-box').eq(3).click();
-    cy.get('.p-checkbox-box').eq(5).click();
+    cy.get('.p-checkbox-input').eq(1).click();
+    cy.get('.p-checkbox-input').eq(3).click();
+    cy.get('.p-checkbox-input').eq(5).click();
 
     // Export the score report.
     cy.get('[data-cy="data-table__export-selected-btn"]').contains('Export Selected').click();

cypress/support/commands.js

@@ -4,6 +4,9 @@ import { APP_ROUTES } from '../../src/constants/routes.js';
 
 const baseUrl = Cypress.config().baseUrl;
 
+// Extend Cypress with additional commands.
+import '@testing-library/cypress/add-commands';
+
 /**
  * Logs in a user using the provided username and password.
  * Utilizes Cypress sessions to persist login state across tests.
@@ -98,7 +101,7 @@ Cypress.Commands.add('loginWithClever', (schoolName, username, password) => {
  * Logs out the current user and verifies redirection to the sign-in page.
  */
 Cypress.Commands.add('logout', () => {
-  cy.get('[data-cy="button-sign-out"]').click();
+  cy.get('[data-cy="navbar__signout-btn-desktop"]').click();
   cy.url().should('eq', `${baseUrl}/signin`);
   cy.get('h1').should('contain.text', 'Welcome to ROAR!');
   cy.log('Logout successful.');
@@ -267,7 +270,7 @@ Cypress.Commands.add('selectAdministration', function selectAdministration(testA
     .invoke('text')
     .then((text) => {
       if (text.includes(testAdministration)) {
-        cy.get('.p-dropdown-item').contains(testAdministration).click();
+        cy.get('.p-select-list-container').contains(testAdministration).click();
         cy.log('Selected administration:', testAdministration);
         cy.agreeToConsent();
       } else {
@@ -383,7 +386,7 @@ Cypress.Commands.add(
 Cypress.Commands.add('checkUserList', (userList) => {
   cy.get('[data-cy="roar-data-table"] tbody tr').each((row) => {
     cy.wrap(row)
-      .find('td.p-frozen-column')
+      .find('td.p-datatable-frozen-column')
       .then((cell) => {
         // Clean the non-breaking space character and any whitespace from the cell text.
         const cellText = cell
@@ -410,26 +413,6 @@ Cypress.Commands.add('playOptionalGame', (game, administration, optional) => {
   });
 });
 
-/**
- * Create a mock store for the user type specified.
- * @param {string} userType - The type of user to create a mock store for. One of 'superAdmin', 'partnerAdmin', or
- * 'participant'. Defaults to 'participant'.
- * @returns {void}
- */
-Cypress.Commands.add('setAuthStore', (userType = 'participant') => {
-  const authStore = createMockStore(userType);
-  const serializedStore = JSON.stringify(authStore.$state);
-
-  // Store the mock store in sessionStorage
-  cy.window().then((window) => {
-    window.sessionStorage.setItem('authStore', serializedStore);
-  });
-
-  cy.log('Created mock store for user type:', userType, ' with state:', authStore.$state);
-  // Store the mock store in the Cypress context as an alias
-  return cy.wrap(authStore.$state).as('authStore');
-});
-
 /**
  * Retrieve activation code
  *
@@ -453,7 +436,7 @@ Cypress.Commands.add('getActivationCode', (orgType, orgName) => {
   cy.waitForOrganisationsList();
 
   // Navigate to the org tab.
-  cy.get('ul > li').contains(orgType, { matchCase: false }).click();
+  cy.get('.p-tabview-tablist').contains(orgType, { matchCase: false }).click();
 
   // Invoke the activation code retrieval button for the given org.
   cy.contains('td', orgName).parents('tr').find('[data-cy="data-table__event-btn__show-activation-code"]').click();