WebApp/components/Global/Elements/BlockButton/BlockButton.test.js at 65bdce9d7c3982d46502bfe3e9691bb91a4427f3 · Human-Connection/WebApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import BlockButton from './BlockButton'

const localVue = createLocalVue()

localVue.use(Vuex)

const propsData = {
  foreignEntity: {
    _id: 4711,
    name: 'author'
  },
  isFollowing: false
}

const mocks = { $t: () => {} }

describe('BlockButton.vue', () => {
  let actions
  let getters
  let store
  let wrapper

  beforeEach(() => {
    getters = {
      'feathers-vuex-usersettings/isBlacklisted': () => () => false,
      'feathers-vuex-usersettings/isPending': () => false,
      'feathers-vuex-usersettings/current': () => { return { blacklist: [] } }
    }
    actions = {
      'feathers-vuex-usersettings/toggleBlacklist': jest.fn()
    }
    store = new Vuex.Store({
      state: {}, getters, actions
    })
  })

  test('renders', () => {
    wrapper = shallowMount(BlockButton, { store, localVue, propsData, mocks })
    expect(wrapper.is('hc-button-stub')).toBeTruthy()
  })

  describe('request pending', () => {
    beforeEach(() => {
      getters['feathers-vuex-usersettings/isPending'] = () => true
      store = new Vuex.Store({state: {}, getters, actions})
      wrapper = shallowMount(BlockButton, { store, localVue, propsData, mocks })
    })

    test('shows a loading spinner', () => {
      expect(wrapper.find('hc-button-stub').attributes().isloading).toBeTruthy()
    })

    test('is disabled', () => {
      expect(wrapper.find('hc-button-stub').attributes().disabled).toBeTruthy()
    })
  })

  describe('no request pending', () => {
    test('is enabled', () => {
      wrapper = shallowMount(BlockButton, { store, localVue, propsData, mocks })
      expect(wrapper.findAll('hc-button-stub')).toHaveLength(1)
      expect(wrapper.find('hc-button-stub').attributes()).toEqual(expect.not.objectContaining({isloading: 'true'}))
    })

    describe('not blacklisted', () => {
      test('shows a neutral ban icon', () => {
        expect(wrapper.find('hc-icon-stub').classes()).not.toContain('is-danger')
      })
    })

    describe('is blacklisted', () => {
      beforeEach(() => {
        getters['feathers-vuex-usersettings/isBlacklisted'] = () => () => true
        store = new Vuex.Store({state: {}, getters, actions})
        wrapper = shallowMount(BlockButton, { store, localVue, propsData, mocks })
      })

      test('gives visual feedback with a red colour', () => {
        expect(wrapper.find('hc-icon-stub').classes()).toContain('is-danger')
      })
    })

    test('dispatches feathers-vuex-usersettings/toggleBlacklist on click', () => {
      wrapper = mount(BlockButton, {
        store,
        localVue,
        mocks: {
          $t: () => {},
          $snackbar: {
            open () { }
          }
        },
        propsData
      })
      wrapper.find('button').trigger('click')
      expect(actions['feathers-vuex-usersettings/toggleBlacklist']).toHaveBeenCalled()
    })

    describe('isFollowed === true', () => {
      beforeEach(() => {
        const props = Object.assign({}, propsData, {
          isFollowing: true
        })
        wrapper = shallowMount(BlockButton, { store, localVue, propsData: props, mocks })
      })

      test('is disabled', () => {
        expect(wrapper.find('hc-button-stub').attributes().disabled).toEqual('true')
      })
    })

    describe('isFollowed === false', () => {
      beforeEach(() => {
        const props = Object.assign({}, propsData, {
          isFollowing: false
        })
        wrapper = shallowMount(BlockButton, { store, localVue, propsData: props, mocks })
      })

      test('is disabled', () => {
        expect(wrapper.find('hc-button-stub').attributes().disabled).toEqual(undefined)
      })
    })
  })
})