Merge branch 'backport-time-tracking-ce' into 'master'

Backport timetracking to CE

See merge request !8195

13 files changed, 612 insertions, 27 deletions

diff --git a/spec/controllers/projects/issues_controller_spec.rb b/spec/controllers/projects/issues_controller_spec.rb
index e2321f2034b..b5987a83df0 100644
--- a/spec/controllers/projects/issues_controller_spec.rb
+++ b/spec/controllers/projects/issues_controller_spec.rb
@@ -326,6 +326,20 @@ describe Projects::IssuesController do
   end
 
   describe 'POST #create' do
+    def post_new_issue(attrs = {})
+      sign_in(user)
+      project = create(:empty_project, :public)
+      project.team << [user, :developer]
+
+      post :create, {
+        namespace_id: project.namespace.to_param,
+        project_id: project.to_param,
+        issue: { title: 'Title', description: 'Description' }.merge(attrs)
+      }
+
+      project.issues.first
+    end
+
     context 'resolving discussions in MergeRequest' do
       let(:discussion) { Discussion.for_diff_notes([create(:diff_note_on_merge_request)]).first }
       let(:merge_request) { discussion.noteable }
@@ -369,13 +383,7 @@ describe Projects::IssuesController do
       end
 
       def post_spam_issue
-        sign_in(user)
-        spam_project = create(:empty_project, :public)
-        post :create, {
-          namespace_id: spam_project.namespace.to_param,
-          project_id: spam_project.to_param,
-          issue: { title: 'Spam Title', description: 'Spam lives here' }
-        }
+        post_new_issue(title: 'Spam Title', description: 'Spam lives here')
       end
 
       it 'rejects an issue recognized as spam' do
@@ -396,18 +404,26 @@ describe Projects::IssuesController do
         request.env['action_dispatch.remote_ip'] = '127.0.0.1'
       end
 
-      def post_new_issue
+      it 'creates a user agent detail' do
+        expect{ post_new_issue }.to change(UserAgentDetail, :count).by(1)
+      end
+    end
+
+    context 'when description has slash commands' do
+      before do
         sign_in(user)
-        project = create(:empty_project, :public)
-        post :create, {
-          namespace_id: project.namespace.to_param,
-          project_id: project.to_param,
-          issue: { title: 'Title', description: 'Description' }
-        }
       end
 
-      it 'creates a user agent detail' do
-        expect{ post_new_issue }.to change(UserAgentDetail, :count).by(1)
+      it 'can add spent time' do
+        issue = post_new_issue(description: '/spend 1h')
+
+        expect(issue.total_time_spent).to eq(3600)
+      end
+
+      it 'can set the time estimate' do
+        issue = post_new_issue(description: '/estimate 2h')
+
+        expect(issue.time_estimate).to eq(7200)
       end
     end
   end
diff --git a/spec/factories/timelogs.rb b/spec/factories/timelogs.rb
new file mode 100644
index 00000000000..12fc4ec4486
--- /dev/null
+++ b/spec/factories/timelogs.rb
@@ -0,0 +1,9 @@
+# Read about factories at https://github.com/thoughtbot/factory_girl
+
+FactoryGirl.define do
+  factory :timelog do
+    time_spent 3600
+    user
+    association :trackable, factory: :issue
+  end
+end
diff --git a/spec/features/issues/user_uses_slash_commands_spec.rb b/spec/features/issues/user_uses_slash_commands_spec.rb
index 31f75512f4a..0a9cd11ad6e 100644
--- a/spec/features/issues/user_uses_slash_commands_spec.rb
+++ b/spec/features/issues/user_uses_slash_commands_spec.rb
@@ -100,6 +100,58 @@ feature 'Issues > User uses slash commands', feature: true, js: true do
       end
     end
 
