Migrated Settings test to react testing library

This commit is contained in:
Alejandro Celaya 2022-06-05 11:16:11 +02:00
parent a012d6206f
commit b450e4093e

View file

@ -1,29 +1,48 @@
import { shallow } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { Route } from 'react-router-dom'; import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { Settings as createSettings } from '../../src/settings/Settings'; import { Settings as createSettings } from '../../src/settings/Settings';
import { NoMenuLayout } from '../../src/common/NoMenuLayout';
import { NavPillItem } from '../../src/utils/NavPills';
describe('<Settings />', () => { describe('<Settings />', () => {
const Component = () => null; const Settings = createSettings(
const Settings = createSettings(Component, Component, Component, Component, Component, Component); () => <span>RealTimeUpdates</span>,
() => <span>ShortUrlCreation</span>,
() => <span>ShortUrlsList</span>,
() => <span>UserInterface</span>,
() => <span>Visits</span>,
() => <span>Tags</span>,
);
const setUp = (activeRoute = '/') => {
const history = createMemoryHistory();
history.push(activeRoute);
return render(<Router location={history.location} navigator={history}><Settings /></Router>);
};
it('renders a no-menu layout with the expected settings sections', () => { it.each([
const wrapper = shallow(<Settings />); ['/general', {
const layout = wrapper.find(NoMenuLayout); visibleComps: ['UserInterface', 'RealTimeUpdates'],
const sections = wrapper.find(Route); hiddenComps: ['ShortUrlCreation', 'ShortUrlsList', 'Tags', 'Visits'],
}],
['/short-urls', {
visibleComps: ['ShortUrlCreation', 'ShortUrlsList'],
hiddenComps: ['UserInterface', 'RealTimeUpdates', 'Tags', 'Visits'],
}],
['/other-items', {
visibleComps: ['Tags', 'Visits'],
hiddenComps: ['UserInterface', 'RealTimeUpdates', 'ShortUrlCreation', 'ShortUrlsList'],
}],
])('renders expected sections based on route', (activeRoute, { visibleComps, hiddenComps }) => {
setUp(activeRoute);
expect(layout).toHaveLength(1); visibleComps.forEach((comp) => expect(screen.getByText(comp)).toBeInTheDocument());
expect(sections).toHaveLength(4); hiddenComps.forEach((comp) => expect(screen.queryByText(comp)).not.toBeInTheDocument());
}); });
it('renders expected menu', () => { it('renders expected menu', () => {
const wrapper = shallow(<Settings />); setUp();
const items = wrapper.find(NavPillItem);
expect(items).toHaveLength(3); expect(screen.getByRole('link', { name: 'General' })).toHaveAttribute('href', '/general');
expect(items.first().prop('to')).toEqual('general'); expect(screen.getByRole('link', { name: 'Short URLs' })).toHaveAttribute('href', '/short-urls');
expect(items.at(1).prop('to')).toEqual('short-urls'); expect(screen.getByRole('link', { name: 'Other items' })).toHaveAttribute('href', '/other-items');
expect(items.last().prop('to')).toEqual('other-items');
}); });
}); });