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

package/tests/unit/AppCompNoteCredit.spec.js

@@ -1,58 +1,164 @@
 import { mount } from '@vue/test-utils'
-import AppCompNoteCredit from '../../src/components/AppCompNoteCredit.vue'
-import { beforeEach, describe, expect, vi, test } from 'vitest'
+import { beforeEach, describe, expect, vi, test, it } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
 
-const dummyProps = [
-  {
-    id: 'nt_1',
-    text: `note 1`
-  },
+const dummyPropsNotes = [
   {
-    id: 'nt_2',
-    text: `note 2`
+    P01: [
+      {
+        id: 'nt_1',
+        text: 'note 1',
+        page_ref: 'P01'
+      },
+      {
+        id: 'nt_2',
+        text: 'note 2',
+        page_ref: 'P01'
+      }
+    ]
   }
 ]
 
+const dummyPropsCredits = ['credits 1', 'credits 2', 'credits 3']
+
+//Mock store appStore
+vi.mock('@/module/stores/appStore', () => ({
+  useAppStore: () => ({ updateWidgetOpen: vi.fn() })
+}))
+
+//Mock Error handeling
+vi.mock('@/shared/validators.js', () => ({
+  validateObjType: vi.fn(() => {
+    return { errorInConsole: [], errorList: [] }
+  })
+}))
+
+// Import of components must happen after mocks to prevent side effects
+import AppCompNoteCredit from '../../src/components/AppCompNoteCredit.vue'
+
 describe('AppCompNoteCredit', () => {
   let wrapper = null
 
+  //Mounting componant
   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
-        }
-      }
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      global
     })
   })
 
