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

package/tests/unit/AppCompVideoPlayer.spec.js

@@ -1,104 +1,42 @@
 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, vi } from 'vitest'
+
+//Mock store appStore
+vi.mock('@/module/stores/appStore', () => ({
+  useAppStore: () => ({})
+}))
+
+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 +71,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 +83,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 +95,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)
@@ -169,9 +104,69 @@ describe('AppCompVideoPlayer', () => {
     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(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/tests/utility/colors.js

@@ -0,0 +1,10 @@
+export const colors = {
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+  reset: '\x1b[0m'
+}

package/vitest.config.js

@@ -1,28 +1,54 @@
 /**
- * @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'
+      }
+    }
+  },
+
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@/router/routes.js': fileURLToPath(
+        new URL('./tests/mocks/routes.mock.js', import.meta.url)
+      )
+    }
+  },
+
+  test: {
+    setupFiles: ['vitest.setup.js'],
+    environment: 'happy-dom',
+
+    server: {
+      deps: {
+        inline: ['vuetify']
+      }
     },
-    plugins: [vue()]
-  })
-)
+
+    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,
+      branches: 0,
+      functions: 0,
+      statements: 0
+    }
+  },
+
+  plugins: [vue()]
+})

package/vitest.setup.js

@@ -1,4 +1,5 @@
 //Mock Vuetify, vue-i18n and event bus
+import { vi, beforeEach } from 'vitest'
 import { config } from '@vue/test-utils'
 import { createI18n } from 'vue-i18n'
 import { createVuetify } from 'vuetify'
@@ -7,6 +8,7 @@ import * as directives from 'vuetify/directives'
 import * as frMessages from './src/$locales/fr.json'
 import * as enMessages from './src/$locales/en.json'
 import bus from './src/plugins/bus'
+import { createPinia, setActivePinia } from 'pinia'
 
 //create vuetify instance
 const vuetify = createVuetify({
@@ -24,5 +26,72 @@ const i18n = createI18n({
   }
 })
 
+vi.spyOn(console, 'warn').mockImplementation(() => {})
+vi.spyOn(console, 'error').mockImplementation(() => {})
+
+// Global mock of Router
+// =========================================
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    back: vi.fn()
+  }),
+  useRoute: () => ({
+    meta: {},
+    params: {},
+    query: {}
+  })
+}))
+
+// 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(() => []),
+  validateProp: vi.fn(() => [])
+}))
+
 //setup as global plugins used by all tests
-config.global.plugins = [i18n, vuetify, bus]
+config.global.plugins.push(i18n, vuetify, bus)
+
+//Setup a new pinia instance before each test
+//=========================================
+//NOTE:
+// Do NOT use createTestingPinia() globally
+// Pinia mocking must be done per-test using createTestingPinia()
+// to avoid hidden side effects and false-positive tests.
+// https://pinia.vuejs.org/cookbook/testing.html#using-the-testing-plugin
+// https://pinia.vuejs.org/cookbook/testing.html
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+})
+
+// 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()
+  },
+  $helper: {
+    formatTime: vi.fn((t) => `00:${t}`)
+  }
+}