summaryrefslogtreecommitdiff
path: root/spec/javascripts/bootstrap_linked_tabs_spec.js
blob: a27dc48b3fd8b1f15daf192331c111ec0d9caedf (plain)
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
import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';

(() => {
  // TODO: remove this hack!
  // PhantomJS causes spyOn to panic because replaceState isn't "writable"
  let phantomjs;
  try {
    phantomjs = !Object.getOwnPropertyDescriptor(window.history, 'replaceState').writable;
  } catch (err) {
    phantomjs = false;
  }

  describe('Linked Tabs', () => {
    preloadFixtures('static/linked_tabs.html.raw');

    beforeEach(() => {
      loadFixtures('static/linked_tabs.html.raw');
    });

    describe('when is initialized', () => {
      beforeEach(() => {
        if (!phantomjs) {
          spyOn(window.history, 'replaceState').and.callFake(function () {});
        }
      });

      it('should activate the tab correspondent to the given action', () => {
        const linkedTabs = new 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 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 = !phantomjs && spyOn(history, 'replaceState').and.callFake(() => {});

        const linkedTabs = new LinkedTabs({
          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();

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