Cypress end-to-end Testing

.eslintrc.json

@@ -2,7 +2,7 @@
   "env": {
     "node": true
   },
-  "extends": ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"],
+  "extends": ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier", "plugin:cypress/recommended"],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"

.github/workflows/deploy-firebase-test-cypress.yml

@@ -0,0 +1,64 @@
+name: Firebase Deploy to Staging and Cypress e2e Tests
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+concurrency:
+  group: ci-preview-tests-${{ github.ref }}-1
+  cancel-in-progress: true
+
+jobs:
+  build-and-preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+      - run: npm ci && npm run build
+      - name: Deploy to Firebase Hosting Channel
+        id: firebase-deploy
+        uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_GSE_ROAR_ADMIN }}'
+          projectId: gse-roar-admin
+          target: staging
+      - run: echo ${{ fromJson(steps.firebase-deploy.outputs.urls)[0] }}
+    outputs:
+      deployUrl: ${{ fromJson(steps.firebase-deploy.outputs.urls)[0] }}
+
+  cypress-run:
+    needs: [build-and-preview]
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, edge]
+        containers: [1, 2]
+    env:
+      CYPRESS_BASE_URL: ${{ needs.build-and-preview.outputs.deployUrl }}
+      CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+      PARTNER_ADMIN_USERNAME: ${{ secrets.PARTNER_ADMIN_USERNAME }}
+      PARTNER_ADMIN_PASSWORD: ${{ secrets.PARTNER_ADMIN_PASSWORD }}
+      PARTNER_ADMIN_ID: ${{ secrets.PARTNER_ADMIN_ID }}
+      PARTICIPANT_USERNAME: ${{ secrets.PARTICIPANT_USERNAME }}
+      PARTICIPANT_PASSWORD: ${{ secrets.PARTICIPANT_PASSWORD }}
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          browser: ${{ matrix.browser }}
+          build: echo "Build step already completed"
+          start: echo "App already deployed to Firebase"
+          wait-on: ${{ env.CYPRESS_BASE_URL }}
+          wait-on-timeout: 60
+          record: true
+          parallel: true
+          spec: 'cypress/e2e/participant/**/*,cypress/e2e/partner-admin/**/*'
+          ci-build-id: ${{ github.run_id }}-${{ matrix.browser }}

.gitignore

@@ -24,6 +24,7 @@ dist-ssr
 *.sw?
 
 .firebase/
