mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2026-07-26 13:41:51 +00:00
Migrated ExportBtn test to react testing library, and changed icon
This commit is contained in:
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user