mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Migrated more tests to react testing lib
This commit is contained in:
Alejandro Celaya
parent
8bf1a9d023
commit
54fe849efd
3 changed files with 114 additions and 93 deletions
|
|
@ -1,46 +1,50 @@
|
|||
import { shallow } from 'enzyme';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { formatISO } from 'date-fns';
|
||||
import { OrphanVisits as createOrphanVisits } from '../../src/visits/OrphanVisits';
|
||||
import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
|
||||
import { VisitsInfo } from '../../src/visits/types';
|
||||
import { VisitsStats } from '../../src/visits/VisitsStats';
|
||||
import { Visit, VisitsInfo } from '../../src/visits/types';
|
||||
import { Settings } from '../../src/settings/reducers/settings';
|
||||
import { ReportExporter } from '../../src/common/services/ReportExporter';
|
||||
import { SelectedServer } from '../../src/servers/data';
|
||||
import { VisitsHeader } from '../../src/visits/VisitsHeader';
|
||||
|
||||
jest.mock('react-router-dom', () => ({
|
||||
...jest.requireActual('react-router-dom'),
|
||||
useNavigate: jest.fn().mockReturnValue(jest.fn()),
|
||||
useParams: jest.fn().mockReturnValue({}),
|
||||
}));
|
||||
|
||||
describe('<OrphanVisits />', () => {
|
||||
const getOrphanVisits = jest.fn();
|
||||
const exportVisits = jest.fn();
|
||||
const orphanVisits = Mock.of<VisitsInfo>({ visits: [Mock.of<Visit>({ date: formatISO(new Date()) })] });
|
||||
const OrphanVisits = createOrphanVisits(Mock.of<ReportExporter>({ exportVisits }));
|
||||
const setUp = () => ({
|
||||
user: userEvent.setup(),
|
||||
...render(
|
||||
<MemoryRouter>
|
||||
<OrphanVisits
|
||||
{...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
|
||||
getOrphanVisits={getOrphanVisits}
|
||||
orphanVisits={orphanVisits}
|
||||
cancelGetOrphanVisits={jest.fn()}
|
||||
settings={Mock.all<Settings>()}
|
||||
selectedServer={Mock.all<SelectedServer>()}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
),
|
||||
});
|
||||
|
||||
it('wraps visits stats and header', () => {
|
||||
const getOrphanVisits = jest.fn();
|
||||
const cancelGetOrphanVisits = jest.fn();
|
||||
const orphanVisits = Mock.all<VisitsInfo>();
|
||||
const OrphanVisits = createOrphanVisits(Mock.all<ReportExporter>());
|
||||
setUp();
|
||||
expect(screen.getByRole('heading', { name: 'Orphan visits' })).toBeInTheDocument();
|
||||
expect(getOrphanVisits).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
const wrapper = shallow(
|
||||
<OrphanVisits
|
||||
{...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
|
||||
getOrphanVisits={getOrphanVisits}
|
||||
orphanVisits={orphanVisits}
|
||||
cancelGetOrphanVisits={cancelGetOrphanVisits}
|
||||
settings={Mock.all<Settings>()}
|
||||
selectedServer={Mock.all<SelectedServer>()}
|
||||
/>,
|
||||
).dive();
|
||||
const stats = wrapper.find(VisitsStats);
|
||||
const header = wrapper.find(VisitsHeader);
|
||||
it('exports visits when clicking the button', async () => {
|
||||
const { user } = setUp();
|
||||
const btn = screen.getByRole('button', { name: 'Export (1)' });
|
||||
|
||||
expect(stats).toHaveLength(1);
|
||||
expect(header).toHaveLength(1);
|
||||
expect(stats.prop('cancelGetVisits')).toEqual(cancelGetOrphanVisits);
|
||||
expect(stats.prop('visitsInfo')).toEqual(orphanVisits);
|
||||
expect(stats.prop('isOrphanVisits')).toEqual(true);
|
||||
expect(header.prop('visits')).toEqual(orphanVisits.visits);
|
||||
expect(header.prop('goBack')).toEqual(expect.any(Function));
|
||||
expect(exportVisits).not.toHaveBeenCalled();
|
||||
expect(btn).toBeInTheDocument();
|
||||
|
||||
await user.click(btn);
|
||||
expect(exportVisits).toHaveBeenCalledWith('orphan_visits.csv', expect.anything());
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,49 +1,54 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { identity } from 'ramda';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { formatISO } from 'date-fns';
|
||||
import { ShortUrlVisits as createShortUrlVisits, ShortUrlVisitsProps } from '../../src/visits/ShortUrlVisits';
|
||||
import { ShortUrlVisitsHeader } from '../../src/visits/ShortUrlVisitsHeader';
|
||||
import { ShortUrlVisits as ShortUrlVisitsState } from '../../src/visits/reducers/shortUrlVisits';
|
||||
import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail';
|
||||
import { VisitsStats } from '../../src/visits/VisitsStats';
|
||||
import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
|
||||
import { ReportExporter } from '../../src/common/services/ReportExporter';
|
||||
|
||||
jest.mock('react-router-dom', () => ({
|
||||
...jest.requireActual('react-router-dom'),
|
||||
useNavigate: jest.fn().mockReturnValue(jest.fn()),
|
||||
useLocation: jest.fn().mockReturnValue({ search: '' }),
|
||||
useParams: jest.fn().mockReturnValue({ shortCode: 'abc123' }),
|
||||
}));
|
||||
import { Visit } from '../../src/visits/types';
|
||||
import { Settings } from '../../src/settings/reducers/settings';
|
||||
|
||||
describe('<ShortUrlVisits />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const getShortUrlVisitsMock = jest.fn();
|
||||
const ShortUrlVisits = createShortUrlVisits(Mock.all<ReportExporter>());
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<ShortUrlVisits
|
||||
{...Mock.all<ShortUrlVisitsProps>()}
|
||||
{...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
|
||||
getShortUrlDetail={identity}
|
||||
getShortUrlVisits={getShortUrlVisitsMock}
|
||||
shortUrlVisits={Mock.of<ShortUrlVisitsState>({ loading: true, visits: [] })}
|
||||
shortUrlDetail={Mock.all<ShortUrlDetail>()}
|
||||
cancelGetShortUrlVisits={() => {}}
|
||||
/>,
|
||||
).dive(); // Dive is needed as this component is wrapped in a HOC
|
||||
const exportVisits = jest.fn();
|
||||
const shortUrlVisits = Mock.of<ShortUrlVisitsState>({ visits: [Mock.of<Visit>({ date: formatISO(new Date()) })] });
|
||||
const ShortUrlVisits = createShortUrlVisits(Mock.of<ReportExporter>({ exportVisits }));
|
||||
const setUp = () => ({
|
||||
user: userEvent.setup(),
|
||||
...render(
|
||||
<MemoryRouter>
|
||||
<ShortUrlVisits
|
||||
{...Mock.all<ShortUrlVisitsProps>()}
|
||||
{...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
|
||||
getShortUrlDetail={identity}
|
||||
getShortUrlVisits={getShortUrlVisitsMock}
|
||||
shortUrlVisits={shortUrlVisits}
|
||||
shortUrlDetail={Mock.all<ShortUrlDetail>()}
|
||||
settings={Mock.all<Settings>()}
|
||||
cancelGetShortUrlVisits={() => {}}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
),
|
||||
});
|
||||
|
||||
afterEach(jest.clearAllMocks);
|
||||
afterEach(() => wrapper.unmount());
|
||||
it('wraps visits stats and header', () => {
|
||||
setUp();
|
||||
expect(screen.getAllByRole('heading')[0]).toHaveTextContent('Visits for');
|
||||
expect(getShortUrlVisitsMock).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('renders visit stats and visits header', () => {
|
||||
const visitStats = wrapper.find(VisitsStats);
|
||||
const visitHeader = wrapper.find(ShortUrlVisitsHeader);
|
||||
it('exports visits when clicking the button', async () => {
|
||||
const { user } = setUp();
|
||||
const btn = screen.getByRole('button', { name: 'Export (1)' });
|
||||
|
||||
expect(visitStats).toHaveLength(1);
|
||||
expect(visitStats.prop('isOrphanVisits')).not.toBeDefined();
|
||||
expect(visitHeader).toHaveLength(1);
|
||||
expect(exportVisits).not.toHaveBeenCalled();
|
||||
expect(btn).toBeInTheDocument();
|
||||
|
||||
await user.click(btn);
|
||||
expect(exportVisits).toHaveBeenCalledWith('short-url_undefined_visits.csv', expect.anything());
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,47 +1,59 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { formatISO } from 'date-fns';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { TagVisits as createTagVisits, TagVisitsProps } from '../../src/visits/TagVisits';
|
||||
import { TagVisitsHeader } from '../../src/visits/TagVisitsHeader';
|
||||
import { ColorGenerator } from '../../src/utils/services/ColorGenerator';
|
||||
import { TagVisits as TagVisitsStats } from '../../src/visits/reducers/tagVisits';
|
||||
import { VisitsStats } from '../../src/visits/VisitsStats';
|
||||
import { MercureBoundProps } from '../../src/mercure/helpers/boundToMercureHub';
|
||||
import { ReportExporter } from '../../src/common/services/ReportExporter';
|
||||
import { Visit } from '../../src/visits/types';
|
||||
import { Settings } from '../../src/settings/reducers/settings';
|
||||
|
||||
jest.mock('react-router-dom', () => ({
|
||||
...jest.requireActual('react-router-dom'),
|
||||
useNavigate: jest.fn().mockReturnValue(jest.fn()),
|
||||
useLocation: jest.fn().mockReturnValue({}),
|
||||
useParams: jest.fn().mockReturnValue({ tag: 'foo' }),
|
||||
}));
|
||||
|
||||
describe('<TagVisits />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const getTagVisitsMock = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
const TagVisits = createTagVisits(Mock.all<ColorGenerator>(), Mock.all<ReportExporter>());
|
||||
|
||||
wrapper = shallow(
|
||||
<TagVisits
|
||||
{...Mock.all<TagVisitsProps>()}
|
||||
{...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
|
||||
getTagVisits={getTagVisitsMock}
|
||||
tagVisits={Mock.of<TagVisitsStats>({ loading: true, visits: [] })}
|
||||
cancelGetTagVisits={() => {}}
|
||||
/>,
|
||||
).dive(); // Dive is needed as this component is wrapped in a HOC
|
||||
const exportVisits = jest.fn();
|
||||
const tagVisits = Mock.of<TagVisitsStats>({ visits: [Mock.of<Visit>({ date: formatISO(new Date()) })] });
|
||||
const TagVisits = createTagVisits(
|
||||
Mock.of<ColorGenerator>({ isColorLightForKey: () => false, getColorForKey: () => 'red' }),
|
||||
Mock.of<ReportExporter>({ exportVisits }),
|
||||
);
|
||||
const setUp = () => ({
|
||||
user: userEvent.setup(),
|
||||
...render(
|
||||
<MemoryRouter>
|
||||
<TagVisits
|
||||
{...Mock.all<TagVisitsProps>()}
|
||||
{...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
|
||||
getTagVisits={getTagVisitsMock}
|
||||
tagVisits={tagVisits}
|
||||
settings={Mock.all<Settings>()}
|
||||
cancelGetTagVisits={() => {}}
|
||||
/>
|
||||
</MemoryRouter>,
|
||||
),
|
||||
});
|
||||
|
||||
afterEach(() => wrapper.unmount());
|
||||
afterEach(jest.resetAllMocks);
|
||||
it('wraps visits stats and header', () => {
|
||||
setUp();
|
||||
expect(screen.getAllByRole('heading')[0]).toHaveTextContent('Visits for');
|
||||
expect(getTagVisitsMock).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('renders visit stats and visits header', () => {
|
||||
const visitStats = wrapper.find(VisitsStats);
|
||||
const visitHeader = wrapper.find(TagVisitsHeader);
|
||||
it('exports visits when clicking the button', async () => {
|
||||
const { user } = setUp();
|
||||
const btn = screen.getByRole('button', { name: 'Export (1)' });
|
||||
|
||||
expect(visitStats).toHaveLength(1);
|
||||
expect(visitStats.prop('isOrphanVisits')).not.toBeDefined();
|
||||
expect(visitHeader).toHaveLength(1);
|
||||
expect(exportVisits).not.toHaveBeenCalled();
|
||||
expect(btn).toBeInTheDocument();
|
||||
|
||||
await user.click(btn);
|
||||
expect(exportVisits).toHaveBeenCalledWith('tag_foo_visits.csv', expect.anything());
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue