feat: teste les composants

src/components/Landing/Partners.test.js

@@ -0,0 +1,48 @@
+import { describe, expect, test } from "vitest"
+import { mount } from "@vue/test-utils"
+
+import Partners from "./Partners.vue"
+
+describe("Partners", () => {
+  test("displays only the headline", () => {
+    const wrapper = mount(Partners, {
+      props: {  },
+      slots: {
+        headline: 'Okay'
+      }
+    })
+
+    expect(wrapper.find('h2').text()).toBe("Okay")
+    expect(wrapper.findAll('.fr-grid-row.sections > *')).toHaveLength(0)
+  })
+
+  test("displays full width sponsors", () => {
+    const wrapper = mount(Partners, {
+      props: { sponsors: true  }
+    })
+
+    expect(wrapper.findAll('.fr-grid-row.sections > *')).toHaveLength(1)
+    expect(wrapper.find('.fr-grid-row.sections > div').classes()).toEqual(['fr-col-12'])
+    expect(wrapper.find('.fr-grid-row.sections .logos--sponsors').exists()).toEqual(true)
+  })
+
+  test("displays full width certification bodies", () => {
+    const wrapper = mount(Partners, {
+      props: { certificationBodies: true  }
+    })
+
+    expect(wrapper.findAll('.fr-grid-row.sections > *')).toHaveLength(1)
+    expect(wrapper.find('.fr-grid-row.sections > div').classes()).toEqual(['fr-col-12'])
+    expect(wrapper.find('.fr-grid-row.sections .logos--certification-bodies').exists()).toEqual(true)
+  })
+
+  test("displays both sponsors and certification bodies", () => {
+    const wrapper = mount(Partners, {
+      props: { certificationBodies: true, sponsors: true  }
+    })
+
+    expect(wrapper.findAll('.fr-grid-row.sections > *')).toHaveLength(2)
+    expect(wrapper.find('.fr-grid-row.sections > div:nth-child(1)').classes()).toEqual(['fr-col-lg-5'])
+    expect(wrapper.find('.fr-grid-row.sections > div:nth-child(2)').classes()).toEqual(['fr-col-lg-6', 'fr-col-offset-lg-1'])
+  })
+})

src/components/Landing/Partners.vue

@@ -9,7 +9,7 @@
         </div>
       </div>
 
-      <div class="fr-grid-row">
+      <div class="fr-grid-row sections">
         <div :class="{ 'fr-col-12': !sponsors, 'fr-col-lg-5': sponsors }" v-if="certificationBodies">
           <p>
             Cartobio est un outil conçu <strong>avec et pour</strong>

src/components/Landing/ProductFlow.test.js

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "vitest"
+import { mount } from "@vue/test-utils"
+
+import ProductFlow from "./ProductFlow.vue"
+
+
+describe("ProductFlow", () => {
+  test("for professionals", () => {
+    const wrapper = mount(ProductFlow, {
+      props: {  },
+    })
+
+    expect(wrapper.find('.fr-container--fluid').classes('general-audience')).toEqual(false)
+    expect(wrapper.find('.big-steps > li').text()).toEqual('Importer votre parcellaireSe connecter')
+  })
+
+  test("for general audience", () => {
+    const wrapper = mount(ProductFlow, {
+      props: { generalAudience: true  }
+    })
+
+    expect(wrapper.find('.fr-container--fluid').classes('general-audience')).toEqual(true)
+    expect(wrapper.find('.big-steps > li').text()).toEqual('Localiser votre territoireNaviguer sur la carte')
+  })
+})

src/components/MainHeader.test.js

@@ -0,0 +1,75 @@
+import { afterEach, describe, expect, test, vi } from "vitest"
+import { createTestingPinia } from "@pinia/testing"
+import { flushPromises, mount } from "@vue/test-utils"
+import { usePermissions, useUserStore } from "@/stores/index.js"
+import { ROLES } from "@/stores/user.js"
+
+import MainHeader from "./MainHeader.vue"
+
+const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
+const user = useUserStore(pinia)
+const permissions = usePermissions(pinia)
+
+describe("MainHeader", () => {
+  afterEach(() => {
+    user.$reset()
+    permissions.$reset()
+  })
+
+  test("as a guest", () => {
+    const wrapper = mount(MainHeader)
+
+    expect(wrapper.find('.tool-username').exists()).toEqual(false)
+    expect(wrapper.find('.fr-header__tools').text()).toEqual('Connexion')
+    expect(wrapper.find('.fr-notice').exists()).toEqual(true)
+  })
+
+  test("as a guest, on a general audience page", () => {
+    const wrapper = mount(MainHeader, {
+      global: {
+        mocks: {
+          $route: {
+            meta: { generalAudience: true }
+          }
+        }
+      }
+    })
+
+    expect(wrapper.find('.tool-username').exists()).toEqual(false)
+    expect(wrapper.find('.fr-header__tools').text()).toEqual('Accès professionnel')
+  })
+
+  test("as a certification body", async () => {
+    const wrapper = mount(MainHeader)
+    user.isLogged = true
+    user.roles = [ROLES.OC_AUDIT]
+    await flushPromises()
+
+    expect(wrapper.find('.tool-username a').classes('fr-icon-medal-fill')).toEqual(true)
+    expect(wrapper.find('[role="navigation"] a').attributes('href')).toEqual('/certification/exploitations')
+
+    await wrapper.find('.tool-logout a').trigger('click')
+    await flushPromises()
+  })
+
+  test("as a farmer", async () => {
+    const wrapper = mount(MainHeader)
+    user.isLogged = true
+    user.roles = [ROLES.OPERATEUR]
+    await flushPromises()
+
+    expect(wrapper.find('.tool-username a').classes('fr-icon-plant-fill')).toEqual(true)
+    expect(wrapper.find('[role="navigation"] a').attributes('href')).toEqual('/exploitations')
+  })
+
+  test("as unknown role", async () => {
+    const wrapper = mount(MainHeader)
+    user.isLogged = true
+    user.roles = []
+    await flushPromises()
+    console.log(wrapper.html())
+
+    expect(wrapper.find('.tool-username a').classes('fr-icon-account-circle-fill')).toEqual(true)
+    expect(wrapper.find('[role="navigation"]').exists()).toEqual(false)
+  })
+})

src/components/MainHeader.vue

@@ -12,7 +12,7 @@
               </div>
 
               <div class="fr-header__operator">
-                <img src="../assets/logo-agence-bio.svg" class="fr-responsive-img logo" alt="L'Agence Bio" />
+                <img src="@/assets/logo-agence-bio.svg" class="fr-responsive-img logo" alt="L'Agence Bio" />
               </div>
             </div>
 
@@ -27,7 +27,7 @@
             </div>
           </div>
 
-          <div class="fr-hidden fr-unhidden-lg fr-header__tools" :data-numero-bio="user.numeroBio">
+          <div class="fr-hidden fr-unhidden-lg fr-header__tools">
             <div class="fr-header__tools-links">
               <ul class="fr-btns-group" v-if="isLogged">
                 <li class="tool-username" aria-hidden="true">