Highlight line which includes search term is code search results

app/assets/javascripts/pages/search/show/highlight_blob_search_result.js

+export default () => {
+  const highlightLineClass = 'hll';
+  const contentBody = document.getElementById('content-body');
+  const searchTerm = contentBody.querySelector('.js-search-input').value.toLowerCase();
+  const blobs = contentBody.querySelectorAll('.blob-result');
+
+  blobs.forEach(blob => {
+    const lines = blob.querySelectorAll('.line');
+    lines.forEach(line => {
+      if (line.textContent.toLowerCase().includes(searchTerm)) {
+        line.classList.add(highlightLineClass);
+      }
+    });
+  });
+};

app/assets/javascripts/pages/search/show/search.js

@@ -5,9 +5,11 @@ import Api from '~/api';
 import { __ } from '~/locale';
 import Project from '~/pages/projects/project';
 import refreshCounts from './refresh_counts';
+import setHighlightClass from './highlight_blob_search_result';
 
 export default class Search {
   constructor() {
+    setHighlightClass();
     const $groupDropdown = $('.js-search-group-dropdown');
     const $projectDropdown = $('.js-search-project-dropdown');
 

changelogs/unreleased/196384-highlight-code-search-result-line.yml

+---
+title: Highlight line which includes search term is code search results
+merge_request: 22914
+author: Alex Terekhov (terales)
+type: added

spec/frontend/fixtures/search.rb

@@ -16,4 +16,19 @@ describe SearchController, '(JavaScript fixtures)', type: :controller do
 
     expect(response).to be_successful
   end
+
+  context 'search within a project' do
+    let(:namespace) { create(:namespace, name: 'frontend-fixtures') }
+    let(:project) { create(:project, :public, :repository, namespace: namespace, path: 'search-project') }
+
+    it 'search/blob_search_result.html' do
+      get :show, params: {
+        search: 'Send',
+        project_id: project.id,
+        scope: :blobs
+      }
+
+      expect(response).to be_successful
+    end
+  end
 end

spec/frontend/pages/search/show/highlight_blob_search_result_spec.js

+import setHighlightClass from '~/pages/search/show/highlight_blob_search_result';
+
+const fixture = 'search/blob_search_result.html';
+
+describe('pages/search/show/highlight_blob_search_result', () => {
+  preloadFixtures(fixture);
+
+  beforeEach(() => loadFixtures(fixture));
+
+  it('highlights lines with search term occurrence', () => {
+    setHighlightClass();
+
+    expect(document.querySelectorAll('.blob-result .hll').length).toBe(11);
+  });
+});

spec/frontend/search_spec.js

 import $ from 'jquery';
 import Api from '~/api';
 import Search from '~/pages/search/show/search';
+import setHighlightClass from '~/pages/search/show/highlight_blob_search_result';
 
 jest.mock('~/api');
+jest.mock('~/pages/search/show/highlight_blob_search_result');
 
 describe('Search', () => {
   const fixturePath = 'search/show.html';
@@ -16,27 +18,41 @@ describe('Search', () => {
 
   preloadFixtures(fixturePath);
 
-  beforeEach(() => {
-    loadFixtures(fixturePath);
-    new Search(); // eslint-disable-line no-new
+  describe('constructor side effects', () => {
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it('highlights lines with search terms in blob search results', () => {
+      new Search(); // eslint-disable-line no-new
+
+      expect(setHighlightClass).toHaveBeenCalled();
+    });
   });
 
-  it('requests groups from backend when filtering', () => {
-    jest.spyOn(Api, 'groups').mockImplementation(term => {
-      expect(term).toBe(searchTerm);
+  describe('dropdown behavior', () => {
+    beforeEach(() => {
+      loadFixtures(fixturePath);
+      new Search(); // eslint-disable-line no-new
     });
 
-    const inputElement = fillDropdownInput('.js-search-group-dropdown');
+    it('requests groups from backend when filtering', () => {
+      jest.spyOn(Api, 'groups').mockImplementation(term => {
+        expect(term).toBe(searchTerm);
+      });
 
-    $(inputElement).trigger('input');
-  });
+      const inputElement = fillDropdownInput('.js-search-group-dropdown');
 
-  it('requests projects from backend when filtering', () => {
-    jest.spyOn(Api, 'projects').mockImplementation(term => {
-      expect(term).toBe(searchTerm);
+      $(inputElement).trigger('input');
     });
-    const inputElement = fillDropdownInput('.js-search-project-dropdown');
 
-    $(inputElement).trigger('input');
+    it('requests projects from backend when filtering', () => {
+      jest.spyOn(Api, 'projects').mockImplementation(term => {
+        expect(term).toBe(searchTerm);
+      });
+      const inputElement = fillDropdownInput('.js-search-project-dropdown');
+
+      $(inputElement).trigger('input');
+    });
   });
 });