fcad-core-dragon 2.1.0 → 2.1.2

package/tests/unit/AppCompQuizNext.spec.js

@@ -0,0 +1,114 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, it, expect, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+
+// Les mocks doivent être "hoistés" (déclarés avant l'import du composant)
+beforeEach(() => {
+  vi.mock('@/shared/generalfuncs.js', () => ({
+    fileAssets: { getActivities: () => [] }
+  }))
+  vi.mock('@/router/routes.js', () => ({
+    mappedFiles: []
+  }))
+  vi.mock('@/router/index.js', () => ({
+    default: { push: vi.fn(), currentRoute: { value: {} } }
+  }))
+  vi.mock('@/shared/validators.js', () => ({
+    validateObjType: () => true,
+    validateString: () => true,
+    validateQuizData: () => ({ errorInConsole: [] }),
+    validateNumber: () => true
+  }))
+})
+
+import AppCompQuizNext from '@/components/AppCompQuizNext.vue'
+
+describe('AppCompQuizNext', () => {
+  const stubs = {
+    AppCompInputRadio: {
+      template: '<div class="stub-radio"></div>',
+      props: ['modelValue', 'inputData', 'id', 'solution']
+    },
+    AppCompInputTextNx: {
+      template: '<input class="stub-text" />',
+      props: ['modelValue']
+    },
+    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>' }
+  }
+
+  it('rend un input radio si la question est de type choix_unique', () => {
+    const quizData = {
+      id: 1,
+      type_question: 'choix_unique',
+      ennonce: 'Quel est la deuxieme lettre de alphabet',
+      mode: ['A', 'B', 'C'],
+      solution: ['B']
+    }
+
+    const wrapper = mount(AppCompQuizNext, {
+      props: {
+        modelValue: ['A', 'B', 'C'],
+        consigne: false,
+        shuffleAnswers: false,
+        quizData: quizData // Passez la variable ici
+      },
+      global: {
+        stubs,
+        plugins: [createTestingPinia({ createSpy: vi.fn })],
+        provide: {
+          userInteraction: {
+            recordAnswer: vi.fn(),
+            hasInteracted: vi.fn(),
+            quizAnswers: {
+              [quizData.id]: { value: ['A'], total_attempts: 0 }
+            }
+          }
+        }
+      }
+    })
+
+    expect(wrapper.find('.stub-radio').exists()).toBe(true)
+  })
+
+  // it('rend un input texte si la question est de type text', () => {
+  //   const wrapper = mount(AppCompQuizNext, {
+  //     props: {
+  //       question: {
+  //         id: 2,
+  //         type: 'text'
+  //       },
+  //       modelValue: ''
+  //     },
+  //     global: { stubs }
+  //   })
+
+  //   expect(wrapper.find('.stub-text').exists()).toBe(true)
+  // })
+
+  // it('émet update:modelValue quand l’utilisateur répond', async () => {
+  //   const wrapper = mount(AppCompQuizNext, {
+  //     props: {
+  //       question: { id: 1, type: 'text' },
+  //       modelValue: ''
+  //     },
+  //     global: {
+  //       stubs: {
+  //         AppCompInputTextNx: {
+  //           template: `<input @input="$emit('update:modelValue', 'hello')" />`
+  //         }
+  //       }
+  //     }
+  //   })
+
+  //   await wrapper.find('input').trigger('input')
+
+  //   expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['hello'])
+  // })
+})

package/tests/unit/AppCompVideoPlayer.spec.js

@@ -0,0 +1,177 @@
+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 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
+    mount(AppCompVideoPlayer, {
+      props: { vidData: videosData[0] }
+    })
+
+    expect(validateVideoData).toHaveBeenCalledWith({
+      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
+    })
+  })
+
+  it('renders ErrorDisplay When validator returns errors', () => {
+    // simulate invalid props
+    validateVideoData.mockReturnValue([
+      'WARNING!>>> VIDEO:  💥 Invalid declaration for video element'
+    ])
+
+    const wrapper = mount(AppCompVideoPlayer, {
+      props: { vidData: { id: null } },
+      global: { stubs, plugins: [createTestingPinia({ createSpy: vi.fn })] }
+    })
+
+    expect(
+      wrapper.findComponent({ name: 'AppBaseErrorDisplay' }).exists()
+    ).toBe(true)
+    expect(wrapper.find('video').exists()).toBe(false)
+  })
+
+  it('It renders HTML video Element', () => {
+    validateVideoData.mockReturnValue([]) // no Error
+    const wrapper = mount(AppCompVideoPlayer, {
+      props: { vidData: { id: null } },
+      global: { stubs }
+    })
+    expect(
+      wrapper.findComponent({ name: 'AppBaseErrorDisplay' }).exists()
+    ).toBe(false)
+    expect(wrapper.find('video').exists()).toBe(true)
+  })
+
+  it('Video Element has correct sources', async () => {
+    const { videosData } = dummyProps
+    validateVideoData.mockReturnValue([]) // no Error
+    const wrapper = mount(AppCompVideoPlayer, {
+      props: { vidData: videosData[0] },
+      global: { stubs }
+    })
+
+    expect(wrapper.vm.vidSources).toEqual(videosData[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(videosData[0].mSources[0].src)
+    expect(sources[0].attributes().type).toBe('video/mp4')
+  })
+})