+    describe 'Issuable time tracking' do
+      let(:issue) { create(:issue, project: project) }
+
+      before do
+        project.team << [user, :developer]
+      end
+
+      context 'Issue' do
+        before do
+          visit namespace_project_issue_path(project.namespace, project, issue)
+        end
+
+        it_behaves_like 'issuable time tracker'
+      end
+
+      context 'Merge Request' do
+        let(:merge_request) { create(:merge_request, source_project: project) }
+
+        before do
+          visit namespace_project_merge_request_path(project.namespace, project, merge_request)
+        end
+
+        it_behaves_like 'issuable time tracker'
+      end
+    end
+
+    describe 'Issuable time tracking' do
+      let(:issue) { create(:issue, project: project) }
+
+      before do
+        project.team << [user, :developer]
+      end
+
+      context 'Issue' do
+        before do
+          visit namespace_project_issue_path(project.namespace, project, issue)
+        end
+
+        it_behaves_like 'issuable time tracker'
+      end
+
+      context 'Merge Request' do
+        let(:merge_request) { create(:merge_request, source_project: project) }
+
+        before do
+          visit namespace_project_merge_request_path(project.namespace, project, merge_request)
+        end
+
+        it_behaves_like 'issuable time tracker'
+      end
+    end
+
     describe 'toggling the WIP prefix from the title from note' do
       let(:issue) { create(:issue, project: project) }
 
