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

package/tests/component/AppBaseButton.spec.js

@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/experimental-ct-vue'
+import AppBaseButton from '../../src/components/AppBaseButton.vue'
+
+let component, btnElement
+
+test.describe('AppBaseButton.vue', () => {
+  const btnText = 'Mon bouton custom'
+  const handleClick = async (payload) => {
+    console.log('👍Click Event - payload Received:', payload)
+  }
+
+  test.beforeEach(async ({ mount, page }) => {
+    const onClick = test.info().attach('onClick', {}) // trace visible si besoin
+    component = await mount(AppBaseButton, {
+      props: { type: 'submit', isDisabled: true, onClick: handleClick },
+      slots: {
+        default: btnText
+      }
+    })
+
+    btnElement = await page.getByRole('button')
+  })
+
+  test('It renders a button', async ({ page }) => {
+    await expect(btnElement).toBeVisible()
+    await expect(btnElement).toContainText(`${btnText}`)
+  })
+  //test prop value :type
+  test('Button has the correct type', async ({ page }) => {
+    await expect(btnElement).toHaveAttribute('type', 'submit')
+  })
+  // test prop value : isActive
+  test('Button render a correct state', async () => {
+    await expect(btnElement).toContainClass('md_disabled')
+    await expect(btnElement).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  //test click with event emitter
+  test('Emit event with value of the the $el when clicked', async ({mount, page}) => {
+
+  component = await mount(AppBaseButton, {
+    props: { type: 'submit', isDisabled: false, onClick: handleClick },
+    slots: { default: btnText }})
+
+    const btnElement = page.getByRole('button')
+    await expect(btnElement).toBeVisible()
+    //Using spy / mock to listen to event
+ 
+    await btnElement.click()
+    const elHandle = await btnElement.evaluate(el => el.outerHTML)
+    expect(elHandle).toContain('<button')
+  })
+})

package/tests/component/pinia.spec.js

@@ -0,0 +1,24 @@
+// import { test, expect } from '@playwright/experimental-ct-vue'
+// import { createPinia, setActivePinia } from 'pinia'
+// import { useAppStore } from '../../src/module/stores/appStore.js'
+// import Store from './Store.vue'
+
+// test('override initialState', async ({ mount }) => {
+//   //create pinia instance
+//   const pinia = createPinia()
+//   setActivePinia(pinia)
+
+//   //create app store and set initial state
+//   const appStore = useAppStore()
+//   appStore.status = 'initialState'
+
+//   const component = await mount(Store, {
+//     hooksConfig: {
+//       store: { name: '$appStore' }
+//     },
+//     global: {
+//       plugins: [pinia]
+//     }
+//   })
+//   await expect(component).toContainText('initialState')
+// })

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

@@ -1,53 +1,53 @@
-import { mount } from '@vue/test-utils'
-import AppBaseButton from '../AppBaseButton.vue'
-import { describe, expect, test } from 'vitest'
-
-describe('AppBaseButton.vue', () => {
-  test('It renders a button', () => {
-    const wrapper = mount(AppBaseButton)
-
-    expect(wrapper.text()).toContain('Button')
-  })
-  // test prop value :type
-  test('Button has the correct type', () => {
-    const wrapper = mount(AppBaseButton, {
-      props: { type: 'submit' }
-    })
-    // expect(wrapper.props().type).toBe(submit)
-    expect(wrapper.get('button').attributes('type')).toBe('submit')
-  })
-  //test prop value : isActive
-  test('Button render a correct state', () => {
-    const wrapper = mount(AppBaseButton, {
-      props: { isDisabled: true }
-    })
-    expect(wrapper.get('button').classes()).toEqual(
-      expect.arrayContaining(['md_disabled'])
-    )
-
-    // expect(wrapper.props().isActive).toBe(true)
-  })
-
-  //test slot
-  test('Renders slot content properly', () => {
-    const wrapper = mount(AppBaseButton, {
-      slots: {
-        default: 'Mon bouton custome'
-      }
-    })
-
-    expect(wrapper.get('button').text()).toBe('Mon bouton custome')
-  })
-
-  //test click with event emitter
-  test('Emit event with value of the the $el when clicked', () => {
-    const wrapper = mount(AppBaseButton, {
-      slots: {
-        default: 'Mon bouton custome'
-      }
-    })
-    wrapper.get('button').trigger('click')
-    const clickEvent = wrapper.emitted('click')[0]
-    expect(clickEvent[0]).toEqual(wrapper.vm.$el)
-  })
-})
+import { mount } from '@vue/test-utils'
+import AppBaseButton from '../../src/components/AppBaseButton.vue'
+import { describe, expect, test } from 'vitest'
+
+describe('AppBaseButton.vue', () => {
+  test('It renders a button', () => {
+    const wrapper = mount(AppBaseButton)
+
+    expect(wrapper.text()).toContain('Button')
+  })
+  // test prop value :type
+  test('Button has the correct type', () => {
+    const wrapper = mount(AppBaseButton, {
+      props: { type: 'submit' }
+    })
+    // expect(wrapper.props().type).toBe(submit)
+    expect(wrapper.get('button').attributes('type')).toBe('submit')
+  })
+  //test prop value : isActive
+  test('Button render a correct state', () => {
+    const wrapper = mount(AppBaseButton, {
+      props: { isDisabled: true }
+    })
+    expect(wrapper.get('button').classes()).toEqual(
+      expect.arrayContaining(['md_disabled'])
+    )
+
+    // expect(wrapper.props().isActive).toBe(true)
+  })
+
+  //test slot
+  test('Renders slot content properly', () => {
+    const wrapper = mount(AppBaseButton, {
+      slots: {
+        default: 'Mon bouton custome'
+      }
+    })
+
+    expect(wrapper.get('button').text()).toBe('Mon bouton custome')
+  })
+
+  //test click with event emitter
+  test('Emit event with value of the the $el when clicked', () => {
+    const wrapper = mount(AppBaseButton, {
+      slots: {
+        default: 'Mon bouton custome'
+      }
+    })
+    wrapper.get('button').trigger('click')
+    const clickEvent = wrapper.emitted('click')[0]
+    expect(clickEvent[0]).toEqual(wrapper.vm.$el)
+  })
+})

package/tests/unit/AppCompAudio.spec.js

@@ -0,0 +1,134 @@
+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',
+  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/AppCompCarousel.spec.js

@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils'
+import AppCompCarousel from '@/components/AppCompCarousel.vue'
+import AppBaseButton from '@/components/AppBaseButton.vue'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+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'
+}
+
+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/AppCompInputCheckBoxNx.spec.js

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils'
+import AppCompInputCheckBoxNx from '@/components/AppCompInputCheckBoxNx.vue'
+import { beforeEach, describe, expect, test } from 'vitest'
+
+const dummyProps = {
+  modelValue: ['cyan'],
+  inputData: [
+    {
+      id: '1',
+      value: 'rouge'
+    },
+    {
+      id: '2',
+      value: 'vert'
+    },
+    {
+      id: '3',
+      value: 'bleu'
+    },
+    {
+      id: '4',
+      value: 'jaune'
+    },
+    {
+      id: '5',
+      value: 'magenta'
+    },
+    {
+      id: '6',
+      value: 'cyan'
+    }
+  ],
+  solution: ['6'],
+  id: 'A02_P02_Q4'
+}
+describe('AppCompInputRadioNx.vue', () => {
+  let wrapper = null
+  beforeEach(() => {
+    wrapper = mount(AppCompInputCheckBoxNx, {
+      props: dummyProps
+    })
+  })
+  test(`renders a list of ${dummyProps.inputData.length} checkboxes`, () => {
+    expect(wrapper.findAll('input[type="checkbox"]').length).toBe(
+      dummyProps.inputData.length
+    )
+  })
+  test(`initially displays a single selected checkbox (checkbox #6 : cyan)`, () => {
+    const lastCheckbox = wrapper.findAll('input[type="checkbox"]')[5]
+    expect(lastCheckbox.attributes()).toHaveProperty('checked')
+  })
+  test('emits enable-submit and update:modelValue events on input change', async () => {
+    const boxes = wrapper.findAll('input[type="checkbox"]')
+    await boxes[0].setValue()
+    await boxes[4].setValue()
+    expect(wrapper.emitted()).toHaveProperty('enable-submit')
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+  })
+})

package/tests/unit/AppCompInputDropdownNx.spec.js

@@ -0,0 +1,51 @@
+import { mount } from '@vue/test-utils'
+import AppCompInputDropdownNx from '@/components/AppCompInputDropdownNx.vue'
+import { beforeEach, describe, expect, test } from 'vitest'
+import { VSelect } from 'vuetify/components/VSelect'
+
+const dummyProps = {
+  modelValue: ['Données primaires', 'Données secondaires'],
+  inputData: [
+    {
+      id: '0',
+      ennonce: 'Quelle sont les données?',
+      option: ['Données primaires', 'Données secondaires']
+    },
+    {
+      id: '1',
+      ennonce: 'Quelle sont les données?',
+      option: ['Données primaires', 'Données secondaires']
+    }
+  ],
+  solution: ['Données primaires', 'Données secondaires'],
+  id: 'A02_P02_Q4'
+}
+describe('AppCompInputDropdownNx.vue', () => {
+  let wrapper = null
+  beforeEach(() => {
+    wrapper = mount(AppCompInputDropdownNx, {
+      props: dummyProps
+    })
+  })
+  test(`renders a list of vuetify v-select components`, () => {
+    expect(wrapper.findAllComponents(VSelect).length).toBe(
+      dummyProps.inputData.length
+    )
+  })
+  test(`displays the right labels`, () => {
+    const labels = wrapper.findAll('label')
+    labels.forEach((label, index) => {
+      expect(label.element.textContent).toBe(
+        dummyProps.inputData[index].ennonce
+      )
+    })
+  })
+  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 = ['Données secondaires', 'Données primaires']
+    expect(wrapper.emitted()).toHaveProperty('enable-submit')
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+  })
+})

package/tests/unit/AppCompInputRadioNx.spec.js

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils'
+import AppCompInputRadioNx from '@/components/AppCompInputRadioNx.vue'
+import { beforeEach, describe, expect, test } from 'vitest'
+
+const dummyProps = {
+  modelValue: [{ id: '6', value: 'cyan', selected: true }],
+  inputData: [
+    {
+      id: '1',
+      value: 'rouge'
+    },
+    {
+      id: '2',
+      value:
+        'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae'
+    },
+    {
+      id: '3',
+      value: 'bleu'
+    },
+    {
+      id: '4',
+      value: 'Une couleur'
+    },
+    {
+      id: '5',
+      value: 'magenta'
+    },
+    {
+      id: '6',
+      value: 'cyan'
+    }
+  ],
+  solution: ['4'],
+  id: 'A02_P02_Q4'
+}
+
+describe('AppCompInputRadioNx.vue', () => {
+  let wrapper = null
+  beforeEach(() => {
+    wrapper = mount(AppCompInputRadioNx, {
+      props: dummyProps
+    })
+  })
+  test(`renders a list of ${dummyProps.inputData.length} radio buttons`, () => {
+    expect(wrapper.findAll('input[type="radio"]').length).toBe(
+      dummyProps.inputData.length
+    )
+  })
+  test(`has the id ${dummyProps.id}`, () => {
+    expect(wrapper.find('div').attributes('id')).toBe(`${dummyProps.id}`)
+  })
+  test('emits enable-submit and update:modelValue events on input change', async () => {
+    const radioBtn = wrapper.find('input[type="radio"]')
+    await radioBtn.setValue()
+    expect(wrapper.emitted()).toHaveProperty('enable-submit')
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+  })
+})

