Migrated ExportBtn test to react testing library, and changed icon

This commit is contained in:
Alejandro Celaya
2022-05-14 11:11:50 +02:00
parent 5c0573deb7
commit a7cc8786c3
3 changed files with 38 additions and 30 deletions

View File

@@ -1,29 +1,22 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
import { render, screen } from '@testing-library/react';
import { ExportBtn } from '../../src/utils/ExportBtn';
describe('<ExportBtn />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (amount?: number, loading = false) => {
wrapper = shallow(<ExportBtn amount={amount} loading={loading} />);
return wrapper;
};
afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
const setUp = (amount?: number, loading = false) => render(<ExportBtn amount={amount} loading={loading} />);
it.each([
[true, 'Exporting...'],
[false, 'Export ('],
])('renders a button', (loading, text) => {
const wrapper = createWrapper(undefined, loading);
[false, 'Export (0)'],
])('renders loading state when expected', async (loading, text) => {
setUp(undefined, loading);
const btn = await screen.findByRole('button');
expect(wrapper.prop('outline')).toEqual(true);
expect(wrapper.prop('color')).toEqual('primary');
expect(wrapper.prop('disabled')).toEqual(loading);
expect(wrapper.html()).toContain(text);
expect(btn).toHaveTextContent(text);
if (loading) {
expect(btn).toHaveAttribute('disabled');
} else {
expect(btn).not.toHaveAttribute('disabled');
}
});
it.each([
@@ -31,17 +24,13 @@ describe('<ExportBtn />', () => {
[10, '10'],
[10_000, '10,000'],
[10_000_000, '10,000,000'],
])('renders expected amount', (amount, expectedRenderedAmount) => {
const wrapper = createWrapper(amount);
expect(wrapper.html()).toContain(`Export (${expectedRenderedAmount})`);
])('renders expected amount', async (amount, expectedRenderedAmount) => {
setUp(amount);
expect(await screen.findByRole('button')).toHaveTextContent(`Export (${expectedRenderedAmount})`);
});
it('renders expected icon', () => {
const wrapper = createWrapper();
const icon = wrapper.find(FontAwesomeIcon);
expect(icon).toHaveLength(1);
expect(icon.prop('icon')).toEqual(faFileDownload);
setUp();
expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
});
});