From 0bfd48c1642e95b1735d7e4f6ba06cb7d3461bac Mon Sep 17 00:00:00 2001 From: Seyaji <67058118+Seyaji@users.noreply.github.com> Date: Tue, 21 Jun 2022 15:55:10 +0100 Subject: [PATCH] Chore: Convert DataLinks tests to RTL (#51137) * Convert DataLinks tests to RTL * Convert DataLinks test to RTL * Convert DataLinks test to RTL * Convert DataLinks test to RTL --- .betterer.results | 3 - .../configuration/DataLinks.test.tsx | 109 +++++++----------- .../elasticsearch/configuration/DataLinks.tsx | 2 +- 3 files changed, 44 insertions(+), 70 deletions(-) diff --git a/.betterer.results b/.betterer.results index a14b30aedfb..296a7fd20b7 100644 --- a/.betterer.results +++ b/.betterer.results @@ -131,9 +131,6 @@ exports[`no enzyme tests`] = { "public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx:3481855642": [ [0, 26, 13, "RegExp match", "2409514259"] ], - "public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx:248699332": [ - [0, 17, 13, "RegExp match", "2409514259"] - ], "public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx:57753101": [ [0, 19, 13, "RegExp match", "2409514259"] ], diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx index 7e33ac2e2af..a623d68e822 100644 --- a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx +++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.test.tsx @@ -1,84 +1,61 @@ -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import React from 'react'; -import { act } from 'react-dom/test-utils'; -import { Button } from '@grafana/ui'; +import { DataLinkConfig } from '../types'; -import { DataLink } from './DataLink'; -import { DataLinks } from './DataLinks'; +import { DataLinks, Props } from './DataLinks'; -describe('DataLinks', () => { - let originalGetSelection: typeof window.getSelection; - beforeAll(() => { - originalGetSelection = window.getSelection; - window.getSelection = () => null; +const setup = (propOverrides?: Partial) => { + const props: Props = { + value: [], + onChange: jest.fn(), + ...propOverrides, + }; + + return render(); +}; + +describe('DataLinks tests', () => { + it('should render correctly with no fields', async () => { + setup(); + + expect(screen.getByRole('heading', { name: 'Data links' })); + expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument(); + expect(await screen.findAllByRole('button')).toHaveLength(1); }); - afterAll(() => { - window.getSelection = originalGetSelection; + it('should render correctly when passed fields', async () => { + setup({ value: testValue }); + + expect(await screen.findAllByRole('button', { name: 'Remove field' })).toHaveLength(2); + expect(await screen.findAllByRole('checkbox', { name: 'Internal link' })).toHaveLength(2); }); - it('renders correctly when no fields', async () => { - let wrapper: any; - await act( - // @ts-ignore we shouldn't use Promises in act => the "void | undefined" is here to forbid any sneaky "Promise" returns. - async () => { - wrapper = await mount( {}} />); - } - ); - expect(wrapper.find(Button).length).toBe(1); - expect(wrapper.find(Button).contains('Add')).toBeTruthy(); - expect(wrapper.find(DataLink).length).toBe(0); - }); - - it('renders correctly when there are fields', async () => { - let wrapper: any; - await act( - // @ts-ignore we shouldn't use Promises in act => the "void | undefined" is here to forbid any sneaky "Promise" returns. - async () => { - wrapper = await mount( {}} />); - } - ); - - expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Add')).length).toBe(1); - expect(wrapper.find(DataLink).length).toBe(2); - }); - - it('adds new field', async () => { + it('should call onChange to add a new field when the add button is clicked', async () => { const onChangeMock = jest.fn(); - let wrapper: any; - await act( - // @ts-ignore we shouldn't use Promises in act => the "void | undefined" is here to forbid any sneaky "Promise" returns. - async () => { - wrapper = await mount(); - } - ); - const addButton = wrapper.find(Button).filterWhere((button: any) => button.contains('Add')); - addButton.simulate('click'); - expect(onChangeMock.mock.calls[0][0].length).toBe(1); + setup({ onChange: onChangeMock }); + + expect(onChangeMock).not.toHaveBeenCalled(); + const addButton = screen.getByRole('button', { name: 'Add' }); + await userEvent.click(addButton); + + expect(onChangeMock).toHaveBeenCalled(); }); - it('removes field', async () => { + it('should call onChange to remove a field when the remove button is clicked', async () => { const onChangeMock = jest.fn(); - let wrapper: any; - await act( - // @ts-ignore we shouldn't use Promises in act => the "void | undefined" is here to forbid any sneaky "Promise" returns. - async () => { - wrapper = await mount(); - } - ); - const removeButton = wrapper.find(DataLink).at(0).find(Button); - removeButton.simulate('click'); - const newValue = onChangeMock.mock.calls[0][0]; - expect(newValue.length).toBe(1); - expect(newValue[0]).toMatchObject({ - field: 'regex2', - url: 'localhost2', - }); + setup({ value: testValue, onChange: onChangeMock }); + + expect(onChangeMock).not.toHaveBeenCalled(); + const removeButton = await screen.findAllByRole('button', { name: 'Remove field' }); + await userEvent.click(removeButton[0]); + + expect(onChangeMock).toHaveBeenCalled(); }); }); -const testValue = [ +const testValue: DataLinkConfig[] = [ { field: 'regex1', url: 'localhost1', diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx index 910cb5cb8e2..b3f99fcdfaf 100644 --- a/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx +++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx @@ -20,7 +20,7 @@ const getStyles = (theme: GrafanaTheme2) => { }; }; -type Props = { +export type Props = { value?: DataLinkConfig[]; onChange: (value: DataLinkConfig[]) => void; };