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(); + } }); });