Merge branch 'main' into optional-reports

yeatmanlab · Mar 27, 2024 · cbe770e · cbe770e
2 parents c29c9c0 + 5871721
commit cbe770e
Show file tree

Hide file tree

Showing 42 changed files with 756 additions and 434 deletions.
diff --git a/.github/workflows/deploy-firebase-test-cypress.yml b/.github/workflows/deploy-firebase-test-cypress.yml
@@ -18,8 +18,8 @@ jobs:
         with:
           node-version: 'lts/*'
       - name: 'vite build'
-        env:
-          NODE_OPTIONS: '--max_old_space_size=8192'
+        #        env:
+        #          NODE_OPTIONS: '--max_old_space_size=8192'
         run: npm ci && npm run build
       - name: Deploy to Firebase Hosting Channel
         id: firebase-deploy

diff --git a/.github/workflows/firebase-hosting-production.yml b/.github/workflows/firebase-hosting-production.yml
@@ -18,8 +18,8 @@ jobs:
         with:
           node-version: 'lts/*'
       - name: 'vite production build'
-        env:
-          NODE_OPTIONS: '--max_old_space_size=8192'
+        #        env:
+        #          NODE_OPTIONS: '--max_old_space_size=8192'
         run: npm ci && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:

diff --git a/.github/workflows/firebase-hosting-staging.yml b/.github/workflows/firebase-hosting-staging.yml
@@ -15,8 +15,8 @@ jobs:
         with:
           node-version: 'lts/*'
       - name: 'vite staging build'
-        env:
-          NODE_OPTIONS: '--max_old_space_size=8192'
+        #        env:
+        #          NODE_OPTIONS: '--max_old_space_size=8192'
         run: export VITE_STAGING_BUILD=true && npm ci && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:

diff --git a/README.md b/README.md
@@ -5,6 +5,17 @@ Online Assessment of Reading (ROAR) platform.
 
 If you would like to contribute to this project, please read the [contribution guide](.github/CONTRIBUTING.md).
 
