diff --git a/.betterer.results b/.betterer.results index 855ad13778f..e9a11b662e2 100644 --- a/.betterer.results +++ b/.betterer.results @@ -44,9 +44,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/KeyValuesTable.test.js:3813002651": [ - [14, 19, 13, "RegExp match", "2409514259"] - ], "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js:700147304": [ [16, 19, 13, "RegExp match", "2409514259"] ], @@ -2555,7 +2552,7 @@ exports[`better eslint`] = { "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx:1954428690": [ [97, 35, 3, "Unexpected any. Specify a different type.", "193409811"] ], - "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx:1594863792": [ + "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx:3587041872": [ [77, 35, 3, "Unexpected any. Specify a different type.", "193409811"] ], "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx:3379895243": [ @@ -5702,7 +5699,7 @@ exports[`better eslint`] = { [56, 15, 3, "Unexpected any. Specify a different type.", "193409811"], [75, 24, 86, "Do not use any type assertions.", "2242309894"] ], - "public/app/features/explore/TraceView/TraceView.test.tsx:4208667279": [ + "public/app/features/explore/TraceView/TraceView.test.tsx:598956578": [ [61, 21, 79, "Do not use any type assertions.", "4192888253"], [65, 9, 3, "Unexpected any. Specify a different type.", "193409811"], [159, 18, 9, "Do not use any type assertions.", "3815122951"], diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js index 4f2ec783abd..2b5d018f415 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js @@ -12,60 +12,64 @@ // 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 CopyIcon from '../../common/CopyIcon'; -import { ubInlineBlock } from '../../uberUtilityStyles'; - import KeyValuesTable, { LinkValue } from './KeyValuesTable'; -describe('LinkValue', () => { - const title = 'titleValue'; - const href = 'hrefValue'; - const childrenText = 'childrenTextValue'; - const wrapper = shallow( - - {childrenText} - - ); +const data = [ + { key: 'span.kind', value: 'client' }, + { key: 'omg', value: 'mos-def' }, + { key: 'numericString', value: '12345678901234567890' }, + { key: 'jsonkey', value: JSON.stringify({ hello: 'world' }) }, +]; +const setup = (propOverrides) => { + const props = { + data: data, + ...propOverrides, + }; + return render(); +}; + +describe('LinkValue', () => { it('renders as expected', () => { - expect(wrapper.find('a').prop('href')).toBe(href); - expect(wrapper.find('a').prop('title')).toBe(title); - expect(wrapper.find('a').text()).toMatch(/childrenText/); + const title = 'titleValue'; + const href = 'hrefValue'; + const childrenText = 'childrenTextValue'; + render( + + {childrenText} + + ); + expect(screen.getByRole('link', { name: 'titleValue' })).toBeInTheDocument(); + expect(screen.getByText(/^childrenTextValue$/)).toBeInTheDocument(); }); }); -describe('', () => { - let wrapper; - - const data = [ - { key: 'span.kind', value: 'client' }, - { key: 'omg', value: 'mos-def' }, - { key: 'numericString', value: '12345678901234567890' }, - { key: 'jsonkey', value: JSON.stringify({ hello: 'world' }) }, - ]; - - beforeEach(() => { - wrapper = shallow(); - }); - +describe('KeyValuesTable tests', () => { it('renders without exploding', () => { - expect(wrapper).toBeDefined(); - expect(wrapper.find('[data-test-id="KeyValueTable"]').length).toBe(1); + expect(() => setup()).not.toThrow(); }); + it('renders a table', () => { + setup(); + + expect(screen.getByTestId('KeyValueTable')).toBeInTheDocument(); + expect(screen.getByRole('table')).toBeInTheDocument(); + }); it('renders a table row for each data element', () => { - const trs = wrapper.find('tr'); - expect(trs.length).toBe(data.length); - trs.forEach((tr, i) => { - expect(tr.find('[data-test-id="KeyValueTable--keyColumn"]').text()).toMatch(data[i].key); - }); + setup(); + + expect(screen.getByRole('table')).toBeInTheDocument(); + expect(screen.getAllByRole('cell')).toHaveLength(12); + expect(screen.getAllByTestId('KeyValueTable--keyColumn')).toHaveLength(4); + expect(screen.getByRole('row', { name: 'span.kind "client"' })).toBeInTheDocument(); + expect(screen.getByRole('row', { name: 'jsonkey { "hello": "world" }' })).toBeInTheDocument(); }); it('renders a single link correctly', () => { - wrapper.setProps({ + setup({ linksGetter: (array, i) => array[i].key === 'span.kind' ? [ @@ -77,29 +81,12 @@ describe('', () => { : [], }); - const anchor = wrapper.find(LinkValue); - expect(anchor).toHaveLength(1); - expect(anchor.prop('href')).toBe('http://example.com/?kind=client'); - expect(anchor.prop('title')).toBe('More info about client'); - expect(anchor.closest('tr').find('td').first().text()).toBe('span.kind'); + expect(screen.getByRole('row', { name: 'span.kind More info about client' })).toBeInTheDocument(); }); - it('renders a with correct copyText for each data element', () => { - const copyIcons = wrapper.find(CopyIcon); - expect(copyIcons.length).toBe(data.length); - copyIcons.forEach((copyIcon, i) => { - expect(copyIcon.prop('copyText')).toBe(JSON.stringify(data[i], null, 2)); - expect(copyIcon.prop('tooltipTitle')).toBe('Copy JSON'); - }); - }); + it('renders a for each data element', () => { + setup(); - it('renders a span value containing numeric string correctly', () => { - const el = wrapper.find(`.${ubInlineBlock}`); - expect(el.length).toBe(data.length); - el.forEach((valueDiv, i) => { - if (data[i].key !== 'jsonkey') { - expect(valueDiv.html()).toMatch(`"${data[i].value}"`); - } - }); + expect(screen.getAllByRole('button')).toHaveLength(4); }); }); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx index 5c3df6b6e69..e6b0f0970af 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx @@ -108,7 +108,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) { const { data, linksGetter } = props; const styles = useStyles2(getStyles); return ( -
+
{data.map((row, i) => { @@ -133,7 +133,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) { return ( // `i` is necessary in the key because row.key can repeat - diff --git a/public/app/features/explore/TraceView/TraceView.test.tsx b/public/app/features/explore/TraceView/TraceView.test.tsx index ac817dddce0..3cdb9e82994 100644 --- a/public/app/features/explore/TraceView/TraceView.test.tsx +++ b/public/app/features/explore/TraceView/TraceView.test.tsx @@ -119,21 +119,21 @@ describe('TraceView', () => { const firstSpan = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[0]; await userEvent.click(firstSpan); await userEvent.click(screen.getByText(/Process/)); - table = screen.getByText('', { selector: 'div[data-test-id="KeyValueTable"]' }); + table = screen.getByText('', { selector: 'div[data-testid="KeyValueTable"]' }); expect(table.innerHTML).toContain('client-uuid-1'); await userEvent.click(firstSpan); const secondSpan = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[1]; await userEvent.click(secondSpan); await userEvent.click(screen.getByText(/Process/)); - table = screen.getByText('', { selector: 'div[data-test-id="KeyValueTable"]' }); + table = screen.getByText('', { selector: 'div[data-testid="KeyValueTable"]' }); expect(table.innerHTML).toContain('client-uuid-2'); await userEvent.click(secondSpan); const thirdSpan = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[2]; await userEvent.click(thirdSpan); await userEvent.click(screen.getByText(/Process/)); - table = screen.getByText('', { selector: 'div[data-test-id="KeyValueTable"]' }); + table = screen.getByText('', { selector: 'div[data-testid="KeyValueTable"]' }); expect(table.innerHTML).toContain('client-uuid-3'); });
+ {row.key} {valueMarkup}