gradido/admin/src/pages/Creation.spec.js

import { mount } from '@vue/test-utils'
import Creation from './Creation.vue'

const localVue = global.localVue

const apolloQueryMock = jest.fn().mockResolvedValue({
  data: {
    searchUsers: {
      userCount: 2,
      userList: [
        {
          userId: 1,
          firstName: 'Bibi',
          lastName: 'Bloxberg',
          email: 'bibi@bloxberg.de',
          creation: [200, 400, 600],
          emailChecked: true,
        },
        {
          userId: 2,
          firstName: 'Benjamin',
          lastName: 'Blümchen',
          email: 'benjamin@bluemchen.de',
          creation: [800, 600, 400],
          emailChecked: true,
        },
      ],
    },
  },
})

const toastErrorMock = jest.fn()
const storeCommitMock = jest.fn()

const mocks = {
  $t: jest.fn((t) => t),
  $d: jest.fn((d) => d),
  $apollo: {
    query: apolloQueryMock,
  },
  $toasted: {
    error: toastErrorMock,
  },
  $store: {
    commit: storeCommitMock,
    state: {
      userSelectedInMassCreation: [],
    },
  },
}

describe('Creation', () => {
  let wrapper

  const Wrapper = () => {
    return mount(Creation, { localVue, mocks })
  }

  describe('mount', () => {
    beforeEach(() => {
      jest.clearAllMocks()
      wrapper = Wrapper()
    })

    it('has a DIV element with the class.creation', () => {
      expect(wrapper.find('div.creation').exists()).toBeTruthy()
    })

    describe('apollo returns user array', () => {
      it('calls the searchUser query', () => {
        expect(apolloQueryMock).toBeCalledWith(
          expect.objectContaining({
            variables: {
              searchText: '',
              currentPage: 1,
              pageSize: 25,
            },
          }),
        )
      })

      it('has two rows in the left table', () => {
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr')).toHaveLength(2)
      })

      it('has nwo rows in the right table', () => {
        expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(0)
      })

      it('has correct data in first row ', () => {
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain('Bibi')
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
          'Bloxberg',
        )
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
          '200 | 400 | 600',
        )
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
          'bibi@bloxberg.de',
        )
      })

      it('has correct data in second row ', () => {
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(1).text()).toContain(
          'Benjamin',
        )
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(1).text()).toContain(
          'Blümchen',
        )
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(1).text()).toContain(
          '800 | 600 | 400',
        )
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(1).text()).toContain(
          'benjamin@bluemchen.de',
        )
      })
    })

    describe('push item', () => {
      beforeEach(() => {
        wrapper.findAll('table').at(0).findAll('tbody > tr').at(1).find('button').trigger('click')
      })

      it('has one item in left table', () => {
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr')).toHaveLength(1)
      })

      it('has one item in right table', () => {
        expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(1)
      })

      it('has the correct user in left table', () => {
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
          'bibi@bloxberg.de',
        )
      })

      it('has the correct user in right table', () => {
        expect(wrapper.findAll('table').at(1).findAll('tbody > tr').at(0).text()).toContain(
          'benjamin@bluemchen.de',
        )
      })

      it('updates userSelectedInMassCreation in store', () => {
        expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', [
          {
            userId: 2,
            firstName: 'Benjamin',
            lastName: 'Blümchen',
            email: 'benjamin@bluemchen.de',
            creation: [800, 600, 400],
            showDetails: false,
            emailChecked: true,
          },
        ])
      })
    })

    describe('remove item', () => {
      beforeEach(async () => {
        await wrapper
          .findAll('table')
          .at(0)
          .findAll('tbody > tr')
          .at(1)
          .find('button')
          .trigger('click')
        await wrapper
          .findAll('table')
          .at(1)
          .findAll('tbody > tr')
          .at(0)
          .find('button')
          .trigger('click')
      })

      it('opens a dialog', () => {
        expect(wrapper.findAll('#overlay').at(1).isVisible()).toBeTruthy()
      })

      describe('cancel remove item', () => {
        beforeEach(async () => {
          await wrapper.findAll('#overlay').at(1).findAll('button').at(0).trigger('click')
        })

        it('closes the dialog', () => {
          expect(wrapper.findAll('#overlay').at(1).isVisible()).toBeFalsy()
        })

        it('has one item in left table', () => {
          expect(wrapper.findAll('table').at(0).findAll('tbody > tr')).toHaveLength(1)
        })

        it('has one item in right table', () => {
          expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(1)
        })
      })

      describe('confirm remove item', () => {
        beforeEach(async () => {
          await wrapper.findAll('#overlay').at(1).findAll('button').at(1).trigger('click')
        })

        it('closes the dialog', () => {
          expect(wrapper.findAll('#overlay').at(1).isVisible()).toBeFalsy()
        })

        it('has two items in left table', () => {
          expect(wrapper.findAll('table').at(0).findAll('tbody > tr')).toHaveLength(2)
        })

        it('has the removed user in first row', () => {
          expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
            'benjamin@bluemchen.de',
          )
        })

        it('has no items in right table', () => {
          expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(0)
        })

        it('commits empty array as userSelectedInMassCreation', () => {
          expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', [])
        })
      })
    })

    // this can only happen after API call in CreationForm
    describe('remove all bookmarks', () => {
      beforeEach(async () => {
        await wrapper
          .findAll('table')
          .at(0)
          .findAll('tbody > tr')
          .at(1)
          .find('button')
          .trigger('click')
        jest.clearAllMocks()
        wrapper.findComponent({ name: 'CreationFormular' }).vm.$emit('remove-all-bookmark')
      })

      it('has no items in right table', () => {
        expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(0)
      })

      it('commits empty array to userSelectedInMassCreation', () => {
        expect(storeCommitMock).toBeCalledWith('setUserSelectedInMassCreation', [])
      })

      it('calls searchUsers', () => {
        expect(apolloQueryMock).toBeCalled()
      })
    })

    describe('store has items in userSelectedInMassCreation', () => {
      beforeEach(() => {
        mocks.$store.state.userSelectedInMassCreation = [
          {
            userId: 2,
            firstName: 'Benjamin',
            lastName: 'Blümchen',
            email: 'benjamin@bluemchen.de',
            creation: [800, 600, 400],
            showDetails: false,
            emailChecked: true,
          },
        ]
        wrapper = Wrapper()
      })

      it('has one item in left table', () => {
        expect(wrapper.findAll('table').at(0).findAll('tbody > tr')).toHaveLength(1)
      })

      it('has one item in right table', () => {
        expect(wrapper.findAll('table').at(1).findAll('tbody > tr')).toHaveLength(1)
      })

      it('has the stored user in second row', () => {
        expect(wrapper.findAll('table').at(1).findAll('tbody > tr').at(0).text()).toContain(
          'benjamin@bluemchen.de',
        )
      })
    })

    describe('watchers', () => {
      beforeEach(() => {
        jest.clearAllMocks()
      })

      it('calls API when criteria changes', async () => {
        await wrapper.setData({ criteria: 'XX' })
        expect(apolloQueryMock).toBeCalledWith(
          expect.objectContaining({
            variables: {
              searchText: 'XX',
              currentPage: 1,
              pageSize: 25,
            },
          }),
        )
      })

      it('calls API when currentPage changes', async () => {
        await wrapper.setData({ currentPage: 2 })
        expect(apolloQueryMock).toBeCalledWith(
          expect.objectContaining({
            variables: {
              searchText: '',
              currentPage: 2,
              pageSize: 25,
            },
          }),
        )
      })
    })

    describe('apollo returns error', () => {
      beforeEach(() => {
        apolloQueryMock.mockRejectedValue({
          message: 'Ouch',
        })
        wrapper = Wrapper()
      })

      it('toasts an error message', () => {
        expect(toastErrorMock).toBeCalledWith('Ouch')
      })
    })
  })
})