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

package/tests/unit/AppCompInputTextToFillDropdownNx.spec.js

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils'
+import AppCompInputTextToFillDropdownNx from '@/components/AppCompInputTextToFillDropdownNx.vue'
+import { beforeEach, describe, expect, test } from 'vitest'
+import { VSelect } from 'vuetify/components/VSelect'
+
+const dummyProps = {
+  modelValue: ['rouge', 'rouge', 'jaune', 'jaune', 'vert', 'magenta'],
+  inputData: [
+    {
+      un: ['rouge', 'vert', 'bleu', 'jaune', 'magenta', 'cyan']
+    },
+    {
+      deux: ['rouge', 'vert', 'bleu', 'jaune', 'magenta', 'cyan']
+    },
+    {
+      trois: ['rouge', 'vert', 'bleu', 'jaune', 'magenta', 'cyan']
+    },
+    {
+      quatre: ['rouge', 'vert', 'bleu', 'jaune', 'magenta', 'cyan']
+    },
+    {
+      cinq: ['rouge', 'vert', 'bleu', 'jaune', 'magenta', 'cyan']
+    },
+    {
+      six: ['rouge', 'vert', 'bleu', 'jaune', 'magenta', 'cyan']
+    }
+  ],
+  textBase:
+    '$%un%$ Bacon ipsum dolor amet ground round shank turkey buffalo flank, doner pork chop pork belly ham hock corned beef. Sirloin bresaola kielbasa pig flank $%deux%$ landjaeger biltong porchetta. Pork belly prosciutto sirloin shoulder, leberkas bresaola chicken pastrami pork ground round alcatra chislic ham. Prosciutto corned beef filet mignon chislic $%trois%$ pancetta salami bresaola chicken. Chislic kielbasa alcatra, porchetta cow hamburger $%quatre%$ Lorem Ipsum Dolor $%cinq%$ cupim chuck sirloin turkey spare ribs jowl. Spare ribs swine alcatra picanha beef corned beef tenderloin bresaola shankle. Chislic jowl frankfurter flank leberkas filet mignon ground round strip steak.$%six%$',
+  solution: null,
+  id: 'A02_P02_Q4'
+}
+describe('AppCompInputTextToFillDropdownNx.vue', () => {
+  let wrapper = null
+  beforeEach(() => {
+    wrapper = mount(AppCompInputTextToFillDropdownNx, {
+      props: dummyProps
+    })
+  })
+  test(`renders a list of vuetify v-select components`, () => {
+    expect(wrapper.findAllComponents(VSelect).length).toBe(
+      dummyProps.inputData.length
+    )
+  })
+  test(`has the right initial data to display (modelValue prop)`, () => {
+    expect(wrapper.vm.inputsValue).toStrictEqual(dummyProps.modelValue)
+  })
+  test('emits enable-submit and update:modelValue events on input change', () => {
+    wrapper.vm.inputsValue = [
+      'jaune',
+      'rouge',
+      'rouge',
+      'jaune',
+      'vert',
+      'magenta'
+    ]
+    expect(wrapper.emitted()).toHaveProperty('enable-submit')
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+  })
+})

package/tests/unit/AppCompInputTextToFillNx.spec.js

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils'
+import AppCompInputTextToFillNx from '@/components/AppCompInputTextToFillNx.vue'
+import { beforeEach, describe, expect, test } from 'vitest'
+import { VTextField } from 'vuetify/components/VTextField'
+
+const dummyProps = {
+  modelValue: ['Hello', 'world', 'lorem', 'ipsum', 'good', 'bye'],
+  textBase:
+    '$%un%$ Bacon ipsum dolor amet groun doner pork. Sirloin bresaola kielbasa pig flank $%deux%$ landjaege. Pork belly prosciutto sirloin shoulder, pork ground round alcatra chislic ham. Prosciutto corned chislic $%trois%$ pancetta salami bresaola chicken. Chislic, porchetta cow hamburger $%quatre%$ $%cinq%$ cupim chuck sirloin turkey spare ribs jowl. Spare ribs swine alcatra picanha beef corned beef tenderloin bresaola shankle. Chislic jowl frankfurter flank leberkas filet mignon ground round strip steak.$%six%$',
+  inputData: null,
+  solution: null,
+  id: 'A02_P02_Q4'
+}
+describe('AppCompInputTextToFillNx.vue', () => {
+  let wrapper = null
+
+  beforeEach(() => {
+    wrapper = mount(AppCompInputTextToFillNx, {
+      props: dummyProps
+    })
+  })
+  test(`renders a paragraph with multiple vuetify v-text-field`, () => {
+    const textfields = wrapper.findAllComponents(VTextField)
+    expect(textfields.length).toBeGreaterThan(0)
+  })
+
+  test(`displays the user saved answers`, () => {
+    const textfields = wrapper.findAll('input[type="text"]')
+    textfields.forEach((textfield, index) => {
+      expect(textfield.element.value).toBe(dummyProps.modelValue[index])
+    })
+  })
+
+  test('accepts some input text', async () => {
+    const textfield = wrapper.find('input[type="text"]')
+    await textfield.setValue('new value')
+    expect(textfield.element.value).toBe('new value')
+  })
+  test('emits enable-submit and update:modelValue events on input change', async () => {
+    const textfield = wrapper.find('input[type="text"]')
+    await textfield.setValue('new value')
+    expect(wrapper.emitted()).toHaveProperty('enable-submit')
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+  })
+})

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

@@ -0,0 +1,112 @@
+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', async() => {
+  //   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,169 @@
+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',
+  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 { validateVideoData } from '@/shared/validators.js'
+
+describe('AppCompVideoPlayer', () => {
+  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 } }
+    })
+
+    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 } }
+    })
+    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] }
+    })
+
+    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')
+  })
+
+  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)
+  })
+})