diff --git a/spec/javascripts/issuable_time_tracker_spec.js.es6 b/spec/javascripts/issuable_time_tracker_spec.js.es6
new file mode 100644
index 00000000000..a1e979e8d09
--- /dev/null
+++ b/spec/javascripts/issuable_time_tracker_spec.js.es6
@@ -0,0 +1,201 @@
+/* eslint-disable */
+//= require jquery
+//= require vue
+//= require issuable/time_tracking/components/time_tracker
+
+function initTimeTrackingComponent(opts) {
+  fixture.set(`
+    <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 = {}));
diff --git a/spec/javascripts/pretty_time_spec.js.es6 b/spec/javascripts/pretty_time_spec.js.es6
index 2e12d45f7a7..7a04fba5f7f 100644
--- a/spec/javascripts/pretty_time_spec.js.es6
+++ b/spec/javascripts/pretty_time_spec.js.es6
@@ -1,12 +1,12 @@
 //= require lib/utils/pretty_time
 
 (() => {
-  const PrettyTime = gl.PrettyTime;
+  const prettyTime = gl.utils.prettyTime;
 
-  describe('PrettyTime methods', function () {
+  describe('prettyTime methods', function () {
     describe('parseSeconds', function () {
       it('should correctly parse a negative value', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const zeroSeconds = parser(-1000);
 
@@ -17,7 +17,7 @@
       });
 
       it('should correctly parse a zero value', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const zeroSeconds = parser(0);
 
@@ -28,7 +28,7 @@
       });
 
       it('should correctly parse a small non-zero second values', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const subOneMinute = parser(10);
 
@@ -53,7 +53,7 @@
       });
 
       it('should correctly parse large second values', function () {
-        const parser = PrettyTime.parseSeconds;
+        const parser = prettyTime.parseSeconds;
 
         const aboveOneHour = parser(4800);
 
@@ -87,7 +87,7 @@
           minutes: 20,
         };
 
-        const timeString = PrettyTime.stringifyTime(timeObject);
+        const timeString = prettyTime.stringifyTime(timeObject);
 
         expect(timeString).toBe('1w 4d 7h 20m');
       });
@@ -100,7 +100,7 @@
           minutes: 20,
         };
 
-        const timeString = PrettyTime.stringifyTime(timeObject);
+        const timeString = prettyTime.stringifyTime(timeObject);
 
         expect(timeString).toBe('4d 20m');
       });
@@ -113,7 +113,7 @@
           minutes: 0,
         };
 
-        const timeString = PrettyTime.stringifyTime(timeObject);
+        const timeString = prettyTime.stringifyTime(timeObject);
 
         expect(timeString).toBe('0m');
       });
@@ -122,12 +122,12 @@
     describe('abbreviateTime', function () {
       it('should abbreviate stringified times for weeks', function () {
         const fullTimeString = '1w 3d 4h 5m';
-        expect(PrettyTime.abbreviateTime(fullTimeString)).toBe('1w');
+        expect(prettyTime.abbreviateTime(fullTimeString)).toBe('1w');
       });
 
       it('should abbreviate stringified times for non-weeks', function () {
         const fullTimeString = '0w 3d 4h 5m';
-        expect(PrettyTime.abbreviateTime(fullTimeString)).toBe('3d');
+        expect(prettyTime.abbreviateTime(fullTimeString)).toBe('3d');
       });
     });
   });
diff --git a/spec/lib/gitlab/import_export/all_models.yml b/spec/lib/gitlab/import_export/all_models.yml
index ceed9c942c1..7fb6829f582 100644
--- a/spec/lib/gitlab/import_export/all_models.yml
+++ b/spec/lib/gitlab/import_export/all_models.yml
@@ -15,6 +15,7 @@ issues:
 - events
 - merge_requests_closing_issues
 - metrics
+- timelogs
 events:
 - author
 - project
@@ -77,6 +78,7 @@ merge_requests:
 - events
 - merge_requests_closing_issues
 - metrics
+- timelogs
 merge_request_diff:
 - merge_request
 pipelines:
@@ -198,3 +200,6 @@ award_emoji:
 - user
 priorities:
 - label
+timelogs:
+- trackable
+- user
diff --git a/spec/lib/gitlab/import_export/safe_model_attributes.yml b/spec/lib/gitlab/import_export/safe_model_attributes.yml
index d88a141b458..493bc2db21a 100644
--- a/spec/lib/gitlab/import_export/safe_model_attributes.yml
+++ b/spec/lib/gitlab/import_export/safe_model_attributes.yml
@@ -20,6 +20,7 @@ Issue:
 - lock_version
 - milestone_id
 - weight
+- time_estimate
 Event:
 - id
 - target_type
@@ -150,6 +151,7 @@ MergeRequest:
 - milestone_id
 - approvals_before_merge
 - rebase_commit_sha
+- time_estimate
 MergeRequestDiff:
 - id
 - state
@@ -344,3 +346,11 @@ LabelPriority:
 - priority
 - created_at
 - updated_at
+Timelog:
+- id
+- time_spent
+- trackable_id
+- trackable_type
+- user_id
+- created_at
+- updated_at
diff --git a/spec/models/concerns/issuable_spec.rb b/spec/models/concerns/issuable_spec.rb
index 1078c959419..344906c581b 100644
--- a/spec/models/concerns/issuable_spec.rb
+++ b/spec/models/concerns/issuable_spec.rb
@@ -408,4 +408,42 @@ describe Issue, "Issuable" do
       expect(issue.assignee_or_author?(user)).to eq(false)
     end
   end
+
+  describe '#spend_time' do
+    let(:user) { create(:user) }
+    let(:issue) { create(:issue) }
+
+    def spend_time(seconds)
+      issue.spend_time(seconds, user)
+      issue.save!
+    end
+
+    context 'adding time' do
+      it 'should update the total time spent' do
+        spend_time(1800)
+
+        expect(issue.total_time_spent).to eq(1800)
+      end
+    end
+
+    context 'substracting time' do
+      before do
+        spend_time(1800)
+      end
+
+      it 'should update the total time spent' do
+        spend_time(-900)
+
+        expect(issue.total_time_spent).to eq(900)
+      end
+
+      context 'when time to substract exceeds the total time spent' do
+        it 'should not alter the total time spent' do
+          spend_time(-3600)
+
+          expect(issue.total_time_spent).to eq(1800)
+        end
+      end
+    end
+  end
 end
diff --git a/spec/models/timelog_spec.rb b/spec/models/timelog_spec.rb
new file mode 100644
index 00000000000..f08935b6425
--- /dev/null
+++ b/spec/models/timelog_spec.rb
@@ -0,0 +1,10 @@
+require 'rails_helper'
+
+RSpec.describe Timelog, type: :model do
+  subject { build(:timelog) }
+
+  it { is_expected.to be_valid }
+
+  it { is_expected.to validate_presence_of(:time_spent) }
+  it { is_expected.to validate_presence_of(:user) }
+end
diff --git a/spec/services/notes/slash_commands_service_spec.rb b/spec/services/notes/slash_commands_service_spec.rb
index 960b5cd5e6f..1a64c8bbf00 100644
--- a/spec/services/notes/slash_commands_service_spec.rb
+++ b/spec/services/notes/slash_commands_service_spec.rb
@@ -86,6 +86,18 @@ describe Notes::SlashCommandsService, services: true do
           expect(note.noteable).to be_open
         end
       end
+
+      describe '/spend' do
+        let(:note_text) { '/spend 1h' }
+
+        it 'updates the spent time on the noteable' do
+          content, command_params = service.extract_commands(note)
+          service.execute(command_params, note)
+
+          expect(content).to eq ''
+          expect(note.noteable.time_spent).to eq(3600)
+        end
+      end
     end
 
     describe 'note with command & text' do
diff --git a/spec/services/slash_commands/interpret_service_spec.rb b/spec/services/slash_commands/interpret_service_spec.rb
index ffcf02d2c56..99dd9be3218 100644
--- a/spec/services/slash_commands/interpret_service_spec.rb
+++ b/spec/services/slash_commands/interpret_service_spec.rb
@@ -211,6 +211,46 @@ describe SlashCommands::InterpretService, services: true do
       end
     end
 
+    shared_examples 'estimate command' do
+      it 'populates time_estimate: 3600 if content contains /estimate 1h' do
+        _, updates = service.execute(content, issuable)
+
+        expect(updates).to eq(time_estimate: 3600)
+      end
+    end
+
+    shared_examples 'spend command' do
+      it 'populates spend_time: 3600 if content contains /spend 1h' do
+        _, updates = service.execute(content, issuable)
+
+        expect(updates).to eq(spend_time: 3600)
+      end
+    end
+
+    shared_examples 'spend command with negative time' do
+      it 'populates spend_time: -1800 if content contains /spend -30m' do
+        _, updates = service.execute(content, issuable)
+
+        expect(updates).to eq(spend_time: -1800)
+      end
+    end
+
+    shared_examples 'remove_estimate command' do
+      it 'populates time_estimate: 0 if content contains /remove_estimate' do
+        _, updates = service.execute(content, issuable)
+
+        expect(updates).to eq(time_estimate: 0)
+      end
+    end
+
+    shared_examples 'remove_time_spent command' do
+      it 'populates spend_time: :reset if content contains /remove_time_spent' do
+        _, updates = service.execute(content, issuable)
+
+        expect(updates).to eq(spend_time: :reset)
+      end
+    end
+
     shared_examples 'empty command' do
       it 'populates {} if content contains an unsupported command' do
         _, updates = service.execute(content, issuable)
@@ -518,6 +558,51 @@ describe SlashCommands::InterpretService, services: true do
       let(:issuable) { merge_request }
     end
 
+    it_behaves_like 'estimate command' do
+      let(:content) { '/estimate 1h' }
+      let(:issuable) { issue }
+    end
+
+    it_behaves_like 'empty command' do
+      let(:content) { '/estimate' }
+      let(:issuable) { issue }
+    end
+
+    it_behaves_like 'empty command' do
+      let(:content) { '/estimate abc' }
+      let(:issuable) { issue }
+    end
+
+    it_behaves_like 'spend command' do
+      let(:content) { '/spend 1h' }
+      let(:issuable) { issue }
+    end
+
+    it_behaves_like 'spend command with negative time' do
+      let(:content) { '/spend -30m' }
+      let(:issuable) { issue }
+    end
+
+    it_behaves_like 'empty command' do
+      let(:content) { '/spend' }
+      let(:issuable) { issue }
+    end
+
+    it_behaves_like 'empty command' do
+      let(:content) { '/spend abc' }
+      let(:issuable) { issue }
+    end
+
+    it_behaves_like 'remove_estimate command' do
+      let(:content) { '/remove_estimate' }
+      let(:issuable) { issue }
+    end
+
+    it_behaves_like 'remove_time_spent command' do
+      let(:content) { '/remove_time_spent' }
+      let(:issuable) { issue }
+    end
+
     context 'when current_user cannot :admin_issue' do
       let(:visitor) { create(:user) }
       let(:issue) { create(:issue, project: project, author: visitor) }
diff --git a/spec/services/system_note_service_spec.rb b/spec/services/system_note_service_spec.rb
index 0e8adb68721..e85545f46dc 100644
--- a/spec/services/system_note_service_spec.rb
+++ b/spec/services/system_note_service_spec.rb
@@ -740,4 +740,69 @@ describe SystemNoteService, services: true do
       expect(note.note).to include(issue.to_reference)
     end
   end
+
+  describe '.change_time_estimate' do
+    subject { described_class.change_time_estimate(noteable, project, author) }
+
+    it_behaves_like 'a system note'
+
+    context 'with a time estimate' do
+      it 'sets the note text' do
+        noteable.update_attribute(:time_estimate, 277200)
+
+        expect(subject.note).to eq "Changed time estimate of this issue to 1w 4d 5h"
+      end
+    end
+
+    context 'without a time estimate' do
+      it 'sets the note text' do
+        expect(subject.note).to eq "Removed time estimate on this issue"
+      end
+    end
+  end
+
+  describe '.change_time_spent' do
+    # We need a custom noteable in order to the shared examples to be green.
+    let(:noteable) do
+      mr = create(:merge_request, source_project: project)
+      mr.spend_time(1, author)
+      mr.save!
+      mr
+    end
+
+    subject do
+      described_class.change_time_spent(noteable, project, author)
+    end
+
+    it_behaves_like 'a system note'
+
+    context 'when time was added' do
+      it 'sets the note text' do
+        spend_time!(277200)
+
+        expect(subject.note).to eq "Added 1w 4d 5h of time spent on this merge request"
+      end
+    end
+
+    context 'when time was subtracted' do
+      it 'sets the note text' do
+        spend_time!(-277200)
+
+        expect(subject.note).to eq "Subtracted 1w 4d 5h of time spent on this merge request"
+      end
+    end
+
+    context 'when time was removed' do
+      it 'sets the note text' do
+        spend_time!(:reset)
+
+        expect(subject.note).to eq "Removed time spent on this merge request"
+      end
+    end
+
+    def spend_time!(seconds)
+      noteable.spend_time(seconds, author)
+      noteable.save!
+    end
+  end
 end
diff --git a/spec/support/time_tracking_shared_examples.rb b/spec/support/time_tracking_shared_examples.rb
new file mode 100644
index 00000000000..02657684b57
--- /dev/null
+++ b/spec/support/time_tracking_shared_examples.rb
@@ -0,0 +1,82 @@
+shared_examples 'issuable time tracker' do
+  it 'renders the sidebar component empty state' do
+    page.within '.time-tracking-no-tracking-pane' do
+      expect(page).to have_content 'No estimate or time spent'
+    end
+  end
+
+  it 'updates the sidebar component when estimate is added' do
+    submit_time('/estimate 3w 1d 1h')
+
+    page.within '.time-tracking-estimate-only-pane' do
+      expect(page).to have_content '3w 1d 1h'
+    end
+  end
+
+  it 'updates the sidebar component when spent is added' do
+    submit_time('/spend 3w 1d 1h')
+
+    page.within '.time-tracking-spend-only-pane' do
+      expect(page).to have_content '3w 1d 1h'
+    end
+  end
+
+  it 'shows the comparison when estimate and spent are added' do
+    submit_time('/estimate 3w 1d 1h')
+    submit_time('/spend 3w 1d 1h')
+
+    page.within '.time-tracking-comparison-pane' do
+      expect(page).to have_content '3w 1d 1h'
+    end
+  end
+
+  it 'updates the sidebar component when estimate is removed' do
+    submit_time('/estimate 3w 1d 1h')
+    submit_time('/remove_estimate')
+
+    page.within '#issuable-time-tracker' do
+      expect(page).to have_content 'No estimate or time spent'
+    end
+  end
+
+  it 'updates the sidebar component when spent is removed' do
+    submit_time('/spend 3w 1d 1h')
+    submit_time('/remove_time_spent')
+
+    page.within '#issuable-time-tracker' do
+      expect(page).to have_content 'No estimate or time spent'
+    end
+  end
+
+  it 'shows the help state when icon is clicked' do
+    page.within '#issuable-time-tracker' do
+      find('.help-button').click
+      expect(page).to have_content 'Track time with slash commands'
+      expect(page).to have_content 'Learn more'
+    end
+  end
+
+  it 'hides the help state when close icon is clicked' do
+    page.within '#issuable-time-tracker' do
+      find('.help-button').click
+      find('.close-help-button').click
+
+      expect(page).not_to have_content 'Track time with slash commands'
+      expect(page).not_to have_content 'Learn more'
+    end
+  end
+
+  it 'displays the correct help url' do
+    page.within '#issuable-time-tracker' do
+      find('.help-button').click
+
+      expect(find_link('Learn more')[:href]).to have_content('/help/workflow/time_tracking.md')
+    end
+  end
+end
+
+def submit_time(slash_command)
+  fill_in 'note[note]', with: slash_command
+  click_button 'Comment'
+  wait_for_ajax
+end