summaryrefslogtreecommitdiff
path: root/spec/javascripts/visibility_select_spec.js
blob: 9727c03c91e09d9e7393db129b04af33156bf25f (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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
require('~/visibility_select');

(() => {
  const VisibilitySelect = gl.VisibilitySelect;

  describe('VisibilitySelect', function () {
    const lockedElement = document.createElement('div');
    lockedElement.dataset.helpBlock = 'lockedHelpBlock';

    const checkedElement = document.createElement('div');
    checkedElement.dataset.description = 'checkedDescription';

    const mockElements = {
      container: document.createElement('div'),
      select: document.createElement('div'),
      '.help-block': document.createElement('div'),
      '.js-locked': lockedElement,
      'option:checked': checkedElement,
    };

    beforeEach(function () {
      spyOn(Element.prototype, 'querySelector').and.callFake(selector => mockElements[selector]);
    });

    describe('#constructor', function () {
      beforeEach(function () {
        this.visibilitySelect = new VisibilitySelect(mockElements.container);
      });

      it('sets the container member', function () {
        expect(this.visibilitySelect.container).toEqual(mockElements.container);
      });

      it('queries and sets the helpBlock member', function () {
        expect(Element.prototype.querySelector).toHaveBeenCalledWith('.help-block');
        expect(this.visibilitySelect.helpBlock).toEqual(mockElements['.help-block']);
      });

      it('queries and sets the select member', function () {
        expect(Element.prototype.querySelector).toHaveBeenCalledWith('select');
        expect(this.visibilitySelect.select).toEqual(mockElements.select);
      });

      describe('if there is no container element provided', function () {
        it('throws an error', function () {
          expect(() => new VisibilitySelect()).toThrowError('VisibilitySelect requires a container element as argument 1');
        });
      });
    });

    describe('#init', function () {
      describe('if there is a select', function () {
        beforeEach(function () {
          this.visibilitySelect = new VisibilitySelect(mockElements.container);
        });

        it('calls updateHelpText', function () {
          spyOn(VisibilitySelect.prototype, 'updateHelpText');
          this.visibilitySelect.init();
          expect(this.visibilitySelect.updateHelpText).toHaveBeenCalled();
        });

        it('adds a change event listener', function () {
          spyOn(this.visibilitySelect.select, 'addEventListener');
          this.visibilitySelect.init();
          expect(this.visibilitySelect.select.addEventListener.calls.argsFor(0)).toContain('change');
        });
      });

      describe('if there is no select', function () {
        beforeEach(function () {
          mockElements.select = undefined;
          this.visibilitySelect = new VisibilitySelect(mockElements.container);
          this.visibilitySelect.init();
        });

        it('updates the helpBlock text to the locked `data-help-block` messaged', function () {
          expect(this.visibilitySelect.helpBlock.textContent)
            .toEqual(lockedElement.dataset.helpBlock);
        });

        afterEach(function () {
          mockElements.select = document.createElement('div');
        });
      });
    });

    describe('#updateHelpText', function () {
      beforeEach(function () {
        this.visibilitySelect = new VisibilitySelect(mockElements.container);
        this.visibilitySelect.init();
      });

      it('updates the helpBlock text to the selected options `data-description`', function () {
        expect(this.visibilitySelect.helpBlock.textContent)
          .toEqual(checkedElement.dataset.description);
      });
    });
  });
})();