@cnamts/synapse 1.0.12 → 1.0.14

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/__tests__/__snapshots__/AmeliproIllustratedRadioGroup.spec.ts.snap

@@ -0,0 +1,325 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproIllustratedRadioGroup > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="amelipro-illustrated-radio-group"
+  id="modified-unique-id-container"
+>
+  <div>
+    <div
+      class="
+        align-center
+        amelipro-illustrated-radio-group__label-wrapper
+        d-flex
+        mr-2
+      "
+      id="modified-unique-id-label-group"
+    >
+      <p
+        class="
+          amelipro-illustrated-radio-group__label
+          d-inline-flex
+          mb-0
+        "
+        id="modified-unique-id"
+      >
+        Modified group label
+        <span
+          aria-hidden="true"
+          class="d-inline-flex"
+        >
+          &nbsp;*
+        </span>
+        <span class="d-sr-only">
+          &nbsp;Champ obligatoire
+        </span>
+      </p>
+    </div>
+    <div
+      aria-labelledby="modified-unique-id"
+      aria-required="true"
+      class="
+        amelipro-illustrated-radio-group__group
+        mt-2
+      "
+      role="radiogroup"
+    >
+      <ul
+        class="
+          amelipro-illustrated-radio-group__list
+          d-flex
+          flex-wrap
+          list-style-none
+        "
+        id="modified-unique-id-list"
+      >
+        <li
+          class="amelipro-illustrated-radio-group__item"
+          id="modified-unique-id-item-0"
+        >
+          <label
+            class="
+              align-center
+              amelipro-illustrated-radio-group__item__label
+              d-inline-flex
+              flex-row
+              mb-2
+              mr-2
+            "
+            for="modified-unique-id-input-0"
+            id="modified-unique-id-label-0"
+          >
+            <input
+              aria-checked="false"
+              aria-describedby="modified-unique-id-error"
+              disabled=""
+              id="modified-unique-id-input-0"
+              name="modified-unique-id-name"
+              required=""
+              type="radio"
+              value="the-item-value-1"
+            />
+            <span class="
+              align-center
+              amelipro-illustrated-radio-group__item__label__content
+              d-flex
+              flex-column
+            ">
+              <span class="
+                align-center
+                bg-ap-blue-lighten-3
+                d-flex
+                flex-column
+                icon-radio__wrapper
+                pa-4
+              ">
+                <amelipro-icon-stub
+                  bordered="false"
+                  icon="vaccination"
+                  iconbgcolor="transparent"
+                  iconcolor="ap-yellow"
+                  large="false"
+                  medium="false"
+                  size="modified-icon-size"
+                  small="false"
+                  uniqueid="modified-unique-id-icon-0"
+                  widthauto="false"
+                  xlarge="false"
+                ></amelipro-icon-stub>
+                <span
+                  class="
+                    amelipro-illustrated-radio-group__item-label-text
+                    mt-4
+                    text-ap-blue-darken-1
+                  "
+                  id="modified-unique-id-label-text-0"
+                >
+                  the item label 1
+                </span>
+              </span>
+            </span>
+          </label>
+        </li>
+        <li
+          class="amelipro-illustrated-radio-group__item"
+          id="modified-unique-id-item-1"
+        >
+          <label
+            class="
+              align-center
+              amelipro-illustrated-radio-group__item__label
+              d-inline-flex
+              flex-row
+              mb-2
+              mr-2
+            "
+            for="modified-unique-id-input-1"
+            id="modified-unique-id-label-1"
+          >
+            <input
+              aria-checked="false"
+              aria-describedby="modified-unique-id-error"
+              disabled=""
+              id="modified-unique-id-input-1"
+              name="modified-unique-id-name"
+              required=""
+              type="radio"
+              value="the-item-value-2"
+            />
+            <span class="
+              align-center
+              amelipro-illustrated-radio-group__item__label__content
+              d-flex
+              flex-column
+            ">
+              <span class="
+                align-center
+                bg-ap-blue-lighten-3
+                d-flex
+                flex-column
+                icon-radio__wrapper
+                pa-4
+              ">
+                <amelipro-icon-stub
+                  bordered="false"
+                  icon="vaccination"
+                  iconbgcolor="transparent"
+                  iconcolor="ap-green"
+                  large="false"
+                  medium="false"
+                  size="modified-icon-size"
+                  small="false"
+                  uniqueid="modified-unique-id-icon-1"
+                  widthauto="false"
+                  xlarge="false"
+                ></amelipro-icon-stub>
+                <span
+                  class="
+                    amelipro-illustrated-radio-group__item-label-text
+                    mt-4
+                    text-ap-blue-darken-1
+                  "
+                  id="modified-unique-id-label-text-1"
+                >
+                  the item label 2
+                </span>
+              </span>
+            </span>
+          </label>
+        </li>
+        <li
+          class="amelipro-illustrated-radio-group__item"
+          id="modified-unique-id-item-2"
+        >
+          <label
+            class="
+              align-center
+              amelipro-illustrated-radio-group__item__label
+              d-inline-flex
+              flex-row
+              mb-2
+              mr-2
+            "
+            for="modified-unique-id-input-2"
+            id="modified-unique-id-label-2"
+          >
+            <input
+              aria-checked="false"
+              aria-describedby="modified-unique-id-error"
+              disabled=""
+              id="modified-unique-id-input-2"
+              name="modified-unique-id-name"
+              required=""
+              type="radio"
+              value="the-item-value-3"
+            />
+            <span class="
+              align-center
+              amelipro-illustrated-radio-group__item__label__content
+              d-flex
+              flex-column
+            ">
+              <span class="
+                align-center
+                bg-ap-blue-lighten-3
+                d-flex
+                flex-column
+                icon-radio__wrapper
+                pa-4
+              ">
+                <amelipro-icon-stub
+                  bordered="false"
+                  icon="vaccination"
+                  iconbgcolor="transparent"
+                  iconcolor="ap-red"
+                  large="false"
+                  medium="false"
+                  size="modified-icon-size"
+                  small="false"
+                  uniqueid="modified-unique-id-icon-2"
+                  widthauto="false"
+                  xlarge="false"
+                ></amelipro-icon-stub>
+                <span
+                  class="
+                    amelipro-illustrated-radio-group__item-label-text
+                    mt-4
+                    text-ap-blue-darken-1
+                  "
+                  id="modified-unique-id-label-text-2"
+                >
+                  the item label 3
+                </span>
+              </span>
+            </span>
+          </label>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <amelipro-message-stub
+    alignstart="false"
+    borderleftmessage="false"
+    dark="false"
+    dismissible="false"
+    noicon="true"
+    text="true"
+    type="error"
+    uniqueid="modified-unique-id-error"
+    value="true"
+    width="100%"
+  ></amelipro-message-stub>
+</div>
+`;
+
+exports[`AmeliproIllustratedRadioGroup > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="amelipro-illustrated-radio-group"
+  id="required-unique-id-container"
+>
+  <div>
+    <div
+      class="
+        align-center
+        amelipro-illustrated-radio-group__label-wrapper
+        d-flex
+        mr-2
+      "
+      id="required-unique-id-label-group"
+    >
+      <p
+        class="
+          amelipro-illustrated-radio-group__label
+          d-inline-flex
+          mb-0
+        "
+        id="required-unique-id"
+      >
+        Required group label
+        <!-- v-if -->
+        <!-- v-if -->
+      </p>
+    </div>
+    <div
+      aria-labelledby="required-unique-id"
+      aria-required="false"
+      class="
+        amelipro-illustrated-radio-group__group
+        mt-2
+      "
+      role="radiogroup"
+    >
+      <ul
+        class="
+          amelipro-illustrated-radio-group__list
+          d-flex
+          flex-wrap
+          list-style-none
+        "
+        id="required-unique-id-list"
+      ></ul>
+    </div>
+  </div>
+  <!-- v-if -->
+</div>
+`;

package/src/components/Amelipro/AmeliproMailTile/__tests__/AmeliproMailTile.spec.ts

@@ -0,0 +1,210 @@
+import { VueWrapper, mount, shallowMount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import AmeliproMailTile from '../AmeliproMailTile.vue'
+import type { AmeliproMailTileType } from '../types'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import type { ExpectedPropOptions } from '@tests/types'
+import type { PropType } from 'vue'
+import TestHelper from '@tests/helpers/TestHelper'
+
+const expectedPropOptions: ExpectedPropOptions<typeof AmeliproMailTile> = {
+	editable: {
+		type: Boolean,
+		default: false,
+	},
+	mailInfo: {
+		type: Object as PropType<AmeliproMailTileType>,
+		required: true,
+	},
+	uniqueId: {
+		type: String,
+		required: true,
+	},
+}
+
+// Values pour les props "required"
+const requiredPropValues = (): ComponentProps<typeof AmeliproMailTile> => ({
+	mailInfo: {
+		commentValue: true,
+		date: '25/06/2023',
+		hour: '12h00',
+		href: '#required',
+		mailObject: 'Required mail object',
+		messageInfoFirstLine: 'Required info line 1',
+		messageInfoSecondLine: 'Required info line 2',
+		messageInfoThirdLine: 'Required info line 3',
+		readValue: true,
+	} as AmeliproMailTileType,
+	uniqueId: 'required-unique-id',
+})
+
+// Valeurs pour les props "modified"
+const modifiedPropValues = (): ComponentProps<typeof AmeliproMailTile> => ({
+	editable: true,
+	mailInfo: {
+		commentValue: false,
+		date: '26/06/2023',
+		hour: '13h00',
+		href: '#modified',
+		mailObject: 'Modified mail object',
+		messageInfoFirstLine: 'Modified info line 1',
+		messageInfoSecondLine: 'Modified info line 2',
+		messageInfoThirdLine: 'Modified info line 3',
+		readValue: false,
+	} as AmeliproMailTileType,
+	uniqueId: 'modified-unique-id',
+})
+
+const testHelper = new TestHelper(AmeliproMailTile)
+testHelper.setExpectedPropOptions(expectedPropOptions)
+	.setRequiredPropValues(requiredPropValues)
+	.setModifiedPropValues(modifiedPropValues)
+
+describe('AmeliproMailTile', () => {
+	describe('Snapshots', () => {
+		testHelper.snapshots()
+	})
+
+	describe('Properties', () => {
+		testHelper.properties()
+	})
+
+	describe('Setting props should update attributes of inner tags', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproMailTile>>
+
+		beforeEach(() => {
+			vueWrapper = mount(AmeliproMailTile, {
+				props: requiredPropValues(),
+				global: { stubs: { VBtn: { template: '<button><slot /></button>' } } },
+			})
+		})
+
+		it('prop uniqueId sets attribute id', async () => {
+			expect(vueWrapper.attributes('id')).toBe(`${testHelper.default('uniqueId')}-container`)
+			const { uniqueId } = modifiedPropValues()
+			await vueWrapper.setProps({ uniqueId })
+			expect(vueWrapper.attributes('id')).toBe(`${testHelper.modified('uniqueId')}-container`)
+		})
+
+		it('prop mailInfo sets mail object', async () => {
+			expect(vueWrapper.find(`#${testHelper.default('uniqueId')}-mail-object`).exists()).toBe(true)
+			expect(vueWrapper.find(`#${testHelper.default('uniqueId')}-mail-object`).text()).toContain(testHelper.default('mailInfo').mailObject)
+
+			const { mailInfo, uniqueId } = modifiedPropValues()
+			await vueWrapper.setProps({ mailInfo, uniqueId })
+			expect(vueWrapper.find(`#${testHelper.modified('uniqueId')}-mail-object`).exists()).toBe(true)
+			expect(vueWrapper.find(`#${testHelper.modified('uniqueId')}-mail-object`).text()).toContain(testHelper.modified('mailInfo').mailObject)
+		})
+
+		it('prop editable sets edit mode', async () => {
+			expect(vueWrapper.find('.mail-status-btn').exists()).toBe(false)
+			await vueWrapper.setProps({ editable: true })
+			expect(vueWrapper.find('.mail-status-btn').exists()).toBe(true)
+		})
+	})
+
+	describe('Events', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproMailTile>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproMailTile, { props: { ...requiredPropValues(), editable: true } })
+		})
+
+		it('emit status-change when clicking mail-status-btn', async () => {
+			expect(vueWrapper.emitted('status-change')).toBeUndefined()
+			await vueWrapper.find('.mail-status-btn').trigger('click')
+			expect(vueWrapper.emitted('status-change')).toBeTruthy()
+			expect(vueWrapper.emitted('status-change')?.[0]).toEqual([testHelper.default('uniqueId')])
+		})
+
+		it('emit click when clicking not-editable tile', async () => {
+			await vueWrapper.setProps({ editable: false })
+			expect(vueWrapper.emitted('click')).toBeUndefined()
+			await vueWrapper.find('.amelipro-mail-tile__not-editable').trigger('click')
+			expect(vueWrapper.emitted('click')).toBeTruthy()
+			expect(vueWrapper.emitted('click')?.[0]).toEqual([testHelper.default('uniqueId')])
+		})
+	})
+
+	describe('Editable info text', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproMailTile>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproMailTile, {
+				props: { ...requiredPropValues(), editable: true },
+				global: { stubs: { VBtn: { template: '<button><slot /></button>' } } },
+			})
+		})
+
+		it('prop mailInfo.commentValue sets comment icon visibility', async () => {
+			expect(vueWrapper.find('.mail-info__comment-icon').exists()).toBe(true)
+
+			const { mailInfo } = modifiedPropValues()
+			await vueWrapper.setProps({ mailInfo })
+			expect(vueWrapper.find('.mail-info__comment-icon').exists()).toBe(false)
+		})
+	})
+
+	describe('Mail status button', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproMailTile>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproMailTile, {
+				props: { ...requiredPropValues(), editable: true },
+				// global: { stubs: { VBtn: { template: '<button><slot /></button>' } } },
+			})
+		})
+
+		it('prop uniqueId sets attribute id', async () => {
+			expect(vueWrapper.find('.mail-status-btn').attributes('id')).toBe(`${testHelper.default('uniqueId')}-read-btn`)
+
+			const { uniqueId } = modifiedPropValues()
+			await vueWrapper.setProps({ uniqueId })
+			expect(vueWrapper.find('.mail-status-btn').attributes('id')).toBe(`${testHelper.modified('uniqueId')}-read-btn`)
+		})
+
+		it('prop mailInfo.readValue sets attribute aria-label', async () => {
+			expect(vueWrapper.find('.mail-status-btn').attributes('aria-label')).toBe('Message lu')
+
+			const { mailInfo } = modifiedPropValues()
+			await vueWrapper.setProps({ mailInfo })
+			// TODO: test ne passe pas, la prop ne semble pas réactive
+			// expect(vueWrapper.find('.mail-status-btn').attributes('aria-label')).toBe('Message non lu')
+		})
+
+		it('prop mailInfo.readValue sets attribute aria-pressed', async () => {
+			expect(vueWrapper.find('.mail-status-btn').attributes('aria-pressed')).toBe('true')
+
+			const { mailInfo } = modifiedPropValues()
+			await vueWrapper.setProps({ mailInfo })
+			// TODO: test ne passe pas, la prop ne semble pas réactive
+			// expect(vueWrapper.find('.mail-status-btn').attributes('aria-pressed')).toBe('false')
+		})
+
+		it('prop mailInfo.readValue sets class mail-status-btn--not-read', async () => {
+			expect(vueWrapper.find('.mail-status-btn').classes('mail-status-btn--not-read')).toBe(false)
+
+			const { mailInfo } = modifiedPropValues()
+			expect(mailInfo.readValue).toBe(false)
+			await vueWrapper.setProps({ mailInfo })
+			// TODO: test ne passe pas, la prop ne semble pas réactive
+			// expect(vueWrapper.find('.mail-status-btn').classes('mail-status-btn--not-read')).toBe(true)
+		})
+	})
+
+	describe('backgroundStyle changes on status change', () => {
+		let vueWrapper: VueWrapper<InstanceType<typeof AmeliproMailTile>>
+
+		beforeEach(() => {
+			vueWrapper = shallowMount(AmeliproMailTile, { props: { ...requiredPropValues(), editable: true } })
+		})
+
+		it('backgroundStyle changes after click', async () => {
+			const btn = vueWrapper.find('.mail-status-btn')
+			const initialStyle = btn.attributes('style')
+			await btn.trigger('click')
+			const afterClickStyle = btn.attributes('style')
+			expect(initialStyle).not.toBe(afterClickStyle)
+		})
+	})
+})

