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

package/src/plugins/i18n.js

@@ -1,10 +1,12 @@
 import _ from 'lodash'
+import { createI18n } from 'vue-i18n'
 /**
  * Merge locales message in project.
  * @summary To merge the locales dictionnary of this library with the locales that user will create
- * @param {Object} i18n - vue-i18n internalization object.
+ * @param {Object} templateMessages - messages (JSON) received from the template
  */
-export default function mergeLocales(i18n) {
+export default function initLocalisation(templateMessages) {
+  const i18n = createI18n({ legacy: false })
   const thisLocales = import.meta.glob('../$locales/*.json', {
     import: 'default',
     eager: true
@@ -15,13 +17,12 @@ export default function mergeLocales(i18n) {
       const locale = matched[1]
       // Using lodash to deeply merge objects
       const coreMessages = JSON.parse(JSON.stringify(thisLocales[path]))
-      const templateMessages = JSON.parse(
-        JSON.stringify(i18n.messages[locale] || i18n.messages.value[locale]) //cover both legacy mode and non legacy mode of vue-i18n
-      )
-      const mergedMessages = _.merge(coreMessages, templateMessages)
+      const mergedMessages = _.merge(coreMessages, templateMessages[locale])
 
       // Since merLocalMessage will do a shallow merge of the object. We will use setLocalMessage to replace the message with new message object
-      i18n.setLocaleMessage(locale, mergedMessages)
+
+      i18n.global.setLocaleMessage(locale, mergedMessages)
     }
   }
+  return i18n
 }

package/tests/mocks/routes.mock.js

@@ -0,0 +1,2 @@
+export const routes = []
+export const mappedFiles = []

package/tests/unit/AppCompAudio.spec.js

@@ -0,0 +1,139 @@
+import { mount } from '@vue/test-utils'
+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',
+  audiosData: [
+    {
+      id: 'aud1',
+      mTitle: 'Et si... Annie Ernaux nous parlait',
+      mSources: [
+        {
+          type: 'mp3',
+          src: ' exemple_audio.mp3'
+        }
+      ],
+      mPoster: 'audio_poster.png',
+      mAlt: "Portrait de l'autrice Annie Ernaux",
+      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>'
+    }
+  ]
+}
+
+import AppCompAudioPlayer from '@/components/AppCompAudio.vue'
+import { validateAudioData } from '@/shared/validators.js'
+
+describe('AppCompAudioPlayer', () => {
+  test('Validate received props', () => {
+    validateAudioData.mockReturnValue([])
+    const { audiosData } = dummyProps
+    mount(AppCompAudioPlayer, {
+      props: { audData: audiosData[0] }
+    })
+
+    expect(validateAudioData).toHaveBeenCalledWith({
+      id: 'aud1',
+      mTitle: 'Et si... Annie Ernaux nous parlait',
+      mSources: [
+        {
+          type: 'mp3',
+          src: ' exemple_audio.mp3'
+        }
+      ],
+      mPoster: 'audio_poster.png',
+      mAlt: "Portrait de l'autrice Annie Ernaux",
+      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>'
+    })
+  })
+
+  it('renders ErrorDisplay When validator returns errors', () => {
+    // simulate invalid props
+    validateAudioData.mockReturnValue([
+      'WARNING!>>> audio:  💥 Invalid declaration for audio element'
+    ])
+
+    const wrapper = mount(AppCompAudioPlayer, {
+      props: { audData: { id: null } }
+    })
+
+    expect(
+      wrapper.findComponent({ name: 'AppBaseErrorDisplay' }).exists()
+    ).toBe(true)
+    expect(wrapper.find('audio').exists()).toBe(false)
+  })
+
+  it('It renders HTML audio Element', () => {
+    validateAudioData.mockReturnValue([]) // no Error
+    const wrapper = mount(AppCompAudioPlayer, {
+      props: { audData: { id: null } }
+    })
+    expect(
+      wrapper.findComponent({ name: 'AppBaseErrorDisplay' }).exists()
+    ).toBe(false)
+    expect(wrapper.find('audio').exists()).toBe(true)
+  })
+
+  it('audio Element has correct sources', async () => {
+    const { audiosData } = dummyProps
+
+    validateAudioData.mockReturnValue([]) // no Error
+    const wrapper = mount(AppCompAudioPlayer, {
+      props: { audData: audiosData[0] }
+    })
+
+    expect(wrapper.vm.mSources).toEqual(audiosData[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(audiosData[0].mSources[0].src)
+    expect(sources[0].attributes().type).toBe('audio/mp3')
+  })
+
+  it('computed $auElement returns correct data structure', async () => {
+    validateAudioData.mockReturnValue([])
+    const { audiosData } = dummyProps
+    const wrapper = mount(AppCompAudioPlayer, {
+      props: { audData: audiosData[0] }
+    })
+    // Simulate refs
+    const mockaudioRef = { tagName: 'audio' }
+    const mockContainerRef = { className: '__media-container' }
+    wrapper.vm.$refs['m-audio'] = mockaudioRef
+    wrapper.vm.$refs['$media-container'] = mockContainerRef
+    // Simulate refs isSet (audio ready) to true
+    wrapper.vm.isSet = true
+    await wrapper.vm.$nextTick()
+    // get audElement object
+    const obj = wrapper.vm.$audElement
+    const id = wrapper.vm.$props.audData.id
+    // expected data structure to be returned
+    const audElement = {
+      id,
+      mType: 'audio',
+      mElement: { localName: 'audio' },
+      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>'
+    }
+
+    expect(obj.id).toEqual(audElement.id)
+    expect(obj.mType).toBe(audElement.mType)
+    expect(obj.mElement.tagName.toLowerCase()).toBe(
+      audElement.mElement.localName
+    )
+    expect(obj.mTranscript).toBe(audElement.mTranscript)
+  })
+})

package/tests/unit/AppCompBranchButtons.spec.js

@@ -0,0 +1,172 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { colors } from '../utility/colors'
+
+//Mock store appStore
+vi.mock('@/module/stores/appStore', () => ({
+  useAppStore: () => ({
+    getAllCompleted: { A01: [] }
+  })
+}))
+
+import AppCompBranchButtons from '@/components/AppCompBranchButtons.vue'
+
+const dummyProps = {
+  cards: [
+    {
+      imgFile: 'https://loremflickr.com/500/500/kitten',
+      imgAlt: 'Test img 1',
+      title: 'banane',
+      text: 'Ceci est un embranchement factice, affiché sous la forme de carte.',
+      brchName: 'P02_E01'
+    },
+    {
+      imgFile: 'https://loremflickr.com/500/500/kitten',
+      imgAlt: 'Test img 2',
+      title: 'Titre embranchement 2',
+      text: 'Ceci est un embranchement factice, affiché sous la forme de carte, pour toto',
+      brchName: 'P02_E02'
+    },
+    {
+      imgFile: 'https://loremflickr.com/500/500/kitten',
+      imgAlt: 'Test img 3',
+      title: 'Titre embranchement 3',
+      text: 'Ceci est un embranchement factice, affiché sous la forme de carte, pour toto',
+      brchName: 'P02_E03'
+    }
+  ],
+  customButtons: [
+    { name: 'bouton_A02_P01_E01', brchName: 'P02_E01' },
+    { name: 'bouton_A02_P01_E02', brchName: 'P02_E02' }
+  ]
+}
+
+describe('AppCompBranchButtons.vue', () => {
+  let globalConfig
+
+  beforeEach(() => {
+    globalConfig = {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      mocks: {
+        $router: {
+          currentRoute: {
+            value: {
+              meta: {
+                activity_ref: 'A01',
+                children: [
+                  {
+                    _ref: 'P02_E01',
+                    _path: 'branche-1',
+                    _namedRoute: 'activite_3.page_2.branche_1'
+                  },
+                  {
+                    _ref: 'P02_E02',
+                    _path: 'branche-2',
+                    _namedRoute: 'activite_3.page_2.branche_2'
+                  },
+                  {
+                    _ref: 'P02_E03',
+                    _path: 'branche-3',
+                    _namedRoute: 'activite_3.page_2.branche_3'
+                  }
+                ]
+              }
+            }
+          }
+        }
+      }
+    }
+    vi.clearAllMocks()
+  })
+
+  it('Renders ErrorDisplay when cards has errors', async () => {
+    const wrapper = mount(AppCompBranchButtons, {
+      global: globalConfig,
+      props: {
+        cards: [dummyProps.cards[0], dummyProps.cards[1]] // Only 2 cards passed instead of 3
+      }
+    })
+
+    await wrapper.vm.$nextTick() // Must wait for DOM updates to display AppBaseErrorDisplay
+
+    if (wrapper.vm.hasErrors) {
+      const cards = wrapper.vm.cards
+      console.log(colors.green, `\n ✅ Current cards: ${JSON.stringify(cards)}`)
+      console.log(
+        '✅ wrapper.vm.hasErrors:',
+        wrapper.vm.hasErrors,
+        colors.reset
+      )
+    }
+    // Error should be displayed
+    expect(wrapper.vm.hasErrors.length).toBeGreaterThan(0)
+    expect(
+      wrapper.findComponent({ name: 'AppBaseErrorDisplay' }).exists()
+    ).toBe(true)
+  })
+
+  it('Renders ErrorDisplay when customButtons has errors', async () => {
+    const wrapper = mount(AppCompBranchButtons, {
+      global: globalConfig,
+      props: {
+        customButtons: [
+          { brchName: 'BRANCH_1' }, // missing required key 'name' here
+          { name: 'bouton_A02_P01_E01', brchName: 'P02_E02' },
+          { name: 'bouton_A02_P01_E01', brchName: 'P02_E03' }
+        ]
+      }
+    })
+    await wrapper.vm.$nextTick() // Must wait for DOM updates to display AppBaseErrorDisplay
+
+    if (wrapper.vm.hasErrors) {
+      const el = wrapper.vm.customButtons[0]
+      console.log(colors.green, `\n ✅ Current cards: ${JSON.stringify(el)}`)
+      console.log(
+        '✅ wrapper.vm.hasErrors:',
+        wrapper.vm.hasErrors,
+        colors.reset
+      )
+    }
+    // hasError should have a message
+    expect(wrapper.vm.hasErrors.length).toBeGreaterThan(0)
+    // Error should be displayed
+    expect(
+      wrapper.findComponent({ name: 'AppBaseErrorDisplay' }).exists()
+    ).toBe(true)
+  })
+
+  //=====================================================================
+  it('It renders the buttons when no errors', async () => {
+    const wrapper = mount(AppCompBranchButtons, {
+      global: {
+        ...globalConfig
+      },
+      props: {
+        cards: dummyProps.cards
+      }
+    })
+
+    await wrapper.vm.$nextTick() // Must wait for DOM updates to display AppBaseErrorDisplay
+
+    if (wrapper.vm.hasErrors) {
+      console.log(colors.red)
+      console.log(
+        '\n  wrapper.vm.hasErrors:',
+        wrapper.vm.hasErrors,
+        colors.reset
+      )
+    }
+
+    // expect hasErrors to return false
+    expect(wrapper.vm.hasErrors).toBe(false)
+    //error display not to be in DOM
+    expect(
+      wrapper.findComponent({ name: 'AppBaseErrorDisplay' }).exists()
+    ).not.toBe(true)
+    // element to rendered correctly in DOM
+    expect(wrapper.find('#branch-buttons-component').exists()).toBe(true)
+    //should display 3 buttons
+    expect(wrapper.findAll('.branch-btn').length).toBe(3)
+  })
+})

package/tests/unit/AppCompCarousel.spec.js

@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+//Mock store appStore
+vi.mock('@/module/stores/appStore', () => ({
+  useAppStore: () => ({
+    getAppConfigs: { lang: 'FR' }
+  })
+}))
+
+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'
+}
+
+import AppCompCarousel from '@/components/AppCompCarousel.vue'
+import AppBaseButton from '@/components/AppBaseButton.vue'
+
+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,49 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, vi, test } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+
+const dummyProps = [
+  {
+    id: 'nt_1',
+    text: `note 1`
+  },
+  {
+    id: 'nt_2',
+    text: `note 2`
+  }
+]
+
+//Mock store appStore
+vi.mock('@/module/stores/appStore', () => ({
+  useAppStore: () => ({
+    getDataNoteCredit: dummyProps,
+    getAllActivities: 'A01',
+    getCurrentPage: 'P01'
+  })
+}))
+// Import of components must happen after mocks to prevent side effects
+import AppCompNoteCredit from '../../src/components/AppCompNoteCredit.vue'
+
+describe('AppCompNoteCredit', () => {
+  let wrapper = null
+
+  beforeEach(() => {
+    wrapper = mount(AppCompNoteCredit, {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      global
+    })
+  })
+
+  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)
+  })
+})