+## NPM Scripts
+
+The `npm run dev` and `npm run build` scripts have variants that define which
+data source the dashboard will use. Scripts ending in `:live` will use
+production data, while scripts ending in `:sandbox` will use development data:
+
+- `npm run dev` starts a development server using sandbox data.
+- `npm run dev:live` starts a development server using live data.
+- `npm run build` builds the project using live data.
+- `npm run build:sandbox` builds the project using sandbox data.
+
 ## Data Flow Diagram
 
 See the [ROAR/ROAD Data Flow Diagram here](https://miro.com/app/board/uXjVNY-_qDA=/?share_link_id=967374624080).
diff --git a/cypress/e2e/participant/default-tests/playFluency-ARF.cy.js b/cypress/e2e/participant/default-tests/playFluency-ARF.cy.js
@@ -18,7 +18,7 @@ describe('Test playthrough of Fluency as a participant', () => {
     cy.visit(`/game/fluency-arf`);
 
     //   Click jspsych button to begin
-    cy.get('.jspsych-btn', { timeout: 5 * timeout })
+    cy.get('.jspsych-btn', { timeout: 6 * timeout })
       .should('be.visible')
       .click();
 

diff --git a/cypress/e2e/participant/default-tests/playPA.cy.js b/cypress/e2e/participant/default-tests/playPA.cy.js
@@ -28,7 +28,7 @@ describe('Testing playthrough of ROAR-Phoneme as a participant', () => {
     cy.visit('/');
     cy.wait(0.2 * timeout);
     cy.selectAdministration(Cypress.env('testRoarAppsAdministration'));
-    cy.get('.tabview-nav-link-label', { timeout: 2 * timeout })
+    cy.get('.tabview-nav-link-label', { timeout: 3 * timeout })
       .contains('ROAR - Phoneme')
       .should('have.attr', 'data-game-status', 'complete');
   });

diff --git a/cypress/e2e/partner-admin/default-tests/viewIndividualReport.cy.js b/cypress/e2e/partner-admin/default-tests/viewIndividualReport.cy.js
@@ -22,11 +22,11 @@ function clickScoreButton() {
   );
 }
 
-function checkAssignmentColumns() {
+function checkAssignmentColumns(assignments) {
   cy.get('[data-cy="roar-data-table"] thead th').then(($header) => {
     const tableHeaders = $header.map((index, elem) => Cypress.$(elem).text()).get();
 
-    testAssignments.forEach((assignment) => {
+    assignments.forEach((assignment) => {
       expect(tableHeaders).to.include(assignment);
     });
   });

diff --git a/cypress/support/helper-functions/roar-pa/paHelpers.js b/cypress/support/helper-functions/roar-pa/paHelpers.js
@@ -53,15 +53,15 @@ const playTrial = (targetText) => {
 };
 
 function playIntro(startText) {
-  cy.get('.instructionCanvasNS', { timeout: 5 * timeout })
+  cy.get('.instructionCanvasNS', { timeout: 6 * timeout })
     .should('be.visible')
     .click();
 
-  cy.get('.jspsych-btn', { timeout: 5 * timeout })
+  cy.get('.jspsych-btn', { timeout: 6 * timeout })
     .should('be.visible')
     .click();
 
-  cy.get('.continue', { timeout: 5 * timeout })
+  cy.get('.continue', { timeout: 6 * timeout })
     .should('be.visible')
     .click();
 

diff --git a/cypress/support/helper-functions/roar-sre/sreHelpers.js b/cypress/support/helper-functions/roar-sre/sreHelpers.js
@@ -20,7 +20,7 @@ export const playSRE = (administration, language, optional = false) => {
     .should('exist');
   cy.visit(languageOptions[language].url);
 
-  cy.get('.jspsych-btn', { timeout: 5 * timeout })
+  cy.get('.jspsych-btn', { timeout: 6 * timeout })
     .should('be.visible')
     .click();
 
@@ -29,14 +29,14 @@ export const playSRE = (administration, language, optional = false) => {
   // handles error where full screen throws a permissions error
   cy.wait(0.2 * timeout);
 
-  cy.get('body', { timeout: 5 * timeout }).type('{enter}');
-  cy.get('body', { timeout: 5 * timeout }).type('{1}');
+  cy.get('body', { timeout: 6 * timeout }).type('{enter}');
+  cy.get('body', { timeout: 6 * timeout }).type('{1}');
 
   playSREGame();
 
   // check if game completed
   cy.visit('/');
-  cy.wait(0.2 * timeout);
+  cy.wait(0.3 * timeout);
   cy.selectAdministration(administration);
 
   if (optional) {

diff --git a/cypress/support/helper-functions/roar-swr/swrHelpers.js b/cypress/support/helper-functions/roar-swr/swrHelpers.js
@@ -16,7 +16,7 @@ export const playSWR = (administration, language, optional = false) => {
   cy.get('.p-tabview', { timeout: timeout }).contains(languageOptions[language].gameTab).should('exist');
   cy.visit(languageOptions[language].url);
 
-  cy.get('.jspsych-btn', { timeout: 3 * timeout })
+  cy.get('.jspsych-btn', { timeout: 6 * timeout })
     .should('be.visible')
     .click();
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,9 +3,11 @@
   "private": true,
   "version": "2.0.1",
   "scripts": {
-    "build": "vite build",
+    "build": "export VITE_FIREBASE_DATA_SOURCE=live && vite build",
+    "build:sandbox": "export VITE_FIREBASE_DATA_SOURCE=sandbox && vite build",
     "build:levante": "vite build -m LEVANTE",
-    "dev": "vite --force --host",
+    "dev": "export VITE_FIREBASE_DATA_SOURCE=sandbox && vite --force --host",
+    "dev:live": "export VITE_FIREBASE_DATA_SOURCE=live && vite --force --host",
     "dev:levante": "vite --force --host -m LEVANTE",
     "dev:emulate": "export VITE_FIREBASE_EMULATOR=true && vite --force --host",
     "emulate:admin": "source firebase/emulate_admin.sh",
@@ -25,13 +27,13 @@
   },
   "dependencies": {
     "@bdelab/roam-fluency": "^1.11.9",
-    "@bdelab/roar-firekit": "^4.8.9",
+    "@bdelab/roar-firekit": "^4.8.10",
     "@bdelab/roar-letter": "^1.10.0",
-    "@bdelab/roar-multichoice": "^1.9.4",
-    "@bdelab/roar-pa": "^1.6.4",
+    "@bdelab/roar-multichoice": "^1.11.0",
+    "@bdelab/roar-pa": "^1.6.5",
     "@bdelab/roar-sre": "^1.13.3",
     "@bdelab/roar-swr": "^1.9.0",
-    "@bdelab/roar-utils": "^1.1.0",
+    "@bdelab/roar-utils": "^1.2.0",
     "@bdelab/roar-vocab": "^1.6.11",
     "@sentry/browser": "^7.107.0",
     "@sentry/integrations": "^7.107.0",

diff --git a/roar-firebase-functions b/roar-firebase-functions
diff --git a/src/assets/styles/root/base.scss b/src/assets/styles/root/base.scss
@@ -12,6 +12,20 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+// Sentry feedback widget
+#sentry-feedback {
+  max-width: fit-content;
+  opacity: 0.85;
+  --bottom: 1rem;
+  --left: 1rem;
+  --border: 1px solid var(--primary-color);
+  --background-hover: var(--red-100);
+  --submit-border: var(--primary-color);
+  --submit-background: var(--primary-color);
+  --submit-background-hover: var(--primary-color-hover);
+  --cancel-background-hover: var(--red-100);
+}
+
 // Placeholder
 ::-webkit-input-placeholder {
   color: var(--text-color-secondary);

diff --git a/src/components/ConsentModal.vue b/src/components/ConsentModal.vue
@@ -17,8 +17,10 @@ import { useConfirm } from 'primevue/useconfirm';
 import { useToast } from 'primevue/usetoast';
 import { marked } from 'marked';
 import { useAuthStore } from '@/store/auth';
+import { useI18n } from 'vue-i18n';
 
 const authStore = useAuthStore();
+const i18n = useI18n();
 
 const props = defineProps({
   consentText: { type: String, require: true, default: 'Text Here' },
@@ -28,6 +30,7 @@ const consentHeader = {
   tos: 'Terms of Service',
   consent: 'Consent',
   assent: 'Assent',
+  'assent-es': 'Asentimiento',
 };
 const emit = defineEmits(['accepted', 'delayed']);
 
@@ -45,15 +48,19 @@ onMounted(() => {
   const delayPromise = delay(8000);
   confirm.require({
     group: 'templating',
-    header: `${consentHeader[props.consentType]} Form`,
+    header: props.consentType.includes('-es')
+      ? `Formulario de ${consentHeader[props.consentType]}`
+      : `${consentHeader[props.consentType]} Form`,
     icon: 'pi pi-question-circle',
-    acceptLabel: 'Continue',
+    acceptLabel: i18n.t('consentModal.acceptButton'),
     acceptIcon: 'pi pi-check',
     accept: async () => {
       toast.add({
         severity: 'info',
-        summary: 'Confirmed',
-        detail: `${consentHeader[props.consentType]} status updated.`,
+        summary: i18n.t('consentModal.toastHeader'),
+        detail: props.consentType.includes('-es')
+          ? `Estado de ${consentHeader[props.consentType]} actualizado`
+          : `${consentHeader[props.consentType]} status updated.`,
         life: 3000,
       });
       emit('accepted');

diff --git a/src/components/GameTabs.vue b/src/components/GameTabs.vue
@@ -72,15 +72,20 @@
   </div>
 </template>
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import _get from 'lodash/get';
 import _find from 'lodash/find';
 import _findIndex from 'lodash/findIndex';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
-import VideoPlayer from '@/components/VideoPlayer.vue';
+
+let VideoPlayer;
+
+onMounted(async () => {
+  VideoPlayer = (await import('@/components/VideoPlayer.vue')).default;
+});
 
 const { t } = useI18n();
 

diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
 
 export default {
@@ -23,7 +22,8 @@ export default {
       player: null,
     };
   },
-  mounted() {
+  mounted: async function () {
+    const videojs = (await import('video.js')).default;
     this.player = videojs(this.$refs.videoPlayer, this.options, () => {
       this.player.log('onPlayerReady', this);
     });