edit changelog + add test sequence list

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

@@ -1,9 +1,10 @@
-import { it, describe, expect, vi } from 'vitest'
+import { it, describe, expect, vi, beforeEach } from 'vitest'
 import { flushPromises, shallowMount } from '@vue/test-utils'
 import MySequencesView from '../../../views/MySequencesView.vue'
 import axios from 'axios'
 import { createI18n } from 'vue-i18n'
 import fr from '../../../locales/fr.json'
+import Button from '../../../components/Button.vue'
 
 vi.mock('@/utils/dates', () => ({
   formatDate: vi.fn()
@@ -22,31 +23,28 @@ const i18n = createI18n({
 
 const mockResponseSequences = [
   {
-    title: 'my sequences',
-    description: 'my sequences',
-    generated_at: '2023-05-16T11:08:11.247187+00:00',
+    href: 'https://my-link',
+    rel: 'self',
+    type: 'application/json'
+  },
+  {
+    href: 'https://my-link',
     id: 'my-id',
-    links: [
-      {
-        href: 'https://my-link',
-        rel: 'self',
-        type: 'application/json'
-      },
-      {
-        href: 'https://my-link',
-        id: 'my-id',
-        rel: 'child',
-        'stats:items': { count: 16 },
-        title: 'toto'
+    rel: 'child',
+    'stats:items': { count: 16 },
+    title: 'ma sequence 1',
+    extent: {
+      temporal: {
+        interval: [['2022-09-22T08:03:08+00:00', '2022-09-22T08:03:08+00:00']]
       }
-    ]
+    }
   }
 ]
 
 describe('Template', () => {
   it('should render the view without sequences', async () => {
     import.meta.env.VITE_API_URL = 'api-url/'
-    axios.get.mockReturnValue({ data: mockResponseSequences })
+    await axios.get.mockReturnValue({ data: { links: [] } })
     const wrapper = shallowMount(MySequencesView, {
       global: {
         plugins: [i18n],
@@ -56,7 +54,6 @@ describe('Template', () => {
       }
     })
     await flushPromises()
-    await wrapper.vm.$nextTick()
     expect(axios.get).toHaveBeenCalledWith(
       `${import.meta.env.VITE_API_URL}api/users/me/catalog`
     )
@@ -64,4 +61,139 @@ describe('Template', () => {
     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 () => {
+    import.meta.env.VITE_API_URL = 'api-url/'
+    await axios.get.mockReturnValue({ data: { links: mockResponseSequences } })
+    const wrapper = shallowMount(MySequencesView, {
+      global: {
+        plugins: [i18n],
+        mocks: {
+          $t: (msg) => msg
+        }
+      }
+    })
+    await flushPromises()
+    expect(axios.get).toHaveBeenCalledWith(
+      `${import.meta.env.VITE_API_URL}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')
+  })
+})
+
+describe('Methods', () => {
+  describe('sortElements', () => {
+    const mockResponseSequencesToSort = [
+      {
+        href: 'https://my-link',
+        id: 'my-id',
+        rel: 'child',
+        'stats:items': { count: 16 },
+        title: 'za sequence 1',
+        extent: {
+          temporal: {
+            interval: [
+              ['2030-09-22T08:03:08+00:00', '2022-09-22T08:03:08+00:00']
+            ]
+          }
+        }
+      },
+      {
+        href: 'https://my-link',
+        id: 'my-id',
+        rel: 'child',
+        'stats:items': { count: 2 },
+        title: 'ma sequence 1',
+        extent: {
+          temporal: {
+            interval: [
+              ['2022-09-22T08:03:08+00:00', '2022-09-22T08:03:08+00:00']
+            ]
+          }
+        }
+      }
+    ]
+    beforeEach(async () => {
+      import.meta.env.VITE_API_URL = 'api-url/'
+      await axios.get.mockReturnValue({
+        data: { links: mockResponseSequencesToSort }
+      })
+      await flushPromises()
+    })
+    it('should should sort sequences by title', async () => {
+      const wrapper = shallowMount(MySequencesView, {
+        global: {
+          plugins: [i18n],
+          mocks: {
+            $t: (msg) => msg
+          },
+          components: {
+            Button
+          }
+        }
+      })
+      await wrapper.vm.$nextTick()
+      const spy = vi.spyOn(wrapper.vm, 'sortElements')
+      const buttonWrapper = wrapper.findComponent(
+        '[data-test="button-sort-title"]'
+      )
+      await buttonWrapper.vm.$emit('trigger')
+
+      expect(spy).toHaveBeenCalledWith('alpha')
+      expect(wrapper.vm.userSequences[0]).toEqual(
+        mockResponseSequencesToSort[1]
+      )
+    })
+    it('should should sort sequences by number of pictures', async () => {
+      const wrapper = shallowMount(MySequencesView, {
+        global: {
+          plugins: [i18n],
+          mocks: {
+            $t: (msg) => msg
+          },
+          components: {
+            Button
+          }
+        }
+      })
+      await wrapper.vm.$nextTick()
+      const spy = vi.spyOn(wrapper.vm, 'sortElements')
+      const buttonWrapper = wrapper.findComponent(
+        '[data-test="button-sort-number"]'
+      )
+      await buttonWrapper.vm.$emit('trigger')
+
+      expect(spy).toHaveBeenCalledWith('num')
+      expect(wrapper.vm.userSequences[0]).toEqual(
+        mockResponseSequencesToSort[1]
+      )
+    })
+    it('should should sort sequences by date', async () => {
+      const wrapper = shallowMount(MySequencesView, {
+        global: {
+          plugins: [i18n],
+          mocks: {
+            $t: (msg) => msg
+          },
+          components: {
+            Button
+          }
+        }
+      })
+      await wrapper.vm.$nextTick()
+      const spy = vi.spyOn(wrapper.vm, 'sortElements')
+      const buttonWrapper = wrapper.findComponent(
+        '[data-test="button-sort-date"]'
+      )
+      await buttonWrapper.vm.$emit('trigger')
+
+      expect(spy).toHaveBeenCalledWith('date')
+      expect(wrapper.vm.userSequences[0]).toEqual(
+        mockResponseSequencesToSort[1]
+      )
+    })
+  })
 })