Merge pull request #81 from laruiss/feat/dsfr-tags

feat/dsfr tags

Author: laruiss

src/components/DsfrBreadcrumb/DsfrBreadcrumb.spec.js

@@ -2,6 +2,8 @@ import { render } from '@testing-library/vue'
 
 import DsfrBreadcrumb from './DsfrBreadcrumb.vue'
 
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
 describe('DsfrBreadcrumb', () => {
   it('should render DsfrBreadcrumb with right content', async () => {
     // Given
@@ -24,6 +26,11 @@ describe('DsfrBreadcrumb', () => {
 
     // When
     const { getByRole, findAllByTestId } = render(DsfrBreadcrumb, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       propsData: {
         links,
       },

src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue

@@ -26,12 +26,14 @@
           :data-testid="`lis`"
         >
           <router-link
+            v-if="link.to"
             class="fr-breadcrumb__link"
             :to="link.to"
             :aria-current="index === links.length - 1 ? 'page' : undefined"
           >
             {{ link.text }}
           </router-link>
+          {{ link.to ? '' : link.text }}
           <v-icon
             v-if="index !== links.length - 1"
             class="icon"
@@ -66,7 +68,7 @@ export default {
     },
     links: {
       type: Array,
-      default: () => [{ text: 'test' }],
+      default: () => [{ text: '' }],
     },
   },
   data () {
@@ -188,5 +190,4 @@ export default {
 .fade-leave-to {
   opacity: 0;
 }
-
 </style>

src/components/DsfrButton/DsfrButton.spec.js

@@ -2,13 +2,20 @@ import { render } from '@testing-library/vue'
 
 import DsfrButton from './DsfrButton.vue'
 
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
 describe('DsfrButton', () => {
   it('should mount DsfrButton with right content', () => {
     // Given
     const label = 'Button label'
 
     // When
     const { getByText } = render(DsfrButton, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       slots: {
         default: label,
       },
@@ -24,6 +31,11 @@ describe('DsfrButton', () => {
 
     // When
     const { getByText } = render(DsfrButton, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       props: {
         secondary: true,
       },
@@ -33,6 +45,6 @@ describe('DsfrButton', () => {
     })
 
     // Then
-    expect(getByText(label)).toHaveClass('fr-btn--secondary')
+    expect(getByText(label).parentNode).toHaveClass('fr-btn--secondary')
   })
 })

src/components/DsfrButton/DsfrButton.stories.js

@@ -14,7 +14,10 @@ export default {
       control: 'boolean',
       description: 'Indique si le bouton est un bouton **secondaire**',
     },
-    dark: { control: 'boolean', description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre* (`true`).\n\n*N.B. : Ne fait pas partie du composant.*' },
+    dark: {
+      control: 'boolean',
+      description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre* (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
+    },
     label: {
       control: 'text',
       description: '**Texte** du bouton',

src/components/DsfrCard/DsfrCard.spec.js

@@ -2,6 +2,8 @@ import { render } from '@testing-library/vue'
 
 import DsfrCard from './DsfrCard.vue'
 
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
 describe('DsfrCard', () => {
   it('should render a nice card', () => {
     // Given
@@ -17,6 +19,11 @@ describe('DsfrCard', () => {
     // When
 
     const { getByText, getByTestId } = render(DsfrCard, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       props: {
         altImg,
         detail,

src/components/DsfrCheckbox/DsfrCheckbox.spec.js

@@ -2,6 +2,8 @@ import { render } from '@testing-library/vue'
 
 import CheckBox from './DsfrCheckbox.vue'
 
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
 describe('DsfrCheckbox', () => {
   it('should render a checkbox with label in div', () => {
     // Given
@@ -10,9 +12,15 @@ describe('DsfrCheckbox', () => {
 
     // When
     const { getByText, getByLabelText } = render(CheckBox, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       props: {
         label,
         modelValue,
+        name: 'label-1',
       },
     })
 
@@ -35,9 +43,15 @@ describe('DsfrCheckbox', () => {
 
     // When
     const { getByText, getByLabelText } = render(CheckBox, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       props: {
         label,
         modelValue,
+        name: 'label-1',
         disabled,
       },
     })

src/components/DsfrCheckbox/DsfrCheckboxSet.spec.js

@@ -2,6 +2,8 @@ import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrCheckboxSet from './DsfrCheckboxSet.vue'
 
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
 describe('DsfrCheckboxSet', () => {
   it('should render a group of checkboxes in fieldset', () => {
     // Given
@@ -35,6 +37,11 @@ describe('DsfrCheckboxSet', () => {
 
     // When
     const { getByText, getAllByTestId } = render(DsfrCheckboxSet, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       props: {
         legend: legendText,
         options,
@@ -58,28 +65,33 @@ describe('DsfrCheckboxSet', () => {
         id: '1',
         name: 'name1',
         label: firstLabelText,
-        checked: true,
+        modelValue: true,
         hint: firstHintText,
       },
       {
         id: '2',
         name: 'name2',
         label: secondLabelText,
-        checked: false,
+        modelValue: false,
         hint: secondHintText,
       },
       {
         id: '3',
         name: 'name3',
         label: thirdLabelText,
-        checked: false,
+        modelValue: false,
         hint: thirdHintText,
       },
     ]
     const legendText = "Légende de l'ensemble des champs"
 
     // When
     const { getByText, getByTestId } = render(DsfrCheckboxSet, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       props: {
         legend: legendText,
         options,
@@ -91,5 +103,6 @@ describe('DsfrCheckboxSet', () => {
     expect(getByTestId('input-checkbox-1')).toBeInTheDocument()
     expect(getByTestId('input-checkbox-1')).toHaveAttribute('name', 'name1')
     expect(getByTestId('input-checkbox-1').checked).toBe(true)
+    expect(getByTestId('input-checkbox-2').checked).toBe(false)
   })
 })

src/components/DsfrHeader/DsfrHeader.spec.js

@@ -2,13 +2,20 @@ import { render } from '@testing-library/vue'
 
 import DsfrHeader from './DsfrHeader.vue'
 
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
 describe('DsfrHeader', () => {
   it('should render DsfrHeader with a logo', () => {
     // Given
-    const logoText = 'Ministère'
+    const logoText = 'Gouvernement'
 
     // When
     const { getByText } = render(DsfrHeader, {
+      global: {
+        components: {
+          VIcon,
+        },
+      },
       slots: {
         'logo-text': logoText,
       },

src/components/DsfrHeader/DsfrHeader.stories.js

@@ -4,7 +4,7 @@ import VIcon from 'oh-vue-icons/dist/v3/icon.es'
 import {
   RiNotification3Line,
   RiPhoneLine,
-} from 'oh-vue-icons/icons'
+} from 'oh-vue-icons/icons/ri/index.js'
 
 VIcon.add(
   RiNotification3Line,

src/components/DsfrLogo/DsfrLogo.spec.js

@@ -5,12 +5,12 @@ import DsfrLogo from './DsfrLogo.vue'
 describe('DsfrLogo', () => {
   it('should render flag, text and motto', () => {
     // Given
-    const text = 'République française'
+    const text = 'Gouvernement'
 
     // When
     const { getByText } = render(DsfrLogo, {
-      slots: {
-        default: text,
+      props: {
+        logoText: text,
       },
     })