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

package/tests/unit/AppCompCarousel.spec.js

@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils'
+import AppCompCarousel from '@/components/AppCompCarousel.vue'
+import AppBaseButton from '@/components/AppBaseButton.vue'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+const dummyProps = {
+  slides: [
+    {
+      imgSrc: 'https://loremflickr.com/500/500/kitten?random=1',
+      imgAlt: 'ceci est un chat',
+      title: 'Mon premier chat',
+      hypertext:
+        '<h3>Test</h3><p>Voici un texte de test pour le premier chat.</p>'
+    },
+    {
+      imgSrc: 'https://loremflickr.com/500/500/kitten?random=10',
+      imgAlt: 'ceci est un autre chat',
+      title: 'Le deuxième chat',
+      hypertext: ''
+    },
+    {
+      imgSrc: 'https://loremflickr.com/500/500/kitten?random=100',
+      imgAlt: 'ceci est un encore chat',
+      title: 'Le troisième chat',
+      hypertext: ''
+    }
+  ],
+  name: 'Mon super carousel'
+}
+
+describe('AppCompCarousel.vue', () => {
+  let wrapper = null
+  beforeEach(() => {
+    wrapper = mount(AppCompCarousel, {
+      props: dummyProps
+    })
+  })
+
+  it(`displays the good amount of images`, () => {
+    expect(wrapper.findAll('img').length).toBe(dummyProps.slides.length)
+  })
+
+  it('renders two appBaseButton components as controls', () => {
+    const btnComponents = wrapper.findAllComponents(AppBaseButton)
+    expect(btnComponents.length).toBe(2)
+  })
+
+  it('updates the slide counter after nextSlide click', async () => {
+    const btnNext = wrapper.findAllComponents(AppBaseButton)[1]
+    await btnNext.trigger('click')
+    const counterTxt = wrapper.get('.carousel-index').text()
+    expect(counterTxt).toBe('2 / 3')
+  })
+})

package/tests/unit/AppCompNoteCredit.spec.js

@@ -0,0 +1,58 @@
+import { mount } from '@vue/test-utils'
+import AppCompNoteCredit from '../../src/components/AppCompNoteCredit.vue'
+import { beforeEach, describe, expect, vi, test } from 'vitest'
+
+const dummyProps = [
+  {
+    id: 'nt_1',
+    text: `note 1`
+  },
+  {
+    id: 'nt_2',
+    text: `note 2`
+  }
+]
+
+describe('AppCompNoteCredit', () => {
+  let wrapper = null
+
+  beforeEach(() => {
+    vi.mock('@/shared/generalfuncs.js', () => ({
+      fileAssets: { getActivities: () => [] }
+    }))
+
+    vi.mock('@/router/routes.js', () => ({
+      mappedFiles: []
+    }))
+
+    vi.mock('@/stores/myStore', () => ({
+      useMyStore: vi.fn(() => ({
+        getDataNoteCredit: dummyProps,
+        getAllActivities: 'A01',
+        getCurrentPage: 'P01'
+      }))
+    }))
+
+    wrapper = mount(AppCompNoteCredit, {
+      global: {
+        stubs: {
+          'app-base-button': true,
+          'app-base-error-display': true
+        }
+      }
+    })
+  })
+
+  test('It renders a the pop-up', () => {
+    const wrapper = mount(AppCompNoteCredit)
+
+    expect(wrapper.exists()).toBe(true)
+
+    const div = wrapper.find('#noteCredit')
+    expect(div.exists()).toBe(true)
+  })
+
+  test('It renders a list of ${dummyProps.length}', () => {
+    expect(wrapper.findAll('div').length).toBe(dummyProps.length)
+  })
+})

package/tests/unit/AppCompQuizNext.spec.js

@@ -77,7 +77,7 @@ describe('AppCompQuizNext', () => {
     expect(wrapper.find('.stub-radio').exists()).toBe(true)
   })
 
