Feat/pagination pictures

src/tests/unit/components/ImageItem.spec.js

@@ -0,0 +1,160 @@
+import { it, describe, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import ImageItem from '../../../components/ImageItem.vue'
+
+describe('Template', () => {
+  describe('Props', () => {
+    it('should have default props', () => {
+      const wrapper = shallowMount(ImageItem, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        }
+      })
+
+      expect(wrapper.vm.created).toBe(null)
+      expect(wrapper.vm.href).toBe(null)
+      expect(wrapper.vm.hrefHd).toBe(null)
+      expect(wrapper.vm.selected).toBe(false)
+      expect(wrapper.vm.selectedOnMap).toBe(false)
+      expect(wrapper.vm.status).toBe(null)
+    })
+  })
+  describe('When the component have default props filled', () => {
+    it('should render the component with a href, a hrefHd and a date', () => {
+      const wrapper = shallowMount(ImageItem, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          created: '10 mars 2023',
+          href: 'my-url',
+          hrefHd: 'my-url-hd',
+          status: 'ready'
+        }
+      })
+      expect(wrapper.html()).contains('<img')
+      expect(wrapper.html()).contains('src="my-url"')
+      expect(wrapper.html()).contains('<link-stub')
+      expect(wrapper.html()).contains('path="my-url-hd"')
+      expect(wrapper.html()).contains('10 mars 2023')
+    })
+  })
+  describe('When the component is selected', () => {
+    it('should render the component with the selected class', () => {
+      const wrapper = shallowMount(ImageItem, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          selected: true
+        }
+      })
+      expect(wrapper.html()).contains('class="selected button-image-item"')
+    })
+  })
+  describe('When the component is ready', () => {
+    it('should render the component with the status class', () => {
+      const wrapper = shallowMount(ImageItem, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          href: 'my-url',
+          status: 'ready'
+        }
+      })
+
+      expect(wrapper.html()).contains('src="my-url"')
+      expect(wrapper.html()).contains('class="ready"')
+    })
+  })
+  describe('When the component is waiting-for-process', () => {
+    it('should render the component with waiting-for-process classes and elements', () => {
+      const wrapper = shallowMount(ImageItem, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          status: 'waiting-for-process',
+          href: 'my-url'
+        }
+      })
+      expect(wrapper.html()).contains('class="waiting-for-process"')
+      expect(wrapper.html()).contains('pages.sequence.waiting_process')
+      expect(wrapper.html()).contains('class="bi bi-card-image icon-waiting"')
+    })
+  })
+  describe('When the component is selected on the map but not selected', () => {
+    it('should render the component with the map pointer', () => {
+      const wrapper = shallowMount(ImageItem, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          selectedOnMap: true,
+          selected: false
+        }
+      })
+      expect(wrapper.html()).contains('class="icon-img pointer-map"')
+    })
+  })
+  describe('When the component is selected but not selected on the map', () => {
+    it('should render the component with the check icon', () => {
+      const wrapper = shallowMount(ImageItem, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          selectedOnMap: false,
+          selected: true
+        }
+      })
+      expect(wrapper.html()).contains('class="bi bi-check-lg"')
+      expect(wrapper.html()).contains('class="icon-img button-check"')
+    })
+  })
+  describe('When the component is selected and selected on the map', () => {
+    it('should render the component with the check icon', () => {
+      const wrapper = shallowMount(ImageItem, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          selectedOnMap: true,
+          selected: true
+        }
+      })
+      expect(wrapper.html()).contains('class="icon-img button-check-pointer"')
+      expect(wrapper.html()).contains('class="bi bi-check-lg"')
+    })
+  })
+  describe('When the button is trigger', () => {
+    it('should emit', () => {
+      const wrapper = shallowMount(ImageItem, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        }
+      })
+      wrapper.vm.$emit('trigger')
+      expect(wrapper.emitted().trigger).toBeTruthy()
+    })
+  })
+})

src/tests/unit/components/InputCheckbox.spec.js