-  test('It renders a the pop-up', () => {
+  test('It renders componant with notes and credits', async () => {
     const wrapper = mount(AppCompNoteCredit)
 
+    //Give information
+    const d = {
+      type: 'noteCredit',
+      content: { notes: dummyPropsNotes, credits: dummyPropsCredits }
+    }
+
+    //Filling the componant
+    await wrapper.vm.onToggleWidget(d)
+    expect(wrapper.exists()).toBe(true)
+
+    //Find all the information that was renders
+    const ctnNotes = wrapper.find('#notes-list')
+    const ctnCredits = wrapper.find('#credits-list')
+
+    //Expect test result
+    expect(ctnNotes.exists()).toBe(true)
+    expect(ctnCredits.exists()).toBe(true)
+  })
+
+  test('It renders componant with only notes', async () => {
+    const wrapper = mount(AppCompNoteCredit)
+
+    //Give information
+    const d = {
+      type: 'noteCredit',
+      content: { notes: dummyPropsNotes, credits: null }
+    }
+
+    //Filling the componant
+    await wrapper.vm.onToggleWidget(d)
     expect(wrapper.exists()).toBe(true)
 
-    const div = wrapper.find('#noteCredit')
-    expect(div.exists()).toBe(true)
+    //Find all the information that was renders
+    const divNotes = wrapper.find('#notes-list')
+    const divCredits = wrapper.find('#credits-list')
+
+    //Expect test result
+    expect(divNotes.exists()).toBe(true)
+    expect(divCredits.exists()).toBe(false)
   })
 
-  test('It renders a list of ${dummyProps.length}', () => {
-    expect(wrapper.findAll('div').length).toBe(dummyProps.length)
+  test('It renders componant with only credits', async () => {
+    const wrapper = mount(AppCompNoteCredit)
+
+    //Give information
+    const d = {
+      type: 'noteCredit',
+      content: { notes: null, credits: dummyPropsCredits }
+    }
+
+    //Filling the componant
+    await wrapper.vm.onToggleWidget(d)
+    expect(wrapper.exists()).toBe(true)
+
+    //Find all the information that was renders
+    const divNotes = wrapper.find('#notes-list')
+    const divCredits = wrapper.find('#credits-list')
+
+    //Expect test result
+    expect(divNotes.exists()).toBe(false)
+    expect(divCredits.exists()).toBe(true)
+  })
+
+  test('It renders a list of present notes and credits', async () => {
+    const wrapper = mount(AppCompNoteCredit)
+
+    //Give information
+    const d = {
+      type: 'noteCredit',
+      content: { notes: dummyPropsNotes, credits: dummyPropsCredits }
+    }
+
+    //Filling the componant
+    await wrapper.vm.onToggleWidget(d)
+
+    //Find all the information that was renders
+    const notes = Object.values(dummyPropsNotes[0])
+
+    //Expect test result
+    expect(wrapper.findAll('.note-item').length).toBe(notes[0].length)
+    expect(wrapper.findAll('.item-credits').length).toBe(
+      dummyPropsCredits.length
+    )
+  })
+
+  test('It render all the rigth information in button data', async () => {
+    //Give information
+    const d = {
+      type: 'noteCredit',
+      content: { notes: dummyPropsNotes }
+    }
+
+    //Filling the componant
+    await wrapper.vm.onToggleWidget(d)
+
+    //Find all the information that was renders
+    const notes = Object.values(dummyPropsNotes[0])
+    const note = notes[0][0]
+    const div = wrapper.find(`#nt_${note.page_ref}__${note.id.substring(3)}`)
+
+    //Expect test result
+    expect(div.attributes('note-ref')).toBe(
+      `rnt_${note.page_ref}__${note.id.substring(3)}`
+    )
+
+    expect(div.attributes('data-ref')).toBe(
+      `rnt_${note.page_ref}__${note.id.substring(3)}`
+    )
+
+    expect(div.attributes('pageref')).toBe(note.page_ref)
   })
 })

package/tests/unit/AppCompPlayBarNext.spec.js

@@ -0,0 +1,428 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, afterAll, describe, expect, it, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+
+//TODO:
+// 1- test pour valider que le composant rend le bon player selon le type de media (audio/video)
+// 1b- verfifier recuperation du bon media media data(getCUrrentPage.mElements[i])
+// 2- test pour valider le trigger des evenemets:
+//    - play & pause (toggglePlay): OK
+//    - ended (mediaEnded): OK
+//    - volume change (updateVolumeLevel): OK
+//    - mute toggle (toggleMute): OK
+//    - fullscreen toggle (toggleFullscreen): A FAIRE
+// 3- test pour valider l'affichage du transcript :OK
+
+//Helper to create a mock of media container with event listeners
+const makeMediaContainer = () => {
+  const listeners = new Map()
+  return {
+    addEventListener: vi.fn((name, fn) => listeners.set(name, fn)),
+    removeEventListener: vi.fn((name) => listeners.delete(name)),
+    requestFullscreen: vi.fn(async () => {}),
+    dispatchEvent: (name, payload) => listeners.get(name)?.(payload)
+  }
+}
+
+//Helper to create a mock of media element with event listeners and methods
+const makeMediaElement = (id, type, duration) => {
+  const listeners = new Map()
+  const el = {
+    id,
+    tagName: type.toUpperCase(),
+    duration,
+    currentTime: 0,
+    volume: 0.5,
+    muted: false,
+    paused: true,
+    play: vi.fn(async () => {
+      el.paused = false
+    }),
+    pause: vi.fn(() => {
+      el.paused = true
+    }),
+    addEventListener: vi.fn((name, fn) => listeners.set(name, fn)),
+    removeEventListener: vi.fn((name) => listeners.delete(name)),
+    dispatchEvent: (name, payload) => listeners.get(name)?.(payload)
+  }
+  return el
+}
+
+let defineMediaToPlay = (type, duration) => {
+  if (type === 'video') {
+    const id = 'vid1'
+    return {
+      id,
+      mElement: makeMediaElement(id, type, duration || 20),
+      mMediaContainer: makeMediaContainer(),
+      mSubtitles: {},
+      mTranscript: 'exemple_transcript.html',
+      mType: 'video'
+    }
+  }
+
+  if (type === 'audio') {
+    const id = 'aud1'
+    return {
+      id,
+      mElement: makeMediaElement(id, type, duration || 30),
+      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>',
+      mType: 'audio'
+    }
+  }
+}
+
+//Helper to return the sctructure of an HTMLElement
+const getStructure = (el) => ({
+  tag: el && el.tagName ? el.tagName.toLowerCase() : null,
+  class: el.className || null,
+  children:
+    el.children.length > 0 ? [...el.children].map((c) => getStructure(c)) : []
+})
+
+const mockedStore = {
+  getCurrentBrowser: () => 'chrome',
+  getPageInteraction: vi.fn(() => ({
+    userActivation: {
+      mediasViewed: []
+    }
+  })),
+  getUserInteraction: () => ({}),
+  getModuleInfo: { id: 'MOD-1' },
+  getCurrentPage: {
+    id: 'P01',
+    activityRef: 'A03',
+    title: 'Lecteurs médias',
+    type: 'pg_normal',
+    audiosData: [
+      {
+        id: 'aud1',
+        aSources: [{ type: 'mp3', src: '/audios/aud1.mp3' }],
+        aTranscript: 'exemple_transcript.html',
+        mSources: [{ src: '/audios/aud1.mp3' }],
+        mTitle: 'Audio 1'
+      }
+    ],
+    videosData: [
+      {
+        id: 'vid1',
+        mSources: [{ src: '/videos/vid1.mp4' }],
+        mTitle: 'Video 1'
+      }
+    ]
+  },
+  getMedidaMuted: () => false,
+  getMediaSubTitles: () => false,
+  getCurrentMediaDuration: () => 20,
+  getMediaPlaybarValues: (key) => {
+    if (key === 'volume') return 0.5
+    return null
+  },
+  setMediaPlaybarValues: vi.fn(),
+  updateCurrentMediaElements: vi.fn(),
+  setMediaMuted: vi.fn(),
+  setMediaSubTitles: vi.fn()
+}
+
+/*
+ * Helper to flush all pending promises
+ * Useful when mocking axios calls or other async operations
+ * This ensures that all microtasks are completed before proceeding with assertions
+ */
+const flush = async () => {
+  await Promise.resolve()
+  await Promise.resolve()
+}
+
+//Mock store appStore
+vi.mock('@/module/stores/appStore', () => ({
+  useAppStore: () => mockedStore
+}))
+
+//Mock axios
+vi.mock('axios', () => ({
+  default: {
+    get: vi.fn(async () => ({
+      data: {
+        // component calls: res.data.text()
+        text: async () => '<div id="mock-transcript">Transcript OK</div>'
+      }
+    }))
+  }
+}))
+
+import AppCompPlayBarNext from '@/components/AppCompPlayBarNext.vue'
+import axios from 'axios'
+
+describe('AppCompPlayBarNext', () => {
+  let globalConfig
+  let playBarContainer
+  let wrapper
+  const mockContainerRef = { className: 'pb-container' }
+  let $bus
+  let $analytics
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    $bus = {
+      $emit: vi.fn(),
+      $on: vi.fn(),
+      $off: vi.fn()
+    }
+    $analytics = {
+      sendEvent: vi.fn()
+    }
+    globalConfig = {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      provide: {
+        userInteraction: {}
+      },
+      stubs: {
+        // Replace custom button component with a real <button>
+        'app-base-button': {
+          template: '<button><slot /></button>'
+        }
+      },
+      mocks: {
+        $router: {
+          currentRoute: {
+            value: {
+              meta: {
+                activity_ref: 'A03',
+                id: 'P01'
+              }
+            }
+          }
+        },
+        $bus,
+        $analytics,
+        computed: {
+          mediaDuration: vi.fn(() => 20)
+        }
+      }
+    }
+  })
+
+  afterAll(() => {
+    wrapper.unmount()
+  })
+
+  describe('It renders the correct HtmlElement', () => {
+    it('Renders the correct player instance (id = plyr_<mediaId>) for video', async () => {
+      const mediaType = 'video'
+      wrapper = mount(AppCompPlayBarNext, {
+        props: {
+          mediaToPlay: defineMediaToPlay(mediaType)
+        }
+      })
+
+      await wrapper.vm.$nextTick()
+      //Should render a div with class pb-container, div with class video and id plyr_vid1
+      playBarContainer = wrapper.find(`.pb-container`)
+      const playBarElement = playBarContainer.find(`.${mediaType}`)
+      expect(playBarElement.exists()).toBe(true)
+      expect(wrapper.vm.id).toBe('plyr_vid1')
+    })
+
+    it('Renders a the correct player instance (id = plyr_<mediaId>) for audio', async () => {
+      const mediaType = 'audio'
+      wrapper = mount(AppCompPlayBarNext, {
+        props: {
+          mediaToPlay: defineMediaToPlay(mediaType)
+        }
+      })
+
+      await wrapper.vm.$nextTick()
+      //Should render a div with class pb-container div with class video and id if plyr_aud1
+      playBarContainer = wrapper.find(`.pb-container`)
+      const playBarElement = playBarContainer.find(`.${mediaType}`)
+      expect(playBarElement.exists()).toBe(true)
+      expect(wrapper.vm.id).toBe('plyr_aud1')
+    })
+  })
+
+  describe('It initializes correctly', async () => {
+    it('Calls updateCurrentMediaElements() on mount', () => {
+      wrapper = mount(AppCompPlayBarNext, {
+        props: {
+          mediaToPlay: defineMediaToPlay('audio')
+        }
+      })
+
+      expect(mockedStore.updateCurrentMediaElements).toHaveBeenCalledTimes(1)
+      expect(mockedStore.updateCurrentMediaElements).toHaveBeenCalledWith(
+        expect.objectContaining({ id: wrapper.vm.mediaToPlay.id })
+      )
+    })
+
+    it('Video loads transcript on mount (setTranscript -> axios.get) when mTranscript exists', async () => {
+      wrapper = mount(AppCompPlayBarNext, {
+        props: {
+          mediaToPlay: defineMediaToPlay('video')
+        }
+      })
+      await flush() // wait for all pending promises to resolve before making assertions
+      expect(axios.get).toHaveBeenCalledTimes(1)
+      // when mTranscript has no '/', component builds "./<file>"
+      // expect component to normalize the path
+      expect(axios.get).toHaveBeenCalledWith(
+        `./${wrapper.vm.mediaToPlay.mTranscript}`,
+        expect.any(Object)
+      )
+      await wrapper.vm.$nextTick()
+      expect(wrapper.vm.transcriptToShow).toContain('mock-transcript')
+    })
+  })
+
+  describe('Controls media events with user interaction on:', () => {
+    it('PLAY: (togglePlay), emits xAPI + GA play tracking ', async () => {
+      await flush()
+      const mediaType = 'video'
+      wrapper = await mount(AppCompPlayBarNext, {
+        props: {
+          mediaToPlay: defineMediaToPlay(mediaType)
+        },
+        global: { ...globalConfig }
+      })
+      await flush()
+      const mediaID = wrapper.vm.mediaToPlay.id
+      expect(wrapper.vm.mediaRawData.id).toBe(mediaID)
+      expect(wrapper.vm.mediaToPlay.mElement.paused).toBe(true)
+
+      //Trigger play event call togglePlay()
+      await wrapper.vm.togglePlay()
+      expect(wrapper.vm.mediaToPlay.mElement.play).toHaveBeenCalledTimes(1)
+      expect(wrapper.vm.mediaToPlay.mElement.paused).toBe(false)
+      await flush()
+
+      //Check that xAPI and GA events were sent
+      expect($bus.$emit).toHaveBeenCalledWith(
+        'send-xapi-statement',
+        expect.objectContaining({ verb: 'played' })
+      )
+
+      const url = mediaType == 'audio' ? '/audios/aud1.mp3' : '/videos/vid1.mp4'
+
+      expect($analytics.sendEvent).toHaveBeenCalledWith(
+        `fcad_${mediaType}_play`,
+        expect.objectContaining({ url })
+      )
+    })
+
+    it('STOP/END : mediaEnded(), set canReplay(), media-viewed event and emits xAPI + GA event ', async () => {
+      const mediaType = 'audio'
+      wrapper = await mount(AppCompPlayBarNext, {
+        props: {
+          mediaToPlay: defineMediaToPlay(mediaType)
+        },
+        global: { ...globalConfig }
+      })
+      await flush()
+      const mediaID = wrapper.vm.mediaToPlay.id
+      expect(wrapper.vm.mediaRawData.id).toBe(mediaID)
+      expect(wrapper.vm.mediaToPlay.mElement.paused).toBe(true)
+
+      //Trigger play event and ended event
+      await wrapper.vm.togglePlay()
+      expect(wrapper.vm.isPlaying).toBe(true)
+      wrapper.vm.mediaEnded()
+      await flush()
+      //Assert media ended events & states
+      expect(wrapper.vm.mediaToPlay.mElement.pause).toHaveBeenCalledTimes(1)
+      expect(wrapper.vm.isPlaying).toBe(false)
+      expect(wrapper.vm.canReplay).toBe(true)
+      //Assert media viewed recorded in store
+      expect($bus.$emit).toHaveBeenCalledWith('media-viewed', mediaID)
+      //Check that xAPI and GA events were sent
+      expect($bus.$emit).toHaveBeenCalledWith(
+        'send-xapi-statement',
+        expect.objectContaining({ verb: 'completed' })
+      )
+      const url = mediaType == 'audio' ? '/audios/aud1.mp3' : '/videos/vid1.mp4'
+      expect($analytics.sendEvent).toHaveBeenCalledWith(
+        `fcad_${mediaType}_viewed`,
+        expect.objectContaining({ url })
+      )
+    })
+
+    it('VOLUME/MUTE: updateVolumeLevel() persists to store, toggleMute updates store muted state', async () => {
+      const mediaType = 'audio'
+      wrapper = await mount(AppCompPlayBarNext, {
+        props: {
+          mediaToPlay: defineMediaToPlay(mediaType)
+        },
+        global: { ...globalConfig }
+      })
+      await flush()
+
+      // updateVolumeLevel is called on mount; ensure store called at least once
+      expect(mockedStore.setMediaPlaybarValues).toHaveBeenCalled()
+      //Trigger mute action by calling toggleMute()
+      wrapper.vm.toggleMute()
+      await flush()
+
+      expect(mockedStore.setMediaMuted).toHaveBeenCalled()
+      expect(typeof wrapper.vm.muted).toBe('boolean')
+    })
+
+    it('SHOW TRANSCRIPT- toggleViewTranscript(e) emits resize-video(sm) and opens sidebar', async () => {
+      const mediaType = 'video'
+      wrapper = await mount(AppCompPlayBarNext, {
+        props: {
+          mediaToPlay: defineMediaToPlay(mediaType)
+        },
+        global: { ...globalConfig }
+      })
+      await flush()
+      //Assert trancript initial state
+      expect(wrapper.vm.transcriptEnabled).toBe(false) //disabled
+      expect(wrapper.vm.transcriptToShow).toBeTruthy()
+      //Trigger view transcript
+      wrapper.vm.toggleViewTranscript(true) //open transcript
+      expect(wrapper.vm.transcriptEnabled).toBe(true) //transcript enabled
+      await flush()
+      //Assert emits event video-transcript-toggle with correct value
+      expect($bus.$emit).toHaveBeenCalledWith(
+        'video-transcript-toggle',
+        expect.objectContaining({ id: 'vid1' }),
+        true
+      )
+      //Assert emits resize-video(sm) and open-sidebar
+      const emits = wrapper.emitted('resize-video') || []
+      if (emits[0]) {
+        expect(emits[0]).toEqual(['sm'])
+        expect($bus.$emit).toHaveBeenCalledWith(
+          'open-sidebar',
+          expect.objectContaining({ ctx: 'ctxTranscript' })
+        )
+      }
+    })
+
+    it('HIDE TRANSCRIPT- toggleViewTranscript(e), closes sidebar and emits resize-video(lg)', async () => {
+      const mediaType = 'video'
+      wrapper = await mount(AppCompPlayBarNext, {
+        props: {
+          mediaToPlay: defineMediaToPlay(mediaType)
+        },
+        global: { ...globalConfig }
+      })
+      await flush()
+      //Assert transcript exists
+      expect(wrapper.vm.transcriptToShow).toBeTruthy()
+      wrapper.vm.toggleViewTranscript(true) // open
+      await flush()
+      wrapper.vm.toggleViewTranscript(true) // close
+      //Assert transcript disabled
+      expect(wrapper.vm.transcriptEnabled).toBe(false)
+
+      await flush()
+      //Assert emits resize-video(lg) and close-sidebar
+      const emits = wrapper.emitted('resize-video') || []
+      expect(emits[0]).toEqual(['sm'])
+      expect(emits[1]).toEqual(['lg'])
+
+      expect($bus.$emit).toHaveBeenCalledWith('close-sidebar', 'ctxTranscript')
+    })
+  })
+})

package/tests/unit/AppCompVideoPlayer.spec.js

@@ -1,5 +1,10 @@
 import { mount } from '@vue/test-utils'
-import { describe, it, test, expect } from 'vitest'
+import { describe, it, test, expect, vi } from 'vitest'
+
+//Mock store appStore
+vi.mock('@/module/stores/appStore', () => ({
+  useAppStore: () => ({})
+}))
 
 let dummyProps = {
   id: 'P01',
@@ -99,8 +104,6 @@ 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')
   })

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'
+}