Skip to content

Commit

Permalink
add unit tests for project style chrome
Browse files Browse the repository at this point in the history
  • Loading branch information
@tsullivan
tsullivan committed Jun 15, 2023
1 parent 9243ce4 commit 8418f07
Show file tree
Hide file tree
Showing 2 changed files with 201 additions and 141 deletions.
334 changes: 196 additions & 138 deletions x-pack/plugins/global_search_bar/public/components/search_bar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ describe('SearchBar', () => {

const basePathUrl = '/plugins/globalSearchBar/assets/';
const darkMode = false;
const chromeStyle$ = new BehaviorSubject<ChromeStyle>('classic');

beforeEach(() => {
applications = applicationServiceMock.createStartContract();
Expand Down Expand Up @@ -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'
8 changes: 5 additions & 3 deletions x-pack/plugins/global_search_bar/public/components/search_bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
);
Expand All @@ -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);
}}
Expand Down

0 comments on commit 8418f07

Please sign in to comment.