IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

convert PartialHighlighter test to RTL (#49708)

Browse Source
This commit is contained in:
Ashley Harrison 2022-05-26 17:09:44 +01:00 committed by GitHub
parent b84294dd27
commit a12cdf8283
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -20,9 +20,6 @@ exports[`no enzyme tests`] = {
"packages/grafana-ui/src/components/QueryField/QueryField.test.tsx:375894800": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"packages/grafana-ui/src/components/Typeahead/PartialHighlighter.test.tsx:1751923376": [
[0, 31, 13, "RegExp match", "2409514259"]
],
"packages/grafana-ui/src/slate-plugins/braces.test.tsx:1440546721": [
[0, 19, 13, "RegExp match", "2409514259"]
],

48
packages/grafana-ui/src/components/Typeahead/PartialHighlighter.test.tsx
View File

@ -1,17 +1,21 @@
import { mount, ReactWrapper } from 'enzyme';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { PartialHighlighter } from './PartialHighlighter';
function assertPart(component: ReactWrapper, isHighlighted: boolean, text: string): void {
expect(component.type()).toEqual(isHighlighted ? 'mark' : 'span');
expect(component.hasClass('highlight')).toEqual(isHighlighted);
expect(component.text()).toEqual(text);
function assertPart(text: string, isHighlighted: boolean): void {
const element = screen.getByText(text);
expect(element).toBeInTheDocument();
if (isHighlighted) {
expect(element).toHaveClass('highlight');
} else {
expect(element).not.toHaveClass('highlight');
}
}
describe('PartialHighlighter component', () => {
it('should highlight inner parts correctly', () => {
const component = mount(
render(
<PartialHighlighter
text="Lorem ipsum dolor sit amet"
highlightClassName="highlight"
@ -21,17 +25,16 @@ describe('PartialHighlighter component', () => {
]}
/>
);
const main = component.find('div');
assertPart(main.childAt(0), false, 'Lorem ');
assertPart(main.childAt(1), true, 'ipsum');
assertPart(main.childAt(2), false, ' dolor ');
assertPart(main.childAt(3), true, 'sit');
assertPart(main.childAt(4), false, ' amet');
assertPart('Lorem', false);
assertPart('ipsum', true);
assertPart('dolor', false);
assertPart('sit', true);
assertPart('amet', false);
});
it('should highlight outer parts correctly', () => {
const component = mount(
render(
<PartialHighlighter
text="Lorem ipsum dolor sit amet"
highlightClassName="highlight"
@ -41,16 +44,17 @@ describe('PartialHighlighter component', () => {
]}
/>
);
const main = component.find('div');
assertPart(main.childAt(0), true, 'Lorem');
assertPart(main.childAt(1), false, ' ipsum dolor sit ');
assertPart(main.childAt(2), true, 'amet');
assertPart('Lorem', true);
assertPart('ipsum dolor sit', false);
assertPart('amet', true);
});
it('returns null if highlightParts is empty', () => {
const component = mount(
<PartialHighlighter text="Lorem ipsum dolor sit amet" highlightClassName="highlight" highlightParts={[]} />
);
expect(component.html()).toBe(null);
it('renders nothing if highlightParts is empty', () => {
render(<PartialHighlighter text="Lorem ipsum dolor sit amet" highlightClassName="highlight" highlightParts={[]} />);
expect(screen.queryByText('Lorem')).not.toBeInTheDocument();
expect(screen.queryByText('ipsum')).not.toBeInTheDocument();
expect(screen.queryByText('dolor')).not.toBeInTheDocument();
expect(screen.queryByText('sit')).not.toBeInTheDocument();
expect(screen.queryByText('amet')).not.toBeInTheDocument();
});
});