fcad-core-dragon 2.1.2 → 2.2.0-beta.1

package/package.json

@@ -1,33 +1,12 @@
 {
-  "name": "fcad-core-dragon",
-  "version": "2.1.2",
-  "private": false,
-  "type": "module",
-  "main": "./src/main.js",
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "docs:build": "vitepress build documentation",
-    "docs:dev": "vitepress dev documentation",
-    "docs:preview": "vitepress preview documentation",
-    "lintfix": "eslint --fix src",
-    "lintreport": "eslint ./src",
-    "preview": "vite preview",
-    "reset": "rm -rf ./node_modules package-lock.json .cache dist && npm i && npm run watch",
-    "test:unit": "vitest",
-    "vue": "vue",
-    "watch": "nodemon -e js,vue,html,json -x yalc publish --push",
-    "format": "prettier --write src/",
-    "test-ct": "playwright test -c playwright-ct.config.js"
-  },
-  "config": {
-    "projname": ""
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead"
   ],
+  "config": {
+    "projname": ""
+  },
   "dependencies": {
     "axios": "^1.6.8",
     "gsap": "^3.12.5",
@@ -44,23 +23,47 @@
     "@playwright/test": "^1.56.1",
     "@types/node": "^24.10.0",
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/coverage-v8": "^4.0.15",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.38.0",
     "eslint-plugin-cypress": "^5.1.0",
     "eslint-plugin-vue": "~10.3.0",
     "globals": "^16.4.0",
+    "happy-dom": "^20.0.10",
     "jsdom": "^25.0.1",
     "nodemon": "^3.1.0",
     "prettier": "^3.6.2",
     "sass-embedded": "^1.91.0",
     "vitepress": "^1.6.3",
-    "vitest": "^3.2.4",
+    "vitest": "^4.0.15",
     "vue-i18n": "^11.1.12",
     "vue-router": "^4.4.5",
     "vuetify": "^3.10.10"
   },
   "engines": {
     "node": ">0.11.9"
-  }
+  },
+  "main": "./src/main.js",
+  "name": "fcad-core-dragon",
+  "private": false,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "docs:build": "vitepress build documentation",
+    "docs:dev": "vitepress dev documentation",
+    "docs:preview": "vitepress preview documentation",
+    "format": "prettier --write src/",
+    "lintfix": "eslint --fix src",
+    "lintreport": "eslint ./src",
+    "preview": "vite preview",
+    "reset": "rm -rf ./node_modules package-lock.json .cache dist && npm i && npm run watch",
+    "test-ct": "playwright test -c playwright-ct.config.js",
+    "test:unit": "vitest",
+    "test:unit:coverage": "vitest --coverage",
+    "vue": "vue",
+    "watch": "nodemon -e js,vue,html,json -x yalc publish --push"
+  },
+  "type": "module",
+  "version": "2.2.0-beta.1"
 }

package/src/components/AppBasePage.vue

@@ -11,7 +11,6 @@
       <div class="ctn">
         Activity info: Route : {{ $route.path }}
         <br />
-
         Activity id : {{ getDebugModeInfo.id }}
         <br />
         Nombre de page : {{ getDebugModeInfo.size }}
