Feat/add token page

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

@@ -76,7 +76,7 @@ describe('Template', () => {
       expect(wrapper.html()).contains(
         'general.header.contribute_text_responsive'
       )
-      expect(wrapper.html()).contains('general.header.account_text')
+      expect(wrapper.html()).contains('general.header.my_information_text')
       expect(wrapper.html()).contains('general.header.logout_text')
     })
     it('should render the component logout link', async () => {
@@ -94,7 +94,7 @@ describe('Template', () => {
       })
       expect(wrapper.html()).contains('chevron bi bi-chevron-up')
       expect(wrapper.html()).contains('auth/logout')
-      expect(wrapper.html()).contains('path="mon-compte"')
+      expect(wrapper.html()).contains('path="mes-informations"')
     })
   })
 })

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

@@ -1,9 +1,10 @@
-import { it, describe, expect, vi } from 'vitest'
+import { it, describe, expect, vi, beforeEach, afterEach } from 'vitest'
 import { shallowMount, mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
 import Terminal from '../../../components/Terminal.vue'
 import Button from '../../../components/Button.vue'
-import { createI18n } from 'vue-i18n'
 import fr from '../../../locales/fr.json'
+import { updateClipboard } from '../../../utils/copyToClipboard'
 
 const i18n = createI18n({
   locale: 'fr',
@@ -14,100 +15,101 @@ const i18n = createI18n({
     fr
   }
 })
-describe('Terminal', () => {
-  describe('Template', () => {
-    it('should render the component with good wording keys', () => {
-      const wrapper = shallowMount(Terminal, {
-        global: {
-          plugins: [i18n],
-          mocks: {
-            $t: (msg) => msg
-          }
-        }
-      })
-      expect(wrapper.html()).contains('pages.upload.button_copy')
-    })
-    it('should render the view with the button', () => {
-      const wrapper = shallowMount(Terminal, {
-        global: {
-          plugins: [i18n],
-          mocks: {
-            $t: (msg) => msg
-          }
-        }
-      })
-      expect(wrapper.html()).contains('<button')
-      expect(wrapper.html()).contains('icon="bi bi-clipboard-plus"')
-      expect(wrapper.html()).contains('look="button--white"')
-    })
-  })
-  describe('Props', () => {
-    it('should have default props', () => {
-      const wrapper = shallowMount(Terminal, {
-        global: {
-          plugins: [i18n],
-          mocks: {
-            $t: (msg) => msg
-          }
-        }
-      })
-      expect(wrapper.vm.textUpload).toBe('')
-      expect(wrapper.vm.textInstall).toBe('')
-    })
-    it('should have props filled', () => {
-      const wrapper = shallowMount(Terminal, {
-        global: {
-          plugins: [i18n],
-          mocks: {
-            $t: (msg) => msg
-          }
-        },
-        props: {
-          textUpload: 'upload',
-          textInstall: 'install'
-        }
-      })
-      expect(wrapper.vm.textUpload).toBe('upload')
-      expect(wrapper.vm.textInstall).toBe('install')
-    })
-  })
-  describe('Methods', () => {
-    it('should have default clipboard img', () => {
-      const wrapper = shallowMount(Terminal, {
-        global: {
-          plugins: [i18n],
-          mocks: {
-            $t: (msg) => msg
-          }
-        }
-      })
-      expect(wrapper.html()).contains('bi bi-clipboard-plus')
-    })
-    it('calls copyText function on button click and updates clipboard icon', async () => {
-      Object.defineProperty(navigator, 'clipboard', {
-        value: {
-          writeText: (msg) => msg
-        }
-      })
-      vi.useFakeTimers()
-      const wrapper = mount(Terminal, {
-        global: {
-          mocks: {
-            $t: (msg) => msg
-          },
-          components: {
-            Button
-          }
-        }
-      })
-      const spy = vi.spyOn(wrapper.vm, 'copyText')
-      const buttonWrapper = wrapper.findComponent(Button)
-      await buttonWrapper.vm.$emit('trigger')
 
-      expect(spy).toHaveBeenCalled()
-      expect(wrapper.vm.uploadIsCopied).toBe(true)
-      vi.runAllTimers()
-      expect(wrapper.vm.uploadIsCopied).toBe(false)
+describe('Template', () => {
+  it('should render the component with good wording keys', () => {
+    const wrapper = shallowMount(Terminal, {
+      global: {
+        plugins: [i18n],
+        mocks: {
+          $t: (msg) => msg
+        }
+      }
     })
+    expect(wrapper.html()).contains('pages.upload.button_copy')
+  })
+  it('should render the view with the button', () => {
+    const wrapper = shallowMount(Terminal, {
+      global: {
+        plugins: [i18n],
+        mocks: {
+          $t: (msg) => msg
+        }
+      }
+    })
+    expect(wrapper.html()).contains('<button')
+    expect(wrapper.html()).contains('icon="bi bi-clipboard-plus"')
+    expect(wrapper.html()).contains('look="button--white"')
+  })
+})
+describe('Props', () => {
+  it('should have default props', () => {
+    const wrapper = shallowMount(Terminal, {
+      global: {
+        plugins: [i18n],
+        mocks: {
+          $t: (msg) => msg
+        }
+      }
+    })
+    expect(wrapper.vm.textUpload).toBe('')
+    expect(wrapper.vm.textInstall).toBe('')
+  })
+  it('should have props filled', () => {
+    const wrapper = shallowMount(Terminal, {
+      global: {
+        plugins: [i18n],
+        mocks: {
+          $t: (msg) => msg
+        }
+      },
+      props: {
+        textUpload: 'upload',
+        textInstall: 'install'
+      }
+    })
+    expect(wrapper.vm.textUpload).toBe('upload')
+    expect(wrapper.vm.textInstall).toBe('install')
+  })
+})
+describe('Methods', () => {
+  it('should have default clipboard img', () => {
+    const wrapper = shallowMount(Terminal, {
+      global: {
+        plugins: [i18n],
+        mocks: {
+          $t: (msg) => msg
+        }
+      }
+    })
+    expect(wrapper.html()).contains('bi bi-clipboard-plus')
+  })
+  it('calls copyText function on button click', async () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+    afterEach(() => {
+      vi.restoreAllMocks()
+    })
+    const wrapper = mount(Terminal, {
+      global: {
+        mocks: {
+          $t: (msg) => msg
+        },
+        components: {
+          Button
+        }
+      }
+    })
+    vi.mock('../../../utils/copyToClipboard')
+    updateClipboard.mockReturnValue(true)
+    const spy = vi.spyOn(wrapper.vm, 'copyText')
+
+    const buttonWrapper = wrapper.findComponent(Button)
+    await buttonWrapper.vm.$emit('trigger')
+
+    expect(spy).toHaveBeenCalled()
+    expect(updateClipboard).toHaveBeenCalled()
+    expect(wrapper.vm.uploadIsCopied).toBe(true)
   })
 })

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

@@ -23,7 +23,7 @@ exports[`Template > Snapshot > Should match snapshot with internal link 1`] = `
 <router-link
   class="default"
   data-v-409c8661=""
-  title=""
+  title="My-text"
   to="my-path"
 >
   <!--v-if-->

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

@@ -1,11 +1,11 @@
 import { it, describe, expect } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import MyAccountView from '../../../views/MyAccountView.vue'
+import MyInformationView from '../../../views/MyInformationView.vue'
 
 describe('Template', () => {
   it('should render the view with the iframe', async () => {
     import.meta.env.VITE_API_URL = 'api-url/'
-    const wrapper = shallowMount(MyAccountView)
+    const wrapper = shallowMount(MyInformationView)
 
     expect(wrapper.html()).contains('<iframe')
     expect(wrapper.html()).contains('geovisio/account')

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

@@ -0,0 +1,168 @@
+import { it, describe, expect, vi, beforeEach, afterEach } from 'vitest'
+import { shallowMount, flushPromises } from '@vue/test-utils'
+import MySettingsView from '../../../views/MySettingsView.vue'
+import { createI18n } from 'vue-i18n'
+import axios from 'axios'
+import fr from '../../../locales/fr.json'
+import Button from '../../../components/Button.vue'
+import { updateClipboard } from '../../../utils/copyToClipboard'
+
+vi.mock('axios')
+
+const i18n = createI18n({
+  locale: 'fr',
+  fallbackLocale: 'fr',
+  globalInjection: true,
+  legacy: false,
+  messages: {
+    fr
+  }
+})
+
+const mockResponseTokens = [
+  {
+    description: 'my token',
+    generated_at: '2023-05-16T11:08:11.247187+00:00',
+    id: 'my-id',
+    links: [
+      {
+        href: 'https://my-link',
+        rel: 'self',
+        type: 'application/json'
+      }
+    ]
+  }
+]
+
+describe('Template', () => {
+  describe('When all the tokens list are fetched', () => {
+    it('should render all the tokens hidden', async () => {
+      import.meta.env.VITE_API_URL = 'api-url/'
+      axios.get.mockResolvedValue({ data: mockResponseTokens })
+      const wrapper = shallowMount(MySettingsView, {
+        global: {
+          plugins: [i18n],
+          mocks: {
+            $t: (msg) => msg
+          }
+        }
+      })
+      await flushPromises()
+
+      expect(axios.get).toHaveBeenCalledWith(
+        `${import.meta.env.VITE_API_URL}api/users/me/tokens`
+      )
+      expect(wrapper.vm.userTokens).toEqual(mockResponseTokens)
+      expect(wrapper.html()).contains('•••••••••••••••••••••••••••••••')
+      expect(wrapper.html()).contains('icon="bi bi-eye"')
+      expect(wrapper.html()).contains('look="button--rounded"')
+      expect(wrapper.html()).contains(
+        'icon="bi bi-clipboard-plus" disabled="false" isloading="false" text="pages.upload.button_copy" look="button--white"'
+      )
+    })
+  })
+})
+
+describe('Methods', () => {
+  describe('toggleToken', () => {
+    describe('When one token is already fetched', () => {
+      it('should render the token showed', async () => {
+        const wrapper = shallowMount(MySettingsView, {
+          global: {
+            plugins: [i18n],
+            mocks: {
+              $t: (msg) => msg
+            },
+            components: {
+              Button
+            }
+          }
+        })
+        wrapper.vm.userTokens = [
+          {
+            ...mockResponseTokens[0],
+            token: { jwt_token: 'jwtTokenValue' },
+            isHidden: true
+          }
+        ]
+        await wrapper.vm.$nextTick()
+        const spy = vi.spyOn(wrapper.vm, 'toggleToken')
+        const buttonWrapper = wrapper.findComponent(
+          '[data-test="button-eye-0"]'
+        )
+        await buttonWrapper.vm.$emit('trigger')
+        expect(spy).toHaveBeenCalledWith(0)
+        expect(wrapper.html()).contains('jwtTokenValue')
+        expect(wrapper.html()).contains('icon="bi bi-eye-slash"')
+      })
+    })
+    describe('When one token is not fetched yet', async () => {
+      it('should render the token showed', async () => {
+        axios.get.mockResolvedValue({ data: mockResponseTokens })
+        const wrapper = shallowMount(MySettingsView, {
+          global: {
+            plugins: [i18n],
+            mocks: {
+              $t: (msg) => msg
+            },
+            components: {
+              Button
+            }
+          }
+        })
+        await flushPromises()
+        axios.get.mockResolvedValue({ data: { jwt_token: 'my token' } })
+
+        const spy = vi.spyOn(wrapper.vm, 'toggleToken')
+        const buttonWrapper = wrapper.findComponent(
+          '[data-test="button-eye-0"]'
+        )
+        await buttonWrapper.vm.$emit('trigger')
+        await flushPromises()
+
+        expect(spy).toHaveBeenCalledWith(0)
+        expect(wrapper.vm.userTokens[0].isHidden).toBe(false)
+        expect(wrapper.vm.userTokens[0].token.jwt_token).toBe('my token')
+        expect(wrapper.html()).contains('icon="bi bi-eye-slash"')
+      })
+    })
+  })
+  describe('copyText', () => {
+    it('calls copyText function on button click', async () => {
+      axios.get.mockResolvedValue({ data: mockResponseTokens })
+      vi.mock('../../../utils/copyToClipboard')
+      beforeEach(() => {
+        vi.useFakeTimers()
+      })
+      afterEach(() => {
+        vi.restoreAllMocks()
+      })
+      const wrapper = shallowMount(MySettingsView, {
+        global: {
+          plugins: [i18n],
+          mocks: {
+            $t: (msg) => msg
+          },
+          components: {
+            Button
+          }
+        }
+      })
+      await flushPromises()
+
+      updateClipboard.mockReturnValue(true)
+      const spy = vi.spyOn(wrapper.vm, 'copyText')
+      const buttonWrapper = wrapper.findComponent('[data-test="button-copy-0"]')
+      const tokenToCopy = 'token to copy'
+
+      await buttonWrapper.vm.$emit('trigger')
+      await updateClipboard(tokenToCopy)
+      await flushPromises()
+
+      expect(spy).toHaveBeenCalledWith(0)
+      expect(updateClipboard).toHaveBeenCalledWith(tokenToCopy)
+      expect(wrapper.vm.userTokens[0].copied).toBe(true)
+      expect(wrapper.html()).contains('icon="bi bi-clipboard-check-fill"')
+    })
+  })
+})

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

@@ -1,4 +1,4 @@
-import { it, describe, expect, vi } from 'vitest'
+import { it, describe, expect } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
 import UploadView from '../../../views/UploadView.vue'
 import { createI18n } from 'vue-i18n'