-  // it('rend un input texte si la question est de type text', () => {
+  // it('rend un input texte si la question est de type text', async() => {
   //   const wrapper = mount(AppCompQuizNext, {
   //     props: {
   //       question: {
@@ -88,7 +88,6 @@ describe('AppCompQuizNext', () => {
   //     },
   //     global: { stubs }
   //   })
-
   //   expect(wrapper.find('.stub-text').exists()).toBe(true)
   // })
 
@@ -106,7 +105,6 @@ describe('AppCompQuizNext', () => {
   //       }
   //     }
   //   })
-
   //   await wrapper.find('input').trigger('input')
 
   //   expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['hello'])

package/tests/unit/AppCompVideoPlayer.spec.js

@@ -1,104 +1,37 @@
 import { mount } from '@vue/test-utils'
-import { beforeEach, describe, it, test, expect, vi } from 'vitest'
-import { createTestingPinia } from '@pinia/testing'
-
-let dummyProps = {}
-
-//TODO: Logic de test pour le composant videos
-// 1- valider que composant gerer bien les props reçu-OK
-// 2- valider que le composant produit une balise HTML video en cas de success -OK
-// 3- valider le rendu du composant en cas d'erreur (errorDysplay) -OK
-// 4- Valider que le validateur de video active bien sur les datas reçu -OK
-// 5- valider certaine methode clée fonctionne
-
-beforeEach(() => {
-  dummyProps = {
-    id: 'P01',
-    activityRef: 'A03',
-    title: 'Lecteurs médias',
-    type: 'pg_normal',
-    videosData: [
-      {
-        id: 'vid1',
-        mSources: [
-          {
-            type: 'mp4',
-            src: 'exemple_video.mp4'
-          }
-        ],
-        mSubtitles: [
-          {
-            label: 'Français',
-            src: 'exemple_soustitres.vtt',
-            srclang: 'fr'
-          }
-        ],
-        mPoster: 'video_poster.jpg',
-        mTranscript: 'exemple_transcript.html' // The file MUST be host in the public folder of the project
-      }
-    ]
-  }
-  vi.mock('@/shared/generalfuncs.js', () => ({
-    fileAssets: { getActivities: () => [] }
-  }))
-
-  vi.mock('@/shared/validators.js', () => ({
-    validateObjType: () => true,
-    validateString: () => true,
-    validateVideoData: vi.fn(),
-    validateNumber: () => true
-  }))
-
-  vi.mock('@/module/stores/appStore', () => {
-    return {
-      useAppStore: () => ({
-        getCurrentPage: {
-          id: 'P01',
-          activityRef: 'A01',
-          videosData: [
-            {
-              id: 'vid1',
-              mSources: [
-                {
-                  type: 'mp4',
-                  src: ''
-                }
-              ],
-              mSubtitles: [
-                {
-                  label: 'Français',
-                  src: '',
-                  srclang: 'fr'
-                }
-              ],
-              mPoster: '',
-              mTranscript: 'exemple_transcript.html' // The file MUST be host in the public folder of the project
-            }
-          ]
-        },
-        getPageInteraction: () => ({ ...dummyProps }),
-        getUserInteraction: () => ({ ...dummyProps })
-      })
+import { describe, it, test, expect } from 'vitest'
+
+let dummyProps = {
+  id: 'P01',
+  activityRef: 'A03',
+  title: 'Lecteurs médias',
+  type: 'pg_normal',
+  videosData: [
+    {
+      id: 'vid1',
+      mSources: [
+        {
+          type: 'mp4',
+          src: 'exemple_video.mp4'
+        }
+      ],
+      mSubtitles: [
+        {
+          label: 'Français',
+          src: 'exemple_soustitres.vtt',
+          srclang: 'fr'
+        }
+      ],
+      mPoster: 'video_poster.jpg',
+      mTranscript: 'exemple_transcript.html' // The file MUST be host in the public folder of the project
     }
-  })
-})
+  ]
+}
 
 import AppCompVideoPlayer from '@/components/AppCompVideoPlayer.vue'
-// import AppBaseErrorDisplay from '@/components/AppBaseErrorDisplay.vue'
 import { validateVideoData } from '@/shared/validators.js'
 
 describe('AppCompVideoPlayer', () => {
-  const stubs = {
-    AppBaseErrorDisplay: {
-      name: 'AppBaseErrorDisplay',
-      template: '<div class="stub-error"></div>',
-      props: {
-        /* ... (props omises pour la clarté) ... */
-      }
-    },
-    AppBaseSkeleton: { template: '<div class="stub-skeleton"></div>' },
-    AppBaseButton: { template: '<button class="stub-button"></button>' }
-  }
   test('Validate received props', () => {
     validateVideoData.mockReturnValue([])
     const { videosData } = dummyProps
@@ -133,8 +66,7 @@ describe('AppCompVideoPlayer', () => {
     ])
 
     const wrapper = mount(AppCompVideoPlayer, {
-      props: { vidData: { id: null } },
-      global: { stubs, plugins: [createTestingPinia({ createSpy: vi.fn })] }
+      props: { vidData: { id: null } }
     })
 
     expect(
@@ -146,8 +78,7 @@ describe('AppCompVideoPlayer', () => {
   it('It renders HTML video Element', () => {
     validateVideoData.mockReturnValue([]) // no Error
     const wrapper = mount(AppCompVideoPlayer, {
-      props: { vidData: { id: null } },
-      global: { stubs }
+      props: { vidData: { id: null } }
     })
     expect(
       wrapper.findComponent({ name: 'AppBaseErrorDisplay' }).exists()
@@ -159,8 +90,7 @@ describe('AppCompVideoPlayer', () => {
     const { videosData } = dummyProps
     validateVideoData.mockReturnValue([]) // no Error
     const wrapper = mount(AppCompVideoPlayer, {
-      props: { vidData: videosData[0] },
-      global: { stubs }
+      props: { vidData: videosData[0] }
     })
 
     expect(wrapper.vm.vidSources).toEqual(videosData[0].mSources)
@@ -174,4 +104,66 @@ describe('AppCompVideoPlayer', () => {
     expect(sources[0].attributes().src).toBe(videosData[0].mSources[0].src)
     expect(sources[0].attributes().type).toBe('video/mp4')
   })
+
+  it('computed $vidElement returns correct data structure', async () => {
+    const { videosData } = dummyProps
+    validateVideoData.mockReturnValue([])
+
+    const wrapper = mount(AppCompVideoPlayer, {
+      props: { vidData: videosData[0] }
+    })
+
+    // Simulate refs
+    const mockVideoRef = { tagName: 'VIDEO' }
+    const mockContainerRef = { className: '__media-container' }
+
+    wrapper.vm.$refs['m-video'] = mockVideoRef
+    wrapper.vm.$refs['$media-container'] = mockContainerRef
+
+    // Simulate refs isSet (video ready) to true
+    wrapper.vm.isSet = true
+    await wrapper.vm.$nextTick()
+
+    // get vidElement object
+    const obj = wrapper.vm.$vidElement
+    const id = wrapper.vm.$props.vidData.id
+
+    // expected data structure to be returned
+    const vidElement = {
+      id,
+      mType: 'video',
+      mElement: { id, localName: 'video' },
+      mMediaContainer: {
+        id: `video_${id}`,
+        ...mockContainerRef,
+        localName: 'section'
+      },
+      mTranscript: 'exemple_transcript.html',
+      mSubtitles: [
+        {
+          label: 'Français',
+          src: 'exemple_soustitres.vtt',
+          srclang: 'fr'
+        }
+      ]
+    }
+    // validate returned object
+    expect(obj.id).toEqual(vidElement.id)
+    expect(obj.mType).toBe(vidElement.mType)
+    expect(obj.mElement.id).toBe(vidElement.mElement.id)
+    expect(obj.mElement.tagName.toLowerCase()).toBe(
+      vidElement.mElement.localName
+    )
+    expect(obj.mMediaContainer.tagName.toLowerCase()).toBe(
+      vidElement.mMediaContainer.localName
+    )
+    expect(obj.mMediaContainer.id).toBe(vidElement.mMediaContainer.id)
+    expect(
+      obj.mMediaContainer.classList.contains(
+        vidElement.mMediaContainer.className
+      )
+    ).toBe(true)
+    expect(obj.mTranscript).toBe(vidElement.mTranscript)
+    expect(obj.mSubtitles).toEqual(vidElement.mSubtitles)
+  })
 })

package/tests/unit/useQuiz.spec.js

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi } from 'vitest'
+import { useQuiz } from '../../src/composables/useQuiz.js'
+
+// Mock de useI18n pour éviter les erreurs liées à $t()
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: (key) => key })
+}))
+
+describe('useQuiz composable', () => {
+  const { shuffleArray, addRetroStyle, resetRetroStyle, retroType } = useQuiz()
+
+  it('shuffleArray should shuffle array without losing elements', () => {
+    const arr = [1, 2, 3, 4]
+    const shuffled = shuffleArray(arr)
+    expect(shuffled).toHaveLength(arr.length)
+    expect(shuffled.sort()).toEqual(arr.sort())
+  })
+
+  it('addRetroStyle should return correct classes and messages for correct answers', () => {
+    const solution = [{ id: 1 }, { id: 2 }]
+    const reponse = [{ correct: true }, { correct: true }]
+    const result = addRetroStyle(solution, reponse, reponse.length)
+    expect(result.classRetro).toEqual(['goodAnswer', 'goodAnswer'])
+    expect(result.mesA11y).toEqual([
+      'quizState.goodAnswer',
+      'quizState.goodAnswer'
+    ])
+  })
+
+  it('addRetroStyle should return neutral style when solution is null', () => {
+    const result = addRetroStyle(null, [], 0)
+    expect(result.classRetro).toEqual(['NeutralAnswer'])
+    expect(result.mesA11y).toEqual(['quizState.neutralAnswer'])
+  })
+
+  it('retroType should return retro_positive when all answers are correct', () => {
+    const solution = [{ id: 1 }, { id: 2 }]
+    const reponse = [{ correct: true }, { correct: true }]
+    expect(retroType(solution, reponse)).toBe('retro_positive')
+  })
+
+  it('retroType should return retro_negative when some answers are wrong', () => {
+    const solution = ['Données primaires', 'Données secondaires']
+    const reponse = [
+      {
+        selected: 'Données primaires',
+        correct: true
+      },
+      {
+        selected: 'Données primaires',
+        correct: false
+      }
+    ]
+    expect(retroType(solution, reponse)).toBe('retro_negative')
+  })
+
+  it('retroType should return retro_neutre when solution is null', () => {
+    expect(retroType(null, [])).toBe('retro_neutre')
+  })
+
+  it('resetRetroStyle should clear arrays and emit event', () => {
+    const fakeBus = { $emit: vi.fn() }
+    const fakeEl = {}
+    const context = { $bus: fakeBus, $el: fakeEl }
+    const arr1 = [1, 2]
+    const arr2 = ['a']
+    resetRetroStyle.call(context, [arr1, arr2])
+    expect(arr1.length).toBe(0)
+    expect(arr2.length).toBe(0)
+    expect(fakeBus.$emit).toHaveBeenCalledWith('hide-retro', fakeEl, false)
+  })
+})

package/vitest.config.js

@@ -1,28 +1,42 @@
 /**
- * @vitest-environment jsdom
+ * @vitest-environment happy-dom
  */
 import { fileURLToPath, URL } from 'node:url'
-import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import { defineConfig, configDefaults } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
-import viteConfig from './vitest.config'
 
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    test: {
-      setupFiles: ['vitest.setup.js'],
-      alias: {
-        '@': fileURLToPath(new URL('./src', import.meta.url))
-      },
-      server: {
-        deps: {
-          inline: ['vuetify']
-        }
-      },
-      environment: 'jsdom',
-      exclude: [...configDefaults.exclude, 'tests/component/**', '**/_*.spec.js'],
-      root: fileURLToPath(new URL('./', import.meta.url))
+export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern'
+      }
+    }
+  },
+  test: {
+    setupFiles: ['vitest.setup.js'],
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
     },
-    plugins: [vue()]
-  })
-)
+    server: {
+      deps: {
+        inline: ['vuetify']
+      }
+    },
+    environment: 'happy-dom',
+    exclude: [...configDefaults.exclude, 'tests/component/**', '**/_*.spec.js'],
+    root: fileURLToPath(new URL('./', import.meta.url)),
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'cobertura'],
+      reportsDirectory: './coverage',
+      include: ['src/**/*.{js,vue}'],
+      exclude: ['tests/**/*'],
+      lines: 0, // test must cover at least 80% of lines
+      branches: 0, // test must cover at least 80% of branches (if, else, switch, case...)
+      functions: 0, // test must cover at least 80% of functions
+      statements: 0 // test must cover at least 80% of statements/instructions
+    }
+  },
+  plugins: [vue()]
+})

