Include recently-viewed pages in the search result panel

2 files changed, 92 insertions, 1 deletions

diff --git a/spec/frontend/__mocks__/search_results_mock.js b/spec/frontend/__mocks__/search_results_mock.js
index 151ef2b4..d3621684 100644
--- a/spec/frontend/__mocks__/search_results_mock.js
+++ b/spec/frontend/__mocks__/search_results_mock.js
@@ -67,3 +67,10 @@ export const mockErrorResults = {
     status: 'PERMISSION_DENIED',
   },
 };
+
+export const mockHistoryCookie = [
+  { path: '/runner/', title: 'GitLab Runner' },
+  { path: '/ee/topics/plan_and_track.html', title: 'Plan and track work' },
+  { path: '/ee/user/analytics/', title: 'Analyze GitLab usage' },
+  { path: '/ee/user/infrastructure/', title: 'Infrastructure management' },
+];
diff --git a/spec/frontend/search/google_search_spec.js b/spec/frontend/search/google_search_spec.js
index 4ec95674..15fab8e1 100644
--- a/spec/frontend/search/google_search_spec.js
+++ b/spec/frontend/search/google_search_spec.js
@@ -3,9 +3,20 @@
  */
 import { mount, shallowMount } from '@vue/test-utils';
 import flushPromises from 'flush-promises';
-import { mockResults, mockNoResults, mockErrorResults } from '../__mocks__/search_results_mock';
+import {
+  mockResults,
+  mockNoResults,
+  mockErrorResults,
+  mockHistoryCookie,
+} from '../__mocks__/search_results_mock';
 import SearchForm from '../../../content/frontend/search/components/google_search_form.vue';
 import SearchPage from '../../../content/frontend/search/components/google_results.vue';
+import {
+  trackPageHistory,
+  setCookie,
+  getCookie,
+  RECENT_HISTORY_ITEMS,
+} from '../../../content/frontend/search/recently_viewed';
 import { GPS_ENDPOINT, fetchResults } from '../../../content/frontend/services/google_search_api';
 
 jest.mock('../../../content/frontend/services/google_search_api', () => ({
@@ -141,3 +152,76 @@ describe('content/frontend/search/components/google_results.vue', () => {
     }
   });
 });
+
+describe('content/frontend/search/recently_viewed.js', () => {
+  afterEach(() => {
+    // Delete the cookie after each test
+    document.cookie = 'pageHistory=; expires=Mon, 12 June 2023 00:00:00 UTC; path=/;';
+  });
+
+  it('should set a cookie with the current page URL and title', () => {
+    // Set up the DOM
+    document.body.innerHTML = '<h1>Test Page</h1>';
+    const location = {
+      ...window.location,
+      pathname: '/test-page',
+    };
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: location,
+    });
+
+    trackPageHistory();
+
+    // Check that the cookie was set correctly
+    const cookieValue = getCookie('pageHistory');
+    expect(cookieValue).not.toBeNull();
+    const pageHistory = JSON.parse(cookieValue);
+    expect(pageHistory).toHaveLength(1);
+    expect(pageHistory[0].path).toBe('/test-page');
+    expect(pageHistory[0].title).toBe('Test Page');
+  });
+
+  it('should limit the number of items in the history to RECENT_HISTORY_ITEMS', () => {
+    document.body.innerHTML = '<h1>Test Page</h1>';
+
+    // Set a cookie with RECENT_HISTORY_ITEMS pages in it, then track this page
+    setCookie('pageHistory', JSON.stringify(mockHistoryCookie), 365);
+    trackPageHistory();
+
+    // Check that the cookie still contains RECENT_HISTORY_ITEMS
+    const cookieValue = getCookie('pageHistory');
+    expect(cookieValue).not.toBeNull();
+    const pageHistory = JSON.parse(cookieValue);
+    expect(pageHistory).toHaveLength(RECENT_HISTORY_ITEMS);
+  });
+
+  it('should not add duplicate history items', () => {
+    document.body.innerHTML = '<h1>Test Page</h1>';
+
+    // Set a cookie with the current page URL
+    const initialPageHistory = [{ path: '/test-page', title: 'Test Page' }];
+    setCookie('pageHistory', JSON.stringify(initialPageHistory), 365);
+
+    trackPageHistory();
+
+    // Check that the cookie was updated correctly, with one instance of Test Page
+    const cookieValue = getCookie('pageHistory');
+    expect(cookieValue).not.toBeNull();
+    const pageHistory = JSON.parse(cookieValue);
+    expect(pageHistory).toHaveLength(1);
+    expect(pageHistory[0].path).toBe('/test-page');
+    expect(pageHistory[0].title).toBe('Test Page');
+  });
+
+  it('should not set a cookie if the page does not have a title', () => {
+    // Set up the DOM without a h1 element
+    document.body.innerHTML = '<p>Test Page</p>';
+
+    trackPageHistory();
+
+    // Check that the cookie was not set
+    const cookieValue = getCookie('pageHistory');
+    expect(cookieValue).toBeNull();
+  });
+});