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

Chore: convert last test to RTL and remove Enzyme references (#61918)

Browse Source 
convert last test to RTL and remove enzyme references
This commit is contained in:
Ashley Harrison
2023-01-24 09:20:47 +00:00
committed by GitHub
parent 479da46a9e
commit 92a750a732
10 changed files with 98 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/package.json
View File

@@ -141,8 +141,6 @@
"@testing-library/user-event": "14.4.3",
"@types/common-tags": "^1.8.0",
"@types/d3": "7.4.0",
"@types/enzyme": "3.10.12",
"@types/enzyme-adapter-react-16": "1.0.6",
"@types/hoist-non-react-statics": "3.3.1",
"@types/is-hotkey": "0.1.7",
"@types/jest": "29.2.3",
@@ -168,11 +166,9 @@
"@types/testing-library__jest-dom": "5.14.5",
"@types/tinycolor2": "1.4.3",
"@types/uuid": "8.3.4",
"@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
"common-tags": "1.8.2",
"css-loader": "6.7.1",
"csstype": "3.1.1",
"enzyme": "3.11.0",
"esbuild": "0.16.17",
"expose-loader": "4.0.0",
"mock-raf": "1.0.1",

177
packages/grafana-ui/src/components/QueryField/QueryField.test.tsx
View File

@@ -1,6 +1,5 @@
import { mount, shallow } from 'enzyme';
import { render } from '@testing-library/react';
import React from 'react';
import { Editor } from 'slate-react';
import { createTheme } from '@grafana/data';
@@ -8,120 +7,102 @@ import { UnThemedQueryField } from './QueryField';
describe('<QueryField />', () => {
it('should render with null initial value', () => {
const wrapper = shallow(
<UnThemedQueryField theme={createTheme()} query={null} onTypeahead={jest.fn()} portalOrigin="mock-origin" />
);
expect(wrapper.find('div').exists()).toBeTruthy();
expect(() =>
render(
<UnThemedQueryField theme={createTheme()} query={null} onTypeahead={jest.fn()} portalOrigin="mock-origin" />
)
).not.toThrow();
});
it('should render with empty initial value', () => {
const wrapper = shallow(
<UnThemedQueryField theme={createTheme()} query="" onTypeahead={jest.fn()} portalOrigin="mock-origin" />
);
expect(wrapper.find('div').exists()).toBeTruthy();
expect(() =>
render(<UnThemedQueryField theme={createTheme()} query="" onTypeahead={jest.fn()} portalOrigin="mock-origin" />)
).not.toThrow();
});
it('should render with initial value', () => {
const wrapper = shallow(
<UnThemedQueryField theme={createTheme()} query="my query" onTypeahead={jest.fn()} portalOrigin="mock-origin" />
);
expect(wrapper.find('div').exists()).toBeTruthy();
expect(() =>
render(
<UnThemedQueryField theme={createTheme()} query="my query" onTypeahead={jest.fn()} portalOrigin="mock-origin" />
)
).not.toThrow();
});
it('should execute query on blur', () => {
const onRun = jest.fn();
const wrapper = mount(
<UnThemedQueryField
theme={createTheme()}
query="my query"
onTypeahead={jest.fn()}
onRunQuery={onRun}
portalOrigin="mock-origin"
/>
);
const field = wrapper.instance() as UnThemedQueryField;
const ed = wrapper.find(Editor).instance() as Editor;
expect(onRun.mock.calls.length).toBe(0);
field.handleBlur(undefined, ed, () => {});
expect(onRun.mock.calls.length).toBe(1);
});
it('should run onChange with clean text', () => {
const onChange = jest.fn();
const wrapper = shallow(
<UnThemedQueryField
theme={createTheme()}
query={`my\r clean query `}
onTypeahead={jest.fn()}
onChange={onChange}
portalOrigin="mock-origin"
/>
);
const field = wrapper.instance() as UnThemedQueryField;
field.runOnChange();
expect(onChange.mock.calls.length).toBe(1);
expect(onChange.mock.calls[0][0]).toBe('my clean query ');
});
it('should run custom on blur, but not necessarily execute query', () => {
const onBlur = jest.fn();
const onRun = jest.fn();
const wrapper = mount(
<UnThemedQueryField
theme={createTheme()}
query="my query"
onTypeahead={jest.fn()}
onBlur={onBlur}
onRunQuery={onRun}
portalOrigin="mock-origin"
/>
);
const field = wrapper.instance() as UnThemedQueryField;
const ed = wrapper.find(Editor).instance() as Editor;
expect(onBlur.mock.calls.length).toBe(0);
expect(onRun.mock.calls.length).toBe(0);
field.handleBlur(undefined, ed, () => {});
expect(onBlur.mock.calls.length).toBe(1);
expect(onRun.mock.calls.length).toBe(0);
});
describe('syntaxLoaded', () => {
it('should re-render the editor after syntax has fully loaded', () => {
const wrapper: any = shallow(
<UnThemedQueryField theme={createTheme()} query="my query" portalOrigin="mock-origin" />
const mockOnRichValueChange = jest.fn();
const { rerender } = render(
<UnThemedQueryField
theme={createTheme()}
query="my query"
onRichValueChange={mockOnRichValueChange}
portalOrigin="mock-origin"
/>
);
const spyOnChange = jest.spyOn(wrapper.instance(), 'onChange').mockImplementation(jest.fn());
wrapper.instance().editor = { insertText: () => ({ deleteBackward: () => ({ value: 'fooo' }) }) };
wrapper.setProps({ syntaxLoaded: true });
expect(spyOnChange).toHaveBeenCalledWith('fooo', true);
rerender(
<UnThemedQueryField
theme={createTheme()}
query="my query"
syntaxLoaded
onRichValueChange={mockOnRichValueChange}
portalOrigin="mock-origin"
/>
);
expect(mockOnRichValueChange).toHaveBeenCalled();
});
it('should not re-render the editor if syntax is already loaded', () => {
const wrapper: any = shallow(
<UnThemedQueryField theme={createTheme()} query="my query" portalOrigin="mock-origin" />
const mockOnRichValueChange = jest.fn();
const { rerender } = render(
<UnThemedQueryField
theme={createTheme()}
query="my query"
onRichValueChange={mockOnRichValueChange}
syntaxLoaded
portalOrigin="mock-origin"
/>
);
const spyOnChange = jest.spyOn(wrapper.instance(), 'onChange').mockImplementation(jest.fn());
wrapper.setProps({ syntaxLoaded: true });
wrapper.instance().editor = {};
wrapper.setProps({ syntaxLoaded: true });
expect(spyOnChange).not.toBeCalled();
});
it('should not re-render the editor if editor itself is not defined', () => {
const wrapper: any = shallow(
<UnThemedQueryField theme={createTheme()} query="my query" portalOrigin="mock-origin" />
rerender(
<UnThemedQueryField
theme={createTheme()}
query="my query"
onRichValueChange={mockOnRichValueChange}
syntaxLoaded
portalOrigin="mock-origin"
/>
);
const spyOnChange = jest.spyOn(wrapper.instance(), 'onChange').mockImplementation(jest.fn());
wrapper.setProps({ syntaxLoaded: true });
expect(wrapper.instance().editor).toBeFalsy();
expect(spyOnChange).not.toBeCalled();
expect(mockOnRichValueChange).not.toBeCalled();
});
it('should not re-render the editor twice once syntax is fully loaded', () => {
const wrapper: any = shallow(
<UnThemedQueryField theme={createTheme()} query="my query" portalOrigin="mock-origin" />
const mockOnRichValueChange = jest.fn();
const { rerender } = render(
<UnThemedQueryField
theme={createTheme()}
onRichValueChange={mockOnRichValueChange}
query="my query"
portalOrigin="mock-origin"
/>
);
const spyOnChange = jest.spyOn(wrapper.instance(), 'onChange').mockImplementation(jest.fn());
wrapper.instance().editor = { insertText: () => ({ deleteBackward: () => ({ value: 'fooo' }) }) };
wrapper.setProps({ syntaxLoaded: true });
wrapper.setProps({ syntaxLoaded: true });
expect(spyOnChange).toBeCalledTimes(1);
rerender(
<UnThemedQueryField
theme={createTheme()}
syntaxLoaded
onRichValueChange={mockOnRichValueChange}
query="my query"
portalOrigin="mock-origin"
/>
);
rerender(
<UnThemedQueryField
theme={createTheme()}
syntaxLoaded
onRichValueChange={mockOnRichValueChange}
query="my query"
portalOrigin="mock-origin"
/>
);
expect(mockOnRichValueChange).toBeCalledTimes(1);
});
});
});