vega-frontend-monorepo/libs/ui-toolkit/src/components/key-value-table/key-value-table.spec.tsx
Edd b9d57efacf
Feat/893 anchor per network param (#907)
* feat: highlight network param targeted by anchor

* Feat/893: Highlighted key-value row colours

* Feat/893: Removed unneeded important bangs

Co-authored-by: sam-keen <samuel.kleinmann@gmail.com>
2022-07-29 13:06:49 +01:00

109 lines
3.1 KiB
TypeScript

import { render, screen } from '@testing-library/react';
import type { KeyValueTableProps } from './key-value-table';
import { KeyValueTable, KeyValueTableRow } from './key-value-table';
const props: KeyValueTableProps = {
title: 'Title',
headingLevel: 3,
children: undefined,
};
it('Renders the correct elements', () => {
const { container } = render(
<KeyValueTable {...props}>
<KeyValueTableRow inline={true}>
<span>My label</span>
<span>My value</span>
</KeyValueTableRow>
<KeyValueTableRow>
<span>My label 2</span>
<span>My value 2</span>
</KeyValueTableRow>
</KeyValueTable>
);
expect(screen.getByText(props.title || '')).toBeInTheDocument();
expect(screen.getByTestId('key-value-table')).toBeInTheDocument();
expect(container.getElementsByTagName('dl')).toHaveLength(2);
const rows = container.getElementsByTagName('dl');
// Row 1
expect(rows[0].firstChild).toHaveTextContent('My label');
expect(rows[0].children[1]).toHaveTextContent('My value');
// Row 2
expect(rows[1].firstChild).toHaveTextContent('My label 2');
expect(rows[1].children[1]).toHaveTextContent('My value 2');
});
it('Applies numeric class if prop is passed row not inline', () => {
render(
<KeyValueTable {...props} numerical={true}>
<KeyValueTableRow inline={false}>
<span>My label</span>
<span>My value</span>
</KeyValueTableRow>
</KeyValueTable>
);
expect(screen.getByTestId('key-value-table')).toHaveClass(
'w-full border-collapse mb-8 [border-spacing:0] break-all'
);
expect(screen.getByTestId('key-value-table-row')).toHaveClass(
' flex gap-1 flex-wrap justify-between border-b first:border-t border-black dark:border-white flex-col items-start'
);
});
it('Applies numeric class if prop is passed row inline', () => {
render(
<KeyValueTable {...props} numerical={true}>
<KeyValueTableRow inline={true}>
<span>My label</span>
<span>My value</span>
</KeyValueTableRow>
</KeyValueTable>
);
expect(screen.getByTestId('key-value-table')).toHaveClass(
'w-full border-collapse mb-8 [border-spacing:0] break-all'
);
expect(screen.getByTestId('key-value-table-row')).toHaveClass(
'flex gap-1 flex-wrap justify-between border-b first:border-t border-black dark:border-white flex-row items-center'
);
});
it('Applies muted class if prop is passed', () => {
render(
<KeyValueTable {...props} muted={true}>
<KeyValueTableRow inline={false}>
<span>My label</span>
<span>My value</span>
</KeyValueTableRow>
</KeyValueTable>
);
expect(screen.getByTestId('key-value-table')).toHaveClass(
'w-full border-collapse mb-8 [border-spacing:0] break-all'
);
});
it('Applies id to row if passed', () => {
render(
<KeyValueTable>
<KeyValueTableRow inline={false} id="thisistheid">
<span>My value</span>
<span>My value</span>
</KeyValueTableRow>
</KeyValueTable>
);
expect(screen.getByTestId('key-value-table-row')).toHaveAttribute(
'id',
'thisistheid'
);
});