package/tests/unit/AppCompInputTextNx.spec.js

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils'
+import AppCompInputTextNx from '@/components/AppCompInputTextNx.vue'
+import { beforeEach, describe, expect, test } from 'vitest'
+import { VTextarea } from 'vuetify/components/VTextarea'
+
+const dummyProps = {
+  modelValue: ['Bonjour'],
+  inputData: null,
+  solution: null,
+  userAnswer: [],
+  id: 'A02_P02_Q4'
+}
+describe('AppCompInputTextNx.vue', () => {
+  let wrapper = null
+
+  beforeEach(() => {
+    wrapper = mount(AppCompInputTextNx, {
+      props: dummyProps
+    })
+  })
+  test('renders a vuetify textarea component', () => {
+    const textarea = wrapper.findComponent(VTextarea)
+    expect(textarea.exists()).toBe(true)
+  })
+  test('contains placeholder text "Écrivez ici."', () => {
+    const textarea = wrapper.find('textarea')
+    expect(textarea.attributes('placeholder')).toBe('Écrivez ici.')
+  })
+  test(`has the id textArea_${dummyProps.id}`, () => {
+    const textarea = wrapper.find('textarea')
+    expect(textarea.attributes('id')).toBe(`textArea_${dummyProps.id}`)
+  })
+  test('accepts some input text', async () => {
+    const textarea = wrapper.find('textarea')
+    await textarea.setValue('new value')
+    expect(textarea.element.value).toBe('new value')
+  })
+  test('emits enable-submit and update:modelValue events on input change', async () => {
+    const textarea = wrapper.find('textarea')
+    await textarea.setValue('new value')
+    expect(wrapper.emitted()).toHaveProperty('enable-submit')
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+  })
+})

