mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Migrated DeleteTagConfirmModal test to react testing library
This commit is contained in:
parent
d07f7e757e
commit
08ca59f990
1 changed files with 24 additions and 44 deletions
|
@ -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();
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue