Skip to content

Commit

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

* Update TableToolbarMenu-test.js.snap

* chore: fix merge conflicts

---------

Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
@alisonjoseph @aledavila @kodiakhq
3 people authored Feb 23, 2023
1 parent 9e4f0fa commit 5024767
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 215 deletions.
73 changes: 45 additions & 28 deletions packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,35 +6,52 @@
*/

import React from 'react';
import { mount } from 'enzyme';
import TableToolbarMenu from '../TableToolbarMenu';
import { Download } from '@carbon/icons-react';
import { TableToolbarMenu } from '..';

describe('DataTable.TableToolbarMenu', () => {
it('should render', () => {
const wrapper = mount(
<TableToolbarMenu
className="custom-class"
renderIcon={Download}
iconDescription="Add">
<span>test</span>
</TableToolbarMenu>
);
expect(wrapper).toMatchSnapshot();
});
});
import { render, screen } from '@testing-library/react';

describe('TableToolbarMenu', () => {
describe('renders as expected - Component API', () => {
it('should render', () => {
const { container } = render(
<TableToolbarMenu
className="custom-class"
renderIcon={Download}
iconDescription="Add">
<span>test</span>
</TableToolbarMenu>
);

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

it('should support a custom `className` prop on the outermost element', () => {
render(
<TableToolbarMenu className="custom-class">
<span>test</span>
</TableToolbarMenu>
);
expect(screen.getByRole('button')).toHaveClass('custom-class');
});

it('should respect iconDescription prop', () => {
render(
<TableToolbarMenu iconDescription="Icon description">
<span>test</span>
</TableToolbarMenu>
);

expect(screen.getByText('Icon description')).toBeInTheDocument();
});

it('should respect renderIcon prop', () => {
render(
<TableToolbarMenu renderIcon={Download} iconDescription="Download">
<span>test</span>
</TableToolbarMenu>
);

describe('Custom icon in DataTable.TableToolbarMenu', () => {
it('should render', () => {
const iconAction = mount(
<TableToolbarMenu renderIcon={Download} iconDescription="Download">
<span>test</span>
</TableToolbarMenu>
);
const originalIcon = mount(<Download />).find('svg');
const icon = iconAction.find('svg');
expect(icon.getDOMNode().querySelectorAll(':not(svg):not(title)')).toEqual(
originalIcon.getDOMNode().querySelectorAll(':not(svg):not(title)')
);
expect(screen.getByRole('img')).toHaveAttribute('aria-label', 'Download');
});
});
});
232 changes: 45 additions & 187 deletions ...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,196 +1,54 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DataTable.TableToolbarMenu should render 1`] = `
<TableToolbarMenu
className="custom-class"
iconDescription="Add"
renderIcon={
Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"size": [Function],
},
"render": [Function],
}
}
>
<ClassWrapper(OverflowMenu)
ariaLabel="Add"
className="custom-class cds--toolbar-action cds--overflow-menu"
flipped={true}
iconDescription="Add"
renderIcon={
Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"size": [Function],
},
"render": [Function],
}
}
title="Add"
exports[`TableToolbarMenu renders as expected - Component API should render 1`] = `
<div>
<span
class="cds--overflow-menu__wrapper"
>
<OverflowMenu
ariaLabel="Add"
className="custom-class cds--toolbar-action cds--overflow-menu"
direction="bottom"
flipped={true}
focusTrap={true}
iconDescription="Add"
menuOffset={[Function]}
menuOffsetFlip={[Function]}
onClick={[Function]}
onClose={[Function]}
onKeyDown={[Function]}
onOpen={[Function]}
open={false}
renderIcon={
Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"size": [Function],
},
"render": [Function],
}
}
selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
title="Add"
<span
class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--top cds--tooltip cds--icon-tooltip"
>
<ClickListener
onClickOutside={[Function]}
<button
aria-expanded="false"
aria-haspopup="true"
aria-labelledby="tooltip-2"
class="cds--btn--icon-only custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--btn--primary"
title="Add"
type="button"
>
<svg
aria-label="Add"
class="cds--overflow-menu__icon"
fill="currentColor"
focusable="false"
height="16"
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"
/>
</svg>
</button>
<span
aria-hidden="true"
class="cds--popover"
id="tooltip-2"
role="tooltip"
>
<span
className="cds--overflow-menu__wrapper"
class="cds--popover-content cds--tooltip-content"
>
<ForwardRef(IconButton)
aria-expanded={false}
aria-haspopup={true}
className="custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md"
label="Add"
onClick={[Function]}
onClose={[Function]}
onKeyDown={[Function]}
open={false}
title="Add"
type="button"
>
<Tooltip
className="cds--icon-tooltip"
closeOnActivation={true}
defaultOpen={false}
label="Add"
>
<Popover
align="top"
className="cds--tooltip cds--icon-tooltip"
dropShadow={false}
highContrast={true}
onKeyDown={[Function]}
onMouseLeave={[Function]}
open={false}
>
<span
className="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--top cds--tooltip cds--icon-tooltip"
onKeyDown={[Function]}
onMouseLeave={[Function]}
>
<Button
aria-expanded={false}
aria-haspopup={true}
aria-labelledby="tooltip-2"
className="cds--btn--icon-only custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md"
onBlur={[Function]}
onClick={[Function]}
onClose={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseEnter={[Function]}
open={false}
size="md"
title="Add"
type="button"
>
<button
aria-describedby={null}
aria-expanded={false}
aria-haspopup={true}
aria-labelledby="tooltip-2"
aria-pressed={null}
className="cds--btn--icon-only custom-class cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--btn--primary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onClose={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseEnter={[Function]}
open={false}
title="Add"
type="button"
>
<ForwardRef(Download)
aria-label="Add"
className="cds--overflow-menu__icon"
>
<Icon
aria-label="Add"
className="cds--overflow-menu__icon"
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-label="Add"
className="cds--overflow-menu__icon"
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
role="img"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"
/>
</svg>
</Icon>
</ForwardRef(Download)>
</button>
</Button>
<ForwardRef(PopoverContent)
aria-hidden="true"
className="cds--tooltip-content"
id="tooltip-2"
role="tooltip"
>
<span
aria-hidden="true"
className="cds--popover"
id="tooltip-2"
role="tooltip"
>
<span
className="cds--popover-content cds--tooltip-content"
>
Add
</span>
<span
className="cds--popover-caret"
/>
</span>
</ForwardRef(PopoverContent)>
</span>
</Popover>
</Tooltip>
</ForwardRef(IconButton)>
Add
</span>
</ClickListener>
</OverflowMenu>
</ClassWrapper(OverflowMenu)>
</TableToolbarMenu>
<span
class="cds--popover-caret"
/>
</span>
</span>
</span>
</div>
`;

0 comments on commit 5024767

Please sign in to comment.