BigW Consortium Gitlab

bootstrap_linked_tabs_spec.js.es6 1.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11
//= require lib/utils/bootstrap_linked_tabs

(() => {
  describe('Linked Tabs', () => {
    fixture.preload('linked_tabs');

    beforeEach(() => {
      fixture.load('linked_tabs');
    });

    describe('when is initialized', () => {
12 13 14 15
      beforeEach(() => {
        spyOn(window.history, 'replaceState').and.callFake(function () {});
      });

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
      it('should activate the tab correspondent to the given action', () => {
        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
          action: 'tab1',
          defaultAction: 'tab1',
          parentEl: '.linked-tabs',
        });

        expect(document.querySelector('#tab1').classList).toContain('active');
      });

      it('should active the default tab action when the action is show', () => {
        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
          action: 'show',
          defaultAction: 'tab1',
          parentEl: '.linked-tabs',
        });

        expect(document.querySelector('#tab1').classList).toContain('active');
      });
    });

    describe('on click', () => {
      it('should change the url according to the clicked tab', () => {
        const historySpy = spyOn(history, 'replaceState').and.callFake(() => {});

        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
          action: 'show',
          defaultAction: 'tab1',
          parentEl: '.linked-tabs',
        });

        const secondTab = document.querySelector('.linked-tabs li:nth-child(2) a');
        const newState = secondTab.getAttribute('href') + linkedTabs.currentLocation.search + linkedTabs.currentLocation.hash;

        secondTab.click();

        expect(historySpy).toHaveBeenCalledWith({
          turbolinks: true,
          url: newState,
        }, document.title, newState);
      });
    });
  });
})();