mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Convert KeyValuesTable to RTL (#51278)
* Convert KeyValuesTable to RTL * Update data-testid * Update data-testid * Convert KeyValuesTable to RTL Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
Seyaji
GitHub
parent
8053f770c1
commit
2473dc68f6
@ -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"],
|
||||
|
||||
@ -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(
|
||||
<LinkValue href={href} title={title}>
|
||||
{childrenText}
|
||||
</LinkValue>
|
||||
);
|
||||
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(<KeyValuesTable {...props} />);
|
||||
};
|
||||
|
||||
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(
|
||||
<LinkValue href={href} title={title}>
|
||||
{childrenText}
|
||||
</LinkValue>
|
||||
);
|
||||
expect(screen.getByRole('link', { name: 'titleValue' })).toBeInTheDocument();
|
||||
expect(screen.getByText(/^childrenTextValue$/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('<KeyValuesTable>', () => {
|
||||
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(<KeyValuesTable data={data} />);
|
||||
});
|
||||
|
||||
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('<KeyValuesTable>', () => {
|
||||
: [],
|
||||
});
|
||||
|
||||
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 <CopyIcon /> 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 <CopyIcon /> 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);
|
||||
});
|
||||
});
|
||||
|
||||
@ -108,7 +108,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
|
||||
const { data, linksGetter } = props;
|
||||
const styles = useStyles2(getStyles);
|
||||
return (
|
||||
<div className={cx(styles.KeyValueTable)} data-test-id="KeyValueTable">
|
||||
<div className={cx(styles.KeyValueTable)} data-testid="KeyValueTable">
|
||||
<table className={uWidth100}>
|
||||
<tbody className={styles.body}>
|
||||
{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
|
||||
<tr className={styles.row} key={`${row.key}-${i}`}>
|
||||
<td className={styles.keyColumn} data-test-id="KeyValueTable--keyColumn">
|
||||
<td className={styles.keyColumn} data-testid="KeyValueTable--keyColumn">
|
||||
{row.key}
|
||||
</td>
|
||||
<td>{valueMarkup}</td>
|
||||
|
||||
@ -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');
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user