Skip to content

G
gitlab-ce
Commit afec22b3 authored by Phil Hughes's avatar Phil Hughes
Browse files
Options

Merge branch 'winh-speedup-timetracker-tests' into 'master' 

Remove timeouts from TimeTracker tests

See merge request gitlab-org/gitlab-ce!20510
parents ba38931d 9a054955
Hide whitespace changes
Inline Side-by-side
Showing with 243 additions and 0 deletions
spec/javascripts/issuable_time_tracker_spec.js → spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js
View file @ afec22b3
/* eslint-disable no-unused-vars, func-call-spacing, no-spaced-func, semi, quotes, space-infix-ops, max-len */
import $ from 'jquery'; import $ from 'jquery';
import Vue from 'vue'; import Vue from 'vue';
import timeTracker from '~/sidebar/components/time_tracking/time_tracker.vue'; import TimeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
function initTimeTrackingComponent(opts) { describe('Issuable Time Tracker', () => {
setFixtures(` let initialData;
let vm;
const initTimeTrackingComponent = opts => {
setFixtures(`
<div> <div>
<div id="mock-container"></div> <div id="mock-container"></div>
</div> </div>
`); `);
this.initialData = { initialData = {
time_estimate: opts.timeEstimate, time_estimate: opts.timeEstimate,
time_spent: opts.timeSpent, time_spent: opts.timeSpent,
human_time_estimate: opts.timeEstimateHumanReadable, human_time_estimate: opts.timeEstimateHumanReadable,
human_time_spent: opts.timeSpentHumanReadable, human_time_spent: opts.timeSpentHumanReadable,
rootPath: '/', rootPath: '/',
};
const TimeTrackingComponent = Vue.extend({
...TimeTracker,
components: {
...TimeTracker.components,
transition: {
// disable animations
template: '<div><slot></slot></div>',
},
},
});
vm = mountComponent(TimeTrackingComponent, initialData, '#mock-container');
}; };
const TimeTrackingComponent = Vue.extend(timeTracker); afterEach(() => {
this.timeTracker = new TimeTrackingComponent({ vm.$destroy();
el: '#mock-container',
propsData: this.initialData,
}); });
}
describe('Issuable Time Tracker', function() { describe('Initialization', () => {
describe('Initialization', function() { beforeEach(() => {
beforeEach(function() { initTimeTrackingComponent({
initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' }); timeEstimate: 100000,
timeSpent: 5000,
timeEstimateHumanReadable: '2h 46m',
timeSpentHumanReadable: '1h 23m',
});
}); });
it('should return something defined', function() { it('should return something defined', () => {
expect(this.timeTracker).toBeDefined(); expect(vm).toBeDefined();
}); });
it ('should correctly set timeEstimate', function(done) { it('should correctly set timeEstimate', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
expect(this.timeTracker.timeEstimate).toBe(this.initialData.time_estimate); expect(vm.timeEstimate).toBe(initialData.time_estimate);
done(); done();
}); });
}); });
it ('should correctly set time_spent', function(done) {
it('should correctly set time_spent', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
expect(this.timeTracker.timeSpent).toBe(this.initialData.time_spent); expect(vm.timeSpent).toBe(initialData.time_spent);
done(); done();
}); });
}); });
}); });
describe('Content Display', function() { describe('Content Display', () => {
describe('Panes', function() { describe('Panes', () => {
describe('Comparison pane', function() { describe('Comparison pane', () => {
beforeEach(function() { beforeEach(() => {
initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '', timeSpentHumanReadable: '' }); initTimeTrackingComponent({
timeEstimate: 100000,
timeSpent: 5000,
timeEstimateHumanReadable: '',
timeSpentHumanReadable: '',
});
}); });
it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', function(done) { it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
const $comparisonPane = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane'); expect(vm.showComparisonState).toBe(true);
expect(this.timeTracker.showComparisonState).toBe(true); const $comparisonPane = vm.$el.querySelector('.time-tracking-comparison-pane');
expect($comparisonPane).toBeVisible();
done(); done();
}); });
}); });
describe('Remaining meter', function() { describe('Remaining meter', () => {
it('should display the remaining meter with the correct width', function(done) { it('should display the remaining meter with the correct width', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
const meterWidth = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane .meter-fill').style.width; const meterWidth = vm.$el.querySelector('.time-tracking-comparison-pane .meter-fill')
.style.width;
const correctWidth = '5%'; const correctWidth = '5%';
expect(meterWidth).toBe(correctWidth); expect(meterWidth).toBe(correctWidth);
done(); done();
}) });
}); });
it('should display the remaining meter with the correct background color when within estimate', function(done) { it('should display the remaining meter with the correct background color when within estimate', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .within_estimate .meter-fill'); const styledMeter = $(vm.$el).find(
'.time-tracking-comparison-pane .within_estimate .meter-fill',
);
expect(styledMeter.length).toBe(1); expect(styledMeter.length).toBe(1);
done() done();
}); });
}); });
it('should display the remaining meter with the correct background color when over estimate', function(done) { it('should display the remaining meter with the correct background color when over estimate', done => {
this.timeTracker.time_estimate = 100000; vm.time_estimate = 100000;
this.timeTracker.time_spent = 20000000; vm.time_spent = 20000000;
Vue.nextTick(() => { Vue.nextTick(() => {
const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .over_estimate .meter-fill'); const styledMeter = $(vm.$el).find(
'.time-tracking-comparison-pane .over_estimate .meter-fill',
);
expect(styledMeter.length).toBe(1); expect(styledMeter.length).toBe(1);
done(); done();
}); });
...@@ -97,14 +127,20 @@ describe('Issuable Time Tracker', function() { ...@@ -97,14 +127,20 @@ describe('Issuable Time Tracker', function() {
}); });
}); });
describe("Estimate only pane", function() { describe('Estimate only pane', () => {
beforeEach(function() { beforeEach(() => {
initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 0, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '' }); initTimeTrackingComponent({
timeEstimate: 100000,
timeSpent: 0,
timeEstimateHumanReadable: '2h 46m',
timeSpentHumanReadable: '',
});
}); });
it('should display the human readable version of time estimated', function(done) { it('should display the human readable version of time estimated', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
const estimateText = this.timeTracker.$el.querySelector('.time-tracking-estimate-only-pane').innerText; const estimateText = vm.$el.querySelector('.time-tracking-estimate-only-pane')
.innerText;
const correctText = 'Estimated: 2h 46m'; const correctText = 'Estimated: 2h 46m';
expect(estimateText).toBe(correctText); expect(estimateText).toBe(correctText);
...@@ -113,14 +149,19 @@ describe('Issuable Time Tracker', function() { ...@@ -113,14 +149,19 @@ describe('Issuable Time Tracker', function() {
}); });
}); });
describe('Spent only pane', function() { describe('Spent only pane', () => {
beforeEach(function() { beforeEach(() => {
initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' }); initTimeTrackingComponent({
timeEstimate: 0,
timeSpent: 5000,
timeEstimateHumanReadable: '2h 46m',
timeSpentHumanReadable: '1h 23m',
});
}); });
it('should display the human readable version of time spent', function(done) { it('should display the human readable version of time spent', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
const spentText = this.timeTracker.$el.querySelector('.time-tracking-spend-only-pane').innerText; const spentText = vm.$el.querySelector('.time-tracking-spend-only-pane').innerText;
const correctText = 'Spent: 1h 23m'; const correctText = 'Spent: 1h 23m';
expect(spentText).toBe(correctText); expect(spentText).toBe(correctText);
...@@ -129,18 +170,23 @@ describe('Issuable Time Tracker', function() { ...@@ -129,18 +170,23 @@ describe('Issuable Time Tracker', function() {
}); });
}); });
describe('No time tracking pane', function() { describe('No time tracking pane', () => {
beforeEach(function() { beforeEach(() => {
initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0, timeEstimateHumanReadable: '', timeSpentHumanReadable: '' }); initTimeTrackingComponent({
timeEstimate: 0,
timeSpent: 0,
timeEstimateHumanReadable: '',
timeSpentHumanReadable: '',
});
}); });
it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', function(done) { it('should only show the "No time tracking" pane when both timeEstimate and time_spent are falsey', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
const $noTrackingPane = this.timeTracker.$el.querySelector('.time-tracking-no-tracking-pane'); const $noTrackingPane = vm.$el.querySelector('.time-tracking-no-tracking-pane');
const noTrackingText =$noTrackingPane.innerText; const noTrackingText = $noTrackingPane.innerText;
const correctText = 'No estimate or time spent'; const correctText = 'No estimate or time spent';
expect(this.timeTracker.showNoTimeTrackingState).toBe(true); expect(vm.showNoTimeTrackingState).toBe(true);
expect($noTrackingPane).toBeVisible(); expect($noTrackingPane).toBeVisible();
expect(noTrackingText).toBe(correctText); expect(noTrackingText).toBe(correctText);
done(); done();
...@@ -148,52 +194,48 @@ describe('Issuable Time Tracker', function() { ...@@ -148,52 +194,48 @@ describe('Issuable Time Tracker', function() {
}); });
}); });
describe("Help pane", function() { describe('Help pane', () => {
beforeEach(function() { const helpButton = () => vm.$el.querySelector('.help-button');
initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0 }); const closeHelpButton = () => vm.$el.querySelector('.close-help-button');
}); const helpPane = () => vm.$el.querySelector('.time-tracking-help-state');
it('should not show the "Help" pane by default', function(done) { beforeEach(done => {
Vue.nextTick(() => { initTimeTrackingComponent({ timeEstimate: 0, timeSpent: 0 });
const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
expect(this.timeTracker.showHelpState).toBe(false); Vue.nextTick()
expect($helpPane).toBeNull(); .then(done)
done(); .catch(done.fail);
});
}); });
it('should show the "Help" pane when help button is clicked', function(done) { it('should not show the "Help" pane by default', () => {
Vue.nextTick(() => { expect(vm.showHelpState).toBe(false);
$(this.timeTracker.$el).find('.help-button').click(); expect(helpPane()).toBeNull();
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) { it('should show the "Help" pane when help button is clicked', done => {
Vue.nextTick(() => { helpButton().click();
$(this.timeTracker.$el).find('.help-button').click();
setTimeout(() => {
$(this.timeTracker.$el).find('.close-help-button').click(); Vue.nextTick()
.then(() => {
setTimeout(() => { expect(vm.showHelpState).toBe(true);
const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state'); expect(helpPane()).toBeVisible();
})
.then(done)
.catch(done.fail);
});
expect(this.timeTracker.showHelpState).toBe(false); it('should not show the "Help" pane when help button is clicked and then closed', done => {
expect($helpPane).toBeNull(); helpButton().click();
done(); Vue.nextTick()
}, 1000); .then(() => closeHelpButton().click())
}, 1000); .then(() => Vue.nextTick())
}); .then(() => {
expect(vm.showHelpState).toBe(false);
expect(helpPane()).toBeNull();
})
.then(done)
.catch(done.fail);
}); });
}); });
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7