forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-02-27 04:06:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace reactstrap nav bar with tailwind-based one

Browse Source
This commit is contained in:
Alejandro Celaya
2025-06-16 11:18:03 +02:00
parent 9c0c2fc3f9
commit d10d7fd96d
9 changed files with 81 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
test/common/MainHeader.test.tsx
View File

@@ -1,4 +1,4 @@
import { screen, waitFor } from '@testing-library/react';
import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { createMemoryHistory } from 'history';
import { Router } from 'react-router';
@@ -8,8 +8,8 @@ import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<MainHeader />', () => {
const MainHeader = MainHeaderFactory(fromPartial({
// Fake this component as a li, as it gets rendered inside a ul
ServersDropdown: () => <li>ServersDropdown</li>,
// Fake this component as a li[role="menuitem"], as it gets rendered inside a ul[role="menu"]
ServersDropdown: () => <li role="menuitem">ServersDropdown</li>,
}));
const setUp = (pathname = '') => {
const history = createMemoryHistory();
@@ -37,35 +37,8 @@ describe('<MainHeader />', () => {
['/settings/bar', true],
])('sets link to settings as active only when current path is settings', (currentPath, isActive) => {
setUp(currentPath);
if (isActive) {
expect(screen.getByText(/Settings$/).getAttribute('class')).toContain('active');
} else {
expect(screen.getByText(/Settings$/).getAttribute('class')).not.toContain('active');
}
});
it('renders expected class based on the nav bar state', async () => {
const { user } = setUp();
const toggle = screen.getByLabelText('Toggle navigation');
const icon = toggle.firstChild;
expect(icon).not.toHaveClass('tw:rotate-180');
await user.click(toggle);
expect(icon).toHaveClass('tw:rotate-180');
await user.click(toggle);
expect(icon).not.toHaveClass('tw:rotate-180');
});
it('opens Collapse when clicking toggle', async () => {
const { container, user } = setUp();
const collapse = container.querySelector('.collapse');
const toggle = screen.getByLabelText('Toggle navigation');
expect(collapse).not.toHaveAttribute('class', expect.stringContaining('show'));
await user.click(toggle);
await waitFor(() => expect(collapse).toHaveAttribute('class', expect.stringContaining('show')));
expect(screen.getByRole('menuitem', { name: /Settings$/ })).toHaveAttribute(
'data-active', isActive ? 'true' : 'false',
);
});
});

18
test/servers/ServersDropdown.test.tsx
View File

@@ -14,7 +14,7 @@ describe('<ServersDropdown />', () => {
};
const setUp = (servers: ServersMap = fallbackServers) => renderWithEvents(
<MemoryRouter>
<ul>
<ul role="menu">
<ServersDropdown servers={servers} selectedServer={null} />
</ul>
</MemoryRouter>,
@@ -33,16 +33,18 @@ describe('<ServersDropdown />', () => {
await user.click(screen.getByText('Servers'));
const items = screen.getAllByRole('menuitem');
expect(items).toHaveLength(Object.values(fallbackServers).length + 1);
expect(items[0]).toHaveTextContent('foo');
expect(items[1]).toHaveTextContent('bar');
expect(items[2]).toHaveTextContent('baz');
expect(items[3]).toHaveTextContent('Manage servers');
// We have to add two for the "Manage servers" and the "Settings" menu items
expect(items).toHaveLength(Object.values(fallbackServers).length + 2);
expect(items[1]).toHaveTextContent('foo');
expect(items[2]).toHaveTextContent('bar');
expect(items[3]).toHaveTextContent('baz');
expect(items[4]).toHaveTextContent('Manage servers');
});
it('contains a toggle with proper text', () => {
setUp();
expect(screen.getByRole('link')).toHaveTextContent('Servers');
expect(screen.getByRole('button')).toHaveTextContent('Servers');
});
it('contains a button to manage servers', async () => {
@@ -56,6 +58,6 @@ describe('<ServersDropdown />', () => {
const { user } = setUp({});
await user.click(screen.getByText('Servers'));
expect(screen.getByRole('menuitem')).toHaveTextContent('Add a server');
expect(screen.getByRole('menuitem', { name: 'Add a server' })).toBeInTheDocument();
});
});