BigW Consortium Gitlab

issuable_time_tracker_spec.js.es6 7.51 KB
Newer Older
1
/* eslint-disable */
2 3 4 5

require('jquery');
require('vue');
require('~/issuable/time_tracking/components/time_tracker');
6 7

function initTimeTrackingComponent(opts) {
8
  setFixtures(`
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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202
    <div>
      <div id="mock-container"></div>
    </div>
  `);

  this.initialData = {
    time_estimate: opts.timeEstimate,
    time_spent: opts.timeSpent,
    human_time_estimate: opts.timeEstimateHumanReadable,
    human_time_spent: opts.timeSpentHumanReadable,
    docsUrl: '/help/workflow/time_tracking.md',
  };

  const TimeTrackingComponent = Vue.component('issuable-time-tracker');
  this.timeTracker = new TimeTrackingComponent({
    el: '#mock-container',
    propsData: this.initialData,
  });
}

((gl) => {
  describe('Issuable Time Tracker', function() {
    describe('Initialization', function() {
      beforeEach(function() {
        initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
      });

      it('should return something defined', function() {
        expect(this.timeTracker).toBeDefined();
      });

      it ('should correctly set timeEstimate', function(done) {
        Vue.nextTick(() => {
          expect(this.timeTracker.timeEstimate).toBe(this.initialData.time_estimate);
          done();
        });
      });
      it ('should correctly set time_spent', function(done) {
        Vue.nextTick(() => {
          expect(this.timeTracker.timeSpent).toBe(this.initialData.time_spent);
          done();
        });
      });
    });

    describe('Content Display', function() {
      describe('Panes', function() {
        describe('Comparison pane', function() {
          beforeEach(function() {
            initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '', timeSpentHumanReadable: '' });
          });

          it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', function(done) {
            Vue.nextTick(() => {
              const $comparisonPane = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane');
              expect(this.timeTracker.showComparisonState).toBe(true);
              done();
            });
          });

          describe('Remaining meter', function() {
            it('should display the remaining meter with the correct width', function(done) {
              Vue.nextTick(() => {
                const meterWidth = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane .meter-fill').style.width;
                const correctWidth = '5%';

                expect(meterWidth).toBe(correctWidth);
                done();
              })
            });

            it('should display the remaining meter with the correct background color when within estimate', function(done) {
              Vue.nextTick(() => {
                const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .within_estimate .meter-fill');
                expect(styledMeter.length).toBe(1);
                done()
              });
            });

            it('should display the remaining meter with the correct background color when over estimate', function(done) {
              this.timeTracker.time_estimate = 100000;
              this.timeTracker.time_spent = 20000000;
              Vue.nextTick(() => {
                const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .over_estimate .meter-fill');
                expect(styledMeter.length).toBe(1);
                done();
              });
            });
          });
        });

        describe("Estimate only pane", function() {
          beforeEach(function() {
            initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 0, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '' });
          });

          it('should display the human readable version of time estimated', function(done) {
            Vue.nextTick(() => {
              const estimateText = this.timeTracker.$el.querySelector('.time-tracking-estimate-only-pane').innerText;
              const correctText = 'Estimated: 2h 46m';

              expect(estimateText).toBe(correctText);
              done();
            });
          });
        });

        describe('Spent only pane', function() {
          beforeEach(function() {
            initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
          });

          it('should display the human readable version of time spent', function(done) {
            Vue.nextTick(() => {
              const spentText = this.timeTracker.$el.querySelector('.time-tracking-spend-only-pane').innerText;
              const correctText = 'Spent: 1h 23m';

              expect(spentText).toBe(correctText);
              done();
            });
          });
        });

        describe('No time tracking pane', function() {
          beforeEach(function() {
            initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0, timeEstimateHumanReadable: 0, timeSpentHumanReadable: 0 });
          });

          it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', function(done) {
            Vue.nextTick(() => {
              const $noTrackingPane = this.timeTracker.$el.querySelector('.time-tracking-no-tracking-pane');
              const noTrackingText =$noTrackingPane.innerText;
              const correctText = 'No estimate or time spent';

              expect(this.timeTracker.showNoTimeTrackingState).toBe(true);
              expect($noTrackingPane).toBeVisible();
              expect(noTrackingText).toBe(correctText);
              done();
            });
          });
        });

        describe("Help pane", function() {
          beforeEach(function() {
            initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0 });
          });

          it('should not show the "Help" pane by default', function(done) {
            Vue.nextTick(() => {
              const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');

              expect(this.timeTracker.showHelpState).toBe(false);
              expect($helpPane).toBeNull();
              done();
            });
          });

          it('should show the "Help" pane when help button is clicked', function(done) {
            Vue.nextTick(() => {
              $(this.timeTracker.$el).find('.help-button').click();

              setTimeout(() => {
                const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
                expect(this.timeTracker.showHelpState).toBe(true);
                expect($helpPane).toBeVisible();
                done();
              }, 10);
            });
          });

          it('should not show the "Help" pane when help button is clicked and then closed', function(done) {
            Vue.nextTick(() => {
              $(this.timeTracker.$el).find('.help-button').click();

              setTimeout(() => {

                $(this.timeTracker.$el).find('.close-help-button').click();

                setTimeout(() => {
                  const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');

                  expect(this.timeTracker.showHelpState).toBe(false);
                  expect($helpPane).toBeNull();

                  done();
                }, 1000);
              }, 1000);
            });
          });
        });
      });
    });
  });
})(window.gl || (window.gl = {}));