From 8418f0760e4cb7654b94c162d1898a7fd382581c Mon Sep 17 00:00:00 2001
From: Timothy Sullivan <tsullivan@elastic.co>
Date: Thu, 15 Jun 2023 15:31:15 -0700
Subject: [PATCH] add unit tests for project style chrome

---
 .../public/components/search_bar.test.tsx     | 334 ++++++++++--------
 .../public/components/search_bar.tsx          |   8 +-
 2 files changed, 201 insertions(+), 141 deletions(-)

diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.test.tsx b/x-pack/plugins/global_search_bar/public/components/search_bar.test.tsx
index 12ae76778af6e..aa5d42ad2a0d7 100644
--- a/x-pack/plugins/global_search_bar/public/components/search_bar.test.tsx
+++ b/x-pack/plugins/global_search_bar/public/components/search_bar.test.tsx
@@ -53,7 +53,6 @@ describe('SearchBar', () => {
 
   const basePathUrl = '/plugins/globalSearchBar/assets/';
   const darkMode = false;
-  const chromeStyle$ = new BehaviorSubject<ChromeStyle>('classic');
 
   beforeEach(() => {
     applications = applicationServiceMock.createStartContract();
@@ -89,151 +88,210 @@ describe('SearchBar', () => {
     expect(await screen.findAllByTestId('nav-search-option')).toHaveLength(list.length);
   };
 
-  it('correctly filters and sorts results', async () => {
-    searchService.find
-      .mockReturnValueOnce(
-        of(
-          createBatch('Discover', 'Canvas'),
-          createBatch({ id: 'Visualize', type: 'test' }, 'Graph')
-        )
-      )
-      .mockReturnValueOnce(of(createBatch('Discover', { id: 'My Dashboard', type: 'test' })));
-
-    render(
-      <IntlProvider locale="en">
-        <SearchBar
-          globalSearch={searchService}
-          navigateToUrl={applications.navigateToUrl}
-          basePathUrl={basePathUrl}
-          darkMode={darkMode}
-          chromeStyle$={chromeStyle$}
-          trackUiMetric={trackUiMetric}
-        />
-      </IntlProvider>
-    );
-
-    expect(searchService.find).toHaveBeenCalledTimes(0);
-
-    await focusAndUpdate();
-
-    expect(searchService.find).toHaveBeenCalledTimes(1);
-    expect(searchService.find).toHaveBeenCalledWith({}, {});
-    await assertSearchResults(['Canvas • Kibana', 'Discover • Kibana', 'Graph • Kibana']);
-
-    simulateTypeChar('d');
-
-    await assertSearchResults(['Discover • Kibana', 'My Dashboard • Test']);
-    expect(searchService.find).toHaveBeenCalledTimes(2);
-    expect(searchService.find).toHaveBeenLastCalledWith({ term: 'd' }, {});
-
-    expect(trackUiMetric).nthCalledWith(1, 'count', 'search_focus');
-    expect(trackUiMetric).nthCalledWith(2, 'count', 'search_request');
-    expect(trackUiMetric).toHaveBeenCalledTimes(2);
-  });
+  describe('chromeStyle: classic', () => {
+    const chromeStyle$ = of<ChromeStyle>('classic');
 
-  it('supports keyboard shortcuts', async () => {
-    render(
-      <IntlProvider locale="en">
-        <SearchBar
-          globalSearch={searchService}
-          navigateToUrl={applications.navigateToUrl}
-          basePathUrl={basePathUrl}
-          darkMode={darkMode}
-          chromeStyle$={chromeStyle$}
-          trackUiMetric={trackUiMetric}
-        />
-      </IntlProvider>
-    );
-    act(() => {
-      fireEvent.keyDown(window, { key: '/', ctrlKey: true, metaKey: true });
+    it('correctly filters and sorts results', async () => {
+      searchService.find
+        .mockReturnValueOnce(
+          of(
+            createBatch('Discover', 'Canvas'),
+            createBatch({ id: 'Visualize', type: 'test' }, 'Graph')
+          )
+        )
+        .mockReturnValueOnce(of(createBatch('Discover', { id: 'My Dashboard', type: 'test' })));
+
+      render(
+        <IntlProvider locale="en">
+          <SearchBar
+            globalSearch={searchService}
+            navigateToUrl={applications.navigateToUrl}
+            basePathUrl={basePathUrl}
+            darkMode={darkMode}
+            chromeStyle$={chromeStyle$}
+            trackUiMetric={trackUiMetric}
+          />
+        </IntlProvider>
+      );
+
+      expect(searchService.find).toHaveBeenCalledTimes(0);
+
+      await focusAndUpdate();
+
+      expect(searchService.find).toHaveBeenCalledTimes(1);
+      expect(searchService.find).toHaveBeenCalledWith({}, {});
+      await assertSearchResults(['Canvas • Kibana', 'Discover • Kibana', 'Graph • Kibana']);
+
+      simulateTypeChar('d');
+
+      await assertSearchResults(['Discover • Kibana', 'My Dashboard • Test']);
+      expect(searchService.find).toHaveBeenCalledTimes(2);
+      expect(searchService.find).toHaveBeenLastCalledWith({ term: 'd' }, {});
+
+      expect(trackUiMetric).nthCalledWith(1, 'count', 'search_focus');
+      expect(trackUiMetric).nthCalledWith(2, 'count', 'search_request');
+      expect(trackUiMetric).toHaveBeenCalledTimes(2);
     });
 
-    const inputElement = await screen.findByTestId('nav-search-input');
-
-    expect(document.activeElement).toEqual(inputElement);
+    it('supports keyboard shortcuts', async () => {
+      render(
+        <IntlProvider locale="en">
+          <SearchBar
+            globalSearch={searchService}
+            navigateToUrl={applications.navigateToUrl}
+            basePathUrl={basePathUrl}
+            darkMode={darkMode}
+            chromeStyle$={chromeStyle$}
+            trackUiMetric={trackUiMetric}
+          />
+        </IntlProvider>
+      );
+      act(() => {
+        fireEvent.keyDown(window, { key: '/', ctrlKey: true, metaKey: true });
+      });
+
+      const inputElement = await screen.findByTestId('nav-search-input');
+
+      expect(document.activeElement).toEqual(inputElement);
+
+      expect(trackUiMetric).nthCalledWith(1, 'count', 'shortcut_used');
+      expect(trackUiMetric).nthCalledWith(2, 'count', 'search_focus');
+      expect(trackUiMetric).toHaveBeenCalledTimes(2);
+    });
 
-    expect(trackUiMetric).nthCalledWith(1, 'count', 'shortcut_used');
-    expect(trackUiMetric).nthCalledWith(2, 'count', 'search_focus');
-    expect(trackUiMetric).toHaveBeenCalledTimes(2);
-  });
+    it('only display results from the last search', async () => {
+      const firstSearchTrigger = new BehaviorSubject<boolean>(false);
+      const firstSearch = firstSearchTrigger.pipe(
+        filter((event) => event),
+        map(() => {
+          return createBatch('Discover', 'Canvas');
+        })
+      );
+      const secondSearch = of(createBatch('Visualize', 'Map'));
+
+      searchService.find.mockReturnValueOnce(firstSearch).mockReturnValueOnce(secondSearch);
+
+      render(
+        <IntlProvider locale="en">
+          <SearchBar
+            globalSearch={searchService}
+            navigateToUrl={applications.navigateToUrl}
+            basePathUrl={basePathUrl}
+            darkMode={darkMode}
+            chromeStyle$={chromeStyle$}
+            trackUiMetric={trackUiMetric}
+          />
+        </IntlProvider>
+      );
+
+      await focusAndUpdate();
+
+      expect(searchService.find).toHaveBeenCalledTimes(1);
+      //
+      simulateTypeChar('d');
+      await assertSearchResults(['Visualize • Kibana', 'Map • Kibana']);
+
+      firstSearchTrigger.next(true);
+
+      update();
+
+      await assertSearchResults(['Visualize • Kibana', 'Map • Kibana']);
+    });
 
-  it('only display results from the last search', async () => {
-    const firstSearchTrigger = new BehaviorSubject<boolean>(false);
-    const firstSearch = firstSearchTrigger.pipe(
-      filter((event) => event),
-      map(() => {
-        return createBatch('Discover', 'Canvas');
-      })
-    );
-    const secondSearch = of(createBatch('Visualize', 'Map'));
-
-    searchService.find.mockReturnValueOnce(firstSearch).mockReturnValueOnce(secondSearch);
-
-    render(
-      <IntlProvider locale="en">
-        <SearchBar
-          globalSearch={searchService}
-          navigateToUrl={applications.navigateToUrl}
-          basePathUrl={basePathUrl}
-          darkMode={darkMode}
-          chromeStyle$={chromeStyle$}
-          trackUiMetric={trackUiMetric}
-        />
-      </IntlProvider>
-    );
-
-    await focusAndUpdate();
-
-    expect(searchService.find).toHaveBeenCalledTimes(1);
-    //
-    simulateTypeChar('d');
-    await assertSearchResults(['Visualize • Kibana', 'Map • Kibana']);
-
-    firstSearchTrigger.next(true);
-
-    update();
-
-    await assertSearchResults(['Visualize • Kibana', 'Map • Kibana']);
+    it('tracks the application navigated to', async () => {
+      searchService.find.mockReturnValueOnce(
+        of(createBatch('Discover', { id: 'My Dashboard', type: 'test' }))
+      );
+
+      render(
+        <IntlProvider locale="en">
+          <SearchBar
+            globalSearch={searchService}
+            navigateToUrl={applications.navigateToUrl}
+            basePathUrl={basePathUrl}
+            darkMode={darkMode}
+            chromeStyle$={chromeStyle$}
+            trackUiMetric={trackUiMetric}
+          />
+        </IntlProvider>
+      );
+
+      expect(searchService.find).toHaveBeenCalledTimes(0);
+
+      await focusAndUpdate();
+
+      expect(searchService.find).toHaveBeenCalledTimes(1);
+      expect(searchService.find).toHaveBeenCalledWith({}, {});
+      await assertSearchResults(['Discover • Kibana']);
+
+      const navSearchOptionToClick = await screen.findByTestId('nav-search-option');
+      act(() => {
+        fireEvent.click(navSearchOptionToClick);
+      });
+
+      expect(trackUiMetric).nthCalledWith(1, 'count', 'search_focus');
+      expect(trackUiMetric).nthCalledWith(2, 'click', [
+        'user_navigated_to_application',
+        'user_navigated_to_application_discover',
+      ]);
+      expect(trackUiMetric).toHaveBeenCalledTimes(2);
+    });
   });
 
-  it('tracks the application navigated to', async () => {
-    searchService.find.mockReturnValueOnce(
-      of(createBatch('Discover', { id: 'My Dashboard', type: 'test' }))
-    );
-
-    render(
-      <IntlProvider locale="en">
-        <SearchBar
-          globalSearch={searchService}
-          navigateToUrl={applications.navigateToUrl}
-          basePathUrl={basePathUrl}
-          darkMode={darkMode}
-          chromeStyle$={chromeStyle$}
-          trackUiMetric={trackUiMetric}
-        />
-      </IntlProvider>
-    );
-
-    expect(searchService.find).toHaveBeenCalledTimes(0);
-
-    await focusAndUpdate();
-
-    expect(searchService.find).toHaveBeenCalledTimes(1);
-    expect(searchService.find).toHaveBeenCalledWith({}, {});
-    await assertSearchResults(['Discover • Kibana']);
-
-    const navSearchOptionToClick = await screen.findByTestId('nav-search-option');
-    act(() => {
-      fireEvent.click(navSearchOptionToClick);
+  describe('chromeStyle: project', () => {
+    const chromeStyle$ = of<ChromeStyle>('project');
+
+    it('supports keyboard shortcuts', async () => {
+      render(
+        <IntlProvider locale="en">
+          <SearchBar
+            globalSearch={searchService}
+            navigateToUrl={applications.navigateToUrl}
+            basePathUrl={basePathUrl}
+            darkMode={darkMode}
+            chromeStyle$={chromeStyle$}
+            trackUiMetric={trackUiMetric}
+          />
+        </IntlProvider>
+      );
+
+      act(() => {
+        fireEvent.keyDown(window, { key: '/', ctrlKey: true, metaKey: true });
+      });
+
+      const inputElement = await screen.findByTestId('nav-search-input');
+
+      expect(document.activeElement).toEqual(inputElement);
+
+      fireEvent.click(await screen.findByTestId('nav-search-conceal'));
+      expect(screen.queryAllByTestId('nav-search-input')).toHaveLength(0);
+
+      expect(trackUiMetric).nthCalledWith(1, 'count', 'shortcut_used');
+      expect(trackUiMetric).nthCalledWith(2, 'count', 'search_focus');
+      expect(trackUiMetric).toHaveBeenCalledTimes(2);
     });
 
-    expect(trackUiMetric).nthCalledWith(1, 'count', 'search_focus');
-    expect(trackUiMetric).nthCalledWith(2, 'click', [
-      'user_navigated_to_application',
-      'user_navigated_to_application_discover',
-    ]);
-    expect(trackUiMetric).toHaveBeenCalledTimes(2);
+    it('supports show/hide', async () => {
+      render(
+        <IntlProvider locale="en">
+          <SearchBar
+            globalSearch={searchService}
+            navigateToUrl={applications.navigateToUrl}
+            basePathUrl={basePathUrl}
+            darkMode={darkMode}
+            chromeStyle$={chromeStyle$}
+            trackUiMetric={trackUiMetric}
+          />
+        </IntlProvider>
+      );
+
+      fireEvent.click(await screen.findByTestId('nav-search-reveal'));
+      expect(await screen.findByTestId('nav-search-input')).toBeVisible();
+
+      fireEvent.click(await screen.findByTestId('nav-search-conceal'));
+      expect(screen.queryAllByTestId('nav-search-input')).toHaveLength(0);
+
+      expect(trackUiMetric).nthCalledWith(1, 'count', 'search_focus');
+    });
   });
 });
-
-// FIXME: add tests for chromeStyle === 'project'
diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
index 74dd7384ef651..1648becaff819 100644
--- a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
+++ b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
@@ -265,10 +265,11 @@ export const SearchBar: FC<SearchBarProps> = ({
     };
     return (
       <EuiButtonIcon
-        buttonRef={visibilityButtonRef}
         aria-label={i18nStrings.showSearchAriaText}
-        iconType="search"
+        buttonRef={visibilityButtonRef}
         color="text"
+        data-test-subj="nav-search-reveal"
+        iconType="search"
         onClick={onShowSearch}
       />
     );
@@ -279,8 +280,9 @@ export const SearchBar: FC<SearchBarProps> = ({
       return (
         <EuiButtonIcon
           aria-label={i18nStrings.closeSearchAriaText}
-          iconType="cross"
           color="text"
+          data-test-subj="nav-search-conceal"
+          iconType="cross"
           onClick={() => {
             setIsVisible(false);
           }}