Feat/upload interface

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

@@ -0,0 +1,127 @@
+import { test, describe, expect } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import Button from '../../../components/Button.vue'
+import i18n from '../config'
+describe('Template', () => {
+  describe('Props', () => {
+    test('should have default props', () => {
+      const wrapper = shallowMount(Button, {
+        global: {
+          plugins: [i18n]
+        }
+      })
+      expect(wrapper.vm.icon).toBe(null)
+      expect(wrapper.vm.disabled).toBe(false)
+      expect(wrapper.vm.isLoading).toBe(false)
+      expect(wrapper.vm.text).toBe('')
+      expect(wrapper.vm.tooltip).toBe('')
+      expect(wrapper.vm.look).toBe('')
+      expect(wrapper.vm.type).toBe('button')
+    })
+  })
+  describe('When the component is disabled', () => {
+    test('should render the button with disabled class', () => {
+      const wrapper = shallowMount(Button, {
+        global: {
+          plugins: [i18n]
+        },
+        props: {
+          disabled: true
+        }
+      })
+      expect(wrapper.html()).contains('class="default disabled"')
+    })
+  })
+  describe('When the component is loading', () => {
+    test('should render the button with disabled class', () => {
+      const wrapper = shallowMount(Button, {
+        global: {
+          plugins: [i18n]
+        },
+        props: {
+          isLoading: true
+        }
+      })
+      expect(wrapper.html()).contains('class="default disabled"')
+    })
+  })
+  describe('When the component have an icon', () => {
+    test('should render the button the icon displayed', () => {
+      const wrapper = shallowMount(Button, {
+        global: {
+          plugins: [i18n]
+        },
+        props: {
+          icon: 'my-icon'
+        }
+      })
+      expect(wrapper.html()).contains('<i')
+      expect(wrapper.html()).contains('class="my-icon icon"')
+    })
+  })
+  describe('When the component have a type submit', () => {
+    test('should render the type to submit', () => {
+      const wrapper = shallowMount(Button, {
+        global: {
+          plugins: [i18n]
+        },
+        props: {
+          type: 'submit'
+        }
+      })
+      expect(wrapper.html()).contains('type="submit"')
+    })
+  })
+  describe('When the component have tooltip', () => {
+    test('should render the button with a tooltip', () => {
+      const wrapper = shallowMount(Button, {
+        global: {
+          plugins: [i18n]
+        },
+        props: {
+          tooltip: 'my tooltip'
+        }
+      })
+      expect(wrapper.html()).contains(
+        'class="tooltip-button">my tooltip</span>'
+      )
+    })
+  })
+  describe('When the component have a text', () => {
+    test('should render the button with a text', () => {
+      const wrapper = shallowMount(Button, {
+        global: {
+          plugins: [i18n]
+        },
+        props: {
+          text: 'My text'
+        }
+      })
+      expect(wrapper.html()).contains('class="text">My text</span>')
+    })
+  })
+  describe('When the component have specific look', () => {
+    test('should render the button with a specific class', () => {
+      const wrapper = shallowMount(Button, {
+        global: {
+          plugins: [i18n]
+        },
+        props: {
+          look: 'my--look'
+        }
+      })
+      expect(wrapper.html()).contains('class="my--look default"')
+    })
+  })
+  describe('When the button is trigger', () => {
+    test('should emit', async () => {
+      const wrapper = shallowMount(Button, {
+        global: {
+          plugins: [i18n]
+        }
+      })
+      await wrapper.trigger('click')
+      expect(wrapper.emitted()).toHaveProperty('trigger')
+    })
+  })
+})