BigW Consortium Gitlab

loading_button_spec.js 2.76 KB
Newer Older
Eric Eastwood committed
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
import Vue from 'vue';
import loadingButton from '~/vue_shared/components/loading_button.vue';
import mountComponent from '../../helpers/vue_mount_component_helper';

const LABEL = 'Hello';

describe('LoadingButton', function () {
  let vm;
  let LoadingButton;

  beforeEach(() => {
    LoadingButton = Vue.extend(loadingButton);
  });

  afterEach(() => {
    vm.$destroy();
  });

  describe('loading spinner', () => {
    it('shown when loading', () => {
      vm = mountComponent(LoadingButton, {
        loading: true,
      });

      expect(vm.$el.querySelector('.js-loading-button-icon')).toBeDefined();
    });
  });

  describe('disabled state', () => {
    it('disabled when loading', () => {
      vm = mountComponent(LoadingButton, {
        loading: true,
      });

      expect(vm.$el.disabled).toEqual(true);
    });

    it('not disabled when normal', () => {
      vm = mountComponent(LoadingButton, {
        loading: false,
      });

      expect(vm.$el.disabled).toEqual(false);
    });
  });

  describe('label', () => {
    it('shown when normal', () => {
      vm = mountComponent(LoadingButton, {
        loading: false,
        label: LABEL,
      });
      const label = vm.$el.querySelector('.js-loading-button-label');

      expect(label.textContent.trim()).toEqual(LABEL);
    });

    it('shown when loading', () => {
      vm = mountComponent(LoadingButton, {
        loading: true,
        label: LABEL,
      });
      const label = vm.$el.querySelector('.js-loading-button-label');

      expect(label.textContent.trim()).toEqual(LABEL);
    });
  });

69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
  describe('container class', () => {
    it('should default to btn btn-align-content', () => {
      vm = mountComponent(LoadingButton, {});
      expect(vm.$el.classList.contains('btn')).toEqual(true);
      expect(vm.$el.classList.contains('btn-align-content')).toEqual(true);
    });

    it('should be configurable through props', () => {
      vm = mountComponent(LoadingButton, {
        containerClass: 'test-class',
      });
      expect(vm.$el.classList.contains('btn')).toEqual(false);
      expect(vm.$el.classList.contains('btn-align-content')).toEqual(false);
      expect(vm.$el.classList.contains('test-class')).toEqual(true);
    });
  });

Eric Eastwood committed
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
  describe('click callback prop', () => {
    it('calls given callback when normal', () => {
      vm = mountComponent(LoadingButton, {
        loading: false,
      });
      spyOn(vm, '$emit');

      vm.$el.click();

      expect(vm.$emit).toHaveBeenCalledWith('click', jasmine.any(Object));
    });

    it('does not call given callback when disabled because of loading', () => {
      vm = mountComponent(LoadingButton, {
        loading: true,
      });
      spyOn(vm, '$emit');

      vm.$el.click();

      expect(vm.$emit).not.toHaveBeenCalled();
    });
  });
});