@@ -0,0 +1,99 @@
+import { it, describe, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import InputCheckbox from '../../../components/InputCheckbox.vue'
+
+describe('Template', () => {
+  describe('Props', () => {
+    it('should have default props', () => {
+      const wrapper = shallowMount(InputCheckbox, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        }
+      })
+      expect(wrapper.vm.name).toBe(null)
+      expect(wrapper.vm.label).toBe('')
+      expect(wrapper.vm.isChecked).toBe(false)
+      expect(wrapper.vm.isIndeterminate).toBe(false)
+    })
+  })
+  describe('When the component have a label', () => {
+    it('should render the component with a href, a hrefHd and a date', () => {
+      const wrapper = shallowMount(InputCheckbox, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          label: 'my label'
+        }
+      })
+      expect(wrapper.html()).contains('class="label"')
+      expect(wrapper.html()).contains('my label')
+    })
+  })
+  describe('When the component is checked', () => {
+    it('should render the component with the checked icon', () => {
+      const wrapper = shallowMount(InputCheckbox, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          isChecked: true,
+          isIndeterminate: false
+        }
+      })
+      expect(wrapper.html()).contains('class="icon bi bi-check-square"')
+    })
+  })
+  describe('When the component is not checked', () => {
+    it('should render the component with the not checked icon', () => {
+      const wrapper = shallowMount(InputCheckbox, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          isChecked: false,
+          isIndeterminate: false
+        }
+      })
+      expect(wrapper.html()).contains('class="icon bi bi-square"')
+    })
+  })
+  describe('When the component is not checked', () => {
+    it('should render the component with the not checked icon', () => {
+      const wrapper = shallowMount(InputCheckbox, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          isChecked: false,
+          isIndeterminate: true
+        }
+      })
+      expect(wrapper.html()).contains('class="icon bi bi-dash-square"')
+    })
+  })
+  describe('When the input is trigger', () => {
+    it('should emit', () => {
+      const wrapper = shallowMount(InputCheckbox, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        }
+      })
+      wrapper.vm.$emit('trigger', true)
+      expect(wrapper.emitted().trigger).toBeTruthy()
+      expect(wrapper.emitted().trigger[0][0]).toEqual(true)
+    })
+  })
+})

src/tests/unit/components/Link.spec.js

@@ -25,35 +25,6 @@ const stubs = {
   }
 }
 describe('Template', () => {
-  describe('Snapshot', () => {
-    test('Should match snapshot with external link', () => {
-      const wrapper = mount(Link, {
-        global: {
-          stubs,
-          plugins: [i18n]
-        },
-        props: {
-          type: 'external',
-          text: 'My-text',
-          path: 'my-path',
-          target: '_blank'
-        }
-      })
-      expect(wrapper.element).toMatchSnapshot()
-    })
-    test('Should match snapshot with internal link', () => {
-      const wrapper = shallowMount(Link, {
-        global: {
-          plugins: [i18n, router]
-        },
-        props: {
-          text: 'My-text',
-          path: 'my-path'
-        }
-      })
-      expect(wrapper.element).toMatchSnapshot()
-    })
-  })
   describe('Props', () => {
     test('should have default props', () => {
       const wrapper = shallowMount(Link, {

src/tests/unit/components/Pagination.spec.js

@@ -0,0 +1,75 @@
+import { it, describe, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import Pagination from '../../../components/Pagination.vue'
+
+describe('Template', () => {
+  describe('Props', () => {
+    it('should have default props', () => {
+      const wrapper = shallowMount(Pagination, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        }
+      })
+      expect(wrapper.vm.href).toBe(null)
+      expect(wrapper.vm.selfLink).toStrictEqual({})
+      expect(wrapper.vm.type).toBe('')
+    })
+  })
+  describe('When the component is the last or the first page', () => {
+    it('should render the component without border', () => {
+      const wrapper = shallowMount(Pagination, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          type: 'double-left'
+        }
+      })
+      expect(wrapper.html()).contains('class="wrapper-pagination no-border"')
+    })
+  })
+  describe('When the component is disabled', () => {
+    it('should render the component a disabled state', () => {
+      const href = 'my-url'
+      const wrapper = shallowMount(Pagination, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          type: 'double-left',
+          href,
+          selfLink: { href }
+        }
+      })
+      expect(wrapper.html()).contains('class="pagination-button disabled"')
+    })
+  })
+  describe('When the button is trigger', () => {
+    it('should emit', () => {
+      const href = 'my-url'
+      const wrapper = shallowMount(Pagination, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          type: 'left',
+          href,
+          selfLink: { href: 'self-link' }
+        }
+      })
+      wrapper.vm.$nextTick()
+      wrapper.vm.$emit('trigger', href)
+
+      expect(wrapper.emitted().trigger).toBeTruthy()
+      expect(wrapper.emitted().trigger[0][0]).toEqual(href)
+    })
+  })
+})

src/tests/unit/components/Toast.spec.js

@@ -0,0 +1,68 @@
+import { it, describe, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import Toast from '../../../components/Toast.vue'
+
+describe('Template', () => {
+  describe('Props', () => {
+    it('should have default props', () => {
+      const wrapper = shallowMount(Toast, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        }
+      })
+      expect(wrapper.vm.text).toBe('')
+      expect(wrapper.vm.look).toStrictEqual('')
+    })
+  })
+  describe('When the component have look and text filled', () => {
+    it('should render the component with the error and the display class', () => {
+      const wrapper = shallowMount(Toast, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          text: 'my text error',
+          look: 'error'
+        }
+      })
+      expect(wrapper.html()).contains('class="toast-wrapper error display"')
+      expect(wrapper.html()).contains('class="bi bi-exclamation-triangle"')
+      expect(wrapper.html()).contains('my text error')
+    })
+
+    it('should render the component with the success and the display class', () => {
+      const wrapper = shallowMount(Toast, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        },
+        props: {
+          text: 'my text success',
+          look: 'success'
+        }
+      })
+      expect(wrapper.html()).contains('class="toast-wrapper success display"')
+      expect(wrapper.html()).contains('class="bi bi-check-circle"')
+      expect(wrapper.html()).contains('my text success')
+    })
+  })
+  describe('When the button is trigger', () => {
+    it('should emit', () => {
+      const wrapper = shallowMount(Toast, {
+        global: {
+          mocks: {
+            $t: (msg) => msg
+          }
+        }
+      })
+      wrapper.vm.$emit('trigger')
+
+      expect(wrapper.emitted().trigger).toBeTruthy()
+    })
+  })
+})

