First test case implemented

Author: roschaefer

components/Global/Elements/BlockButton/BlockButton.vue

@@ -2,8 +2,8 @@
   <div class="columns is-mobile field has-text-centered">
     <div class="column control has-text-centered">
       <hc-button color="button"
-                 :disabled="blacklistPending"
-                 :isLoading="blacklistPending"
+                 :disabled="isPending"
+                 :isLoading="isPending"
                  @click="clickBlacklistButton">
         <template v-if="isBlacklisted">
           <hc-icon icon="ban" :class="['icon-left', 'is-danger']" /> {{ $t('component.blacklist.buttonLabelUnblock') }}
@@ -16,25 +16,17 @@
   </div>
 </template>
 <script>
-import icon from '~/components/Global/Elements/Icon/Icon.vue'
-import button from '~/components/Global/Elements/Button/Button.vue'
+import Icon from '../Icon/Icon.vue'
+import Button from '../Button/Button.vue'
 
 export default {
   name: 'hc-block-button',
   components: {
-    button,
-    icon
+    Button,
+    Icon
   },
   props: {
-    entity: {
-      type: Object,
-      required: true
-    },
-    currentUser: {
-      type: Object
-      // TODO: required: true
-    },
-    blacklistPending: {
+    isPending: {
       type: Boolean,
       default: false
     },

test/components/Global/Element/BlockButton/BlockButton.test.js

@@ -1,39 +1,41 @@
 import test from 'ava'
-import { shallowMount, mount } from '@vue/test-utils'
-import { render } from '@vue/server-test-utils'
+import { mount } from '@vue/test-utils'
 import BlockButton from '../../../../../components/Global/Elements/BlockButton/BlockButton'
+import Icon from '../../../../../components/Global/Elements/Icon/Icon.vue'
+import Button from '../../../../../components/Global/Elements/Button/Button.vue'
 
-const entity = { id: 42 }
-const currentUser = { id: 47 }
-const toggleBlacklist = () => {}
-
-test('It renders a `<div>`.', (t) => {
-  const entity = { id: 42 }
-  const wrapper = shallowMount(BlockButton, {
+const mountBlockButton = (propsData = {}) => {
+  return mount(BlockButton, {
     mocks: { $t: () => {} },
-    props: {entity, currentUser, toggleBlacklist}
+    propsData
   })
+}
 
+test('It renders a `<div>`.', (t) => {
+  const wrapper = mountBlockButton()
   t.true(wrapper.is('div'))
 })
 
-test('shows a button, when currentUser !== foreignEntity', (t) => {
-  const wrapper = mount(BlockButton, {
-    mocks: { $t: () => {} },
-    props: {entity, currentUser, toggleBlacklist}
-  })
-
-  t.truthy(wrapper.contains('i'))
-})
-
 test('is enabled when no request is currently pending', (t) => {
+  const wrapper = mountBlockButton({isPending: false})
+  t.deepEqual(wrapper.findAll('hc-button').length, 1)
+  t.deepEqual(wrapper.find('hc-button').attributes(), {color: 'button'})
 })
 
 test('shows a loading spinner when a request is pending', (t) => {
+  const wrapper = mountBlockButton({isPending: true})
+  t.truthy(wrapper.find('hc-button').attributes().isloading)
 })
 
 test('is disabled when a request is pending', (t) => {
+  const wrapper = mountBlockButton({isPending: true})
+  t.truthy(wrapper.find('hc-button').attributes().disabled)
+})
+
+/*
+test('calls toggleBlacklist on click', (t) => {
 })
 
 test('opens a confirmation dialog if foreignEntity is being followed', (t) => {
 })
+*/

test/helpers/setup.js

@@ -7,5 +7,3 @@ require('browser-env')()
 hooks('vue').plugin('vue').push()
 // Setup vue and js files to be processed by `require-extension-hooks-babel`
 hooks(['vue', 'js']).plugin('babel', { plugins: ['transform-object-rest-spread'] }).push()
-
-