Skip to content

Commit

Permalink
CommandBar (v8): convert tests to use testing-library (#22247)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TristanWatanabe
TristanWatanabe authored Mar 31, 2022
1 parent a152e08 commit 1cdf770
Show file tree
Hide file tree
Showing 2 changed files with 685 additions and 696 deletions.
255 changes: 142 additions & 113 deletions packages/react/src/components/CommandBar/CommandBar.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import * as React from 'react';
import * as renderer from 'react-test-renderer';

import { act, render, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { CommandBar } from './CommandBar';
import { mount } from 'enzyme';
import { isConformant } from '../../common/isConformant';
import { resetIds } from '../../Utilities';
import type { IContextualMenuItem } from '../../ContextualMenu';
Expand All @@ -13,44 +12,35 @@ describe('CommandBar', () => {
});

afterEach(() => {
for (let i = 0; i < document.body.children.length; i++) {
if (document.body.children[i].tagName === 'DIV') {
document.body.removeChild(document.body.children[i]);
i--;
}
if ((setTimeout as any).mock) {
jest.useRealTimers();
}
});

it('renders commands correctly', () => {
expect(
renderer
.create(
<CommandBar
items={[
{ key: '1', text: 'asdf' },
{ key: '2', text: 'asdf' },
]}
className={'TestClassName'}
/>,
)
.toJSON(),
).toMatchSnapshot();
const { container } = render(
<CommandBar
items={[
{ key: '1', text: 'asdf' },
{ key: '2', text: 'asdf' },
]}
className={'TestClassName'}
/>,
);
expect(container).toMatchSnapshot();
});

it('renders empty farItems correctly', () => {
expect(
renderer
.create(
<CommandBar
items={[
{ key: '1', text: 'asdf' },
{ key: '2', text: 'asdf' },
]}
farItems={[]}
/>,
)
.toJSON(),
).toMatchSnapshot();
const { container } = render(
<CommandBar
items={[
{ key: '1', text: 'asdf' },
{ key: '2', text: 'asdf' },
]}
farItems={[]}
/>,
);
expect(container).toMatchSnapshot();
});

isConformant({
Expand All @@ -62,7 +52,9 @@ describe('CommandBar', () => {
});

it('opens a menu with IContextualMenuItem.subMenuProps.items property', () => {
const commandBar = mount(
jest.useFakeTimers();

const { getByRole } = render(
<CommandBar
items={[
{
Expand All @@ -82,17 +74,20 @@ describe('CommandBar', () => {
]}
/>,
);
//Initial rendering of component is "hidden" while measurements are made
// therefore we need to wait a bit before getting roles.
act(() => {
jest.runAllTimers();
});

const menuItem = commandBar.find('.MenuItem button');

expect(menuItem.length).toEqual(1);

menuItem.simulate('click');

expect(document.querySelector('.SubMenuClass')).toBeTruthy();
const menuItem = getByRole('menuitem');
userEvent.click(menuItem);
expect(getByRole('menu')).toBeTruthy();
});

it('passes event and item to button onClick callbacks', () => {
jest.useFakeTimers();

let testValue: IContextualMenuItem | undefined;

const itemData: IContextualMenuItem = {
Expand All @@ -107,95 +102,114 @@ describe('CommandBar', () => {
},
};

const commandBar = mount(<CommandBar items={[itemData]} />);

const menuItem = commandBar.find('.MenuItem button');
const { getByRole } = render(<CommandBar items={[itemData]} />);

menuItem.simulate('click');
//Initial rendering of component is "hidden" while measurements are made
// therefore we need to wait a bit before getting roles.
act(() => {
jest.runAllTimers();
});

const menuItem = getByRole('menuitem');
userEvent.click(menuItem);
expect(testValue).toEqual(itemData);
});

it('keeps menu open after update if item is still present', () => {
const commandBar = mount(
<CommandBar
items={[
{
text: 'TestText 1',
key: 'TestKey1',
subMenuProps: {
items: [
{
text: 'SubmenuText 1',
key: 'SubmenuKey1',
className: 'SubMenuClass',
},
],
jest.useFakeTimers();

const items = [
{
text: 'TestText 1',
key: 'TestKey1',
subMenuProps: {
items: [
{
text: 'SubmenuText 1',
key: 'SubmenuKey1',
className: 'SubMenuClass',
},
},
]}
/>,
);
],
},
},
];
const { getByRole, rerender } = render(<CommandBar items={items} />);

const menuItem = commandBar.find('button');
//Initial rendering of component is "hidden" while measurements are made
// therefore we need to wait a bit before getting roles.
act(() => {
jest.runAllTimers();
});

menuItem.simulate('click');
const menuItem = getByRole('menuitem');
userEvent.click(menuItem);

// Make sure the menu is open before the re-render
expect(document.querySelector('.SubMenuClass')).toBeTruthy();
expect(getByRole('menu')).toBeTruthy();

// Update the props, and re-render
commandBar.setProps({
items: commandBar.props().items.concat([
{
name: 'Test Key 2',
key: 'TestKey2',
},
]),
items.push({
text: 'Test Key 2',
key: 'TestKey2',
subMenuProps: { items: [{ text: 'SubmenuText 2', key: 'SubmenuKey2', className: 'SubmenuClass' }] },
});
rerender(<CommandBar items={items} />);

act(() => {
jest.runAllTimers();
});

// Make sure the menu is still open after the re-render
expect(document.querySelector('.SubMenuClass')).toBeTruthy();
expect(getByRole('menu')).toBeTruthy();
});

it('closes menu after update if item is not longer present', () => {
const commandBar = mount(
<CommandBar
items={[
{
text: 'TestText 1',
key: 'TestKey1',
subMenuProps: {
items: [
{
text: 'SubmenuText 1',
key: 'SubmenuKey1',
className: 'SubMenuClass',
},
],
it('closes menu after update if item is no longer present', () => {
jest.useFakeTimers();

const items = [
{
text: 'TestText 1',
key: 'TestKey1',
subMenuProps: {
items: [
{
text: 'SubmenuText 1',
key: 'SubmenuKey1',
className: 'SubMenuClass',
},
},
]}
/>,
);
],
},
},
];

const { getByRole, queryByRole, rerender } = render(<CommandBar items={items} />);

const menuItem = commandBar.find('button');
//Initial rendering of component is "hidden" while measurements are made
// therefore we need to wait a bit before getting roles.
act(() => {
jest.runAllTimers();
});

menuItem.simulate('click');
const menuItem = getByRole('menuitem');
userEvent.click(menuItem);

// Make sure the menu is open before the re-render
expect(document.querySelector('.SubMenuClass')).toBeTruthy();
expect(getByRole('menu')).toBeTruthy();

// Update the props, and re-render
commandBar.setProps({
items: [],
rerender(<CommandBar items={[]} />);

act(() => {
jest.runAllTimers();
});

// Make sure the menu is still open after the re-render
expect(document.querySelector('.SubMenuClass')).toBeFalsy();
expect(queryByRole('menu')).toBeNull();
});

it('passes overflowButton menuProps to the menu, and prepend menuProps.items to top of overflow', () => {
jest.useFakeTimers();

const items = [
{
name: 'Text1',
Expand All @@ -210,7 +224,7 @@ describe('CommandBar', () => {
},
];

const commandBar = mount(
const { getByRole, getAllByRole } = render(
<CommandBar
overflowButtonProps={{
menuProps: {
Expand All @@ -223,19 +237,26 @@ describe('CommandBar', () => {
/>,
);

const overflowMenuButton = commandBar.find('.ms-CommandBar-overflowButton');
//Initial rendering of component is "hidden" while measurements are made
// therefore we need to wait a bit before getting roles.
act(() => {
jest.runAllTimers();
});

overflowMenuButton.hostNodes().simulate('click');
const overflowMenuButton = getAllByRole('menuitem')[1];
userEvent.click(overflowMenuButton);

const overfowItems = document.querySelectorAll('.ms-ContextualMenu-item');
const overfowItems = within(getByRole('menu')).getAllByRole('menuitem');

expect(overfowItems).toHaveLength(2);
expect(overfowItems[0].textContent).toEqual('Text3');
expect(overfowItems[1].textContent).toEqual('Text2');
expect(document.querySelectorAll('.customMenuClass')).toHaveLength(1);
expect(getByRole('menu').querySelectorAll('.customMenuClass')!.length).toEqual(1);
});

it('updates menu after update if item is still present', () => {
jest.useFakeTimers();

const items = (subMenuItemClassName: string) => [
{
name: 'TestText 1',
Expand All @@ -252,21 +273,29 @@ describe('CommandBar', () => {
},
];

const commandBar = mount(<CommandBar items={items('SubMenuClass')} />);
const { getByRole, rerender } = render(<CommandBar items={items('SubMenuClass')} />);

//Initial rendering of component is "hidden" while measurements are made
// therefore we need to wait a bit before getting roles.
act(() => {
jest.runAllTimers();
});

const menuItem = commandBar.find('button');
const menuItem = getByRole('menuitem');

menuItem.simulate('click');
userEvent.click(menuItem);

// Make sure the menu is open before the re-render
expect(document.querySelector('.SubMenuClass')).toBeTruthy();
expect(getByRole('menu')).toBeTruthy();

// Update the props, and re-render
rerender(<CommandBar items={items('SubMenuClassUpdate')} />);

// Re-render
commandBar.setProps({
items: items('SubMenuClassUpdate'),
act(() => {
jest.runAllTimers();
});

// Make sure the menu is still open after the re-render
expect(document.querySelector('.SubMenuClassUpdate')).toBeTruthy();
expect(getByRole('menu').querySelector('.SubMenuClassUpdate')).toBeTruthy();
});
});
Loading

0 comments on commit 1cdf770

Please sign in to comment.