Migrated DeleteTagConfirmModal test to react testing library

This commit is contained in:
Alejandro Celaya 2022-07-09 23:13:15 +02:00
parent d07f7e757e
commit 08ca59f990

View file

@ -1,5 +1,4 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';
import { screen } from '@testing-library/react';
import { DeleteTagConfirmModal } from '../../../src/tags/helpers/DeleteTagConfirmModal';
import { TagDeletion } from '../../../src/tags/reducers/tagDelete';
import { renderWithEvents } from '../../__mocks__/setUpTest';
@ -19,58 +18,39 @@ describe('<DeleteTagConfirmModal />', () => {
/>,
);
let wrapper: ShallowWrapper;
const createWrapper = (tagDelete: TagDeletion) => {
wrapper = shallow(
<DeleteTagConfirmModal
tag={tag}
toggle={() => ''}
isOpen
deleteTag={deleteTag}
tagDeleted={tagDeleted}
tagDelete={tagDelete}
/>,
);
return wrapper;
};
afterEach(() => wrapper?.unmount());
afterEach(jest.resetAllMocks);
it('asks confirmation for provided tag to be deleted', () => {
wrapper = createWrapper({ error: false, deleting: false });
const body = wrapper.find(ModalBody);
const footer = wrapper.find(ModalFooter);
const delBtn = footer.find(Button).last();
setUp({ error: false, deleting: false });
expect(body.html()).toContain(`Are you sure you want to delete tag <b>${tag}</b>?`);
expect(delBtn.prop('disabled')).toEqual(false);
expect(delBtn.html()).toContain('>Delete tag<');
const delBtn = screen.getByRole('button', { name: 'Delete tag' });
expect(screen.getByText(/^Are you sure you want to delete tag/)).toBeInTheDocument();
expect(screen.queryByText('Something went wrong while deleting the tag :(')).not.toBeInTheDocument();
expect(delBtn).toBeInTheDocument();
expect(delBtn).not.toHaveClass('disabled');
expect(delBtn).not.toHaveAttribute('disabled');
});
it('shows error message when deletion failed', () => {
wrapper = createWrapper({ error: true, deleting: false });
const body = wrapper.find(ModalBody);
expect(body.html()).toContain('Something went wrong while deleting the tag :(');
setUp({ error: true, deleting: false });
expect(screen.getByText('Something went wrong while deleting the tag :(')).toBeInTheDocument();
});
it('shows loading status while deleting', () => {
wrapper = createWrapper({ error: false, deleting: true });
const footer = wrapper.find(ModalFooter);
const delBtn = footer.find(Button).last();
setUp({ error: false, deleting: true });
expect(delBtn.prop('disabled')).toEqual(true);
expect(delBtn.html()).toContain('>Deleting tag...<');
const delBtn = screen.getByRole('button', { name: 'Deleting tag...' });
expect(delBtn).toBeInTheDocument();
expect(delBtn).toHaveClass('disabled');
expect(delBtn).toHaveAttribute('disabled');
});
it('deletes tag modal when btn is clicked', async () => {
wrapper = createWrapper({ error: false, deleting: true });
const footer = wrapper.find(ModalFooter);
const delBtn = footer.find(Button).last();
it('hides tag modal when btn is clicked', async () => {
const { user } = setUp({ error: false, deleting: false });
await delBtn.simulate('click');
await user.click(screen.getByRole('button', { name: 'Delete tag' }));
expect(deleteTag).toHaveBeenCalledTimes(1);
expect(deleteTag).toHaveBeenCalledWith(tag);
@ -78,11 +58,11 @@ describe('<DeleteTagConfirmModal />', () => {
expect(tagDeleted).toHaveBeenCalledWith(tag);
});
it('does no further actions when modal is closed without deleting tag', () => {
wrapper = createWrapper({ error: false, deleting: false });
const modal = wrapper.find(Modal);
it('does no further actions when modal is closed without deleting tag', async () => {
const { user } = setUp({ error: false, deleting: false });
await user.click(screen.getByLabelText('Close'));
modal.simulate('closed');
expect(deleteTag).not.toHaveBeenCalled();
expect(tagDeleted).not.toHaveBeenCalled();
});