Migrated AppUpdateBanner test to react testing library

This commit is contained in:
Alejandro Celaya 2022-05-03 17:49:42 +02:00
parent 9784cbb3ac
commit f72251c125
2 changed files with 14 additions and 26 deletions

View file

@ -24,7 +24,7 @@ export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, toggle, forc
<h4 className="mb-4">This app has just been updated!</h4> <h4 className="mb-4">This app has just been updated!</h4>
<p className="mb-0"> <p className="mb-0">
Restart it to enjoy the new features. Restart it to enjoy the new features.
<Button disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}> <Button role="button" disabled={isUpdating} className="ms-2" color="secondary" size="sm" onClick={update}>
{!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>} {!isUpdating && <>Restart now <FontAwesomeIcon icon={reloadIcon} className="ms-1" /></>}
{isUpdating && <>Restarting...</>} {isUpdating && <>Restarting...</>}
</Button> </Button>

View file

@ -1,43 +1,31 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { fireEvent, render, screen } from '@testing-library/react';
import { Button } from 'reactstrap';
import { AppUpdateBanner } from '../../src/common/AppUpdateBanner'; import { AppUpdateBanner } from '../../src/common/AppUpdateBanner';
import { SimpleCard } from '../../src/utils/SimpleCard';
describe('<AppUpdateBanner />', () => { describe('<AppUpdateBanner />', () => {
const toggle = jest.fn(); const toggle = jest.fn();
const forceUpdate = jest.fn(); const forceUpdate = jest.fn();
let wrapper: ShallowWrapper;
beforeEach(() => { beforeEach(() => render(<AppUpdateBanner isOpen toggle={toggle} forceUpdate={forceUpdate} />));
wrapper = shallow(<AppUpdateBanner isOpen toggle={toggle} forceUpdate={forceUpdate} />);
});
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders an alert with expected props', () => { it('renders initial state', () => {
expect(wrapper.prop('className')).toEqual('app-update-banner'); expect(screen.getByRole('heading')).toHaveTextContent('This app has just been updated!');
expect(wrapper.prop('isOpen')).toEqual(true); expect(screen.queryByText('Restarting...')).not.toBeInTheDocument();
expect(wrapper.prop('toggle')).toEqual(toggle); expect(screen.getByText('Restart now')).not.toHaveAttribute('disabled');
expect(wrapper.prop('tag')).toEqual(SimpleCard);
expect(wrapper.prop('color')).toEqual('secondary');
}); });
it('invokes toggle when alert is toggled', () => { it('invokes toggle when alert is closed', () => {
(wrapper.prop('toggle') as Function)(); expect(toggle).not.toHaveBeenCalled();
fireEvent.click(screen.getByLabelText('Close'));
expect(toggle).toHaveBeenCalled(); expect(toggle).toHaveBeenCalled();
}); });
it('triggers the update when clicking the button', () => { it('triggers the update when clicking the button', async () => {
expect(wrapper.find(Button).html()).toContain('Restart now');
expect(wrapper.find(Button).prop('disabled')).toEqual(false);
expect(forceUpdate).not.toHaveBeenCalled(); expect(forceUpdate).not.toHaveBeenCalled();
fireEvent.click(screen.getByText(/^Restart now/));
wrapper.find(Button).simulate('click');
expect(wrapper.find(Button).html()).toContain('Restarting...');
expect(wrapper.find(Button).prop('disabled')).toEqual(true);
expect(forceUpdate).toHaveBeenCalled(); expect(forceUpdate).toHaveBeenCalled();
expect(await screen.findByText('Restarting...')).toBeInTheDocument();
expect(screen.queryByText(/^Restart now/)).not.toBeInTheDocument();
}); });
}); });