package/vitest.setup.js

@@ -1,4 +1,5 @@
 //Mock Vuetify, vue-i18n and event bus
+import { vi } from 'vitest'
 import { config } from '@vue/test-utils'
 import { createI18n } from 'vue-i18n'
 import { createVuetify } from 'vuetify'
@@ -24,5 +25,72 @@ const i18n = createI18n({
   }
 })
 
+// Suppress console warnings and errors during tests
+vi.spyOn(console, 'warn').mockImplementation(() => {})
+vi.spyOn(console, 'error').mockImplementation(() => {})
+
+// Global mock of Router
+// =========================================
+vi.mock('@/router/index.js', () => ({
+  default: {
+    push: vi.fn(),
+    back: vi.fn(),
+    currentRoute: { value: { meta: {}, params: {}, query: {} } }
+  }
+}))
+
+// Global mock of Pinia store
+// =========================================
+vi.mock('@/module/stores/appStore', () => ({
+  useAppStore: () => ({
+    getAppConfigs: {
+      lang: 'fr'
+    },
+
+    getCurrentBrowser: 'Chrome',
+
+    getCurrentPage: {
+      id: 'P01',
+      activityRef: 'A03'
+    },
+
+    updateCurrentMediaElements: vi.fn(() => Promise.resolve()),
+    getPageInteraction: {},
+    getUserInteraction: {}
+  })
+}))
+
+// Global mock of validators
+// =========================================
+vi.mock('@/shared/validators.js', () => ({
+  validateObjType: vi.fn(() => true),
+  validateString: vi.fn(() => true),
+  validateNumber: vi.fn(() => true),
+  validateVideoData: vi.fn(() => []),
+  validateAudioData: vi.fn(() => [])
+}))
+
 //setup as global plugins used by all tests
 config.global.plugins = [i18n, vuetify, bus]
+
+// Global mock of components
+config.global.stubs = {
+  AppBaseErrorDisplay: true,
+  AppBaseSkeleton: true,
+  AppBaseButton: true,
+  AppCompPlayBarNext: true
+}
+
+config.global.mocks = {
+  $route: {
+    meta: {
+      activity_ref: 'A03',
+      id: 'P01'
+    }
+  },
+  $bus: {
+    $on: vi.fn(),
+    $emit: vi.fn(),
+    $off: vi.fn()
+  }
+}