package/src/components/Amelipro/AmeliproMailTile/__tests__/__snapshots__/AmeliproMailTile.spec.ts.snap

@@ -0,0 +1,98 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproMailTile > Snapshots > renders the component with all properties filled in 1`] = `
+<div
+  class="
+    amelipro-mail-tile
+    w-100
+  "
+  id="modified-unique-id-container"
+>
+  <div class="
+    amelipro-mail-tile__editable
+    d-flex
+    w-100
+  ">
+    <button
+      aria-label="Message lu"
+      aria-pressed="false"
+      class="
+        mail-status-btn
+        mail-status-btn--not-read
+      "
+      id="modified-unique-id-read-btn"
+      style="background-color: #E6F6FC;"
+      title="Message non lu"
+    ></button>
+    <v-btn-stub
+      block="false"
+      border="false"
+      class="
+        d-block
+        mail-btn--editable
+        text-none
+      "
+      color="ap-blue-lighten-3"
+      density="default"
+      disabled="false"
+      elevation="0"
+      exact="false"
+      flat="true"
+      href="#modified"
+      icon="false"
+      id="modified-unique-id-mail-btn"
+      loading="false"
+      replace="false"
+      ripple="false"
+      size="default"
+      slim="false"
+      stacked="false"
+      symbol="Symbol(vuetify:v-btn-toggle)"
+      tag="button"
+      tile="false"
+      variant="flat"
+    ></v-btn-stub>
+  </div>
+</div>
+`;
+
+exports[`AmeliproMailTile > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="
+    amelipro-mail-tile
+    w-100
+  "
+  id="required-unique-id-container"
+>
+  <v-btn-stub
+    block="false"
+    border="false"
+    class="
+      amelipro-mail-tile__not-editable
+      mail-btn
+      text-none
+      w-100
+    "
+    color="ap-white"
+    density="default"
+    disabled="false"
+    elevation="0"
+    exact="false"
+    flat="true"
+    href="#required"
+    icon="false"
+    id="required-unique-id-mail-btn"
+    loading="false"
+    replace="false"
+    ripple="false"
+    size="default"
+    slim="false"
+    stacked="false"
+    symbol="Symbol(vuetify:v-btn-toggle)"
+    tag="button"
+    tile="false"
+    title="Message lu"
+    variant="flat"
+  ></v-btn-stub>
+</div>
+`;