diff --git a/test/tags/TagsTableRow.test.tsx b/test/tags/TagsTableRow.test.tsx index d1f92385..4974f621 100644 --- a/test/tags/TagsTableRow.test.tsx +++ b/test/tags/TagsTableRow.test.tsx @@ -1,18 +1,17 @@ import { screen } from '@testing-library/react'; -import { shallow, ShallowWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import { DropdownItem } from 'reactstrap'; import { MemoryRouter } from 'react-router-dom'; import { TagsTableRow as createTagsTableRow } from '../../src/tags/TagsTableRow'; import { ReachableServer } from '../../src/servers/data'; -import { DropdownBtnMenu } from '../../src/utils/DropdownBtnMenu'; import { renderWithEvents } from '../__helpers__/setUpTest'; import { colorGeneratorMock } from '../utils/services/__mocks__/ColorGenerator.mock'; describe('', () => { - const DeleteTagConfirmModal = () => null; - const EditTagModal = () => null; - const TagsTableRow = createTagsTableRow(DeleteTagConfirmModal, EditTagModal, colorGeneratorMock); + const TagsTableRow = createTagsTableRow( + ({ isOpen }) => DeleteTagConfirmModal {isOpen ? 'OPEN' : 'CLOSED'}, + ({ isOpen }) => EditTagModal {isOpen ? 'OPEN' : 'CLOSED'}, + colorGeneratorMock, + ); const setUp = (tagStats?: { visits?: number; shortUrls?: number }) => renderWithEvents( @@ -26,19 +25,6 @@ describe('', () => { , ); - let wrapper: ShallowWrapper; - const createWrapper = (tagStats?: { visits?: number; shortUrls?: number }) => { - wrapper = shallow( - ({ id: 'abc123' })} - />, - ); - - return wrapper; - }; - afterEach(() => wrapper?.unmount()); - it.each([ [undefined, '0', '0'], [{ shortUrls: 10, visits: 3480 }, '10', '3,480'], @@ -56,36 +42,31 @@ describe('', () => { expect(visitsLink).toHaveAttribute('href', '/server/abc123/tag/foo&bar/visits'); }); - it('allows toggling dropdown menu', () => { - const wrapper = createWrapper(); + it('allows toggling dropdown menu', async () => { + const { user } = setUp(); - expect(wrapper.find(DropdownBtnMenu).prop('isOpen')).toEqual(false); - (wrapper.find(DropdownBtnMenu).prop('toggle') as Function)(); - expect(wrapper.find(DropdownBtnMenu).prop('isOpen')).toEqual(true); + expect(screen.queryByRole('menu')).not.toBeInTheDocument(); + await user.click(screen.getByRole('button')); + expect(screen.queryByRole('menu')).toBeInTheDocument(); }); - it('allows toggling modals through dropdown items', () => { - const wrapper = createWrapper(); - const items = wrapper.find(DropdownItem); + it('allows toggling modals through dropdown items', async () => { + const { user } = setUp(); + const clickItemOnIndex = async (index: 0 | 1) => { + await user.click(screen.getByRole('button')); + await user.click(screen.getAllByRole('menuitem')[index]); + }; - expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false); - items.first().simulate('click'); - expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true); + expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('CLOSED'); + expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('OPEN'); + await clickItemOnIndex(0); + expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('OPEN'); + expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('CLOSED'); - expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false); - items.last().simulate('click'); - expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true); - }); - - it('allows toggling modals through the modals themselves', () => { - const wrapper = createWrapper(); - - expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false); - (wrapper.find(EditTagModal).prop('toggle') as Function)(); - expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true); - - expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false); - (wrapper.find(DeleteTagConfirmModal).prop('toggle') as Function)(); - expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true); + expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('CLOSED'); + expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('OPEN'); + await clickItemOnIndex(1); + expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('OPEN'); + expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('CLOSED'); }); });