public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

convert Typeahead test to RTL (#49509)

Browse Source
This commit is contained in:
Ashley Harrison
2022-05-25 16:53:55 +01:00
committed by GitHub
parent a0b707ebe0
commit ec65332c82
3 changed files with 29 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.betterer.results
-3
View File
@@ -26,9 +26,6 @@ exports[`no enzyme tests`] = {
"packages/grafana-ui/src/components/Typeahead/PartialHighlighter.test.tsx:1751923376": [
[0, 31, 13, "RegExp match", "2409514259"]
],
"packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx:972524250": [
[0, 17, 13, "RegExp match", "2409514259"]
],
"packages/grafana-ui/src/slate-plugins/braces.test.tsx:1440546721": [
[0, 19, 13, "RegExp match", "2409514259"]
],
packages/grafana-ui/src/components/Typeahead/Typeahead.test.tsx
+28 -40
View File
@@ -1,57 +1,45 @@
import { mount } from 'enzyme';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { CompletionItemGroup, CompletionItemKind } from '../../types';
import { CompletionItemGroup } from '../../types';
import { Typeahead, State } from './Typeahead';
import { TypeaheadItem } from './TypeaheadItem';
import { Typeahead } from './Typeahead';
describe('Typeahead', () => {
const completionItemGroups = [{ label: 'my group', items: [{ label: 'first item' }] }];
const completionItemGroups: CompletionItemGroup[] = [{ label: 'my group', items: [{ label: 'first item' }] }];
describe('when closed', () => {
it('renders nothing when no items given', () => {
const component = mount(<Typeahead origin="test" groupedItems={[]} />);
expect(component.find('.typeahead')).toHaveLength(0);
render(<Typeahead origin="test" groupedItems={[]} />);
expect(screen.queryByTestId('typeahead')).not.toBeInTheDocument();
});
it('renders nothing when items given', () => {
const component = mount(<Typeahead origin="test" groupedItems={completionItemGroups} />);
expect(component.find('.typeahead')).toHaveLength(0);
render(<Typeahead origin="test" groupedItems={completionItemGroups} />);
expect(screen.queryByTestId('typeahead')).not.toBeInTheDocument();
});
});
describe('when open', () => {
it('renders given items and nothing is selected', () => {
const component = mount(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
expect(component.find('.typeahead')).toHaveLength(1);
const items = component.find(TypeaheadItem);
render(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
expect(screen.getByTestId('typeahead')).toBeInTheDocument();
const items = screen.getAllByRole('listitem');
expect(items).toHaveLength(2);
expect(items.get(0).props.item.kind).toEqual(CompletionItemKind.GroupTitle);
expect(items.get(0).props.isSelected).toBeFalsy();
expect(items.get(1).props.item.label).toEqual('first item');
expect(items.get(1).props.isSelected).toBeFalsy();
expect(items[0]).toHaveTextContent('my group');
expect(items[1]).toHaveTextContent('first item');
});
it('can be rendered properly even if the size of items is large', () => {
const completionItemGroups: CompletionItemGroup[] = [{ label: 'my group', items: [] }];
const itemsSize = 1000000;
for (let i = 0; i < itemsSize; i++) {
completionItemGroups[0].items.push({ label: 'item' + i });
}
render(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
expect(screen.getByTestId('typeahead')).toBeInTheDocument();
});
});
it('selected the first non-group item on moving to first item', () => {
const component = mount(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
expect(component.find('.typeahead')).toHaveLength(1);
let items = component.find(TypeaheadItem);
expect(items).toHaveLength(2);
expect((component.state() as State).typeaheadIndex).toBe(null);
(component.instance() as Typeahead).moveMenuIndex(1);
expect((component.state() as State).typeaheadIndex).toBe(1);
component.setProps({});
items = component.find(TypeaheadItem);
expect(items.get(0).props.isSelected).toBeFalsy();
expect(items.get(1).props.isSelected).toBeTruthy();
});
it('can be rendered properly even if the size of items is large', () => {
const completionItemGroups: CompletionItemGroup[] = [{ label: 'my group', items: [] }];
const itemsSize = 1000000;
for (let i = 0; i < itemsSize; i++) {
completionItemGroups[0].items.push({ label: 'item' + i });
}
const component = mount(<Typeahead origin="test" groupedItems={completionItemGroups} isOpen />);
expect(component.find('.typeahead')).toHaveLength(1);
});
});
packages/grafana-ui/src/components/Typeahead/Typeahead.tsx
+1 -1
View File
@@ -162,7 +162,7 @@ export class Typeahead extends React.PureComponent<Props, State> {
return (
<Portal origin={origin} isOpen={isOpen} style={this.menuPosition}>
<ul className="typeahead">
<ul className="typeahead" data-testid="typeahead">
<FixedSizeList
ref={this.listRef}
itemCount={allItems.length}