Skip to content

G
gitlab-ce
Commit 52cff35e authored by Clement Ho's avatar Clement Ho
Browse files
Options

[skip ci] fix time tracking spec

parent 07ec200b
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 126 deletions
spec/javascripts/issuable_time_tracker_spec.js
View file @ 52cff35e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import Vue from 'vue'; import Vue from 'vue';
import '~/sidebar/components/time_tracking/time_tracker'; import timeTracker from '~/sidebar/components/time_tracking/time_tracker';
function initTimeTrackingComponent(opts) { function initTimeTrackingComponent(opts) {
setFixtures(` setFixtures(`
...@@ -16,187 +16,185 @@ function initTimeTrackingComponent(opts) { ...@@ -16,187 +16,185 @@ function initTimeTrackingComponent(opts) {
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,
docsUrl: '/help/workflow/time_tracking.md', rootPath: '/',
}; };
const TimeTrackingComponent = Vue.component('issuable-time-tracker'); const TimeTrackingComponent = Vue.extend(timeTracker);
this.timeTracker = new TimeTrackingComponent({ this.timeTracker = new TimeTrackingComponent({
el: '#mock-container', el: '#mock-container',
propsData: this.initialData, propsData: this.initialData,
}); });
} }
((gl) => { describe('Issuable Time Tracker', function() {
describe('Issuable Time Tracker', function() { describe('Initialization', function() {
describe('Initialization', function() { beforeEach(function() {
beforeEach(function() { initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' });
initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' }); });
});
it('should return something defined', function() { it('should return something defined', function() {
expect(this.timeTracker).toBeDefined(); expect(this.timeTracker).toBeDefined();
}); });
it ('should correctly set timeEstimate', function(done) { it ('should correctly set timeEstimate', function(done) {
Vue.nextTick(() => { Vue.nextTick(() => {
expect(this.timeTracker.timeEstimate).toBe(this.initialData.time_estimate); expect(this.timeTracker.timeEstimate).toBe(this.initialData.time_estimate);
done(); done();
});
}); });
it ('should correctly set time_spent', function(done) { });
Vue.nextTick(() => { it ('should correctly set time_spent', function(done) {
expect(this.timeTracker.timeSpent).toBe(this.initialData.time_spent); Vue.nextTick(() => {
done(); expect(this.timeTracker.timeSpent).toBe(this.initialData.time_spent);
}); done();
}); });
}); });
});
describe('Content Display', function() { describe('Content Display', function() {
describe('Panes', function() { describe('Panes', function() {
describe('Comparison pane', function() { describe('Comparison pane', function() {
beforeEach(function() { beforeEach(function() {
initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 5000, timeEstimateHumanReadable: '', timeSpentHumanReadable: '' }); 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();
}); });
});
it('should show the "Comparison" pane when timeEstimate and time_spent are truthy', function(done) { describe('Remaining meter', function() {
it('should display the remaining meter with the correct width', function(done) {
Vue.nextTick(() => { Vue.nextTick(() => {
const $comparisonPane = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane'); const meterWidth = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane .meter-fill').style.width;
expect(this.timeTracker.showComparisonState).toBe(true); const correctWidth = '5%';
expect(meterWidth).toBe(correctWidth);
done(); done();
}); })
}); });
describe('Remaining meter', function() { 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 width', function(done) { Vue.nextTick(() => {
Vue.nextTick(() => { const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .within_estimate .meter-fill');
const meterWidth = this.timeTracker.$el.querySelector('.time-tracking-comparison-pane .meter-fill').style.width; expect(styledMeter.length).toBe(1);
const correctWidth = '5%'; done()
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) { it('should display the remaining meter with the correct background color when over estimate', function(done) {
this.timeTracker.time_estimate = 100000; this.timeTracker.time_estimate = 100000;
this.timeTracker.time_spent = 20000000; this.timeTracker.time_spent = 20000000;
Vue.nextTick(() => { Vue.nextTick(() => {
const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .over_estimate .meter-fill'); const styledMeter = $(this.timeTracker.$el).find('.time-tracking-comparison-pane .over_estimate .meter-fill');
expect(styledMeter.length).toBe(1); expect(styledMeter.length).toBe(1);
done(); done();
});
}); });
}); });
}); });
});
describe("Estimate only pane", function() { describe("Estimate only pane", function() {
beforeEach(function() { beforeEach(function() {
initTimeTrackingComponent.call(this, { timeEstimate: 100000, timeSpent: 0, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '' }); initTimeTrackingComponent.call(this, { 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', function(done) {
Vue.nextTick(() => { Vue.nextTick(() => {
const estimateText = this.timeTracker.$el.querySelector('.time-tracking-estimate-only-pane').innerText; const estimateText = this.timeTracker.$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);
done(); done();
});
}); });
}); });
});
describe('Spent only pane', function() { describe('Spent only pane', function() {
beforeEach(function() { beforeEach(function() {
initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 5000, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m' }); 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) { it('should display the human readable version of time spent', function(done) {
Vue.nextTick(() => { Vue.nextTick(() => {
const spentText = this.timeTracker.$el.querySelector('.time-tracking-spend-only-pane').innerText; const spentText = this.timeTracker.$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);
done(); done();
});
}); });
}); });
});
describe('No time tracking pane', function() { describe('No time tracking pane', function() {
beforeEach(function() { beforeEach(function() {
initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0, timeEstimateHumanReadable: 0, timeSpentHumanReadable: 0 }); initTimeTrackingComponent.call(this, { 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', function(done) {
Vue.nextTick(() => { Vue.nextTick(() => {
const $noTrackingPane = this.timeTracker.$el.querySelector('.time-tracking-no-tracking-pane'); const $noTrackingPane = this.timeTracker.$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(this.timeTracker.showNoTimeTrackingState).toBe(true);
expect($noTrackingPane).toBeVisible(); expect($noTrackingPane).toBeVisible();
expect(noTrackingText).toBe(correctText); expect(noTrackingText).toBe(correctText);
done(); done();
});
}); });
}); });
});
describe("Help pane", function() { describe("Help pane", function() {
beforeEach(function() { beforeEach(function() {
initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0 }); initTimeTrackingComponent.call(this, { timeEstimate: 0, timeSpent: 0 });
}); });
it('should not show the "Help" pane by default', function(done) { it('should not show the "Help" pane by default', function(done) {
Vue.nextTick(() => { Vue.nextTick(() => {
const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state'); const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
expect(this.timeTracker.showHelpState).toBe(false); expect(this.timeTracker.showHelpState).toBe(false);
expect($helpPane).toBeNull(); expect($helpPane).toBeNull();
done(); done();
});
}); });
});
it('should show the "Help" pane when help button is clicked', function(done) { it('should show the "Help" pane when help button is clicked', function(done) {
Vue.nextTick(() => { Vue.nextTick(() => {
$(this.timeTracker.$el).find('.help-button').click(); $(this.timeTracker.$el).find('.help-button').click();
setTimeout(() => { setTimeout(() => {
const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state'); const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
expect(this.timeTracker.showHelpState).toBe(true); expect(this.timeTracker.showHelpState).toBe(true);
expect($helpPane).toBeVisible(); expect($helpPane).toBeVisible();
done(); done();
}, 10); }, 10);
});
}); });
});
it('should not show the "Help" pane when help button is clicked and then closed', function(done) { it('should not show the "Help" pane when help button is clicked and then closed', function(done) {
Vue.nextTick(() => { Vue.nextTick(() => {
$(this.timeTracker.$el).find('.help-button').click(); $(this.timeTracker.$el).find('.help-button').click();
setTimeout(() => { setTimeout(() => {
$(this.timeTracker.$el).find('.close-help-button').click(); $(this.timeTracker.$el).find('.close-help-button').click();
setTimeout(() => { setTimeout(() => {
const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state'); const $helpPane = this.timeTracker.$el.querySelector('.time-tracking-help-state');
expect(this.timeTracker.showHelpState).toBe(false); expect(this.timeTracker.showHelpState).toBe(false);
expect($helpPane).toBeNull(); expect($helpPane).toBeNull();
done(); done();
}, 1000);
}, 1000); }, 1000);
}); }, 1000);
}); });
}); });
}); });
}); });
}); });
})(window.gl || (window.gl = {})); });
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