Highlight current user in comments and system notes

2 files changed, 74 insertions, 4 deletions

diff --git a/spec/features/issues/notes_on_issues_spec.rb b/spec/features/issues/notes_on_issues_spec.rb
index f08c73f947c..fed77453cbb 100644
--- a/spec/features/issues/notes_on_issues_spec.rb
+++ b/spec/features/issues/notes_on_issues_spec.rb
@@ -3,6 +3,12 @@ require 'spec_helper'
 describe 'Create notes on issues', :js do
   let(:user) { create(:user) }
 
+  def submit_comment(text)
+    fill_in 'note[note]', with: text
+    click_button 'Comment'
+    wait_for_requests
+  end
+
   shared_examples 'notes with reference' do
     let(:issue) { create(:issue, project: project) }
     let(:note_text) { "Check #{mention.to_reference}" }
@@ -12,10 +18,7 @@ describe 'Create notes on issues', :js do
       sign_in(user)
       visit project_issue_path(project, issue)
 
-      fill_in 'note[note]', with: note_text
-      click_button 'Comment'
-
-      wait_for_requests
+      submit_comment(note_text)
     end
 
     it 'creates a note with reference and cross references the issue' do
@@ -74,4 +77,16 @@ describe 'Create notes on issues', :js do
       let(:mention) { create(:merge_request, source_project: project) }
     end
   end
+
+  it 'highlights the current user in a comment' do
+    project = create(:project)
+    issue = create(:issue, project: project)
+    project.add_developer(user)
+    sign_in(user)
+
+    visit project_issue_path(project, issue)
+    submit_comment("@#{user.username} note to self")
+
+    expect(page).to have_selector '.gfm-project_member.current-user', text: user.username
+  end
 end
diff --git a/spec/javascripts/behaviors/markdown/highlight_current_user_spec.js b/spec/javascripts/behaviors/markdown/highlight_current_user_spec.js
new file mode 100644
index 00000000000..3305ddc412d
--- /dev/null
+++ b/spec/javascripts/behaviors/markdown/highlight_current_user_spec.js
@@ -0,0 +1,55 @@
+import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user';
+
+describe('highlightCurrentUser', () => {
+  let rootElement;
+  let elements;
+
+  beforeEach(() => {
+    setFixtures(`
+      <div id="dummy-root-element">
+        <div data-user="1">@first</div>
+        <div data-user="2">@second</div>
+      </div>
+    `);
+    rootElement = document.getElementById('dummy-root-element');
+    elements = rootElement.querySelectorAll('[data-user]');
+  });
+
+  describe('without current user', () => {
+    beforeEach(() => {
+      window.gon = window.gon || {};
+      window.gon.current_user_id = null;
+    });
+
+    afterEach(() => {
+      delete window.gon.current_user_id;
+    });
+
+    it('does not highlight the user', () => {
+      const initialHtml = rootElement.outerHTML;
+
+      highlightCurrentUser(elements);
+
+      expect(rootElement.outerHTML).toBe(initialHtml);
+    });
+  });
+
+  describe('with current user', () => {
+    beforeEach(() => {
+      window.gon = window.gon || {};
+      window.gon.current_user_id = 2;
+    });
+
+    afterEach(() => {
+      delete window.gon.current_user_id;
+    });
+
+    it('highlights current user', () => {
+      highlightCurrentUser(elements);
+
+      expect(elements.length).toBe(2);
+      expect(elements[0]).not.toHaveClass('current-user');
+      expect(elements[1]).toHaveClass('current-user');
+    });
+  });
+});