package/tests/unit/AppCompInputTextTableNx.spec.js

@@ -0,0 +1,77 @@
+import { mount } from '@vue/test-utils'
+import AppCompInputTextTableNx from '@/components/AppCompInputTextTableNx.vue'
+import { beforeEach, describe, expect, test } from 'vitest'
+import { VTextField } from 'vuetify/components/VTextField'
+
+const dummyProps = {
+  modelValue: ['Blablabla', '1234', 'Lorem', 'Ipsum', 'cinq', '10'],
+  inputData: [
+    {
+      id: '0',
+      ennonce: 'le nombre « 1 »'
+    },
+    {
+      id: '1',
+      ennonce: 'le nombre « 2 »'
+    },
+    {
+      id: '2',
+      ennonce: 'le nombre « 3 »'
+    },
+    {
+      id: '3',
+      ennonce: 'le nombre « 4 »'
+    },
+    {
+      id: '4',
+      ennonce: 'le nombre « 5 »'
+    },
+    {
+      id: '5',
+      ennonce: 'le nombre « 10 »'
+    }
+  ],
+  solution: null,
+  id: 'A02_P02_Q4'
+}
+describe('AppCompInputTextTableNx.vue', () => {
+  let wrapper = null
+
+  beforeEach(() => {
+    wrapper = mount(AppCompInputTextTableNx, {
+      props: dummyProps
+    })
+  })
+  test(`renders a list of vuetify v-text-field`, () => {
+    const textfields = wrapper.findAllComponents(VTextField)
+    expect(textfields.length).toBe(dummyProps.inputData.length)
+  })
+
+  test(`displays a list of labels according to props received`, () => {
+    const labels = wrapper.findAll('label')
+    labels.forEach((label, index) => {
+      expect(label.element.textContent).toBe(
+        dummyProps.inputData[index].ennonce
+      )
+    })
+  })
+
+  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')
+  })
+})