package/{src/components/tests__ → tests/unit}/useTimer.spec.js

@@ -1,91 +1,91 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { Timer } from '../../composables/useTimer'
-
-// vitest vi utility ref: https://vitest.dev/api/vi.html
-// vi fakeTimers ref: https://vitest.dev/api/vi.html#vi-usefaketimers
-
-describe('Timer class', () => {
-  let timer
-
-  beforeEach(() => {
-    Timer.timers.clear() // Clear existing timers before each test
-    timer = new Timer()
-    vi.useFakeTimers() // Enable fake timers before each test
-  })
-
-  afterEach(() => {
-    timer.destroy() // destroy created timer after each test
-    vi.useRealTimers() // Restore real timers after each test
-  })
-
-  it('should create a Timer instance with a unique ID', () => {
-    const timer2 = new Timer() //create a second instance
-    expect(timer2.getTimerID()).not.toBe(timer.getTimerID())
-    expect(Timer.timers.size).toBe(2) // Two timers should be registered
-  })
-
-  it('should return a timer instance by it ID', () => {
-    const timer2 = new Timer('timer22') //create a second instance with custom ID
-    expect(timer.getTimer('timer22')).toBeInstanceOf(Timer)
-  })
-
-  it('should throw error when a timer instance doesn`t exist', () => {
-    const id = 'noExistingTimer'
-    expect(() => timer.getTimer(id)).toThrowError(
-      `Timer with ID ${id} does not exist.`
-    )
-  })
-
-  it('should initialize timer at 0 seconds', () => {
-    expect(timer.getTime()).toBe(0)
-  })
-
-  it('should start the timer and increment time every second', () => {
-    timer.start()
-    expect(timer.getTimerState()).toBe('started')
-
-    vi.advanceTimersByTime(5000) // Fast-forward 3 seconds
-    expect(timer.getTime()).toBe(5) // Should be approximately 5 seconds
-  })
-
-  it('should display time in correct format when converting to ISOformats', () => {
-    timer.start()
-    expect(timer.getTimerState()).toBe('started')
-
-    vi.advanceTimersByTime(65000) // Fast-forward 3 seconds
-
-    const fullISOFormat = '1970-01-01T00:01:05.000Z'
-    const isoTimeStr = '00:01:05'
-
-    expect(timer.getTime()).toBe(65) // Should be approximately 1 min 5 seconds (00:01:05)
-    expect(timer.formatToISOString(timer.getTime())).toBe(fullISOFormat)
-    expect(timer.ISOTimeParser(timer.getTime())).toBe(isoTimeStr)
-  })
-
-  it('should pause the timer', () => {
-    timer.start()
-    vi.advanceTimersByTime(2000)
-    timer.pause()
-    const current = timer.getTime()
-
-    // Advance time but timer should stay paused
-    vi.advanceTimersByTime(3000)
-    expect(timer.getTime()).toBe(current) // about 2 seconds
-    expect(timer.ISOTimeParser(timer.getTime())).toBe('00:00:02')
-  })
-
-  it('should reset the timer to 0 when timer stops', () => {
-    timer.start()
-    vi.advanceTimersByTime(4000)
-    timer.stop()
-    expect(timer.getTime()).toBe(0)
-    expect(timer.getTimerState()).toBe('stopped')
-  })
-
-  it('should destroy timer', () => {
-    const id = timer.getTimerID()
-    timer.destroy()
-    expect(Timer.timers.get(id)).toBeUndefined()
-    expect(Timer.timers.size).toBe(0)
-  })
-})
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Timer } from '../../src/composables/useTimer.js'
+
+// vitest vi utility ref: https://vitest.dev/api/vi.html
+// vi fakeTimers ref: https://vitest.dev/api/vi.html#vi-usefaketimers
+
+describe('Timer class', () => {
+  let timer
+
+  beforeEach(() => {
+    Timer.timers.clear() // Clear existing timers before each test
+    timer = new Timer()
+    vi.useFakeTimers() // Enable fake timers before each test
+  })
+
+  afterEach(() => {
+    timer.destroy() // destroy created timer after each test
+    vi.useRealTimers() // Restore real timers after each test
+  })
+
+  it('should create a Timer instance with a unique ID', () => {
+    const timer2 = new Timer() //create a second instance
+    expect(timer2.getTimerID()).not.toBe(timer.getTimerID())
+    expect(Timer.timers.size).toBe(2) // Two timers should be registered
+  })
+
+  it('should return a timer instance by it ID', () => {
+    const timer2 = new Timer('timer22') //create a second instance with custom ID
+    expect(timer.getTimer('timer22')).toBeInstanceOf(Timer)
+  })
+
+  it('should throw error when a timer instance doesn`t exist', () => {
+    const id = 'noExistingTimer'
+    expect(() => timer.getTimer(id)).toThrowError(
+      `Timer with ID ${id} does not exist.`
+    )
+  })
+
+  it('should initialize timer at 0 seconds', () => {
+    expect(timer.getTime()).toBe(0)
+  })
+
+  it('should start the timer and increment time every second', () => {
+    timer.start()
+    expect(timer.getTimerState()).toBe('started')
+
+    vi.advanceTimersByTime(5000) // Fast-forward 3 seconds
+    expect(timer.getTime()).toBe(5) // Should be approximately 5 seconds
+  })
+
+  it('should display time in correct format when converting to ISOformats', () => {
+    timer.start()
+    expect(timer.getTimerState()).toBe('started')
+
+    vi.advanceTimersByTime(65000) // Fast-forward 3 seconds
+
+    const fullISOFormat = '1970-01-01T00:01:05.000Z'
+    const isoTimeStr = '00:01:05'
+
+    expect(timer.getTime()).toBe(65) // Should be approximately 1 min 5 seconds (00:01:05)
+    expect(timer.formatToISOString(timer.getTime())).toBe(fullISOFormat)
+    expect(timer.ISOTimeParser(timer.getTime())).toBe(isoTimeStr)
+  })
+
+  it('should pause the timer', () => {
+    timer.start()
+    vi.advanceTimersByTime(2000)
+    timer.pause()
+    const current = timer.getTime()
+
+    // Advance time but timer should stay paused
+    vi.advanceTimersByTime(3000)
+    expect(timer.getTime()).toBe(current) // about 2 seconds
+    expect(timer.ISOTimeParser(timer.getTime())).toBe('00:00:02')
+  })
+
+  it('should reset the timer to 0 when timer stops', () => {
+    timer.start()
+    vi.advanceTimersByTime(4000)
+    timer.stop()
+    expect(timer.getTime()).toBe(0)
+    expect(timer.getTimerState()).toBe('stopped')
+  })
+
+  it('should destroy timer', () => {
+    const id = timer.getTimerID()
+    timer.destroy()
+    expect(Timer.timers.get(id)).toBeUndefined()
+    expect(Timer.timers.size).toBe(0)
+  })
+})

