diff --git a/packages/react/src/components/Facepile/Facepile.test.tsx b/packages/react/src/components/Facepile/Facepile.test.tsx index 4f244b3b912bec..9ffe5985ad60c8 100644 --- a/packages/react/src/components/Facepile/Facepile.test.tsx +++ b/packages/react/src/components/Facepile/Facepile.test.tsx @@ -1,14 +1,11 @@ import * as React from 'react'; -import * as renderer from 'react-test-renderer'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { TestImages } from '@fluentui/example-data'; import { setRTL } from '../../Utilities'; import { Facepile } from './Facepile'; import { OverflowButtonType } from './Facepile.types'; import { PersonaSize } from '../../Persona'; -import { Persona } from '../../Persona'; -import { PersonaCoin } from '../../PersonaCoin'; -import { findNodes, expectOne, expectMissing } from '../../common/testUtilities'; import { isConformant } from '../../common/isConformant'; import type { IFacepilePersona } from './Facepile.types'; @@ -37,9 +34,8 @@ describe('Facepile', () => { }); it('renders Facepile correctly', () => { - const component = renderer.create(); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + const { container } = render(); + expect(container).toMatchSnapshot(); }); isConformant({ @@ -51,44 +47,40 @@ describe('Facepile', () => { }); it('renders with only add button if no personas found and addButtonProps are not null', () => { - const wrapper = mount(); + const { getAllByRole } = render(); - expectOne(wrapper, '.ms-Facepile-addButton'); - expectOne(wrapper, '.ms-Facepile-itemButton'); + expect(getAllByRole('button')).toHaveLength(1); }); it('renders chevron overflow button if overflowButtonProps are not null and OverflowButtonType is downArrow', () => { - const wrapper = mount( + const { getAllByRole } = render( , ); - expectOne(wrapper, '.ms-Facepile-overflowButton'); - expectOne(wrapper, '.ms-Facepile-itemButton'); + expect(getAllByRole('button')).toHaveLength(1); }); it('renders more overflow button if overflowButtonProps are not null as OverflowButtonType is more', () => { - const wrapper = mount( + const { getAllByRole } = render( , ); - expectOne(wrapper, '.ms-Facepile-overflowButton'); - expectOne(wrapper, '.ms-Facepile-itemButton'); + expect(getAllByRole('button')).toHaveLength(1); }); // eslint-disable-next-line @fluentui/max-len it('renders without descriptive overflow button if overflowButtonProps are not null and maximum personas are not exceeded', () => { - const wrapper = mount( + const { queryAllByRole } = render( , ); - expectMissing(wrapper, '.ms-Facepile-descriptiveOverflowButton'); - expectMissing(wrapper, '.ms-Facepile-itemButton'); + expect(queryAllByRole('button')).toHaveLength(0); }); // eslint-disable-next-line @fluentui/max-len it('renders with descriptive overflow button if overflowButtonProps are not null and maximum personas are exceeded', () => { const personas: IFacepilePersona[] = facepilePersonas.concat(...facepilePersonas, ...facepilePersonas); - const wrapper = mount( + const { getAllByRole } = render( { overflowButtonType={OverflowButtonType.descriptive} />, ); - expectOne(wrapper, '.ms-Facepile-descriptiveOverflowButton'); - expect(findNodes(wrapper, '.ms-Facepile-itemButton').length).toEqual(6); + const overflowButton = getAllByRole('button')[1]; + const personasDisplayed = getAllByRole('listitem'); + + expect(overflowButton.className).toContain('ms-Facepile-descriptiveOverflowButton'); + expect(personasDisplayed).toHaveLength(5); }); it('renders descriptive overflow button with comma-delimited persona names as title value by default', () => { const personas: IFacepilePersona[] = facepilePersonas.concat(...facepilePersonas, ...facepilePersonas); const maxDisplayablePersonas: number = 5; - const wrapper = mount( + const { getAllByRole } = render( { .map((p: IFacepilePersona) => p.personaName) .join(', '); - expect( - findNodes(wrapper, '.ms-Facepile-descriptiveOverflowButton').getDOMNode().attributes.getNamedItem('title'), - ).toHaveProperty('value', overflowPersonasTitle); + const overflowButton = getAllByRole('button')[1]; + + expect(overflowButton.getAttribute('title')).toEqual(overflowPersonasTitle); }); it('renders a descriptive overflow button with a custom title', () => { const personas: IFacepilePersona[] = facepilePersonas.concat(...facepilePersonas, ...facepilePersonas); const title: string = 'custom title'; - const wrapper = mount( + const { getAllByRole } = render( { overflowButtonType={OverflowButtonType.descriptive} />, ); - expect( - findNodes(wrapper, '.ms-Facepile-descriptiveOverflowButton').getDOMNode().attributes.getNamedItem('title'), - ).toHaveProperty('value', title); + const overflowButton = getAllByRole('button')[1]; + + expect(overflowButton.getAttribute('title')).toEqual(title); }); it('renders no more than maximum allowed personas', () => { - const wrapper = mount( + const { getAllByRole } = render( , ); - expect(findNodes(wrapper, '.ms-Facepile-itemButton').length).toEqual(2); + expect(getAllByRole('listitem')).toHaveLength(2); }); it('persona is clickable if onClick property is set', () => { @@ -161,17 +156,17 @@ describe('Facepile', () => { }, ]; - const wrapper = mount(); + const { getAllByRole } = render(); - const buttons = findNodes(wrapper, '.ms-Facepile-itemButton'); + const buttons = getAllByRole('button'); - expect(buttons.length).toEqual(1); - buttons.simulate('click'); + expect(buttons).toHaveLength(1); + userEvent.click(buttons[0]); expect(clicked).toEqual(1); }); it('personas and buttons render default size if not specified', () => { - const wrapper = mount( + const { getAllByRole } = render( { />, ); - expectOne(wrapper, '.ms-Facepile-addButton .ms-Persona-coin.ms-Persona--size32'); - expectOne(wrapper, '.ms-Facepile-overflowButton .ms-Persona--size32'); + const [addButton, overflowButton] = getAllByRole('button'); - const faces = findNodes(wrapper, '.ms-Facepile-person .ms-Persona-coin'); + expect(addButton.querySelectorAll('.ms-Persona--size32')).toHaveLength(1); + expect(overflowButton.querySelectorAll('.ms-Persona--size32')).toHaveLength(1); - expect(faces.length).toEqual(facepilePersonas.length); + const faces = getAllByRole('listitem'); + expect(faces).toHaveLength(facepilePersonas.length); for (let i = 0; i < faces.length; ++i) { - expect(faces.at(i).hasClass('ms-Persona--size32')).toBeTruthy(); + expect(faces[i].querySelector('.ms-Persona--size32')).toBeTruthy(); } }); it('personas and buttons render specified size', () => { // Test XXS size renders - let wrapper = mount(); - - expect(wrapper.find(PersonaCoin).length).toEqual(facepilePersonas.length); - wrapper.find(PersonaCoin).forEach(node => { - // Need multiple Dives since PersonaCoin is decorated - expect(node.find('.ms-Persona--size24').length).toEqual(1); + const { getAllByRole, rerender } = render( + , + ); + expect(getAllByRole('listitem')).toHaveLength(facepilePersonas.length); + getAllByRole('listitem').forEach(node => { + expect(node.querySelectorAll('.ms-Persona--size24')).toHaveLength(1); }); - // Test small size renders - wrapper = mount(); - - expect(wrapper.find(PersonaCoin).length).toEqual(facepilePersonas.length); - wrapper.find(PersonaCoin).forEach(node => { - // Need multiple Dives since PersonaCoin is decorated - expect(node.find('.ms-Persona--size40').length).toEqual(1); + rerender(); + expect(getAllByRole('listitem')).toHaveLength(facepilePersonas.length); + getAllByRole('listitem').forEach(node => { + expect(node.querySelectorAll('.ms-Persona--size40')).toHaveLength(1); }); }); it('renders Persona control if exactly one persona is sent in props', () => { - const wrapper = mount(); + const { getAllByRole } = render(); - expect(wrapper.find(PersonaCoin).length).toEqual(1); - expect(wrapper.find(Persona).length).toEqual(1); + expect(getAllByRole('listitem')).toHaveLength(1); }); it('renders no Persona or PersonaCoin if 0 is passed in for maxDisplayablePersonas', () => { - const wrapper = mount(); + const { queryAllByRole } = render(); - expect(wrapper.find(PersonaCoin).length).toEqual(0); - expect(wrapper.find(Persona).length).toEqual(0); + expect(queryAllByRole('listitem')).toHaveLength(0); }); }); diff --git a/packages/react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap b/packages/react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap index 9a14f357f2ff9d..9c8706224f47e9 100644 --- a/packages/react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap +++ b/packages/react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap @@ -1,431 +1,407 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Facepile renders Facepile correctly 1`] = ` -
+
-
    -
  • -
    -
- -
  • -
    +
    • -
    - -
  • - -
    • - + + + + + `;