Commit 65d7bf20 authored by Johann Hubert Sonntagbauer's avatar Johann Hubert Sonntagbauer Committed by Phil Hughes

Fix props name casing in time time tracker vue component

parent 474231ea
...@@ -51,10 +51,10 @@ export default { ...@@ -51,10 +51,10 @@ export default {
<template> <template>
<div class="block"> <div class="block">
<issuable-time-tracker <issuable-time-tracker
:time_estimate="store.timeEstimate" :time-estimate="store.timeEstimate"
:time_spent="store.totalTimeSpent" :time-spent="store.totalTimeSpent"
:human_time_estimate="store.humanTimeEstimate" :human-time-estimate="store.humanTimeEstimate"
:human_time_spent="store.humanTotalTimeSpent" :human-time-spent="store.humanTotalTimeSpent"
:root-path="store.rootPath" :root-path="store.rootPath"
/> />
</div> </div>
......
...@@ -19,24 +19,20 @@ export default { ...@@ -19,24 +19,20 @@ export default {
TimeTrackingHelpState, TimeTrackingHelpState,
}, },
props: { props: {
// eslint-disable-next-line vue/prop-name-casing timeEstimate: {
time_estimate: {
type: Number, type: Number,
required: true, required: true,
}, },
// eslint-disable-next-line vue/prop-name-casing timeSpent: {
time_spent: {
type: Number, type: Number,
required: true, required: true,
}, },
// eslint-disable-next-line vue/prop-name-casing humanTimeEstimate: {
human_time_estimate: {
type: String, type: String,
required: false, required: false,
default: '', default: '',
}, },
// eslint-disable-next-line vue/prop-name-casing humanTimeSpent: {
human_time_spent: {
type: String, type: String,
required: false, required: false,
default: '', default: '',
...@@ -52,18 +48,6 @@ export default { ...@@ -52,18 +48,6 @@ export default {
}; };
}, },
computed: { computed: {
timeSpent() {
return this.time_spent;
},
timeEstimate() {
return this.time_estimate;
},
timeEstimateHumanReadable() {
return this.human_time_estimate;
},
timeSpentHumanReadable() {
return this.human_time_spent;
},
hasTimeSpent() { hasTimeSpent() {
return !!this.timeSpent; return !!this.timeSpent;
}, },
...@@ -94,10 +78,12 @@ export default { ...@@ -94,10 +78,12 @@ export default {
this.showHelp = show; this.showHelp = show;
}, },
update(data) { update(data) {
this.time_estimate = data.time_estimate; const { timeEstimate, timeSpent, humanTimeEstimate, humanTimeSpent } = data;
this.time_spent = data.time_spent;
this.human_time_estimate = data.human_time_estimate; this.timeEstimate = timeEstimate;
this.human_time_spent = data.human_time_spent; this.timeSpent = timeSpent;
this.humanTimeEstimate = humanTimeEstimate;
this.humanTimeSpent = humanTimeSpent;
}, },
}, },
}; };
...@@ -114,8 +100,8 @@ export default { ...@@ -114,8 +100,8 @@ export default {
:show-help-state="showHelpState" :show-help-state="showHelpState"
:show-spent-only-state="showSpentOnlyState" :show-spent-only-state="showSpentOnlyState"
:show-estimate-only-state="showEstimateOnlyState" :show-estimate-only-state="showEstimateOnlyState"
:time-spent-human-readable="timeSpentHumanReadable" :time-spent-human-readable="humanTimeSpent"
:time-estimate-human-readable="timeEstimateHumanReadable" :time-estimate-human-readable="humanTimeEstimate"
/> />
<div class="title hide-collapsed"> <div class="title hide-collapsed">
{{ __('Time tracking') }} {{ __('Time tracking') }}
...@@ -145,11 +131,11 @@ export default { ...@@ -145,11 +131,11 @@ export default {
<div class="time-tracking-content hide-collapsed"> <div class="time-tracking-content hide-collapsed">
<time-tracking-estimate-only-pane <time-tracking-estimate-only-pane
v-if="showEstimateOnlyState" v-if="showEstimateOnlyState"
:time-estimate-human-readable="timeEstimateHumanReadable" :time-estimate-human-readable="humanTimeEstimate"
/> />
<time-tracking-spent-only-pane <time-tracking-spent-only-pane
v-if="showSpentOnlyState" v-if="showSpentOnlyState"
:time-spent-human-readable="timeSpentHumanReadable" :time-spent-human-readable="humanTimeSpent"
/> />
<time-tracking-no-tracking-pane <time-tracking-no-tracking-pane
v-if="showNoTimeTrackingState" v-if="showNoTimeTrackingState"
...@@ -158,8 +144,8 @@ export default { ...@@ -158,8 +144,8 @@ export default {
v-if="showComparisonState" v-if="showComparisonState"
:time-estimate="timeEstimate" :time-estimate="timeEstimate"
:time-spent="timeSpent" :time-spent="timeSpent"
:time-spent-human-readable="timeSpentHumanReadable" :time-spent-human-readable="humanTimeSpent"
:time-estimate-human-readable="timeEstimateHumanReadable" :time-estimate-human-readable="humanTimeEstimate"
/> />
<transition name="help-state-toggle"> <transition name="help-state-toggle">
<time-tracking-help-state <time-tracking-help-state
......
...@@ -7,6 +7,8 @@ export default class SidebarMilestone { ...@@ -7,6 +7,8 @@ export default class SidebarMilestone {
if (!el) return; if (!el) return;
const { timeEstimate, timeSpent, humanTimeEstimate, humanTimeSpent } = el.dataset;
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
new Vue({ new Vue({
el, el,
...@@ -15,10 +17,10 @@ export default class SidebarMilestone { ...@@ -15,10 +17,10 @@ export default class SidebarMilestone {
}, },
render: createElement => createElement('timeTracker', { render: createElement => createElement('timeTracker', {
props: { props: {
time_estimate: parseInt(el.dataset.timeEstimate, 10), timeEstimate: parseInt(timeEstimate, 10),
time_spent: parseInt(el.dataset.timeSpent, 10), timeSpent: parseInt(timeSpent, 10),
human_time_estimate: el.dataset.humanTimeEstimate, humanTimeEstimate,
human_time_spent: el.dataset.humanTimeSpent, humanTimeSpent,
rootPath: '/', rootPath: '/',
}, },
}), }),
......
...@@ -8,7 +8,10 @@ describe('Issuable Time Tracker', () => { ...@@ -8,7 +8,10 @@ describe('Issuable Time Tracker', () => {
let initialData; let initialData;
let vm; let vm;
const initTimeTrackingComponent = opts => { const initTimeTrackingComponent = ({ timeEstimate,
timeSpent,
timeEstimateHumanReadable,
timeSpentHumanReadable }) => {
setFixtures(` setFixtures(`
<div> <div>
<div id="mock-container"></div> <div id="mock-container"></div>
...@@ -16,10 +19,10 @@ describe('Issuable Time Tracker', () => { ...@@ -16,10 +19,10 @@ describe('Issuable Time Tracker', () => {
`); `);
initialData = { initialData = {
time_estimate: opts.timeEstimate, timeEstimate,
time_spent: opts.timeSpent, timeSpent,
human_time_estimate: opts.timeEstimateHumanReadable, humanTimeEstimate: timeEstimateHumanReadable,
human_time_spent: opts.timeSpentHumanReadable, humanTimeSpent: timeSpentHumanReadable,
rootPath: '/', rootPath: '/',
}; };
...@@ -43,8 +46,8 @@ describe('Issuable Time Tracker', () => { ...@@ -43,8 +46,8 @@ describe('Issuable Time Tracker', () => {
describe('Initialization', () => { describe('Initialization', () => {
beforeEach(() => { beforeEach(() => {
initTimeTrackingComponent({ initTimeTrackingComponent({
timeEstimate: 100000, timeEstimate: 10000, // 2h 46m
timeSpent: 5000, timeSpent: 5000, // 1h 23m
timeEstimateHumanReadable: '2h 46m', timeEstimateHumanReadable: '2h 46m',
timeSpentHumanReadable: '1h 23m', timeSpentHumanReadable: '1h 23m',
}); });
...@@ -56,14 +59,14 @@ describe('Issuable Time Tracker', () => { ...@@ -56,14 +59,14 @@ describe('Issuable Time Tracker', () => {
it('should correctly set timeEstimate', done => { it('should correctly set timeEstimate', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.timeEstimate).toBe(initialData.time_estimate); expect(vm.timeEstimate).toBe(initialData.timeEstimate);
done(); done();
}); });
}); });
it('should correctly set time_spent', done => { it('should correctly set time_spent', done => {
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.timeSpent).toBe(initialData.time_spent); expect(vm.timeSpent).toBe(initialData.timeSpent);
done(); done();
}); });
}); });
...@@ -74,8 +77,8 @@ describe('Issuable Time Tracker', () => { ...@@ -74,8 +77,8 @@ describe('Issuable Time Tracker', () => {
describe('Comparison pane', () => { describe('Comparison pane', () => {
beforeEach(() => { beforeEach(() => {
initTimeTrackingComponent({ initTimeTrackingComponent({
timeEstimate: 100000, timeEstimate: 100000, // 1d 3h
timeSpent: 5000, timeSpent: 5000, // 1h 23m
timeEstimateHumanReadable: '', timeEstimateHumanReadable: '',
timeSpentHumanReadable: '', timeSpentHumanReadable: '',
}); });
...@@ -106,8 +109,8 @@ describe('Issuable Time Tracker', () => { ...@@ -106,8 +109,8 @@ describe('Issuable Time Tracker', () => {
}); });
it('should display the remaining meter with the correct background color when over estimate', done => { it('should display the remaining meter with the correct background color when over estimate', done => {
vm.time_estimate = 100000; vm.timeEstimate = 10000; // 2h 46m
vm.time_spent = 20000000; vm.timeSpent = 20000000; // 231 days
Vue.nextTick(() => { Vue.nextTick(() => {
expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="danger"]')).not.toBeNull(); expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="danger"]')).not.toBeNull();
done(); done();
...@@ -119,7 +122,7 @@ describe('Issuable Time Tracker', () => { ...@@ -119,7 +122,7 @@ describe('Issuable Time Tracker', () => {
describe('Estimate only pane', () => { describe('Estimate only pane', () => {
beforeEach(() => { beforeEach(() => {
initTimeTrackingComponent({ initTimeTrackingComponent({
timeEstimate: 100000, timeEstimate: 10000, // 2h 46m
timeSpent: 0, timeSpent: 0,
timeEstimateHumanReadable: '2h 46m', timeEstimateHumanReadable: '2h 46m',
timeSpentHumanReadable: '', timeSpentHumanReadable: '',
...@@ -142,7 +145,7 @@ describe('Issuable Time Tracker', () => { ...@@ -142,7 +145,7 @@ describe('Issuable Time Tracker', () => {
beforeEach(() => { beforeEach(() => {
initTimeTrackingComponent({ initTimeTrackingComponent({
timeEstimate: 0, timeEstimate: 0,
timeSpent: 5000, timeSpent: 5000, // 1h 23m
timeEstimateHumanReadable: '2h 46m', timeEstimateHumanReadable: '2h 46m',
timeSpentHumanReadable: '1h 23m', timeSpentHumanReadable: '1h 23m',
}); });
......
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