diff --git a/src/common/Home.tsx b/src/common/Home.tsx
index f2b2828d..cd8ab483 100644
--- a/src/common/Home.tsx
+++ b/src/common/Home.tsx
@@ -10,11 +10,11 @@ import { ServersMap } from '../servers/data';
import { ShlinkLogo } from './img/ShlinkLogo';
import './Home.scss';
-export interface HomeProps {
+interface HomeProps {
servers: ServersMap;
}
-const Home = ({ servers }: HomeProps) => {
+export const Home = ({ servers }: HomeProps) => {
const navigate = useNavigate();
const serversList = values(servers);
const hasServers = !isEmpty(serversList);
@@ -65,5 +65,3 @@ const Home = ({ servers }: HomeProps) => {
);
};
-
-export default Home;
diff --git a/src/common/services/provideServices.ts b/src/common/services/provideServices.ts
index 9dfddaea..5bd8019a 100644
--- a/src/common/services/provideServices.ts
+++ b/src/common/services/provideServices.ts
@@ -2,7 +2,7 @@ import axios from 'axios';
import Bottle from 'bottlejs';
import ScrollToTop from '../ScrollToTop';
import MainHeader from '../MainHeader';
-import Home from '../Home';
+import { Home } from '../Home';
import MenuLayout from '../MenuLayout';
import AsideMenu from '../AsideMenu';
import { ErrorHandler } from '../ErrorHandler';
diff --git a/test/common/Home.test.tsx b/test/common/Home.test.tsx
index 66cb44ea..75c14047 100644
--- a/test/common/Home.test.tsx
+++ b/test/common/Home.test.tsx
@@ -1,31 +1,19 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
-import Home, { HomeProps } from '../../src/common/Home';
-import { ServerWithId } from '../../src/servers/data';
-import { ShlinkLogo } from '../../src/common/img/ShlinkLogo';
-
-jest.mock('react-router-dom', () => ({
- ...jest.requireActual('react-router-dom'),
- useNavigate: jest.fn().mockReturnValue(jest.fn()),
-}));
+import { MemoryRouter } from 'react-router-dom';
+import { Home } from '../../src/common/Home';
+import { ServersMap, ServerWithId } from '../../src/servers/data';
describe('', () => {
- let wrapped: ShallowWrapper;
- const createComponent = (props: Partial = {}) => {
- const actualProps = { resetSelectedServer: jest.fn(), servers: {}, ...props };
+ const setUp = (servers: ServersMap = {}) => render(
+
+
+ ,
+ );
- wrapped = shallow();
-
- return wrapped;
- };
-
- 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('renders title', () => {
+ setUp();
+ expect(screen.getByRole('heading', { name: 'Welcome!' })).toBeInTheDocument();
});
it.each([
@@ -33,14 +21,20 @@ describe('', () => {
{
'1a': Mock.of({ name: 'foo', id: '1' }),
'2b': Mock.of({ name: 'bar', id: '2' }),
+ '3c': Mock.of({ name: 'baz', id: '3' }),
},
- 0,
+ 3,
],
- [{}, 3],
- ])('shows link to create or set-up server only when no servers exist', (servers, expectedParagraphs) => {
- const wrapped = createComponent({ servers });
- const p = wrapped.find('p');
+ [{}, 2],
+ ])('shows link to create or set-up server only when no servers exist', (servers, expectedServers) => {
+ setUp(servers);
+ 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();
+ }
});
});