Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test(TableToolbarMenu): update tests to RTL #13172

Merged
merged 6 commits into from
Feb 23, 2023
Merged

test(TableToolbarMenu): update tests to RTL #13172

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f0ca35f
test(TableToolbarMenu): update tests to RTL
alisonjoseph Feb 16, 2023
ba70992
Update TableToolbarMenu-test.js.snap
alisonjoseph Feb 23, 2023
218dc52
Merge branch 'main' into 12673-TableToolbarMenu-rtl
alisonjoseph Feb 23, 2023
a2a46fd
chore: fix merge conflicts
alisonjoseph Feb 23, 2023
93205f1
Merge branch 'main' into 12673-TableToolbarMenu-rtl
aledavila Feb 23, 2023
9d84e22
Merge branch 'main' into 12673-TableToolbarMenu-rtl
kodiakhq[bot] Feb 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 45 additions & 28 deletions packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js
View file
Open in desktop
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
Open in desktop
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>
`;