Add primitive components' basic tests

Author: skaptox

src/components/primitives/Avatar/Avatar.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Avatar from './Avatar.vue'
+
+let wrapper
+
+describe('Avatar', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Avatar)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/primitives/Avatar/Avatar.vue

@@ -3,62 +3,69 @@
 import { onBeforeMount, ref } from 'vue'
 
 export default {
-    name: 'VAvatar',
-    props: {
-     alt: String ,
-     size: {
-       type: String,
-       default: "is-64x64"
-     },
-     rounded: {
-       type: Boolean,
-       default: true
-     },
-     background: {
-       type: String,
-       default: 'has-background-link'
-     },
-     text: {
-       type: String,
-       default: 'has-text-white'
-     },
-     src: {
-       type: String,
-       default: null
-     },
-     dataSrc: {
-       type: String,
-       default: null
-     },
-     customClass: String
+  name: 'VAvatar',
+  props: {
+    alt: String,
+    size: {
+      type: String,
+      default: 'is-64x64',
     },
-    setup(props){
-        const source = ref(props.src || props.dataSrc)
-        const background = ref(props.background)
-        const text = ref(props.text)
-        const alt = ref(props.alt)
+    rounded: {
+      type: Boolean,
+      default: true,
+    },
+    background: {
+      type: String,
+      default: 'has-background-link',
+    },
+    text: {
+      type: String,
+      default: 'has-text-white',
+    },
+    src: {
+      type: String,
+      default: null,
+    },
+    dataSrc: {
+      type: String,
+      default: null,
+    },
+    customClass: String,
+  },
+  setup(props) {
+    const source = ref(props.src || props.dataSrc)
+    const background = ref(props.background)
+    const text = ref(props.text)
+    const alt = ref(props.alt)
 
-        onBeforeMount(async() => {
-          if (props.dataSrc && hasBenchieSupport) {
-            source.value = await t(props.dataSrc, $__CDN)
-          }  
-        })
+    onBeforeMount(async () => {
+      if (props.dataSrc && hasBenchieSupport) {
+        source.value = await t(props.dataSrc, $__CDN)
+      }
+    })
 
-        const backgroundColor = source.value ? '' : background.value
+    const backgroundColor = source.value ? '' : background.value
 
-        const textColor = source.value ? '' : text.value
+    const textColor = source.value ? '' : text.value
 
-        const caption = alt.value.split(" ")[0][0] + alt.value.split(" ")[1][0]
+    const caption = alt.value ? alt.value.split(' ')[0][0] + alt.value.split(' ')[1][0] : ""
 
-        return { source, backgroundColor, textColor, caption }
-    }
+    return { source, backgroundColor, textColor, caption }
+  },
 }
 </script>
 
 <template>
-  <figure class="image is-flex is-justify-content-center is-align-items-center mx-1" :class="[size, backgroundColor, textColor]">
-    <img :src="source" :data-src="dataSrc" :alt="alt" v-if="source" :class="[customClass, {'is-rounded': rounded }]" />
-    <span class="is-size-4" v-if="!source" :class="[{'is-rounded': rounded }]">
+  <figure
+    class="image is-flex is-justify-content-center is-align-items-center mx-1"
+    :class="[size, backgroundColor, textColor]">
+    <img
+      :src="source"
+      :data-src="dataSrc"
+      :alt="alt"
+      v-if="source"
+      :class="[customClass, { 'is-rounded': rounded }]" />
+    <span class="is-size-4" v-if="!source" :class="[{ 'is-rounded': rounded }]">
       {{ caption }}
     </span>
   </figure>

src/components/primitives/Avatar/__snapshots__/Avatar.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar render correctly 1`] = `
+<figure class="image is-flex is-justify-content-center is-align-items-center mx-1 is-64x64 has-background-link has-text-white">
+  <!--v-if--><span class="is-size-4 is-rounded"></span>
+</figure>
+`;

src/components/primitives/Button/__snapshots__/Button.spec.js.snap

@@ -4,4 +4,4 @@ exports[`Button render correctly 1`] = `
 <button class="button is-primary" type="button">
   <!--v-if-->
 </button>
-`;
+`;

src/components/primitives/Checkbox/Checkbox.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Checkbox from './Checkbox.vue'
+
+let wrapper
+
+describe('Checkbox', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Checkbox)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/primitives/Checkbox/__snapshots__/Checkbox.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox render correctly 1`] = `<label class="v-checkbox checkbox"><input type="checkbox" true-value="true" false-value="false"><span class="check"></span><span class="control-label"></span></label>`;

src/components/primitives/Field/Field.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Field from './Field.vue'
+
+let wrapper
+
+describe('Field', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Field)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/primitives/Field/__snapshots__/Field.spec.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Field render correctly 1`] = `
+<div class="field">
+  <!--v-if-->
+  <!--v-if-->
+</div>
+`;

src/components/primitives/Icon/Icon.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Icon from './Icon.vue'
+
+let wrapper
+
+describe('Icon', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Icon)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/primitives/Icon/__snapshots__/Icon.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon render correctly 1`] = `<span class="icon"><svg height="100%" width="100%" class=""><use href="/undefined.svg#undefined"></use></svg></span>`;

src/components/primitives/Image/Image.spec.js

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils'
+// eslint-disable-next-line no-shadow -- ignore warning
+import Image from './Image.vue'
+
+let wrapper
+
+describe('Image', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Image)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/primitives/Image/__snapshots__/Image.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image render correctly 1`] = `<figure class="image"><img class="img"></figure>`;

src/components/primitives/Input/Input.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Input from './Input.vue'
+
+let wrapper
+
+describe('Input', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Input)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/primitives/Input/__snapshots__/Input.spec.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input render correctly 1`] = `
+<div class="control"><input class="input">
+  <!--v-if-->
+  <!--v-if-->
+</div>
+`;

src/components/primitives/Media/Media.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Media from './Media.vue'
+
+let wrapper
+
+describe('Media', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Media)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/primitives/Media/__snapshots__/Media.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Media render correctly 1`] = `
+<article class="media">
+  <div class="media-left"></div>
+  <div class="media-content"></div>
+  <div class="media-right"></div>
+</article>
+`;

src/components/primitives/Modal/Modal.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Modal from './Modal.vue'
+
+let wrapper
+
+describe('Modal', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Modal)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/primitives/Modal/__snapshots__/Modal.spec.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal render correctly 1`] = `
+<div class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-content"></div><button class="modal-close" aria-label="close"></button>
+</div>
+`;

src/components/primitives/Progress/Progress.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Progress from './Progress.vue'
+
+let wrapper
+
+describe('Progress', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Progress)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/primitives/Progress/__snapshots__/Progress.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Progress render correctly 1`] = `
+<div class="progress-wrapper"><progress class="progress is-darkgrey" max="100"></progress>
+  <!--v-if-->
+</div>
+`;

src/components/primitives/Select/Select.spec.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils'
+import Select from './Select.vue'
+
+let wrapper
+
+describe('Select', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Select)
+  })
+
+  it('is called', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it('render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/primitives/Select/__snapshots__/Select.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select render correctly 1`] = `<div class="control"><span class="select"><select><!--v-if--></select></span></div>`;