src/tests/unit/components/__snapshots__/Link.spec.js.snap

@@ -1,32 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`Template > Snapshot > Should match snapshot with external link 1`] = `
-<a
-  class="default"
-  data-v-409c8661=""
-  href="my-path"
-  target="_blank"
-  title=""
->
-  <!--v-if-->
-  <!--v-if-->
-  <span
-    class="text"
-    data-v-409c8661=""
-  >
-    My-text
-  </span>
-</a>
-`;
-
-exports[`Template > Snapshot > Should match snapshot with internal link 1`] = `
-<router-link-stub
-  ariacurrentvalue="page"
-  class="default"
-  custom="false"
-  data-v-409c8661=""
-  replace="false"
-  title="My-text"
-  to="my-path"
-/>
-`;

src/tests/unit/utils.ts

@@ -0,0 +1,14 @@
+import { createI18n } from 'vue-i18n'
+import fr from '../../locales/fr.json'
+
+const i18n = createI18n({
+  locale: 'fr',
+  fallbackLocale: 'fr',
+  globalInjection: true,
+  legacy: false,
+  messages: {
+    fr
+  }
+})
+
+export default i18n

src/tests/unit/views/MySequencesView.spec.js

@@ -64,7 +64,23 @@ describe('Template', () => {
     expect(wrapper.html()).contains('path="/partager-des-photos"')
   })
 
-  it('should render the view with a séquence in the list', async () => {
+  it('should render the view with a loader loading', async () => {
+    const wrapper = shallowMount(MySequencesView, {
+      global: {
+        plugins: [i18n, router, createTestingPinia({ createSpy: vi.fn })],
+        mocks: {
+          $t: (msg) => msg
+        }
+      }
+    })
+    await flushPromises()
+    expect(axios.get).toHaveBeenCalledWith('api/users/me/catalog')
+    expect(wrapper.vm.userSequences).toEqual([])
+    expect(wrapper.html()).contains('general.header.contribute_text')
+    expect(wrapper.html()).contains('path="/partager-des-photos"')
+  })
+
+  it('should render the view with a sequence in the list', async () => {
     vi.spyOn(axios, 'get').mockResolvedValue({
       data: { links: mockResponseSequences }
     })
@@ -76,12 +92,9 @@ describe('Template', () => {
         }
       }
     })
-    await flushPromises()
-    expect(axios.get).toHaveBeenCalledWith('api/users/me/catalog')
-    expect(wrapper.vm.userSequences).toEqual([mockResponseSequences[1]])
-    expect(wrapper.html()).contains('src="https://my-link/thumb.jpg"')
-    expect(wrapper.html()).contains('ma sequence 1')
-    expect(wrapper.html()).contains('16')
+    wrapper.vm.isLoading = true
+    await wrapper.vm.$nextTick()
+    expect(wrapper.html()).contains('<loader')
   })
 })
 
@@ -135,6 +148,7 @@ describe('Methods', () => {
           }
         }
       })
+      wrapper.vm.isLoading = false
       await wrapper.vm.$nextTick()
       const spy = vi.spyOn(wrapper.vm, 'sortElements')
       const buttonWrapper = wrapper.findComponent(
@@ -159,6 +173,7 @@ describe('Methods', () => {
           }
         }
       })
+      wrapper.vm.isLoading = false
       await wrapper.vm.$nextTick()
       const spy = vi.spyOn(wrapper.vm, 'sortElements')
       const buttonWrapper = wrapper.findComponent(
@@ -183,6 +198,7 @@ describe('Methods', () => {
           }
         }
       })
+      wrapper.vm.isLoading = false
       await wrapper.vm.$nextTick()
       const spy = vi.spyOn(wrapper.vm, 'sortElements')
       const buttonWrapper = wrapper.findComponent(