fcad-core-dragon 2.1.0 → 2.1.2

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

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