grafana/public/app/features/search/components/SearchResults.test.tsx

53 lines
1.5 KiB
TypeScript
Raw Normal View History

Search/migrate search results (#22930) * Search: Setup SearchResults.tsx * Search: add watchDepth * Search: Use SearchResults.tsx in Angular template * Search: Render search result header * Search: Move new search components to features/search * Search: Render nested dashboards * Search: Expand dashboard folder * Search: Remove fa prefix from icon names * Search: Enable search results toggling * Search: Add onItemClick handler * Search: Add missing aria-label * Search: Add no results message * Search: Fix e2e selectors * Search: Update SearchField imports * Search: Add conditional classes * Search: Abstract DashboardCheckbox * Search: Separate ResultItem * Search: Style ResultItem * Search: Separate search components * Search: Tweak checkbox styling * Search: Simplify component names * Search: Separate tag component * Search: Checkbox docs * Search: Remove inline on click * Add Tag component * Add Tag story * Add TagList * Group Tab and TabList * Fix typechecks * Remove Meta * Use forwardRef for the Tag * Search: Use TagList from grafana/ui * Search: Add media query for TagList * Search: Add types * Search: Remove selectThemeVariant from SearchItem.tsx * Search: Style section + header * Search: Use semantic html * Search: Adjust section padding * Search: Setup tests * Search: Fix tests * Search: tweak result styles * Search: Expand SearchResults tests * Search: Add SearchItem tests * Search: Use SearchResults in search.html * Search: Toggle search result sections * Search: Make selected prop optional * Search: Fix tag selection * Search: Fix tag filter onChange * Search: Fix uncontrolled state change warning * Search: Update icon names * Search: memoize SearchCheckbox.tsx * Search: Update types * Search: Cleanup events * Search: Semantic html * Use styleMixins * Search: Tweak styling * Search: useCallback for checkbox toggle * Search: Add stylesFactory Co-authored-by: CirceCI <circleci@grafana.com>
2020-03-26 04:09:08 -05:00
import React from 'react';
import { shallow, mount } from 'enzyme';
import { SearchResults, Props } from './SearchResults';
Search/refactor dashboard search (#23274) * Search: add search wrapper * Search: add DashboardSearch.tsx * Search: enable search * Search: update types * Search: useReducer for saving search results * Search: use default query * Search: add toggle custom action * Search: add onQueryChange * Search: debounce search * Search: pas dispatch as a prop * Search: add tag filter * Search: Fix types * Search: revert changes * Search: close overlay on esc * Search: enable tag filtering * Search: clear query * Search: add autofocus to search field * Search: Rename close to closeSearch * Search: Add no results message * Search: Add loading state * Search: Remove Select from Forms namespace * Remove Add selectedIndex * Remove Add getFlattenedSections * Remove Enable selecting items * Search: add hasId * Search: preselect first item * Search: Add utils tests * Search: Fix moving selection down * Search: Add findSelected * Search: Add type to section * Search: Handle Enter key press on item highlight * Search: Move reducer et al. to separate files * Search: Remove redundant render check * Search: Close overlay on Esc and ArrowLeft press * Search: Add close button * Search: Document utils * Search: use Icon for remove icon * Search: Add DashboardSearch.test.tsx * Search: Move test data to a separate file * Search: Finalise DashboardSearch.test.tsx * Add search reducer tests * Search: Add search results loading indicator * Search: Remove inline function * Search: Do not mutate item * Search: Tweak utils * Search: Do not clear query on tag clear * Search: Fix folder:current search * Search: Fix results scroll * Search: Update tests * Search: Close overlay on cog icon click * Add mobile styles for close button * Search: Use CustomScrollbar * Search: Memoize TagList.tsx * Search: Fix type errors * Search: More strictNullChecks fixes * Search: Consistent handler names * Search: Fix search items types in test * Search: Fix merge conflicts * Search: Fix strictNullChecks errors
2020-04-08 10:14:03 -05:00
import { searchResults } from '../testData';
import { SearchLayout } from '../types';
Search/migrate search results (#22930) * Search: Setup SearchResults.tsx * Search: add watchDepth * Search: Use SearchResults.tsx in Angular template * Search: Render search result header * Search: Move new search components to features/search * Search: Render nested dashboards * Search: Expand dashboard folder * Search: Remove fa prefix from icon names * Search: Enable search results toggling * Search: Add onItemClick handler * Search: Add missing aria-label * Search: Add no results message * Search: Fix e2e selectors * Search: Update SearchField imports * Search: Add conditional classes * Search: Abstract DashboardCheckbox * Search: Separate ResultItem * Search: Style ResultItem * Search: Separate search components * Search: Tweak checkbox styling * Search: Simplify component names * Search: Separate tag component * Search: Checkbox docs * Search: Remove inline on click * Add Tag component * Add Tag story * Add TagList * Group Tab and TabList * Fix typechecks * Remove Meta * Use forwardRef for the Tag * Search: Use TagList from grafana/ui * Search: Add media query for TagList * Search: Add types * Search: Remove selectThemeVariant from SearchItem.tsx * Search: Style section + header * Search: Use semantic html * Search: Adjust section padding * Search: Setup tests * Search: Fix tests * Search: tweak result styles * Search: Expand SearchResults tests * Search: Add SearchItem tests * Search: Use SearchResults in search.html * Search: Toggle search result sections * Search: Make selected prop optional * Search: Fix tag selection * Search: Fix tag filter onChange * Search: Fix uncontrolled state change warning * Search: Update icon names * Search: memoize SearchCheckbox.tsx * Search: Update types * Search: Cleanup events * Search: Semantic html * Use styleMixins * Search: Tweak styling * Search: useCallback for checkbox toggle * Search: Add stylesFactory Co-authored-by: CirceCI <circleci@grafana.com>
2020-03-26 04:09:08 -05:00
const setup = (propOverrides?: Partial<Props>, renderMethod = shallow) => {
const props: Props = {
//@ts-ignore
Search/refactor dashboard search (#23274) * Search: add search wrapper * Search: add DashboardSearch.tsx * Search: enable search * Search: update types * Search: useReducer for saving search results * Search: use default query * Search: add toggle custom action * Search: add onQueryChange * Search: debounce search * Search: pas dispatch as a prop * Search: add tag filter * Search: Fix types * Search: revert changes * Search: close overlay on esc * Search: enable tag filtering * Search: clear query * Search: add autofocus to search field * Search: Rename close to closeSearch * Search: Add no results message * Search: Add loading state * Search: Remove Select from Forms namespace * Remove Add selectedIndex * Remove Add getFlattenedSections * Remove Enable selecting items * Search: add hasId * Search: preselect first item * Search: Add utils tests * Search: Fix moving selection down * Search: Add findSelected * Search: Add type to section * Search: Handle Enter key press on item highlight * Search: Move reducer et al. to separate files * Search: Remove redundant render check * Search: Close overlay on Esc and ArrowLeft press * Search: Add close button * Search: Document utils * Search: use Icon for remove icon * Search: Add DashboardSearch.test.tsx * Search: Move test data to a separate file * Search: Finalise DashboardSearch.test.tsx * Add search reducer tests * Search: Add search results loading indicator * Search: Remove inline function * Search: Do not mutate item * Search: Tweak utils * Search: Do not clear query on tag clear * Search: Fix folder:current search * Search: Fix results scroll * Search: Update tests * Search: Close overlay on cog icon click * Add mobile styles for close button * Search: Use CustomScrollbar * Search: Memoize TagList.tsx * Search: Fix type errors * Search: More strictNullChecks fixes * Search: Consistent handler names * Search: Fix search items types in test * Search: Fix merge conflicts * Search: Fix strictNullChecks errors
2020-04-08 10:14:03 -05:00
results: searchResults,
Search/migrate search results (#22930) * Search: Setup SearchResults.tsx * Search: add watchDepth * Search: Use SearchResults.tsx in Angular template * Search: Render search result header * Search: Move new search components to features/search * Search: Render nested dashboards * Search: Expand dashboard folder * Search: Remove fa prefix from icon names * Search: Enable search results toggling * Search: Add onItemClick handler * Search: Add missing aria-label * Search: Add no results message * Search: Fix e2e selectors * Search: Update SearchField imports * Search: Add conditional classes * Search: Abstract DashboardCheckbox * Search: Separate ResultItem * Search: Style ResultItem * Search: Separate search components * Search: Tweak checkbox styling * Search: Simplify component names * Search: Separate tag component * Search: Checkbox docs * Search: Remove inline on click * Add Tag component * Add Tag story * Add TagList * Group Tab and TabList * Fix typechecks * Remove Meta * Use forwardRef for the Tag * Search: Use TagList from grafana/ui * Search: Add media query for TagList * Search: Add types * Search: Remove selectThemeVariant from SearchItem.tsx * Search: Style section + header * Search: Use semantic html * Search: Adjust section padding * Search: Setup tests * Search: Fix tests * Search: tweak result styles * Search: Expand SearchResults tests * Search: Add SearchItem tests * Search: Use SearchResults in search.html * Search: Toggle search result sections * Search: Make selected prop optional * Search: Fix tag selection * Search: Fix tag filter onChange * Search: Fix uncontrolled state change warning * Search: Update icon names * Search: memoize SearchCheckbox.tsx * Search: Update types * Search: Cleanup events * Search: Semantic html * Use styleMixins * Search: Tweak styling * Search: useCallback for checkbox toggle * Search: Add stylesFactory Co-authored-by: CirceCI <circleci@grafana.com>
2020-03-26 04:09:08 -05:00
onSelectionChanged: () => {},
onTagSelected: (name: string) => {},
onFolderExpanding: () => {},
onToggleSelection: () => {},
editable: false,
layout: SearchLayout.Folders,
Search/migrate search results (#22930) * Search: Setup SearchResults.tsx * Search: add watchDepth * Search: Use SearchResults.tsx in Angular template * Search: Render search result header * Search: Move new search components to features/search * Search: Render nested dashboards * Search: Expand dashboard folder * Search: Remove fa prefix from icon names * Search: Enable search results toggling * Search: Add onItemClick handler * Search: Add missing aria-label * Search: Add no results message * Search: Fix e2e selectors * Search: Update SearchField imports * Search: Add conditional classes * Search: Abstract DashboardCheckbox * Search: Separate ResultItem * Search: Style ResultItem * Search: Separate search components * Search: Tweak checkbox styling * Search: Simplify component names * Search: Separate tag component * Search: Checkbox docs * Search: Remove inline on click * Add Tag component * Add Tag story * Add TagList * Group Tab and TabList * Fix typechecks * Remove Meta * Use forwardRef for the Tag * Search: Use TagList from grafana/ui * Search: Add media query for TagList * Search: Add types * Search: Remove selectThemeVariant from SearchItem.tsx * Search: Style section + header * Search: Use semantic html * Search: Adjust section padding * Search: Setup tests * Search: Fix tests * Search: tweak result styles * Search: Expand SearchResults tests * Search: Add SearchItem tests * Search: Use SearchResults in search.html * Search: Toggle search result sections * Search: Make selected prop optional * Search: Fix tag selection * Search: Fix tag filter onChange * Search: Fix uncontrolled state change warning * Search: Update icon names * Search: memoize SearchCheckbox.tsx * Search: Update types * Search: Cleanup events * Search: Semantic html * Use styleMixins * Search: Tweak styling * Search: useCallback for checkbox toggle * Search: Add stylesFactory Co-authored-by: CirceCI <circleci@grafana.com>
2020-03-26 04:09:08 -05:00
};
Object.assign(props, propOverrides);
const wrapper = renderMethod(<SearchResults {...props} />);
const instance = wrapper.instance();
return {
wrapper,
instance,
};
};
describe('SearchResults', () => {
it('should render result items', () => {
const { wrapper } = setup();
expect(wrapper.find({ 'aria-label': 'Search section' })).toHaveLength(2);
});
it('should render section items for expanded section', () => {
const { wrapper } = setup();
expect(wrapper.find({ 'aria-label': 'Search items' }).children()).toHaveLength(2);
});
it('should not render checkboxes for non-editable results', () => {
//@ts-ignore
const { wrapper } = setup({ editable: false }, mount);
expect(wrapper.find({ type: 'checkbox' })).toHaveLength(0);
});
it('should render checkboxes for non-editable results', () => {
//@ts-ignore
const { wrapper } = setup({ editable: true }, mount);
expect(wrapper.find({ type: 'checkbox' })).toHaveLength(4);
});
});