From f91f05f32cd040db2f374c0ec8e1426a7c2ca916 Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 22 Aug 2022 13:19:46 +0100 Subject: [PATCH] Chore: convert `DebugSection` test to RTL (#53965) * convert DebugSection test to RTL * remove unused import --- .betterer.results | 11 ++----- .../loki/configuration/DebugSection.test.tsx | 33 ++++++++----------- .../loki/configuration/DebugSection.tsx | 20 ++++++----- 3 files changed, 26 insertions(+), 38 deletions(-) diff --git a/.betterer.results b/.betterer.results index 20f039f9db5..f72393aa21f 100644 --- a/.betterer.results +++ b/.betterer.results @@ -92,9 +92,6 @@ exports[`no enzyme tests`] = { "public/app/plugins/datasource/loki/configuration/ConfigEditor.test.tsx:2659566901": [ [0, 17, 13, "RegExp match", "2409514259"] ], - "public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx:1551927716": [ - [0, 17, 13, "RegExp match", "2409514259"] - ], "public/app/plugins/datasource/loki/configuration/DerivedField.test.tsx:3570129984": [ [0, 19, 13, "RegExp match", "2409514259"] ], @@ -7258,12 +7255,8 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], "public/app/plugins/datasource/loki/configuration/DebugSection.tsx:5381": [ - [0, 0, 0, "Unexpected any. Specify a different type.", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"], - [0, 0, 0, "Do not use any type assertions.", "2"], - [0, 0, 0, "Unexpected any. Specify a different type.", "3"], - [0, 0, 0, "Do not use any type assertions.", "4"], - [0, 0, 0, "Do not use any type assertions.", "5"] + [0, 0, 0, "Do not use any type assertions.", "0"], + [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], "public/app/plugins/datasource/loki/configuration/DerivedField.test.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], diff --git a/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx b/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx index 82d6b2064ea..6eb14771d10 100644 --- a/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx +++ b/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx @@ -1,4 +1,5 @@ -import { mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import React from 'react'; import { dateTime, TimeRange } from '@grafana/data'; @@ -48,20 +49,12 @@ describe('DebugSection', () => { setLinkSrv(originalLinkSrv); }); - it('does not render any field if no debug text', () => { - const wrapper = mount(); - expect(wrapper.find('DebugFieldItem').length).toBe(0); + it('does not render any table rows if no debug text', () => { + render(); + expect(screen.queryByRole('row')).not.toBeInTheDocument(); }); - it('does not render any field if no derived fields', () => { - const wrapper = mount(); - const textarea = wrapper.find('textarea'); - (textarea.getDOMNode() as HTMLTextAreaElement).value = 'traceId=1234'; - textarea.simulate('change'); - expect(wrapper.find('DebugFieldItem').length).toBe(0); - }); - - it('renders derived fields', () => { + it('renders derived fields as table rows', async () => { const derivedFields = [ { matcherRegex: 'traceId=(\\w+)', @@ -78,14 +71,14 @@ describe('DebugSection', () => { }, ]; - const wrapper = mount(); - const textarea = wrapper.find('textarea'); - (textarea.getDOMNode() as HTMLTextAreaElement).value = 'traceId=1234'; - textarea.simulate('change'); + render(); + const textarea = screen.getByRole('textbox'); + await userEvent.type(textarea, 'traceId=1234'); - expect(wrapper.find('table').length).toBe(1); + expect(screen.getByRole('table')).toBeInTheDocument(); // 3 rows + one header - expect(wrapper.find('tr').length).toBe(4); - expect(wrapper.find('tr').at(1).contains('http://localhost/trace/${__value.raw}')).toBeTruthy(); + const rows = screen.getAllByRole('row'); + expect(rows.length).toBe(4); + expect(rows[1]).toHaveTextContent('http://localhost/trace/${__value.raw}'); }); }); diff --git a/public/app/plugins/datasource/loki/configuration/DebugSection.tsx b/public/app/plugins/datasource/loki/configuration/DebugSection.tsx index 49f8c958e5e..a5eeb577400 100644 --- a/public/app/plugins/datasource/loki/configuration/DebugSection.tsx +++ b/public/app/plugins/datasource/loki/configuration/DebugSection.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/css'; import cx from 'classnames'; -import React, { useState } from 'react'; +import React, { ReactNode, useState } from 'react'; import { ArrayVector, Field, FieldType, LinkModel } from '@grafana/data'; import { LegacyForms } from '@grafana/ui'; @@ -62,8 +62,8 @@ const DebugFields = ({ fields }: DebugFieldItemProps) => { {fields.map((field) => { - let value: any = field.value; - if (field.error) { + let value: ReactNode = field.value; + if (field.error && field.error instanceof Error) { value = field.error.message; } else if (field.href) { value = {value}; @@ -83,7 +83,7 @@ const DebugFields = ({ fields }: DebugFieldItemProps) => { type DebugField = { name: string; - error?: any; + error?: unknown; value?: string; href?: string; }; @@ -112,16 +112,18 @@ function makeDebugFields(derivedFields: DerivedFieldConfig[], debugText: string) })[0]; } - return { + const result: DebugField = { name: field.name, value: value || '', - href: link && link.href, - } as DebugField; + href: link ? link.href : undefined, + }; + return result; } catch (error) { - return { + const result: DebugField = { name: field.name, error, - } as DebugField; + }; + return result; } }); }