Skip to content

Commit

Permalink
test(TableExpandRow): update tests to RTL (#13197)
Browse files Browse the repository at this point in the history 
* test(TableExpandRow): update tests to RTL

* Update TableExpandRow-test.js

* Update TableExpandRow-test.js

---------

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
  • Loading branch information
@aledavila @andreancardona
aledavila and andreancardona committed Feb 23, 2023
1 parent 56bdbe0 commit f786df1
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 143 deletions.
143 changes: 91 additions & 52 deletions packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@
*/

import React from 'react';
import { mount } from 'enzyme';
import { Table, TableBody, TableExpandRow, TableExpandedRow } from '../';
import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';

const prefix = 'cds';

describe('DataTable.TableExpandRow', () => {
let mockProps;
Expand All @@ -21,59 +24,95 @@ describe('DataTable.TableExpandRow', () => {
};
});

it('should render', () => {
const wrapper = mount(
<Table>
<TableBody>
<TableExpandRow {...mockProps} />
<TableExpandedRow colSpan={1} />
</TableBody>
</Table>
);
expect(wrapper).toMatchSnapshot();
});
describe('renders as expected - Component API', () => {
it('should render', () => {
const { container } = render(
<Table>
<TableBody>
<TableExpandRow {...mockProps} />
<TableExpandedRow colSpan={1} />
</TableBody>
</Table>
);

expect(container).toMatchSnapshot();
});

it('should respect ariaLabel prop', () => {
render(
<Table>
<TableBody>
<TableExpandRow {...mockProps} />
<TableExpandedRow colSpan={1} />
</TableBody>
</Table>
);

expect(screen.getByRole('button')).toHaveAttribute(
'aria-label',
mockProps.ariaLabel
);
});

it('should support a custom `className` prop on the outermost element', () => {
render(
<Table>
<TableBody>
<TableExpandRow {...mockProps} />
<TableExpandedRow colSpan={1} />
</TableBody>
</Table>
);

it('should initially not define `data-previous-value`', () => {
const wrapper = mount(
<Table>
<TableBody>
<TableExpandRow {...mockProps} />
<TableExpandedRow colSpan={1} />
</TableBody>
</Table>
);
expect(
Object.keys(wrapper.find('TableCell').first().props()).indexOf(
'data-previous-value'
) !== -1
).toBe(true);
expect(
wrapper.find('TableCell').first().prop('data-previous-value')
).not.toBeDefined();
expect(screen.getAllByRole('row')[0]).toHaveClass('custom-class');
});

it('should respect expandHeader prop', () => {
render(
<Table>
<TableBody>
<TableExpandRow {...mockProps} />
<TableExpandedRow colSpan={1} />
</TableBody>
</Table>
);

expect(screen.getAllByRole('cell')[0]).toHaveAttribute(
'headers',
'expand'
);
});

it('should respect isExpanded prop', () => {
render(
<Table>
<TableBody>
<TableExpandRow {...mockProps} />
<TableExpandedRow colSpan={1} />
</TableBody>
</Table>
);

expect(screen.getAllByRole('row')[0]).not.toHaveClass(
`${prefix}--expandable-row`
);
});
});

it('should expand when the expand button is clicked', () => {
const initialWrapper = mount(
<Table>
<TableBody>
<TableExpandRow {...mockProps} />
<TableExpandedRow colSpan={1} />
</TableBody>
</Table>
);
initialWrapper.find('button').simulate('click');
expect(mockProps.onExpand).toHaveBeenCalledTimes(1);

const expandedWrapper = mount(
<Table>
<TableBody>
<TableExpandRow {...mockProps} isExpanded />
<TableExpandedRow colSpan={1} />
</TableBody>
</Table>
);
expect(
expandedWrapper.find('TableCell').first().prop('data-previous-value')
).toBe('collapsed');
describe('behaves as expected', () => {
it('should expand when button is clicked and onExpand to be called', () => {
render(
<Table>
<TableBody>
<TableExpandRow {...mockProps} />
<TableExpandedRow colSpan={1} />
</TableBody>
</Table>
);

expect(mockProps.onExpand).toHaveBeenCalledTimes(0);
userEvent.click(screen.getByRole('button'));
expect(mockProps.onExpand).toHaveBeenCalledTimes(1);
});
});
});
136 changes: 45 additions & 91 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,107 +1,61 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DataTable.TableExpandRow should render 1`] = `
<Table
isSortable={false}
overflowMenuOnHover={true}
>
exports[`DataTable.TableExpandRow renders as expected - Component API should render 1`] = `
<div>
<div
className="cds--data-table-content"
class="cds--data-table-content"
>
<table
aria-describedby={null}
aria-labelledby={null}
className="cds--data-table"
class="cds--data-table"
>
<TableBody
<tbody
aria-live="polite"
>
<tbody
aria-live="polite"
<tr
class="cds--parent-row custom-class"
data-parent-row="true"
>
<TableExpandRow
ariaLabel="Aria label"
className="custom-class"
isExpanded={false}
onExpand={[MockFunction]}
<td
class="cds--table-expand"
headers="expand"
>
<tr
className="cds--parent-row custom-class"
data-parent-row={true}
<button
aria-label="Aria label"
class="cds--table-expand__button"
type="button"
>
<TableCell
className="cds--table-expand"
headers="expand"
<svg
aria-hidden="true"
class="cds--table-expand__svg"
fill="currentColor"
focusable="false"
height="16"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<td
className="cds--table-expand"
headers="expand"
>
<button
aria-label="Aria label"
className="cds--table-expand__button"
onClick={[MockFunction]}
type="button"
>
<ForwardRef(ChevronRight)
className="cds--table-expand__svg"
>
<Icon
className="cds--table-expand__svg"
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden={true}
className="cds--table-expand__svg"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
/>
</svg>
</Icon>
</ForwardRef(ChevronRight)>
</button>
</td>
</TableCell>
</tr>
</TableExpandRow>
<TableExpandedRow
colSpan={1}
<path
d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
/>
</svg>
</button>
</td>
</tr>
<tr
class="cds--expandable-row"
data-child-row="true"
>
<td
colspan="1"
>
<tr
className="cds--expandable-row"
data-child-row={true}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<TableCell
colSpan={1}
>
<td
colSpan={1}
>
<div
className="cds--child-row-inner-container"
/>
</td>
</TableCell>
</tr>
</TableExpandedRow>
</tbody>
</TableBody>
<div
class="cds--child-row-inner-container"
/>
</td>
</tr>
</tbody>
</table>
</div>
</Table>
</div>
`;

0 comments on commit f786df1

Please sign in to comment.