package/vitest.config.js

@@ -1,19 +1,28 @@
-/**
- * @vitest-environment jsdom
- */
-import { fileURLToPath, URL } from 'node:url'
-import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
-import vue from '@vitejs/plugin-vue'
-import viteConfig from './vitest.config'
-
-export default mergeConfig(
-  viteConfig,
-  defineConfig({
-    test: {
-      environment: 'jsdom',
-      exclude: [...configDefaults.exclude, 'e2e/**'],
-      root: fileURLToPath(new URL('./', import.meta.url))
-    },
-    plugins: [vue()]
-  })
-)
+/**
+ * @vitest-environment jsdom
+ */
+import { fileURLToPath, URL } from 'node:url'
+import { mergeConfig, 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))
+    },
+    plugins: [vue()]
+  })
+)

package/vitest.setup.js

@@ -0,0 +1,28 @@
+//Mock Vuetify, vue-i18n and event bus
+import { config } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+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'
+
+//create vuetify instance
+const vuetify = createVuetify({
+  components,
+  directives
+})
+
+//load messages from core
+const i18n = createI18n({
+  legacy: false,
+  locale: 'fr',
+  messages: {
+    fr: frMessages,
+    en: enMessages
+  }
+})
+
+//setup as global plugins used by all tests
+config.global.plugins = [i18n, vuetify, bus]

package/src/components/AppBaseButton.test.js

@@ -1,21 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import AppBaseButton from './AppBaseButton.vue'
-
-const defaultProps = { isDisabled: false, type: 'button' }
-
-describe('AppBaseButton Tests', () => {
-  it('should render', () => {
-    const wrapper = mount(AppBaseButton, {
-      props: defaultProps
-    })
-    expect(wrapper.find('button').exists()).toBeTruthy()
-  })
-  it('should fire click event', async () => {
-    const wrapper = mount(AppBaseButton, {
-      props: defaultProps
-    })
-    wrapper.find('button').trigger('click')
-    expect(wrapper.emitted()).toHaveProperty('click')
-  })
-})