shlink-web-client/test/common/MainHeader.test.tsx

67 lines
2.3 KiB
TypeScript
Raw Normal View History

import { screen, waitFor } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { MainHeader as createMainHeader } from '../../src/common/MainHeader';
2022-07-10 20:44:49 +03:00
import { renderWithEvents } from '../__helpers__/setUpTest';
2021-09-19 12:17:56 +03:00
describe('<MainHeader />', () => {
const MainHeader = createMainHeader(() => <>ServersDropdown</>);
const setUp = (pathname = '') => {
const history = createMemoryHistory();
history.push(pathname);
2021-09-19 12:17:56 +03:00
return renderWithEvents(
<Router location={history.location} navigator={history}>
<MainHeader />
</Router>,
);
2021-09-19 12:17:56 +03:00
};
it('renders ServersDropdown', () => {
setUp();
expect(screen.getByText('ServersDropdown')).toBeInTheDocument();
2021-09-19 12:17:56 +03:00
});
it.each([
2022-03-26 14:17:42 +03:00
['/foo', false],
['/bar', false],
['/settings', true],
['/settings/foo', true],
['/settings/bar', true],
])('sets link to settings as active only when current path is settings', (currentPath, isActive) => {
setUp(currentPath);
2021-09-19 12:17:56 +03:00
if (isActive) {
expect(screen.getByText(/Settings$/).getAttribute('class')).toContain('active');
} else {
expect(screen.getByText(/Settings$/).getAttribute('class')).not.toContain('active');
}
2021-09-19 12:17:56 +03:00
});
it('renders expected class based on the nav bar state', async () => {
const { user } = setUp();
const toggle = screen.getByLabelText('Toggle navigation');
const icon = toggle.firstChild;
2021-09-19 12:17:56 +03:00
expect(icon).toHaveAttribute('class', expect.stringMatching(/main-header__toggle-icon$/));
await user.click(toggle);
expect(icon).toHaveAttribute(
'class',
expect.stringMatching(/main-header__toggle-icon main-header__toggle-icon--opened$/),
2021-09-19 12:17:56 +03:00
);
await user.click(toggle);
expect(icon).toHaveAttribute('class', expect.stringMatching(/main-header__toggle-icon$/));
2021-09-19 12:17:56 +03:00
});
it('opens Collapse when clicking toggle', async () => {
const { container, user } = setUp();
const collapse = container.querySelector('.collapse');
const toggle = screen.getByLabelText('Toggle navigation');
2021-09-19 12:17:56 +03:00
expect(collapse).not.toHaveAttribute('class', expect.stringContaining('show'));
await user.click(toggle);
await waitFor(() => expect(collapse).toHaveAttribute('class', expect.stringContaining('show')));
2021-09-19 12:17:56 +03:00
});
});