From d760b037848a3c734625874f48511973351791f8 Mon Sep 17 00:00:00 2001 From: Seyaji <67058118+Seyaji@users.noreply.github.com> Date: Wed, 22 Jun 2022 17:42:04 +0100 Subject: [PATCH] Convert AccordianKeyValues test to RTL (#51257) --- .betterer.results | 3 - .../SpanDetail/AccordianKeyValues.test.js | 121 ++++++++++-------- .../SpanDetail/AccordianKeyValues.tsx | 2 +- 3 files changed, 66 insertions(+), 60 deletions(-) diff --git a/.betterer.results b/.betterer.results index 420caf40267..00e24807afa 100644 --- a/.betterer.results +++ b/.betterer.results @@ -50,9 +50,6 @@ exports[`no enzyme tests`] = { "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.js:1734982398": [ [14, 26, 13, "RegExp match", "2409514259"] ], - "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js:2408389970": [ - [14, 19, 13, "RegExp match", "2409514259"] - ], "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.test.js:3960703835": [ [14, 19, 13, "RegExp match", "2409514259"] ], diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js index c5661b11986..d25e857a5c8 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js @@ -12,86 +12,95 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import React from 'react'; import AccordianKeyValues, { KeyValuesSummary } from './AccordianKeyValues'; -import * as markers from './AccordianKeyValues.markers'; -import KeyValuesTable from './KeyValuesTable'; const tags = [ { key: 'span.kind', value: 'client' }, { key: 'omg', value: 'mos-def' }, ]; -describe('', () => { - let wrapper; - - const props = { data: tags }; - - beforeEach(() => { - wrapper = shallow(); - }); - - it('renders without exploding', () => { - expect(wrapper).toBeDefined(); - }); - - it('returns `null` when props.data is empty', () => { - wrapper.setProps({ data: null }); - expect(wrapper.isEmptyRender()).toBe(true); - }); - - it('generates a list from `data`', () => { - expect(wrapper.find('li').length).toBe(tags.length); - }); - - it('renders the data as text', () => { - const texts = wrapper.find('li').map((node) => node.text()); - const expectedTexts = tags.map((tag) => `${tag.key}=${tag.value}`); - expect(texts).toEqual(expectedTexts); - }); -}); - -describe('', () => { - let wrapper; - +const setupAccordian = (propOverrides) => { const props = { compact: false, data: tags, - highContrast: false, - isOpen: false, - label: 'le-label', + isOpen: true, + label: 'test accordian', onToggle: jest.fn(), + ...propOverrides, }; + return render(); +}; - beforeEach(() => { - wrapper = shallow(); +const setupKeyValues = (propOverrides) => { + const props = { + data: tags, + ...propOverrides, + }; + return render(); +}; + +describe('KeyValuesSummary tests', () => { + it('renders without exploding', () => { + expect(() => setupKeyValues()).not.toThrow(); }); + it('returns `null` when props.data is empty', () => { + setupKeyValues({ data: null }); + + expect(screen.queryAllByRole('table')).toHaveLength(0); + expect(screen.queryAllByRole('row')).toHaveLength(0); + expect(screen.queryAllByRole('cell')).toHaveLength(0); + }); + + it('generates a list from `data` with the correct content', () => { + setupKeyValues(); + + expect(screen.queryAllByRole('listitem')).toHaveLength(2); + }); + + it('renders the data as text', () => { + setupKeyValues(); + + expect(screen.getByText(/^span.kind$/)).toBeInTheDocument(); + expect(screen.getByText(/^client$/)).toBeInTheDocument(); + expect(screen.getByText(/^omg$/)).toBeInTheDocument(); + expect(screen.getByText(/^mos-def$/)).toBeInTheDocument(); + }); +}); + +describe('AccordianKeyValues test', () => { it('renders without exploding', () => { - expect(wrapper).toBeDefined(); - expect(wrapper.exists()).toBe(true); + expect(() => setupAccordian()).not.toThrow(); }); it('renders the label', () => { - const header = wrapper.find(`[data-test="${markers.LABEL}"]`); - expect(header.length).toBe(1); - expect(header.text()).toBe(`${props.label}:`); + setupAccordian(); + + expect(screen.getByTestId('AccordianKeyValues--header')).toBeInTheDocument(); + }); + + it('renders table correctly when passed data & is open ', () => { + setupAccordian(); + + expect(screen.getByRole('switch', { name: 'test accordian' })).toBeInTheDocument(); + expect(screen.getByRole('table')).toBeInTheDocument(); + expect(screen.getByRole('row', { name: 'span.kind "client"' })).toBeInTheDocument(); + expect(screen.getByRole('cell', { name: 'span.kind' })).toBeInTheDocument(); + expect(screen.getByRole('cell', { name: '"client"' })).toBeInTheDocument(); + expect(screen.getByRole('cell', { name: 'omg' })).toBeInTheDocument(); + expect(screen.getByRole('cell', { name: '"mos-def"' })).toBeInTheDocument(); }); it('renders the summary instead of the table when it is not expanded', () => { - const summary = wrapper.find('[data-test-id="AccordianKeyValues--header"]').find(KeyValuesSummary); - expect(summary.length).toBe(1); - expect(summary.prop('data')).toBe(tags); - expect(wrapper.find(KeyValuesTable).length).toBe(0); - }); + setupAccordian({ isOpen: false }); - it('renders the table instead of the summarywhen it is expanded', () => { - wrapper.setProps({ isOpen: true }); - expect(wrapper.find(KeyValuesSummary).length).toBe(0); - const table = wrapper.find(KeyValuesTable); - expect(table.length).toBe(1); - expect(table.prop('data')).toBe(tags); + expect( + screen.getByRole('switch', { name: 'test accordian: span.kind = client omg = mos-def' }) + ).toBeInTheDocument(); + expect(screen.queryByRole('table')).not.toBeInTheDocument(); + expect(screen.queryAllByRole('cell')).toHaveLength(0); }); }); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx index 87ee8a16987..afac5297b21 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx @@ -148,7 +148,7 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) { [styles.headerHighContrast]: highContrast && !isEmpty, })} {...headerProps} - data-test-id="AccordianKeyValues--header" + data-testid="AccordianKeyValues--header" > {arrow}