mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated Home test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-03 20:15:22 +02:00
parent bc3bc8dd8a
commit 29182ae349
3 changed files with 27 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common/Home.tsx
View file

@ -10,11 +10,11 @@ import { ServersMap } from '../servers/data';
import { ShlinkLogo } from './img/ShlinkLogo'; import { ShlinkLogo } from './img/ShlinkLogo';
import './Home.scss'; import './Home.scss';
export interface HomeProps { interface HomeProps {
servers: ServersMap; servers: ServersMap;
} }
const Home = ({ servers }: HomeProps) => { export const Home = ({ servers }: HomeProps) => {
const navigate = useNavigate(); const navigate = useNavigate();
const serversList = values(servers); const serversList = values(servers);
const hasServers = !isEmpty(serversList); const hasServers = !isEmpty(serversList);
@ -65,5 +65,3 @@ const Home = ({ servers }: HomeProps) => {
</div> </div>
); );
}; };
export default Home;

2
src/common/services/provideServices.ts
View file

@ -2,7 +2,7 @@ import axios from 'axios';
import Bottle from 'bottlejs'; import Bottle from 'bottlejs';
import ScrollToTop from '../ScrollToTop'; import ScrollToTop from '../ScrollToTop';
import MainHeader from '../MainHeader'; import MainHeader from '../MainHeader';
import Home from '../Home'; import { Home } from '../Home';
import MenuLayout from '../MenuLayout'; import MenuLayout from '../MenuLayout';
import AsideMenu from '../AsideMenu'; import AsideMenu from '../AsideMenu';
import { ErrorHandler } from '../ErrorHandler'; import { ErrorHandler } from '../ErrorHandler';

54
test/common/Home.test.tsx
View file

@ -1,31 +1,19 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import Home, { HomeProps } from '../../src/common/Home'; import { MemoryRouter } from 'react-router-dom';
import { ServerWithId } from '../../src/servers/data'; import { Home } from '../../src/common/Home';
import { ShlinkLogo } from '../../src/common/img/ShlinkLogo'; import { ServersMap, ServerWithId } from '../../src/servers/data';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: jest.fn().mockReturnValue(jest.fn()),
}));
describe('<Home />', () => { describe('<Home />', () => {
let wrapped: ShallowWrapper; const setUp = (servers: ServersMap = {}) => render(
const createComponent = (props: Partial<HomeProps> = {}) => { <MemoryRouter>
const actualProps = { resetSelectedServer: jest.fn(), servers: {}, ...props }; <Home servers={servers} />
</MemoryRouter>,
);
wrapped = shallow(<Home {...actualProps} />); it('renders title', () => {
setUp();
return wrapped; expect(screen.getByRole('heading', { name: 'Welcome!' })).toBeInTheDocument();
};
afterEach(() => wrapped?.unmount());
it('renders logo and title', () => {
const wrapped = createComponent();
expect(wrapped.find(ShlinkLogo)).toHaveLength(1);
expect(wrapped.find('.home__title')).toHaveLength(1);
}); });
it.each([ it.each([
@ -33,14 +21,20 @@ describe('<Home />', () => {
{ {
'1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }), '1a': Mock.of<ServerWithId>({ name: 'foo', id: '1' }),
'2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }), '2b': Mock.of<ServerWithId>({ name: 'bar', id: '2' }),
'3c': Mock.of<ServerWithId>({ name: 'baz', id: '3' }),
}, },
0, 3,
], ],
[{}, 3], [{}, 2],
])('shows link to create or set-up server only when no servers exist', (servers, expectedParagraphs) => { ])('shows link to create or set-up server only when no servers exist', (servers, expectedServers) => {
const wrapped = createComponent({ servers }); setUp(servers);
const p = wrapped.find('p'); const links = screen.getAllByRole('link');
expect(p).toHaveLength(expectedParagraphs); expect(links).toHaveLength(expectedServers);
if (Object.keys(servers).length === 0) {
expect(screen.getByText('This application will help you manage your Shlink servers.')).toBeInTheDocument();
expect(screen.getByText('Learn more about Shlink')).toBeInTheDocument();
}
}); });
}); });