@@ -96,6 +95,7 @@ export default {
     }
   },
   setup(props) {
+    //console.log('dans setup')
     const store = useAppStore()
     const { activityRef, id: pageID, type: pageType } = props.pageData
     const { t } = useI18n()
@@ -167,35 +167,29 @@ export default {
     getModuleInfo() {
       return this.store.getModuleInfo
     },
-
     getAllActivities() {
       return this.store.getAllActivities()
     },
     getConnectionInfo() {
       return this.store.getConnectionInfo
     },
-
     getAnchorsForActivity() {
       return this.store.getAnchorsForActivity()
     },
     getBifChoice() {
       return this.store.getBifChoice
     },
-
     isBranchingPage() {
       return this.$route.meta.type === 'branching' && this.type !== 'pg_branch'
     },
-
     //================================================
     settingsOptions() {
       return this.settingsOptionsELPlus
     },
-
     settingsSelected() {
       const setting = this.getApplicationSettings
       return setting
     },
-
     errorPage() {
       let err = false
       if (import.meta.env.DEV) {
@@ -380,7 +374,8 @@ export default {
         /**
          * Observe changes in the number of poperties to dispatch updates in the userdata in the Store
          */
-
+        // console.log('ici')
+        //console.log(this.userInteraction)
         if (newValue && Object.entries(this.userInteraction).length) {
           await this.store.updateUserMetaData({
             activityRef: this.pageData.activityRef,

package/src/components/AppCompAudio.vue

@@ -107,11 +107,11 @@ export default {
     ...mapState(useAppStore, ['getCurrentBrowser', 'getCurrentPage']),
     $audElement() {
       if (!this.isSet) return null
+      const { id, mTranscript } = this.audData
       return {
-        id: this.id,
-        mTranscript: null,
+        id,
+        mTranscript,
         mType: 'audio',
-        mSubtitles: null,
         mElement: this.$refs['m-audio']
       }
     },

package/src/components/AppCompInputCheckBoxNx.vue

@@ -168,7 +168,8 @@ export default {
         )
         const { errorList, errorInConsole } = errors
 
-        if (errorList.length || errorInConsole.length) return errors
+        if (!errorList || !errorInConsole) return null
+        return errors
       }
 
       return errors

package/src/components/AppCompInputDropdownNx.vue

@@ -29,6 +29,7 @@
             :items="getItemOptions(index)"
             :open-text="`${$t('message.dropdown_list')}_${singleDropdown.ennonce}`"
             :aria-describedby="`${id}_${singleDropdown.id}-msg-erreur`"
+            menu-icon="mdi-chevron-down"
             @update:model-value="onSelectUpdate($event, index)"
           ></v-select>
 
@@ -169,11 +170,10 @@ export default {
           null,
           `liste déroulante #${i + 1}`
         )
-
-        if (e.errorInConsole.length && e.errorList.length) {
-          errors.errorInConsole.push(e.errorInConsole[0])
-          errors.errorList.push(e.errorList[0])
-        }
+        if (!e || !e.errorList || !e.errorInConsole) return null
+        const { errorList, errorInConsole } = e
+        if (errorInConsole.length) errors.errorInConsole.push(errorInConsole[0])
+        if (errorList.length) errors.errorList.push(errorList[0])
       }
 
       return errors

package/src/components/AppCompInputRadioNx.vue

@@ -197,7 +197,8 @@ export default {
         )
         const { errorList, errorInConsole } = errors
 
-        if (errorList.length || errorInConsole.length) return errors
+        if (!errorList || !errorInConsole) return null
+        return errors
       }
 
       return errors

package/src/components/AppCompInputTextNx.vue

@@ -99,9 +99,7 @@ export default {
   methods: {
     validateInputData() {
       let errors = null //array for errors dectected
-
       if (this.inputData != undefined) return errors
-
       return errors
     },
     /**

package/src/components/AppCompInputTextTableNx.vue

@@ -129,10 +129,10 @@ export default {
           `texte tableau #${i + 1}`
         )
 
-        if (e.errorInConsole.length && e.errorList.length) {
-          errors.errorInConsole.push(e.errorInConsole[0])
-          errors.errorList.push(e.errorList[0])
-        }
+        if (!e || !e.errorList || !e.errorInConsole) return null
+        const { errorList, errorInConsole } = e
+        if (errorInConsole.length) errors.errorInConsole.push(errorInConsole[0])
+        if (errorList.length) errors.errorList.push(errorList[0])
       }
 
       return errors

package/src/components/AppCompInputTextToFillDropdownNx.vue

@@ -34,6 +34,7 @@
             :items="getItemOptions(textInput.index)"
             :aria-describedby="`${id}_${textInput.id}-msg-erreur`"
             :aria-labelledby="`${id}_${textInput.id}-label`"
+            menu-icon="mdi-chevron-down"
             @update:model-value="onSelectUpdate($event, textInput.index)"
           />
           <span
@@ -173,7 +174,7 @@ export default {
       let splittedText = str.split(regex)
       let listInput = []
 
-      for (let i = 0; i < splittedText.length - 1; i++) {
+      for (let i = 0; i < splittedText.length; i++) {
         listInput.push({
           id: `text-${i}`,
           type: 'text',
@@ -183,9 +184,10 @@ export default {
         if (i < splittedText.length - 1)
           listInput.push({ id: `select-${i}`, type: 'select', index: i })
       }
+
       let lI = listInput.findLast((element) => element.type == 'select')
-      this.inputCount = lI.index + 1
 
+      this.inputCount = lI.index + 1
       this.inputElements = listInput
     },
     /**
@@ -299,14 +301,11 @@ fieldset {
 div.texteatrou {
   display: inline !important;
 
-  
   .cnt-input {
     display: inline;
     .v-input {
       display: inline-block !important;
 
-      
-
       :deep(.v-input__control),
       :deep(.v-field) {
         width: 240px !important;
@@ -339,5 +338,4 @@ div.texteatrou {
     }
   }
 }
-
 </style>

package/src/components/AppCompInputTextToFillNx.vue

@@ -132,29 +132,6 @@ export default {
   mounted() {},
 
   methods: {
-    /**
-     * @description validate the raw data received by the component to render is view
-     * @returns {Object} errors - errorList: to display in view and errorConsole, to be displayed in console
-     */
-    validateInputData() {
-      let errors = null //array for errors dectected
-      let stringType = ['id', 'value']
-
-      if (!this.inputData.length) return errors
-      for (let i = 0; i < this.inputData.length; i++) {
-        errors = validateObjType(
-          this.inputData[i],
-          { stringType },
-          null,
-          `choix_reponse #${i + 1}`
-        )
-        const { errorList, errorInConsole } = errors
-
-        if (errorList.length || errorInConsole.length) return errors
-      }
-
-      return errors
-    },
     /**
      * @description create the object to genate the text and inputs
      * @param {String} str the text with holes to fill
@@ -165,7 +142,7 @@ export default {
       let splittedText = str.split(regex)
       let listInput = []
 
-      for (let i = 0; i < splittedText.length - 1; i++) {
+      for (let i = 0; i < splittedText.length; i++) {
         listInput.push({
           id: `text-${i}`,
           type: 'text',

package/src/components/AppCompPlayBarNext.vue

@@ -1628,7 +1628,7 @@ export default {
      */
     toggleFullScreen() {
       const fullscreenElement = this.mediaContainer
-      console.log(fullscreenElement)
+      //console.log(fullscreenElement)
 
       if (document.fullscreenElement) {
         // exitFullscreen is only available on the Document object.
@@ -1795,12 +1795,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .pb-container.video {
-  position: absolute;
   height: 100%;
   width: 100%;
   justify-content: center;
   display: flex;
-  margin-bottom: 78px;
 }
 
 .playback-button {
@@ -1808,7 +1806,7 @@ export default {
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 94%;
+  height: 100%;
   display: flex;
   flex-flow: column wrap;
   justify-content: center;
@@ -1837,8 +1835,6 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  position: absolute;
-  bottom: -78px;
   opacity: 0;
   z-index: 2;
 
@@ -2260,8 +2256,10 @@ export default {
 
 .FS {
   &:fullscreen {
-    .pb-wrapper {
-      bottom: -45px;
+    .pb-container {
+      position: absolute;
+      bottom: 0;
+      height: 78px;
     }
   }
 }

package/src/components/AppCompQuizRecall.vue

@@ -103,19 +103,26 @@ export default {
     //Watch for user interaction change to get quizRecall answer
     getUserInteraction: {
       async handler(newValue) {
+        //console.log('???')
         if (!this.getUserInteraction) return
-
+        //console.log('--------------------')
         const { activityId, pageId } = this.quizRecallData
         const interaction = this.getPageInteraction(
           activityId,
           pageId
         ).userInteraction
 
-        if (!interaction) return
+        //console.log(interaction)
+        if (!interaction) return //{
+        //   this.quizRecall.done == false
+        // }
+
         //Get quizRecall answer
         if (this.quizRecallData && this.quizData) {
+          //console.log('ici????')
           await this.getQuizRecallAnswer(interaction)
         } else {
+          //console.log('laaaaaa ???? ')
           this.quizRecall.done == false
         }
       },
@@ -216,6 +223,7 @@ export default {
       if (hypertext_done) {
         this.quizRecall.hypertext_done = hypertext_done
       }
+
       if (hypertext_undone) {
         this.quizRecall.hypertext_undone = hypertext_undone
       }
@@ -231,6 +239,7 @@ export default {
         }
       }
       //Get the quiz answers from userData
+
       const answers = userData.quizAnswers || {}
       let quizAnswer = answers[quizId] || null
 
@@ -301,6 +310,7 @@ export default {
         )
         this.hasError.push(msgErr)
       }
+
       //Validate if all required properties are present in quizRecallData
       if (missingRequired.length > 0) {
         let msgErr = `QuizRecallData missing required ${missingRequired} property`

package/src/components/AppCompVideoPlayer.vue

@@ -282,6 +282,7 @@ export default {
     resizeVideo(size, container) {
       let defaultSize = 100
       if (size == 'sm') defaultSize = 68
+
       //const videoElement = document.querySelector('.__media-container')
       const videoElement = this.$vidElement.mMediaContainer
       setTimeout(() => {
@@ -304,7 +305,7 @@ $widthVideo: 100%;
 
 .app-video-player {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: wrap;
   position: relative;
   align-items: center;

package/src/main.js

@@ -28,7 +28,7 @@ import GsapPlugin from './plugins/gsap'
 import eventBus from './plugins/bus'
 import helper from './plugins/helper'
 import analytics from './plugins/analytics'
-import mergeLocales from './plugins/i18n'
+import initLocalisation from './plugins/i18n'
 import { scormPlugin } from './plugins/scorm'
 import { xapiPlugin } from './plugins/xapi'
 import { $idb } from './plugins/idb'
@@ -41,19 +41,33 @@ import VueSafeTeleport from 'vue-safe-teleport'
 import { FocusTrap } from 'focus-trap-vue'
 import nvdaFix from './directives/nvdaFix.js'
 import pckg from '../package.json'
+import fcadRouter from './router/index.js'
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import { fr, en } from 'vuetify/locale'
+
 const pinia = createPinia()
 
 export default {
   install(app, options) {
+    app.use(fcadRouter)
     app.use(pinia)
     app.use(scormPlugin)
     app.use(GsapPlugin)
     app.use(xapiPlugin)
     app.use(VueSafeTeleport)
     app.component('FocusTrap', FocusTrap)
-
     app.use(eventBus)
     app.use($idb)
+    const vuetify = createVuetify({
+      locale: {
+        locale: 'fr',
+        fallback: 'en',
+        messages: { fr, en }
+      }
+    })
+    app.use(vuetify)
 
     app.component('AppBase', AppBase)
     app.component('AppBaseButton', AppBaseButton)
@@ -332,7 +346,6 @@ export default {
 
       let server = remote ? specification : 'local'
       //falback to idb when scorm and origin is localhost
-      //falback to idb when scorm and origin is localhost
       if (
         (specification == 'scorm' && window.location.hostname == 'localhost') ||
         !window.location.hostname.includes('cegepadistance.ca')
@@ -477,8 +490,8 @@ export default {
     appStore.applicationSettings = settingsOptions
     //=================================END SETTING PREFERENCES ====================================//
 
-    //mergeLocales
-    mergeLocales(options.i18n.global)
+    const i18n = initLocalisation()
+    app.use(i18n)
     app.use(helper)
     app.use(analytics)
 

package/src/plugins/i18n.js

@@ -1,10 +1,13 @@
 import _ from 'lodash'
+import { createI18n } from 'vue-i18n'
 /**
  * Merge locales message in project.
  * @summary To merge the locales dictionnary of this library with the locales that user will create
- * @param {Object} i18n - vue-i18n internalization object.
+ * @param {Object} templateMessages - messages (JSON) received from the template
  */
-export default function mergeLocales(i18n) {
+export default function initLocalisation(templateMessages) {
+  const i18n = createI18n({ legacy: false })
+
   const thisLocales = import.meta.glob('../$locales/*.json', {
     import: 'default',
     eager: true
@@ -15,13 +18,12 @@ export default function mergeLocales(i18n) {
       const locale = matched[1]
       // Using lodash to deeply merge objects
       const coreMessages = JSON.parse(JSON.stringify(thisLocales[path]))
-      const templateMessages = JSON.parse(
-        JSON.stringify(i18n.messages[locale] || i18n.messages.value[locale]) //cover both legacy mode and non legacy mode of vue-i18n
-      )
       const mergedMessages = _.merge(coreMessages, templateMessages)
 
       // Since merLocalMessage will do a shallow merge of the object. We will use setLocalMessage to replace the message with new message object
-      i18n.setLocaleMessage(locale, mergedMessages)
+
+      i18n.global.setLocaleMessage(locale, mergedMessages)
     }
   }
+  return i18n
 }

package/tests/unit/AppCompAudio.spec.js

@@ -0,0 +1,134 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, test, expect } from 'vitest'
+
+let dummyProps = {
+  id: 'P01',
+  activityRef: 'A03',
+  title: 'Lecteurs médias',
+  type: 'pg_normal',
+  audiosData: [
+    {
+      id: 'aud1',
+      mTitle: 'Et si... Annie Ernaux nous parlait',
+      mSources: [
+        {
+          type: 'mp3',
+          src: ' exemple_audio.mp3'
+        }
+      ],
+      mPoster: 'audio_poster.png',
+      mAlt: "Portrait de l'autrice Annie Ernaux",
+      mTranscript:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>'
+    }
+  ]
+}
+
+import AppCompAudioPlayer from '@/components/AppCompAudio.vue'
+import { validateAudioData } from '@/shared/validators.js'
+
+describe('AppCompAudioPlayer', () => {
+  test('Validate received props', () => {
+    validateAudioData.mockReturnValue([])
+    const { audiosData } = dummyProps
+    mount(AppCompAudioPlayer, {
+      props: { audData: audiosData[0] }
+    })
+
+    expect(validateAudioData).toHaveBeenCalledWith({
+      id: 'aud1',
+      mTitle: 'Et si... Annie Ernaux nous parlait',
+      mSources: [
+        {
+          type: 'mp3',
+          src: ' exemple_audio.mp3'
+        }
+      ],
+      mPoster: 'audio_poster.png',
+      mAlt: "Portrait de l'autrice Annie Ernaux",
+      mTranscript:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>'
+    })
+  })
+
+  it('renders ErrorDisplay When validator returns errors', () => {
+    // simulate invalid props
+    validateAudioData.mockReturnValue([
+      'WARNING!>>> audio:  💥 Invalid declaration for audio element'
+    ])
+
+    const wrapper = mount(AppCompAudioPlayer, {
+      props: { audData: { id: null } }
+    })
+
+    expect(
+      wrapper.findComponent({ name: 'AppBaseErrorDisplay' }).exists()
+    ).toBe(true)
+    expect(wrapper.find('audio').exists()).toBe(false)
+  })
+
+  it('It renders HTML audio Element', () => {
+    validateAudioData.mockReturnValue([]) // no Error
+    const wrapper = mount(AppCompAudioPlayer, {
+      props: { audData: { id: null } }
+    })
+    expect(
+      wrapper.findComponent({ name: 'AppBaseErrorDisplay' }).exists()
+    ).toBe(false)
+    expect(wrapper.find('audio').exists()).toBe(true)
+  })
+
+  it('audio Element has correct sources', async () => {
+    const { audiosData } = dummyProps
+
+    validateAudioData.mockReturnValue([]) // no Error
+    const wrapper = mount(AppCompAudioPlayer, {
+      props: { audData: audiosData[0] }
+    })
+
+    expect(wrapper.vm.mSources).toEqual(audiosData[0].mSources)
+
+    //sources are rendered in the DOM
+    await wrapper.vm.$nextTick()
+    const sources = wrapper.findAll('source')
+    expect(sources.length).toBe(1)
+
+    // --- 3) valider les valeurs réelles rendues ---
+    expect(sources[0].attributes().src).toBe(audiosData[0].mSources[0].src)
+    expect(sources[0].attributes().type).toBe('audio/mp3')
+  })
+
+  it('computed $auElement returns correct data structure', async () => {
+    validateAudioData.mockReturnValue([])
+    const { audiosData } = dummyProps
+    const wrapper = mount(AppCompAudioPlayer, {
+      props: { audData: audiosData[0] }
+    })
+    // Simulate refs
+    const mockaudioRef = { tagName: 'audio' }
+    const mockContainerRef = { className: '__media-container' }
+    wrapper.vm.$refs['m-audio'] = mockaudioRef
+    wrapper.vm.$refs['$media-container'] = mockContainerRef
+    // Simulate refs isSet (audio ready) to true
+    wrapper.vm.isSet = true
+    await wrapper.vm.$nextTick()
+    // get audElement object
+    const obj = wrapper.vm.$audElement
+    const id = wrapper.vm.$props.audData.id
+    // expected data structure to be returned
+    const audElement = {
+      id,
+      mType: 'audio',
+      mElement: { localName: 'audio' },
+      mTranscript:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>'
+    }
+
+    expect(obj.id).toEqual(audElement.id)
+    expect(obj.mType).toBe(audElement.mType)
+    expect(obj.mElement.tagName.toLowerCase()).toBe(
+      audElement.mElement.localName
+    )
+    expect(obj.mTranscript).toBe(audElement.mTranscript)
+  })
+})