lock_button_spec.js 3.42 KB
Newer Older
1
import { GlButton, GlModal } from '@gitlab/ui';
Jacques Erasmus's avatar
Jacques Erasmus committed
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
import { shallowMount, createLocalVue } from '@vue/test-utils';
import { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
import LockButton from 'ee_component/repository/components/lock_button.vue';
import createMockApollo from 'helpers/mock_apollo_helper';
import lockPathMutation from '~/repository/mutations/lock_path.mutation.graphql';

const DEFAULT_PROPS = {
  name: 'some_file.js',
  path: 'some/path',
  projectPath: 'some/project/path',
  isLocked: false,
  canLock: true,
};

describe('LockButton component', () => {
  const localVue = createLocalVue();
  let wrapper;

  const createMockApolloProvider = (resolverMock) => {
    localVue.use(VueApollo);
    return createMockApollo([[lockPathMutation, resolverMock]]);
  };

  const createComponent = (props = {}, lockMutation = jest.fn()) => {
    wrapper = shallowMount(LockButton, {
      localVue,
      apolloProvider: createMockApolloProvider(lockMutation),
      propsData: {
        ...DEFAULT_PROPS,
        ...props,
      },
    });
  };

  afterEach(() => {
    wrapper.destroy();
  });

  describe('lock button', () => {
    let lockMutationMock;
43
    const mockEvent = { preventDefault: jest.fn() };
Jacques Erasmus's avatar
Jacques Erasmus committed
44
    const findLockButton = () => wrapper.find(GlButton);
45 46 47
    const findModal = () => wrapper.findComponent(GlModal);
    const clickSubmit = () => findModal().vm.$emit('primary', mockEvent);
    const clickHide = () => findModal().vm.$emit('hide', mockEvent);
Jacques Erasmus's avatar
Jacques Erasmus committed
48 49 50 51 52

    beforeEach(() => {
      lockMutationMock = jest.fn();
    });

53
    it('disables the lock button if canLock is set to false', () => {
Jacques Erasmus's avatar
Jacques Erasmus committed
54 55
      createComponent({ canLock: false });

56
      expect(findLockButton().props('disabled')).toBe(true);
Jacques Erasmus's avatar
Jacques Erasmus committed
57 58 59 60 61 62 63 64 65 66 67 68 69 70
    });

    it.each`
      isLocked | label
      ${false} | ${'Lock'}
      ${true}  | ${'Unlock'}
    `('renders the correct button labels', ({ isLocked, label }) => {
      createComponent({ isLocked });

      expect(findLockButton().text()).toBe(label);
    });

    it('passes the correct prop if lockLoading is set to true', async () => {
      createComponent();
71 72
      // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details
      // eslint-disable-next-line no-restricted-syntax
Jacques Erasmus's avatar
Jacques Erasmus committed
73 74 75 76 77 78 79
      wrapper.setData({ lockLoading: true });

      await nextTick();

      expect(findLockButton().props('loading')).toBe(true);
    });

80
    it('displays a confirm modal when the lock button is clicked', () => {
Jacques Erasmus's avatar
Jacques Erasmus committed
81 82
      createComponent();
      findLockButton().vm.$emit('click');
83 84
      expect(findModal().text()).toBe('Are you sure you want to lock some_file.js?');
    });
Jacques Erasmus's avatar
Jacques Erasmus committed
85

86 87 88 89 90 91
    it('should hide the confirm modal when a hide action is triggered', () => {
      createComponent();
      findLockButton().vm.$emit('click');
      expect(wrapper.vm.isModalVisible).toBe(true);
      clickHide();
      expect(wrapper.vm.isModalVisible).toBe(false);
Jacques Erasmus's avatar
Jacques Erasmus committed
92 93
    });

94
    it('executes a lock mutation once lock is confirmed', async () => {
Jacques Erasmus's avatar
Jacques Erasmus committed
95 96
      createComponent({}, lockMutationMock);
      findLockButton().vm.$emit('click');
97
      clickSubmit();
Jacques Erasmus's avatar
Jacques Erasmus committed
98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
      expect(lockMutationMock).toHaveBeenCalledWith({
        filePath: 'some/path',
        lock: true,
        projectPath: 'some/project/path',
      });
    });

    it('does not execute a lock mutation if lock not confirmed', () => {
      createComponent({}, lockMutationMock);
      findLockButton().vm.$emit('click');

      expect(lockMutationMock).not.toHaveBeenCalled();
    });
  });
});