Add field tests

Author: skaptox

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

@@ -1,5 +1,6 @@
-import { shallowMount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils'
 import Field from './Field.vue'
+import Input from '../Input/Input.vue'
 
 let wrapper
 
@@ -15,4 +16,33 @@ describe('Field', () => {
   it('render correctly', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('adds a help <p> element in the root div.field when "message" prop is passed', async () => {
+    wrapper = mount(Field, {
+      slots: {
+        default: [Input],
+      },
+      props: {
+        type: 'is-danger',
+      },
+    })
+
+    const message = 'This is a message'
+
+    expect(wrapper.findAll('p')).toEqual([])
+
+    wrapper.setProps({ message })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('p').classes()).toEqual(['help', 'is-danger'])
+    expect(wrapper.find('p').text()).toBe(message)
+  })
+
+  it('adds a label element under the root div.field when "label" prop is passed', () => {
+    wrapper = shallowMount(Field, {
+      propsData: {
+        label: 'Some label',
+      },
+    })
+    expect(wrapper.find('label').text()).toBe('Some label')
+  })
 })

src/components/primitives/Field/Field.vue

@@ -38,10 +38,10 @@ export default {
     <label v-else-if="label" class="label" :for="labelFor">{{ label }}</label>
     <div v-if="horizontal" class="field-body">
       <div class="field" :class="{'is-grouped': grouped}">
-        <slot />
+        <slot :rounded="type" />
       </div>
     </div>
-    <slot v-else />
+    <slot :color="type" v-else />
     <p v-if="message" class="help" :class="type">
       {{ message }}
     </p>

src/components/primitives/Input/Input.vue

@@ -10,14 +10,15 @@ export default {
     rounded: Boolean,
     loading: Boolean,
     expanded: Boolean,
-    modelValue: [String, Number] 
+    modelValue: [String, Number],
   },
   emits: ['update:modelValue'],
-  setup(props, { emit, slots }) {
-    const hasLeftIcon = computed(() => Boolean(slots.leftIcon));
-    const hasRightIcon = computed(() => Boolean(slots.rightIcon));
+  setup(props, { emit, slots, attrs }) {
+    const hasLeftIcon = computed(() => Boolean(slots.leftIcon))
+    const hasRightIcon = computed(() => Boolean(slots.rightIcon))
     const value = ref(props.modelValue)
 
+
     watchEffect(() => {
       value.value = props.modelValue
     })
@@ -37,17 +38,21 @@ export default {
       {
         'is-loading': loading,
         'has-icons-left': hasLeftIcon,
-        'has-icons-right': hasRightIcon
-      }
+        'has-icons-right': hasRightIcon,
+      },
     ]">
-    <input class="input" v-bind="$attrs" v-model="value" :class="[
-      color,
-      size,
-      {
-        'is-rounded': rounded,
-        'is-expanded': expanded
-      }
-    ]" />
+    <input
+      class="input"
+      v-bind="$attrs"
+      v-model="value"
+      :class="[
+        color,
+        size,
+        {
+          'is-rounded': rounded,
+          'is-expanded': expanded,
+        },
+      ]" />
     <span class="icon is-left" v-if="hasLeftIcon">
       <slot name="leftIcon" />
     </span>