+cypress/downloads
 
 .env
 .vite/*

.gitmodules

@@ -1,3 +1,3 @@
-[submodule "roar-firebase-functions"]
-	path = roar-firebase-functions
-	url = ../roar-firebase-functions.git
+[submodule "roar-firebase-functions"]
+	path = roar-firebase-functions
+	url = ../roar-firebase-functions.git

cypress.config.js

@@ -0,0 +1,88 @@
+const { defineConfig } = require('cypress');
+require('dotenv').config();
+
+module.exports = defineConfig({
+  projectId: 'cobw62',
+  e2e: {
+    baseUrl: process.env.CYPRESS_BASE_URL ?? 'https://localhost:5173/',
+    experimentalRunAllSpecs: true,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    // specPattern: [
+    //
+    // ]
+  },
+  env: {
+    baseUrl:  process.env.CYPRESS_BASE_URL ?? 'https://localhost:5173',
+    timeout: 10000,
+    sessionCookieName: process.env.SESSION_COOKIE_NAME,
+    sessionCookieValue: process.env.SESSION_COOKIE_VALUE,
+    superAdminUsername: process.env.SUPER_ADMIN_USERNAME,
+    superAdminPassword: process.env.SUPER_ADMIN_PASSWORD,
+    superAdminId: process.env.SUPER_ADMIN_ID,
+    partnerAdminUsername: process.env.PARTNER_ADMIN_USERNAME,
+    partnerAdminPassword: process.env.PARTNER_ADMIN_PASSWORD,
+    partnerAdminId: process.env.PARTNER_ADMIN_ID,
+    participantUsername: process.env.PARTICIPANT_USERNAME,
+    participantPassword: process.env.PARTICIPANT_PASSWORD,
+    testAdministrationName: 'zzzTestAdministration',
+    testAdministrationId: "pdOfQuakqN4re3cI5mr5",
+    testAdministratorFirstName: 'zzzTestAdministratorFirstName',
+    testAdministratorMiddleName: 'zzzTestAdministratorMiddleName',
+    testAdministratorLastName: 'zzzTestAdministratorLastName',
+    testAdministratorEmail: 'zzzTestAdministratorEmail',
+    testDistrictName: 'zzzTestDistrict',
+    testDistrictInitials: 'TD',
+    testDistrictNcesId: '123456789',
+    testDistrictId: "yGGlUDTB5xzzCecoYucj",
+    testSchoolName: 'zzzTestSchool',
+    testSchoolInitials: 'TS',
+    testSchoolNcesId: '987654321',
+    testClassName: 'zzzTestClass',
+    testClassInitials: 'TC',
+    testGroupName: 'zzzTestGroup',
+    testGroupInitials: 'TG',
+    testPartnerAdministrationName: 'zzzCypressTestAdministration',
+    testPartnerAdministrationId: "pdOfQuakqN4re3cI5mr5",
+    testPartnerDistrictName: 'zzzCypressTestDistrict',
+    testPartnerDistrictInitials: 'CTD',
+    testPartnerDistrictNcesId: '123456789',
+    testPartnerSchoolName: 'zzzCypressTestSchool',
+    testPartnerSchoolInitials: 'CTS',
+    testPartnerSchoolNcesId: '987654321',
+    testPartnerClassName: 'zzzCypressTestClass',
+    testPartnerClassInitials: 'CTC',
+    testPartnerGroupName: 'zzzCypressTestGroup',
+    testPartnerGroupInitials: 'CTG',
+    testGrade: 'Grade 5',
+    stanfordUniversityAddress: '450 Jane Stanford Way, Stanford, CA 94305, USA',
+    testTag: 'stanford university',
+    cypressDownloads: 'cypress/downloads',
+    testRoarAppsAdministration: "zzzCypressTestRoarAppsAdministration",
+    testRoarAppsAdministrationId: "f3UMHUpR8NGLdmACLw9o",
+    testUserList: [
+    "zzzCypressTestStudent0",
+    "zzzCypressTestStudent1",
+    "zzzCypressTestStudent2",
+    "zzzCypressTestStudent3",
+    "zzzCypressTestStudent4",
+    "zzzCypressTestStudent5",
+    "zzzCypressTestStudent6",
+    "zzzCypressTestStudent7",
+    "zzzCypressTestStudent8",
+    "zzzCypressTestStudent9",
+    "zzzCypressTestStudent10",
+    "zzzCypressTestStudent11",
+    "zzzCypressTestStudent12",
+    "zzzCypressTestStudent13",
+    "zzzCypressTestStudent14",
+    "zzzCypressTestStudent15",
+    "zzzCypressTestStudent16",
+    "zzzCypressTestStudent17",
+    "zzzCypressTestStudent18",
+    "zzzCypressTestStudent19",
+    "zzzCypressTestStudent20",
+    ]
+  },
+});

cypress/e2e/participant/buttonGamesList.js

@@ -0,0 +1,63 @@
+export const games = [
+  {
+    name: 'ROAR Picture Vocabulary',
+    id: 'vocab',
+    startBtn: '.jspsych-btn',
+    introBtn: '.continue',
+    introIters: 3,
+    numChoices: 3,
+    stimulus: '',
+    preChoiceDelay: 700,
+    setUpChoice: '.intro_aliens',
+    clickableItem: '.vocab_img',
+    numIter: 4,
+  },
+  {
+    name: 'ROAR Written Vocabulary',
+    id: 'cva',
+    startBtn: '.jspsych-btn',
+    introBtn: '.go-button',
+    introIters: 3,
+    setupChoice: '',
+    stimulus: '.item-stimulus-cva',
+    preChoiceDelay: 1700,
+    clickableItem: 'button',
+    correctChoice: '.glowingButton',
+    numIter: 9,
+  },
+  {
+    name: 'Roar-Morphology',
+    id: 'morphology',
+    startBtn: '.jspsych-btn',
+    introBtn: '.go-button',
+    introIters: 3,
+    numChoices: 3,
+    stimulus: '.item-stimulus',
+    clickableItem: 'button',
+    preChoiceDelay: 1500,
+    setupChoice: '',
+    correctChoice: '.glowingButton',
+    numIter: 6,
+  },
+  {
+    name: 'Letter',
+    id: 'letter',
+    startBtn: '.jspsych-btn',
+    introBtn: '.go-button',
+    introIters: 5,
+    correctChoice: '.glowingButton',
+    numChoices: 3,
+    stimulus: '',
+    setupChoice: '',
+    clickableItem: 'button',
+    preChoiceDelay: 600,
+    numIter: 27,
+  },
+];
+
+// variant IDS
+// vocab: VimH8oXM99UToXydiDK4
+// cva: 5OaEGDBHAxU4kSebvyix
+// letter: E89L0yam9SJ9g5vDFzzr
+// multichoice: UD9GC7PkVRX8oJvqysTL
+

cypress/e2e/participant/checkLegalDoc.cy.js

@@ -0,0 +1,14 @@
+describe('Test to maintain that assent form shows in when signing in with an un-assented user', () => {
+  it('passes', () => {
+    // this is a user that has an assignment of roarVocab -- how can we create a user that can
+    // ALWAYS play the game
+    let test_login = 'DO_NOT_ACCEPT_DOC';
+    let test_pw = 'passwordLEGAL';
+    // how can we write some logic to reset the already played
+    cy.login(test_login, test_pw);
+    cy.visit('/');
+    cy.wait(1000);
+    cy.get('.p-dialog-title').contains('Assent Form').should('be.visible');
+    cy.get('.p-confirm-dialog-accept').contains('Continue').should('be.visible');
+  });
+});

cypress/e2e/participant/loginAndLogout.cy.js

@@ -0,0 +1,11 @@
+describe('Cypress test to login and logout', () => {
+  it('passes', () => {
+    cy.login(Cypress.env('participantUsername'), Cypress.env('participantPassword'));
+    cy.visit('/')
+
+    cy.get('button', {timeout: 10000}).contains('Sign Out').click();
+
+    // successfully back at Login page
+    cy.contains('Welcome to ROAR!');
+  });
+});