mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Convert AccordianKeyValues test to RTL (#51257)
This commit is contained in:
parent
90646e7f41
commit
d760b03784
@ -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"]
|
||||
],
|
||||
|
@ -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('<KeyValuesSummary>', () => {
|
||||
let wrapper;
|
||||
|
||||
const props = { data: tags };
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<KeyValuesSummary {...props} />);
|
||||
});
|
||||
|
||||
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('<AccordianKeyValues>', () => {
|
||||
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(<AccordianKeyValues {...props} />);
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(<AccordianKeyValues {...props} />);
|
||||
const setupKeyValues = (propOverrides) => {
|
||||
const props = {
|
||||
data: tags,
|
||||
...propOverrides,
|
||||
};
|
||||
return render(<KeyValuesSummary {...props} />);
|
||||
};
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
@ -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}
|
||||
<strong data-test={markers.LABEL}>
|
||||
|
Loading…
Reference in New Issue
Block a user