shlink-web-client/test/common/MainHeader.test.tsx
2022-02-07 22:17:57 +01:00

66 lines
2.3 KiB
TypeScript

import { shallow, ShallowWrapper } from 'enzyme';
import { useLocation } from 'react-router-dom';
import { Collapse, NavbarToggler, NavLink } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import createMainHeader from '../../src/common/MainHeader';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: jest.fn().mockReturnValue({}),
}));
describe('<MainHeader />', () => {
const ServersDropdown = () => null;
const MainHeader = createMainHeader(ServersDropdown);
let wrapper: ShallowWrapper;
const createWrapper = (pathname = '') => {
(useLocation as any).mockReturnValue({ pathname });
wrapper = shallow(<MainHeader />);
return wrapper;
};
afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders ServersDropdown', () => {
const wrapper = createWrapper();
expect(wrapper.find(ServersDropdown)).toHaveLength(1);
});
it.each([
[ '/foo', false ],
[ '/bar', false ],
[ '/settings', true ],
])('sets link to settings as active only when current path is settings', (currentPath, isActive) => {
const wrapper = createWrapper(currentPath);
const settingsLink = wrapper.find(NavLink);
expect(settingsLink.prop('active')).toEqual(isActive);
});
it('renders expected class based on the nav bar state', () => {
const wrapper = createWrapper();
expect(wrapper.find(NavbarToggler).find(FontAwesomeIcon).prop('className')).toEqual('main-header__toggle-icon');
wrapper.find(NavbarToggler).simulate('click');
expect(wrapper.find(NavbarToggler).find(FontAwesomeIcon).prop('className')).toEqual(
'main-header__toggle-icon main-header__toggle-icon--opened',
);
wrapper.find(NavbarToggler).simulate('click');
expect(wrapper.find(NavbarToggler).find(FontAwesomeIcon).prop('className')).toEqual('main-header__toggle-icon');
});
it('opens Collapse when clicking toggle', () => {
const wrapper = createWrapper();
expect(wrapper.find(Collapse).prop('isOpen')).toEqual(false);
wrapper.find(NavbarToggler).simulate('click');
expect(wrapper.find(Collapse).prop('isOpen')).toEqual(true);
wrapper.find(NavbarToggler).simulate('click');
expect(wrapper.find(Collapse).prop('isOpen')).toEqual(false);
});
});