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

Breadcrumb (v8): convert tests to use testing-library #22209

Merged
merged 6 commits into from
Mar 31, 2022
Merged

Breadcrumb (v8): convert tests to use testing-library #22209

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
501c0d6
convert to testing library
TristanWatanabe Mar 24, 2022
0c31e09
remove usage of queryselector
TristanWatanabe Mar 28, 2022
27434a9
merge with master branch
TristanWatanabe Mar 30, 2022
ca26a83
update breadcrumb snapshots
TristanWatanabe Mar 30, 2022
6429df7
use jest timers
TristanWatanabe Mar 30, 2022
3316678
Add comments on why using jest timers
TristanWatanabe Mar 30, 2022
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
111 changes: 40 additions & 71 deletions packages/react/src/components/Breadcrumb/Breadcrumb.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { mount, ReactWrapper } from 'enzyme';
import * as renderer from 'react-test-renderer';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Breadcrumb } from './index';
import { Icon } from '../../Icon';
import { isConformant } from '../../common/isConformant';
Expand All @@ -15,84 +15,54 @@ describe('Breadcrumb', () => {
{ text: 'TestText4', key: 'TestKey4' },
];

let component: renderer.ReactTestRenderer | undefined;
let wrapper: ReactWrapper | undefined;

beforeEach(() => {
resetIds();
});

afterEach(() => {
if (component) {
component.unmount();
component = undefined;
}
if (wrapper) {
wrapper.unmount();
wrapper = undefined;
}
});

it('renders empty breadcrumb', () => {
component = renderer.create(<Breadcrumb items={[]} />);
const { container } = render(<Breadcrumb items={[]} />);

const tree = component.toJSON();

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

describe('rendering', () => {
it('renders correctly', () => {
component = renderer.create(<Breadcrumb items={items} />);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
const { container } = render(<Breadcrumb items={items} />);
expect(container).toMatchSnapshot();
});

it('renders correctly with overflow', () => {
component = renderer.create(<Breadcrumb items={items} maxDisplayedItems={2} />);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
const { container } = render(<Breadcrumb items={items} maxDisplayedItems={2} />);
expect(container).toMatchSnapshot();
});

it('renders correctly with custom divider', () => {
const divider = () => <span>*</span>;
component = renderer.create(<Breadcrumb items={items} dividerAs={divider} />);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
const { container } = render(<Breadcrumb items={items} dividerAs={divider} />);
expect(container).toMatchSnapshot();
});

it('renders correctly with overflow and overflowIndex', () => {
component = renderer.create(<Breadcrumb items={items} maxDisplayedItems={2} overflowIndex={1} />);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
const { container } = render(<Breadcrumb items={items} maxDisplayedItems={2} overflowIndex={1} />);
expect(container).toMatchSnapshot();
});

it('renders correctly with maxDisplayedItems and overflowIndex', () => {
component = renderer.create(<Breadcrumb items={items} maxDisplayedItems={1} overflowIndex={1} />);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
const { container } = render(<Breadcrumb items={items} maxDisplayedItems={1} overflowIndex={1} />);
expect(container).toMatchSnapshot();
});

it('renders correctly with maxDisplayedItems and overflowIndex as 0', () => {
component = renderer.create(<Breadcrumb items={items} maxDisplayedItems={0} overflowIndex={0} />);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
const { container } = render(<Breadcrumb items={items} maxDisplayedItems={0} overflowIndex={0} />);
expect(container).toMatchSnapshot();
});

it('renders correctly with custom overflow icon', () => {
const overflowIcon = () => <Icon iconName={'ChevronDown'} />;
component = renderer.create(
const { container } = render(
<Breadcrumb items={items} maxDisplayedItems={2} onRenderOverflowIcon={overflowIcon} />,
);

const tree = component.toJSON();
expect(tree).toMatchSnapshot();
expect(container).toMatchSnapshot();
});
});

Expand All @@ -111,18 +81,18 @@ describe('Breadcrumb', () => {
{ text: 'Test3', key: 'Test3', as: 'h1' },
];

wrapper = mount(<Breadcrumb items={items2} />);
const { container } = render(<Breadcrumb items={items2} />);

// get the first child of each list item (the actual item content)
const renderedItems = wrapper.find('.ms-Breadcrumb-listItem > *:first-child');
const renderedItems = container.querySelectorAll('.ms-Breadcrumb-listItem > *:first-child');
expect(renderedItems).toHaveLength(3);
// should be a link since it has a href (even though it also has onclick)
expect(renderedItems.at(0).getDOMNode().tagName).toBe('A');
expect(renderedItems[0].tagName).toBe('A');
// should be a button since it doesn't have a href
// (can't use a link without a href because it won't respond to key events)
expect(renderedItems.at(1).getDOMNode().tagName).toBe('BUTTON');
expect(renderedItems[1].tagName).toBe('BUTTON');
// specified type of h1 overrides default
expect(renderedItems.at(2).getDOMNode().tagName).toBe('H1');
expect(renderedItems[2].tagName).toBe('H1');
});

it('calls the callback when an item is clicked', () => {
Expand All @@ -137,35 +107,34 @@ describe('Breadcrumb', () => {
{ text: 'Test2', key: 'Test2', onClick: clickCallback },
];

wrapper = mount(<Breadcrumb items={items2} />);
const { container } = render(<Breadcrumb items={items2} />);

const renderedItems = wrapper.find('.ms-Breadcrumb-itemLink').hostNodes();
const renderedItems = container.querySelectorAll('.ms-Breadcrumb-itemLink');

renderedItems.at(0).simulate('click');
userEvent.click(renderedItems[0]);
expect(callbackValue).toEqual('Test1');

renderedItems.at(1).simulate('click');
userEvent.click(renderedItems[1]);
expect(callbackValue).toEqual('Test2');
});

it('moves items to overflow in the correct order', () => {
wrapper = mount(<Breadcrumb items={items} maxDisplayedItems={2} />);
const { container } = render(<Breadcrumb items={items} maxDisplayedItems={2} />);

expect(wrapper.find('.ms-Breadcrumb-item').first().text()).toEqual('TestText3');
expect(container.querySelectorAll('.ms-Breadcrumb-item')[0].textContent).toEqual('TestText3');
});

it('supports native props on the root element', () => {
wrapper = mount(<Breadcrumb items={items} maxDisplayedItems={2} role="region" />);
const { getByRole } = render(<Breadcrumb items={items} maxDisplayedItems={2} role="region" />);

expect(wrapper.find('.ms-Breadcrumb').prop('role')).toEqual('region');
expect(getByRole('region', { hidden: true })).toBeTruthy();
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

testing-library deemed this as an "inaccessible" role thus I set hidden:true to gain access to this element

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks to @ecraig12345 for investigating why elements were inaccessible to begin with here, i've now changed this approach to use jest timers before trying to get the role.

});

it('opens the overflow menu on click', () => {
wrapper = mount(<Breadcrumb items={items} maxDisplayedItems={2} />);
const { container } = render(<Breadcrumb items={items} maxDisplayedItems={2} />);

const overflowButton = wrapper.find('.ms-Breadcrumb-overflowButton');
// without hostNodes it returns the same element x4
overflowButton.hostNodes().simulate('click');
const overflowButton = container.querySelector('.ms-Breadcrumb-overflowButton');
userEvent.click(overflowButton!);

const overfowItems = document.querySelectorAll('.ms-ContextualMenu-item');
expect(overfowItems).toHaveLength(2);
Expand All @@ -184,10 +153,10 @@ describe('Breadcrumb', () => {
},
];

wrapper = mount(<Breadcrumb items={itemsWithAdditionalProps} />);
const { getByRole } = render(<Breadcrumb items={itemsWithAdditionalProps} />);

const item = wrapper.find('LinkBase');
expect(item.prop('aria-label')).toEqual("I'm an aria prop");
const item = getByRole('link', { hidden: true });
expect(item.getAttribute('aria-label')).toEqual("I'm an aria prop");
});

it('for Tag', () => {
Expand All @@ -199,10 +168,10 @@ describe('Breadcrumb', () => {
},
];

wrapper = mount(<Breadcrumb items={itemsWithAdditionalProps} />);
const { container } = render(<Breadcrumb items={itemsWithAdditionalProps} />);

const item = wrapper.find('.ms-Breadcrumb-item');
expect(item.prop('aria-label')).toEqual("I'm an aria prop");
const item = container.querySelector('.ms-Breadcrumb-item');
expect(item!.getAttribute('aria-label')).toEqual("I'm an aria prop");
});
});
});
Loading