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

Merge pull request #834 from acelaya-forks/feature/vitest-migration

Browse source 
Feature/vitest migration
This commit is contained in:
Alejandro Celaya 2023-05-27 14:21:33 +02:00 committed by GitHub
commit 2ac1025e9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
128 changed files with 2373 additions and 5882 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
CHANGELOG.md
View file

@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
## [Unreleased]
### Added
* *Nothing*
### Changed
* [#781](https://github.com/shlinkio/shlink-web-client/issues/781) Migrate tests from jest to vitest.
### Deprecated
* *Nothing*
### Removed
* *Nothing*
### Fixed
* *Nothing*
## [3.10.1] - 2023-04-23
### Added
* *Nothing*

9
babel.config.js
View file

@ -1,9 +0,0 @@
module.exports = {
presets: [
['@babel/preset-env', {
targets: { esmodules: true }
}],
['@babel/preset-react', { runtime: 'automatic' }],
'@babel/preset-typescript',
],
};

12
config/jest/cssTransform.js
View file

@ -1,12 +0,0 @@
// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process() {
return { code: 'module.exports = {};' };
},
getCacheKey() {
// The output is always the same.
return 'cssTransform';
},
};

31
config/jest/fileTransform.js
View file

@ -1,31 +0,0 @@
const path = require('path');
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process(src, filename) {
const assetFilename = JSON.stringify(path.basename(filename));
if (filename.match(/\.svg$/)) {
return `module.exports = {
__esModule: true,
default: ${assetFilename},
ReactComponent: (props) => ({
$$typeof: Symbol.for('react.element'),
type: 'svg',
ref: null,
key: null,
props: Object.assign({}, props, {
children: ${assetFilename}
})
}),
};`;
}
return {
code: `module.exports = ${assetFilename};`
};
},
};

12
config/jest/setupTests.ts
View file

@ -1,12 +0,0 @@
import '@testing-library/jest-dom';
import 'jest-canvas-mock';
import 'chart.js/auto';
import ResizeObserver from 'resize-observer-polyfill';
import { setAutoFreeze } from 'immer';
(global as any).ResizeObserver = ResizeObserver;
(global as any).scrollTo = () => {};
(global as any).prompt = () => {};
(global as any).matchMedia = (media: string) => ({ matches: false, media });
setAutoFreeze(false); // TODO Bypassing a bug on jest

27
config/test/setupTests.ts Normal file
View file

@ -0,0 +1,27 @@
import 'vitest-canvas-mock';
import 'chart.js/auto';
import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
import matchers from '@testing-library/jest-dom/matchers';
import { cleanup } from '@testing-library/react';
import ResizeObserver from 'resize-observer-polyfill';
import { afterEach, expect } from 'vitest';
// Workaround for TypeScript error: https://github.com/testing-library/jest-dom/issues/439#issuecomment-1536524120
declare module 'vitest' {
interface Assertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}
}
// Extends Vitest's expect method with methods from react-testing-library
expect.extend(matchers);
afterEach(() => {
// Clears all mocks after every test
vi.clearAllMocks();
// Run a cleanup after each test case (e.g. clearing jsdom)
cleanup();
});
(global as any).ResizeObserver = ResizeObserver;
(global as any).scrollTo = () => {};
(global as any).prompt = () => {};
(global as any).matchMedia = (media: string) => ({ matches: false, media });

39
jest.config.js
View file

@ -1,39 +0,0 @@
module.exports = {
coverageDirectory: '<rootDir>/coverage',
collectCoverageFrom: [
'src/**/*.{ts,tsx}',
'!src/*.{ts,tsx}',
'!src/reducers/index.ts',
'!src/**/provideServices.ts',
'!src/container/*.ts',
],
coverageThreshold: {
global: {
statements: 90,
branches: 85,
functions: 90,
lines: 90,
},
},
setupFilesAfterEnv: ['<rootDir>/config/jest/setupTests.ts'],
testMatch: ['<rootDir>/test/**/*.test.{ts,tsx}'],
testEnvironment: 'jsdom',
testEnvironmentOptions: {
url: 'http://localhost',
},
transform: {
'^.+\\.(ts|tsx|js)$': '<rootDir>/node_modules/babel-jest',
'^.+\\.scss$': '<rootDir>/config/jest/cssTransform.js',
'^(?!.*\\.(ts|tsx|js|json|scss)$)': '<rootDir>/config/jest/fileTransform.js',
},
transformIgnorePatterns: [
'node_modules\/(?!(\@react-leaflet|react-leaflet|leaflet|react-chartjs-2|react-colorful)\/)',
'^.+\\.module\\.scss$',
],
moduleNameMapper: {
'^.+\\.module\\.scss$': 'identity-obj-proxy',
'react-chartjs-2': '<rootDir>/node_modules/react-chartjs-2/dist/index.js',
'uuid': '<rootDir>/node_modules/uuid/dist/index.js',
},
moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
};

7222
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

26
package.json
View file

@ -17,16 +17,12 @@
"preview": "vite preview --host=0.0.0.0",
"build": "npm run types && vite build && node scripts/replace-version.mjs",
"build:dist": "npm run build && node scripts/create-dist-file.mjs",
"test": "jest --env=jsdom --colors",
"test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",
"test:ci": "npm run test:coverage -- --coverageReporters=clover --ci",
"test:pretty": "npm run test:coverage -- --coverageReporters=html",
"test": "vitest run --run",
"test:watch": "vitest --watch",
"test:ci": "npm run test -- --coverage",
"test:verbose": "npm run test -- --verbose"
},
"dependencies": {
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.0",
"@fortawesome/fontawesome-free": "^6.3.0",
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-brands-svg-icons": "^6.3.0",
@ -61,9 +57,7 @@
"react-swipeable": "^7.0.0",
"react-tag-autocomplete": "^6.3.0",
"reactstrap": "^9.1.5",
"redux": "^4.2.0",
"redux-localstorage-simple": "^2.5.1",
"redux-thunk": "^2.4.2",
"uuid": "^8.3.2",
"workbox-core": "^6.5.4",
"workbox-expiration": "^6.5.4",
@ -75,10 +69,9 @@
"@shlinkio/eslint-config-js-coding-standard": "~2.1.0",
"@shlinkio/stylelint-config-css-coding-standard": "~1.0.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@total-typescript/shoehorn": "^0.1.0",
"@types/jest": "^29.2.4",
"@types/json2csv": "^5.0.3",
"@types/leaflet": "^1.9.0",
"@types/qs": "^6.9.7",
@ -91,20 +84,19 @@
"@types/react-tag-autocomplete": "^6.3.0",
"@types/uuid": "^8.3.4",
"@vitejs/plugin-react": "^4.0.0",
"@vitest/coverage-c8": "^0.31.1",
"adm-zip": "^0.5.10",
"babel-jest": "^29.5.0",
"chalk": "^5.2.0",
"eslint": "^8.30.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.3.1",
"jest-canvas-mock": "^2.4.0",
"jest-environment-jsdom": "^29.3.1",
"jsdom": "^22.0.0",
"resize-observer-polyfill": "^1.5.1",
"sass": "^1.57.1",
"stylelint": "^14.16.0",
"typescript": "^5.0.2",
"vite": "^4.3.1",
"vite-plugin-pwa": "^0.14.4"
"vite-plugin-pwa": "^0.14.4",
"vitest": "^0.31.1",
"vitest-canvas-mock": "^0.2.2"
},
"browserslist": [
">0.2%",

6
test/__helpers__/setUpTest.ts
View file

@ -5,7 +5,11 @@ import type { ReactElement } from 'react';
export const setUpCanvas = (element: ReactElement) => {
const result = render(element);
const { container } = result;
const getEvents = () => container.querySelector('canvas')?.getContext('2d')?.__getEvents(); // eslint-disable-line no-underscore-dangle
const getEvents = () => {
const context = container.querySelector('canvas')?.getContext('2d');
// @ts-expect-error __getEvents is set by vitest-canvas-mock
return context?.__getEvents(); // eslint-disable-line no-underscore-dangle
};
return { ...result, events: getEvents(), getEvents };
};

10
test/__mocks__/Window.mock.ts
View file

@ -1,18 +1,18 @@
import { fromAny, fromPartial } from '@total-typescript/shoehorn';
const createLinkMock = () => ({
setAttribute: jest.fn(),
click: jest.fn(),
setAttribute: vi.fn(),
click: vi.fn(),
style: {},
});
export const appendChild = jest.fn();
export const appendChild = vi.fn();
export const removeChild = jest.fn();
export const removeChild = vi.fn();
export const windowMock = fromPartial<Window>({
document: fromAny({
createElement: jest.fn(createLinkMock),
createElement: vi.fn(createLinkMock),
body: { appendChild, removeChild },
}),
});

6
test/api/services/ShlinkApiClient.test.ts
View file

@ -7,8 +7,8 @@ import type { ShortUrl, ShortUrlsOrder } from '../../../src/short-urls/data';
import type { OptionalString } from '../../../src/utils/utils';
describe('ShlinkApiClient', () => {
const fetchJson = jest.fn().mockResolvedValue({});
const fetchEmpty = jest.fn().mockResolvedValue(undefined);
const fetchJson = vi.fn().mockResolvedValue({});
const fetchEmpty = vi.fn().mockResolvedValue(undefined);
const httpClient = fromPartial<HttpClient>({ fetchJson, fetchEmpty });
const buildApiClient = () => new ShlinkApiClient(httpClient, '', '');
const shortCodesWithDomainCombinations: [string, OptionalString][] = [
@ -17,8 +17,6 @@ describe('ShlinkApiClient', () => {
['abc123', 'example.com'],
];
beforeEach(jest.clearAllMocks);
describe('listShortUrls', () => {
const expectedList = ['foo', 'bar'];

2
test/app/App.test.tsx
View file

@ -32,8 +32,6 @@ describe('<App />', () => {
);
};
afterEach(jest.clearAllMocks);
it('renders children components', () => {
setUp();

6
test/common/AppUpdateBanner.test.tsx
View file

@ -3,12 +3,10 @@ import { AppUpdateBanner } from '../../src/common/AppUpdateBanner';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<AppUpdateBanner />', () => {
const toggle = jest.fn();
const forceUpdate = jest.fn();
const toggle = vi.fn();
const forceUpdate = vi.fn();
const setUp = () => renderWithEvents(<AppUpdateBanner isOpen toggle={toggle} forceUpdate={forceUpdate} />);
afterEach(jest.clearAllMocks);
it('renders initial state', () => {
setUp();

2
test/common/AsideMenu.test.tsx
View file

@ -1,6 +1,6 @@
import { render, screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router-dom';
import { MemoryRouter } from 'react-router';
import { AsideMenu as createAsideMenu } from '../../src/common/AsideMenu';
describe('<AsideMenu />', () => {

7
test/common/ErrorHandler.test.tsx
View file

@ -8,17 +8,16 @@ const ComponentWithError = () => {
};
describe('<ErrorHandler />', () => {
const reload = jest.fn();
const reload = vi.fn();
const window = fromPartial<Window>({
location: { reload },
});
const cons = fromPartial<Console>({ error: jest.fn() });
const cons = fromPartial<Console>({ error: vi.fn() });
const ErrorHandler = createErrorHandler(window, cons);
beforeEach(() => {
jest.spyOn(console, 'error').mockImplementation(() => {}); // Silence react errors
vi.spyOn(console, 'error').mockImplementation(() => {}); // Silence react errors
});
afterEach(jest.resetAllMocks);
it('renders children when no error has occurred', () => {
render(<ErrorHandler children={<span>Foo</span>} />);

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

@ -1,6 +1,6 @@
import { render, screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import { MemoryRouter } from 'react-router-dom';
import { MemoryRouter } from 'react-router';
import { Home } from '../../src/common/Home';
import type { ServersMap, ServerWithId } from '../../src/servers/data';

10
test/common/MenuLayout.test.tsx
View file

@ -6,7 +6,7 @@ import { MenuLayout as createMenuLayout } from '../../src/common/MenuLayout';
import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
import type { SemVer } from '../../src/utils/helpers/version';
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useParams: jest.fn() }));
vi.mock('react-router-dom', async () => ({ ...(await vi.importActual<any>('react-router-dom')), useParams: vi.fn() }));
describe('<MenuLayout />', () => {
const MenuLayout = createMenuLayout(
@ -31,9 +31,9 @@ describe('<MenuLayout />', () => {
return render(
<Router location={history.location} navigator={history}>
<MenuLayout
sidebarNotPresent={jest.fn()}
sidebarPresent={jest.fn()}
selectServer={jest.fn()}
sidebarNotPresent={vi.fn()}
sidebarPresent={vi.fn()}
selectServer={vi.fn()}
selectedServer={selectedServer}
/>
</Router>,
@ -44,8 +44,6 @@ describe('<MenuLayout />', () => {
(useParams as any).mockReturnValue({ serverId: 'abc123' });
});
afterEach(jest.clearAllMocks);
it('shows loading indicator while loading server', () => {
setUp(null);

2
test/common/NotFound.test.tsx
View file

@ -1,5 +1,5 @@
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { MemoryRouter } from 'react-router';
import { NotFound } from '../../src/common/NotFound';
describe('<NotFound />', () => {

2
test/common/ScrollToTop.test.tsx
View file

@ -1,5 +1,5 @@
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { MemoryRouter } from 'react-router';
import { ScrollToTop } from '../../src/common/ScrollToTop';
describe('<ScrollToTop />', () => {

2
test/common/SimplePaginator.test.tsx
View file

@ -4,7 +4,7 @@ import { ELLIPSIS } from '../../src/utils/helpers/pagination';
describe('<SimplePaginator />', () => {
const setUp = (pagesCount: number, currentPage = 1) => render(
<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={jest.fn()} />,
<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={vi.fn()} />,
);
it.each([-3, -2, 0, 1])('renders empty when the amount of pages is smaller than 2', (pagesCount) => {

4
test/common/services/HttpClient.test.ts
View file

@ -1,11 +1,9 @@
import { HttpClient } from '../../../src/common/services/HttpClient';
describe('HttpClient', () => {
const fetch = jest.fn();
const fetch = vi.fn();
const httpClient = new HttpClient(fetch);
beforeEach(jest.clearAllMocks);
describe('fetchJson', () => {
it('throws json on success', async () => {
const theError = { error: true, foo: 'bar' };

3
test/common/services/ImageDownloader.test.ts
View file

@ -4,12 +4,11 @@ import { ImageDownloader } from '../../../src/common/services/ImageDownloader';
import { windowMock } from '../../__mocks__/Window.mock';
describe('ImageDownloader', () => {
const fetchBlob = jest.fn();
const fetchBlob = vi.fn();
const httpClient = fromPartial<HttpClient>({ fetchBlob });
let imageDownloader: ImageDownloader;
beforeEach(() => {
jest.clearAllMocks();
(global as any).URL = { createObjectURL: () => '' };
imageDownloader = new ImageDownloader(httpClient, windowMock);

3
test/common/services/ReportExporter.test.ts
View file

@ -4,10 +4,9 @@ import type { NormalizedVisit } from '../../../src/visits/types';
import { windowMock } from '../../__mocks__/Window.mock';
describe('ReportExporter', () => {
const jsonToCsv = jest.fn();
const jsonToCsv = vi.fn();
let exporter: ReportExporter;
beforeEach(jest.clearAllMocks);
beforeEach(() => {
(global as any).Blob = class Blob {};
(global as any).URL = { createObjectURL: () => '' };

4
test/domains/DomainRow.test.tsx
View file

@ -22,8 +22,8 @@ describe('<DomainRow />', () => {
domain={domain}
defaultRedirects={defaultRedirects}
selectedServer={fromPartial({})}
editDomainRedirects={jest.fn()}
checkDomainHealth={jest.fn()}
editDomainRedirects={vi.fn()}
checkDomainHealth={vi.fn()}
/>
</tbody>
</table>,

4
test/domains/DomainSelector.test.tsx
View file

@ -13,11 +13,9 @@ describe('<DomainSelector />', () => {
],
});
const setUp = (value = '') => renderWithEvents(
<DomainSelector value={value} domainsList={domainsList} listDomains={jest.fn()} onChange={jest.fn()} />,
<DomainSelector value={value} domainsList={domainsList} listDomains={vi.fn()} onChange={vi.fn()} />,
);
afterEach(jest.clearAllMocks);
it.each([
['', 'Domain', 'domains-dropdown__toggle-btn'],
['my-domain.com', 'Domain: my-domain.com', 'domains-dropdown__toggle-btn--active'],

10
test/domains/ManageDomains.test.tsx
View file

@ -7,21 +7,19 @@ import type { DomainsList } from '../../src/domains/reducers/domainsList';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<ManageDomains />', () => {
const listDomains = jest.fn();
const filterDomains = jest.fn();
const listDomains = vi.fn();
const filterDomains = vi.fn();
const setUp = (domainsList: DomainsList) => renderWithEvents(
<ManageDomains
listDomains={listDomains}
filterDomains={filterDomains}
editDomainRedirects={jest.fn()}
checkDomainHealth={jest.fn()}
editDomainRedirects={vi.fn()}
checkDomainHealth={vi.fn()}
domainsList={domainsList}
selectedServer={fromPartial({})}
/>,
);
afterEach(jest.clearAllMocks);
it('shows loading message while domains are loading', () => {
setUp(fromPartial({ loading: true, filteredDomains: [] }));

4
test/domains/helpers/DomainDropdown.test.tsx
View file

@ -8,7 +8,7 @@ import type { SemVer } from '../../../src/utils/helpers/version';
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DomainDropdown />', () => {
const editDomainRedirects = jest.fn().mockResolvedValue(undefined);
const editDomainRedirects = vi.fn().mockResolvedValue(undefined);
const setUp = (domain?: Domain, selectedServer?: SelectedServer) => renderWithEvents(
<MemoryRouter>
<DomainDropdown
@ -19,8 +19,6 @@ describe('<DomainDropdown />', () => {
</MemoryRouter>,
);
afterEach(jest.clearAllMocks);
it('renders expected menu items', () => {
setUp();

4
test/domains/helpers/DomainStatusIcon.test.tsx
View file

@ -5,13 +5,11 @@ import { DomainStatusIcon } from '../../../src/domains/helpers/DomainStatusIcon'
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DomainStatusIcon />', () => {
const matchMedia = jest.fn().mockReturnValue(fromPartial<MediaQueryList>({ matches: false }));
const matchMedia = vi.fn().mockReturnValue(fromPartial<MediaQueryList>({ matches: false }));
const setUp = (status: DomainStatus) => renderWithEvents(
<DomainStatusIcon status={status} matchMedia={matchMedia} />,
);
beforeEach(jest.clearAllMocks);
it.each([
['validating' as DomainStatus],
['invalid' as DomainStatus],

6
test/domains/helpers/EditDomainRedirectsModal.test.tsx
View file

@ -5,8 +5,8 @@ import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomai
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<EditDomainRedirectsModal />', () => {
const editDomainRedirects = jest.fn().mockResolvedValue(undefined);
const toggle = jest.fn();
const editDomainRedirects = vi.fn().mockResolvedValue(undefined);
const toggle = vi.fn();
const domain = fromPartial<ShlinkDomain>({
domain: 'foo.com',
redirects: {
@ -17,8 +17,6 @@ describe('<EditDomainRedirectsModal />', () => {
<EditDomainRedirectsModal domain={domain} isOpen toggle={toggle} editDomainRedirects={editDomainRedirects} />,
);
afterEach(jest.clearAllMocks);
it('renders domain in header', () => {
setUp();
expect(screen.getByRole('heading')).toHaveTextContent('Edit redirects for foo.com');

12
test/domains/helpers/__snapshots__/DomainStatusIcon.test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is not validating 1`] = `
exports[`<DomainStatusIcon /> > renders expected icon and tooltip when status is not validating 1`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-circle-notch fa-spin fa-fw "
@ -18,7 +18,7 @@ exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is n
</svg>
`;
exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is not validating 2`] = `
exports[`<DomainStatusIcon /> > renders expected icon and tooltip when status is not validating 2`] = `
<span>
<svg
aria-hidden="true"
@ -38,7 +38,7 @@ exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is n
</span>
`;
exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is not validating 3`] = `
exports[`<DomainStatusIcon /> > renders expected icon and tooltip when status is not validating 3`] = `
<span>
<svg
aria-hidden="true"
@ -58,7 +58,7 @@ exports[`<DomainStatusIcon /> renders expected icon and tooltip when status is n
</span>
`;
exports[`<DomainStatusIcon /> renders proper tooltip based on state 1`] = `
exports[`<DomainStatusIcon /> > renders proper tooltip based on state 1`] = `
<div
class="tooltip-inner"
role="tooltip"
@ -79,7 +79,7 @@ exports[`<DomainStatusIcon /> renders proper tooltip based on state 1`] = `
</div>
`;
exports[`<DomainStatusIcon /> renders proper tooltip based on state 2`] = `
exports[`<DomainStatusIcon /> > renders proper tooltip based on state 2`] = `
<div
class="tooltip-inner"
role="tooltip"

8
test/domains/reducers/domainRedirects.test.ts
View file

@ -4,14 +4,12 @@ import type { ShlinkDomainRedirects } from '../../../src/api/types';
import { editDomainRedirects } from '../../../src/domains/reducers/domainRedirects';
describe('domainRedirectsReducer', () => {
beforeEach(jest.clearAllMocks);
describe('editDomainRedirects', () => {
const domain = 'example.com';
const redirects = fromPartial<ShlinkDomainRedirects>({});
const dispatch = jest.fn();
const getState = jest.fn();
const editDomainRedirectsCall = jest.fn();
const dispatch = vi.fn();
const getState = vi.fn();
const editDomainRedirectsCall = vi.fn();
const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ editDomainRedirects: editDomainRedirectsCall });
const editDomainRedirectsAction = editDomainRedirects(buildShlinkApiClient);

10
test/domains/reducers/domainsList.test.ts
View file

@ -13,10 +13,10 @@ import {
} from '../../../src/domains/reducers/domainsList';
describe('domainsListReducer', () => {
const dispatch = jest.fn();
const getState = jest.fn();
const listDomains = jest.fn();
const health = jest.fn();
const dispatch = vi.fn();
const getState = vi.fn();
const listDomains = vi.fn();
const health = vi.fn();
const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ listDomains, health });
const filteredDomains: Domain[] = [
fromPartial({ domain: 'foo', status: 'validating' }),
@ -30,8 +30,6 @@ describe('domainsListReducer', () => {
editDomainRedirectsThunk,
);
beforeEach(jest.clearAllMocks);
describe('reducer', () => {
it('returns loading on LIST_DOMAINS_START', () => {
expect(reducer(undefined, listDomainsAction.pending(''))).toEqual(

8
test/mercure/helpers/index.test.tsx
View file

@ -4,14 +4,12 @@ import { identity } from 'ramda';
import { bindToMercureTopic } from '../../../src/mercure/helpers';
import type { MercureInfo } from '../../../src/mercure/reducers/mercureInfo';
jest.mock('event-source-polyfill');
vi.mock('event-source-polyfill');
describe('helpers', () => {
afterEach(jest.resetAllMocks);
describe('bindToMercureTopic', () => {
const onMessage = jest.fn();
const onTokenExpired = jest.fn();
const onMessage = vi.fn();
const onTokenExpired = vi.fn();
it.each([
[fromPartial<MercureInfo>({ loading: true, error: false, mercureHubUrl: 'foo' })],

8
test/mercure/reducers/mercureInfo.test.ts
View file

@ -8,12 +8,10 @@ describe('mercureInfoReducer', () => {
mercureHubUrl: 'http://example.com/.well-known/mercure',
token: 'abc.123.def',
};
const getMercureInfo = jest.fn();
const getMercureInfo = vi.fn();
const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ mercureInfo: getMercureInfo });
const { loadMercureInfo, reducer } = mercureInfoReducerCreator(buildShlinkApiClient);
beforeEach(jest.resetAllMocks);
describe('reducer', () => {
it('returns loading on GET_MERCURE_INFO_START', () => {
expect(reducer(undefined, loadMercureInfo.pending(''))).toEqual({
@ -37,8 +35,8 @@ describe('mercureInfoReducer', () => {
});
describe('loadMercureInfo', () => {
const dispatch = jest.fn();
const createGetStateMock = (enabled: boolean): GetState => jest.fn().mockReturnValue({
const dispatch = vi.fn();
const createGetStateMock = (enabled: boolean): GetState => vi.fn().mockReturnValue({
settings: {
realTimeUpdates: { enabled },
},

13
test/servers/CreateServer.test.tsx
View file

@ -5,17 +5,20 @@ import { CreateServer as createCreateServer } from '../../src/servers/CreateServ
import type { ServerWithId } from '../../src/servers/data';
import { renderWithEvents } from '../__helpers__/setUpTest';
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
vi.mock('react-router-dom', async () => ({
...(await vi.importActual<any>('react-router-dom')),
useNavigate: vi.fn(),
}));
describe('<CreateServer />', () => {
const createServersMock = jest.fn();
const navigate = jest.fn();
const createServersMock = vi.fn();
const navigate = vi.fn();
const servers = { foo: fromPartial<ServerWithId>({ url: 'https://existing_url.com', apiKey: 'existing_api_key' }) };
const setUp = (serversImported = false, importFailed = false) => {
(useNavigate as any).mockReturnValue(navigate);
let callCount = 0;
const useTimeoutToggle = jest.fn().mockImplementation(() => {
const useTimeoutToggle = vi.fn().mockImplementation(() => {
const result = [callCount % 2 === 0 ? serversImported : importFailed, () => null];
callCount += 1;
return result;
@ -25,8 +28,6 @@ describe('<CreateServer />', () => {
return renderWithEvents(<CreateServer createServers={createServersMock} servers={servers} />);
};
beforeEach(jest.clearAllMocks);
it('shows success message when imported is true', () => {
setUp(true);

11
test/servers/DeleteServerModal.test.tsx
View file

@ -5,11 +5,14 @@ import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
import { renderWithEvents } from '../__helpers__/setUpTest';
import { TestModalWrapper } from '../__helpers__/TestModalWrapper';
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
vi.mock('react-router-dom', async () => ({
...(await vi.importActual<any>('react-router-dom')),
useNavigate: vi.fn(),
}));
describe('<DeleteServerModal />', () => {
const deleteServerMock = jest.fn();
const navigate = jest.fn();
const deleteServerMock = vi.fn();
const navigate = vi.fn();
const serverName = 'the_server_name';
const setUp = () => {
(useNavigate as any).mockReturnValue(navigate);
@ -27,8 +30,6 @@ describe('<DeleteServerModal />', () => {
);
};
afterEach(jest.clearAllMocks);
it('renders a modal window', () => {
setUp();

15
test/servers/EditServer.test.tsx
View file

@ -5,12 +5,15 @@ import type { ReachableServer, SelectedServer } from '../../src/servers/data';
import { EditServer as editServerConstruct } from '../../src/servers/EditServer';
import { renderWithEvents } from '../__helpers__/setUpTest';
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
vi.mock('react-router-dom', async () => ({
...(await vi.importActual<any>('react-router-dom')),
useNavigate: vi.fn(),
}));
describe('<EditServer />', () => {
const ServerError = jest.fn();
const editServerMock = jest.fn();
const navigate = jest.fn();
const ServerError = vi.fn();
const editServerMock = vi.fn();
const navigate = vi.fn();
const defaultSelectedServer = fromPartial<ReachableServer>({
id: 'abc123',
name: 'the_name',
@ -20,7 +23,7 @@ describe('<EditServer />', () => {
const EditServer = editServerConstruct(ServerError);
const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => renderWithEvents(
<MemoryRouter>
<EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />
<EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={vi.fn()} />
</MemoryRouter>,
);
@ -28,8 +31,6 @@ describe('<EditServer />', () => {
(useNavigate as any).mockReturnValue(navigate);
});
afterEach(jest.clearAllMocks);
it('renders nothing if selected server is not reachable', () => {
setUp(fromPartial<SelectedServer>({}));

8
test/servers/ManageServers.test.tsx
View file

@ -7,9 +7,9 @@ import type { ServersExporter } from '../../src/servers/services/ServersExporter
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<ManageServers />', () => {
const exportServers = jest.fn();
const exportServers = vi.fn();
const serversExporter = fromPartial<ServersExporter>({ exportServers });
const useTimeoutToggle = jest.fn().mockReturnValue([false, jest.fn()]);
const useTimeoutToggle = vi.fn().mockReturnValue([false, vi.fn()]);
const ManageServers = createManageServers(
serversExporter,
() => <span>ImportServersBtn</span>,
@ -23,8 +23,6 @@ describe('<ManageServers />', () => {
<MemoryRouter><ManageServers servers={servers} /></MemoryRouter>,
);
afterEach(jest.clearAllMocks);
it('shows search field which allows searching servers, affecting te amount of rendered rows', async () => {
const { user } = setUp({
foo: createServerMock('foo'),
@ -85,7 +83,7 @@ describe('<ManageServers />', () => {
});
it.each([[true], [false]])('shows an error message if an error occurs while importing servers', (hasError) => {
useTimeoutToggle.mockReturnValue([hasError, jest.fn()]);
useTimeoutToggle.mockReturnValue([hasError, vi.fn()]);
setUp({ foo: createServerMock('foo') });

4
test/servers/ManageServersRowDropdown.test.tsx
View file

@ -9,7 +9,7 @@ describe('<ManageServersRowDropdown />', () => {
const ManageServersRowDropdown = createManageServersRowDropdown(
({ isOpen }) => <span>DeleteServerModal {isOpen ? '[OPEN]' : '[CLOSED]'}</span>,
);
const setAutoConnect = jest.fn();
const setAutoConnect = vi.fn();
const setUp = (autoConnect = false) => {
const server = fromPartial<ServerWithId>({ id: 'abc123', autoConnect });
return renderWithEvents(
@ -19,8 +19,6 @@ describe('<ManageServersRowDropdown />', () => {
);
};
afterEach(jest.clearAllMocks);
it('renders expected amount of dropdown items', async () => {
const { user } = setUp();

10
test/servers/Overview.test.tsx
View file

@ -9,9 +9,9 @@ import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<Overview />', () => {
const ShortUrlsTable = () => <>ShortUrlsTable</>;
const CreateShortUrl = () => <>CreateShortUrl</>;
const listShortUrls = jest.fn();
const listTags = jest.fn();
const loadVisitsOverview = jest.fn();
const listShortUrls = vi.fn();
const listTags = vi.fn();
const loadVisitsOverview = vi.fn();
const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl);
const shortUrls = {
pagination: { totalItems: 83710 },
@ -31,8 +31,8 @@ describe('<Overview />', () => {
orphanVisits: { total: 28, bots: 15, nonBots: 13 },
})}
selectedServer={fromPartial({ id: serverId })}
createNewVisits={jest.fn()}
loadMercureInfo={jest.fn()}
createNewVisits={vi.fn()}
loadMercureInfo={vi.fn()}
mercureInfo={fromPartial<MercureInfo>({})}
settings={fromPartial({ visits: { excludeBots } })}
/>

10
test/servers/__snapshots__/DeleteServerButton.test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<DeleteServerButton /> renders expected content 1`] = `
exports[`<DeleteServerButton /> > renders expected content 1`] = `
<span>
<span
class="button"
@ -10,7 +10,7 @@ exports[`<DeleteServerButton /> renders expected content 1`] = `
</span>
`;
exports[`<DeleteServerButton /> renders expected content 2`] = `
exports[`<DeleteServerButton /> > renders expected content 2`] = `
<span>
<span
class="button"
@ -20,7 +20,7 @@ exports[`<DeleteServerButton /> renders expected content 2`] = `
</span>
`;
exports[`<DeleteServerButton /> renders expected content 3`] = `
exports[`<DeleteServerButton /> > renders expected content 3`] = `
<span>
<span
class="button"
@ -30,7 +30,7 @@ exports[`<DeleteServerButton /> renders expected content 3`] = `
</span>
`;
exports[`<DeleteServerButton /> renders expected content 4`] = `
exports[`<DeleteServerButton /> > renders expected content 4`] = `
<span>
<svg
aria-hidden="true"

6
test/servers/__snapshots__/ManageServersRow.test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<ManageServersRow /> renders auto-connect icon only if server is autoConnect 1`] = `
exports[`<ManageServersRow /> > renders auto-connect icon only if server is autoConnect 1`] = `
<div>
<table>
<tbody>
@ -57,7 +57,7 @@ exports[`<ManageServersRow /> renders auto-connect icon only if server is autoCo
</div>
`;
exports[`<ManageServersRow /> renders auto-connect icon only if server is autoConnect 2`] = `
exports[`<ManageServersRow /> > renders auto-connect icon only if server is autoConnect 2`] = `
<div>
<table>
<tbody>

6
test/servers/helpers/DuplicatedServersModal.test.tsx
View file

@ -5,15 +5,13 @@ import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedS
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DuplicatedServersModal />', () => {
const onDiscard = jest.fn();
const onSave = jest.fn();
const onDiscard = vi.fn();
const onSave = vi.fn();
const setUp = (duplicatedServers: ServerData[] = []) => renderWithEvents(
<DuplicatedServersModal isOpen duplicatedServers={duplicatedServers} onDiscard={onDiscard} onSave={onSave} />,
);
const mockServer = (data: Partial<ServerData> = {}) => fromPartial<ServerData>(data);
beforeEach(jest.clearAllMocks);
it.each([
[[], 0],
[[mockServer()], 2],

8
test/servers/helpers/ImportServersBtn.test.tsx
View file

@ -10,9 +10,9 @@ import type { ServersImporter } from '../../../src/servers/services/ServersImpor
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<ImportServersBtn />', () => {
const onImportMock = jest.fn();
const createServersMock = jest.fn();
const importServersFromFile = jest.fn().mockResolvedValue([]);
const onImportMock = vi.fn();
const createServersMock = vi.fn();
const importServersFromFile = vi.fn().mockResolvedValue([]);
const serversImporterMock = fromPartial<ServersImporter>({ importServersFromFile });
const ImportServersBtn = createImportServersBtn(serversImporterMock);
const setUp = (props: Partial<ImportServersBtnProps> = {}, servers: ServersMap = {}) => renderWithEvents(
@ -24,8 +24,6 @@ describe('<ImportServersBtn />', () => {
/>,
);
afterEach(jest.clearAllMocks);
it('shows tooltip on button hover', async () => {
const { user } = setUp();

6
test/servers/helpers/ServerForm.test.tsx
View file

@ -2,11 +2,9 @@ import { fireEvent, render, screen } from '@testing-library/react';
import { ServerForm } from '../../../src/servers/helpers/ServerForm';
describe('<ServerForm />', () => {
const onSubmit = jest.fn();
const onSubmit = vi.fn();
const setUp = () => render(<ServerForm onSubmit={onSubmit}>Something</ServerForm>);
afterEach(jest.resetAllMocks);
it('renders components', () => {
setUp();
@ -18,7 +16,7 @@ describe('<ServerForm />', () => {
setUp();
expect(onSubmit).not.toHaveBeenCalled();
fireEvent.submit(screen.getByRole('form'), { preventDefault: jest.fn() });
fireEvent.submit(screen.getByRole('form'), { preventDefault: vi.fn() });
expect(onSubmit).toHaveBeenCalled();
});
});

8
test/servers/reducers/remoteServers.test.ts
View file

@ -3,11 +3,9 @@ import type { HttpClient } from '../../../src/common/services/HttpClient';
import { fetchServers } from '../../../src/servers/reducers/remoteServers';
describe('remoteServersReducer', () => {
afterEach(jest.clearAllMocks);
describe('fetchServers', () => {
const dispatch = jest.fn();
const fetchJson = jest.fn();
const dispatch = vi.fn();
const fetchJson = vi.fn();
const httpClient = fromPartial<HttpClient>({ fetchJson });
it.each([
@ -81,7 +79,7 @@ describe('remoteServersReducer', () => {
fetchJson.mockResolvedValue(mockedValue);
const doFetchServers = fetchServers(httpClient);
await doFetchServers()(dispatch, jest.fn(), {});
await doFetchServers()(dispatch, vi.fn(), {});
expect(dispatch).toHaveBeenCalledTimes(3);
expect(dispatch).toHaveBeenNthCalledWith(2, expect.objectContaining({ payload: expectedNewServers }));

20
test/servers/reducers/selectedServer.test.ts
View file

@ -13,14 +13,12 @@ import {
} from '../../../src/servers/reducers/selectedServer';
describe('selectedServerReducer', () => {
const dispatch = jest.fn();
const health = jest.fn();
const buildApiClient = jest.fn().mockReturnValue(fromPartial<ShlinkApiClient>({ health }));
const dispatch = vi.fn();
const health = vi.fn();
const buildApiClient = vi.fn().mockReturnValue(fromPartial<ShlinkApiClient>({ health }));
const selectServer = selectServerCreator(buildApiClient);
const { reducer } = selectedServerReducerCreator(selectServer);
afterEach(jest.clearAllMocks);
describe('reducer', () => {
it('returns default when action is RESET_SELECTED_SERVER', () =>
expect(reducer(null, resetSelectedServer())).toBeNull());
@ -33,7 +31,7 @@ describe('selectedServerReducer', () => {
describe('selectServer', () => {
const version = '1.19.0';
const createGetStateMock = (id: string) => jest.fn().mockReturnValue({
const createGetStateMock = (id: string) => vi.fn().mockReturnValue({
servers: {
[id]: { id },
},
@ -77,7 +75,7 @@ describe('selectedServerReducer', () => {
it('dispatches error when server is not found', async () => {
const id = uuid();
const getState = jest.fn(() => fromPartial<ShlinkState>({ servers: {} }));
const getState = vi.fn(() => fromPartial<ShlinkState>({ servers: {} }));
const expectedSelectedServer: NotFoundServer = { serverNotFound: true };
await selectServer(id)(dispatch, getState, {});
@ -89,8 +87,8 @@ describe('selectedServerReducer', () => {
});
describe('selectServerListener', () => {
const getState = jest.fn(() => ({}));
const loadMercureInfo = jest.fn();
const getState = vi.fn(() => ({}));
const loadMercureInfo = vi.fn();
const { middleware } = selectServerListener(selectServer, loadMercureInfo);
it.each([
@ -98,7 +96,7 @@ describe('selectedServerReducer', () => {
[fromPartial<NotFoundServer>({ serverNotFound: true }), 0],
[fromPartial<NonReachableServer>({ serverNotReachable: true }), 0],
])('dispatches loadMercureInfo when provided server is reachable', (payload, expectedCalls) => {
middleware({ dispatch, getState })(jest.fn())({
middleware({ dispatch, getState })(vi.fn())({
payload,
type: selectServer.fulfilled.toString(),
});
@ -108,7 +106,7 @@ describe('selectedServerReducer', () => {
});
it('does not dispatch loadMercureInfo when action is not of the proper type', () => {
middleware({ dispatch, getState })(jest.fn())({
middleware({ dispatch, getState })(vi.fn())({
payload: fromPartial<ReachableServer>({ version: '1.2.3' }),
type: 'something_else',
});

2
test/servers/reducers/servers.test.ts
View file

@ -15,8 +15,6 @@ describe('serversReducer', () => {
def456: fromPartial({ id: 'def456' }),
};
afterEach(jest.clearAllMocks);
describe('reducer', () => {
it('returns edited server when action is EDIT_SERVER', () =>
expect(serversReducer(list, editServer('abc123', { name: 'foo' }))).toEqual({

10
test/servers/services/ServersExporter.test.ts
View file

@ -5,7 +5,7 @@ import { appendChild, removeChild, windowMock } from '../../__mocks__/Window.moc
describe('ServersExporter', () => {
const storageMock = fromPartial<LocalStorage>({
get: jest.fn(() => ({
get: vi.fn(() => ({
abc123: {
id: 'abc123',
name: 'foo',
@ -18,16 +18,14 @@ describe('ServersExporter', () => {
},
} as any)),
});
const erroneousToCsv = jest.fn(() => {
const erroneousToCsv = vi.fn(() => {
throw new Error('');
});
const createCsvjsonMock = (throwError = false) => (throwError ? erroneousToCsv : jest.fn(() => ''));
beforeEach(jest.clearAllMocks);
const createCsvjsonMock = (throwError = false) => (throwError ? erroneousToCsv : vi.fn(() => ''));
describe('exportServers', () => {
let originalConsole: Console;
const error = jest.fn();
const error = vi.fn();
beforeEach(() => {
originalConsole = global.console;

6
test/servers/services/ServersImporter.test.ts
View file

@ -4,8 +4,8 @@ import { ServersImporter } from '../../../src/servers/services/ServersImporter';
describe('ServersImporter', () => {
const servers: RegularServer[] = [fromPartial<RegularServer>({}), fromPartial<RegularServer>({})];
const csvjsonMock = jest.fn().mockResolvedValue(servers);
const readAsText = jest.fn();
const csvjsonMock = vi.fn().mockResolvedValue(servers);
const readAsText = vi.fn();
const fileReaderMock = fromPartial<FileReader>({
readAsText,
addEventListener: ((_eventName: string, listener: (e: ProgressEvent<FileReader>) => void) => listener(
@ -14,8 +14,6 @@ describe('ServersImporter', () => {
});
const importer = new ServersImporter(csvjsonMock, () => fileReaderMock);
beforeEach(jest.clearAllMocks);
describe('importServersFromFile', () => {
it('rejects with error if no file was provided', async () => {
await expect(importer.importServersFromFile()).rejects.toEqual(

6
test/settings/RealTimeUpdatesSettings.test.tsx
View file

@ -7,8 +7,8 @@ import type {
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<RealTimeUpdatesSettings />', () => {
const toggleRealTimeUpdates = jest.fn();
const setRealTimeUpdatesInterval = jest.fn();
const toggleRealTimeUpdates = vi.fn();
const setRealTimeUpdatesInterval = vi.fn();
const setUp = (realTimeUpdates: Partial<RealTimeUpdatesSettingsOptions> = {}) => renderWithEvents(
<RealTimeUpdatesSettings
settings={fromPartial({ realTimeUpdates })}
@ -17,8 +17,6 @@ describe('<RealTimeUpdatesSettings />', () => {
/>,
);
afterEach(jest.clearAllMocks);
it('renders enabled real time updates as expected', () => {
setUp({ enabled: true });

4
test/settings/ShortUrlCreationSettings.test.tsx
View file

@ -5,7 +5,7 @@ import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSet
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<ShortUrlCreationSettings />', () => {
const setShortUrlCreationSettings = jest.fn();
const setShortUrlCreationSettings = vi.fn();
const setUp = (shortUrlCreation?: ShortUrlsSettings) => renderWithEvents(
<ShortUrlCreationSettings
settings={fromPartial({ shortUrlCreation })}
@ -13,8 +13,6 @@ describe('<ShortUrlCreationSettings />', () => {
/>,
);
afterEach(jest.clearAllMocks);
it.each([
[{ validateUrls: true }, true],
[{ validateUrls: false }, false],

4
test/settings/ShortUrlsListSettings.test.tsx
View file

@ -6,13 +6,11 @@ import type { ShortUrlsOrder } from '../../src/short-urls/data';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<ShortUrlsListSettings />', () => {
const setSettings = jest.fn();
const setSettings = vi.fn();
const setUp = (shortUrlsList?: ShortUrlsSettings) => renderWithEvents(
<ShortUrlsListSettings settings={fromPartial({ shortUrlsList })} setShortUrlsListSettings={setSettings} />,
);
afterEach(jest.clearAllMocks);
it.each([
[undefined, 'Order by: Created at - DESC'],
[{}, 'Order by: Created at - DESC'],

4
test/settings/TagsSettings.test.tsx
View file

@ -6,13 +6,11 @@ import type { TagsOrder } from '../../src/tags/data/TagsListChildrenProps';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<TagsSettings />', () => {
const setTagsSettings = jest.fn();
const setTagsSettings = vi.fn();
const setUp = (tags?: TagsSettingsOptions) => renderWithEvents(
<TagsSettings settings={fromPartial({ tags })} setTagsSettings={setTagsSettings} />,
);
afterEach(jest.clearAllMocks);
it('renders expected amount of groups', () => {
setUp();

4
test/settings/UserInterfaceSettings.test.tsx
View file

@ -6,13 +6,11 @@ import type { Theme } from '../../src/utils/theme';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<UserInterfaceSettings />', () => {
const setUiSettings = jest.fn();
const setUiSettings = vi.fn();
const setUp = (ui?: UiSettings) => renderWithEvents(
<UserInterfaceSettings settings={fromPartial({ ui })} setUiSettings={setUiSettings} />,
);
afterEach(jest.clearAllMocks);
it.each([
[{ theme: 'dark' as Theme }, true],
[{ theme: 'light' as Theme }, false],

4
test/settings/VisitsSettings.test.tsx
View file

@ -5,13 +5,11 @@ import { VisitsSettings } from '../../src/settings/VisitsSettings';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<VisitsSettings />', () => {
const setVisitsSettings = jest.fn();
const setVisitsSettings = vi.fn();
const setUp = (settings: Partial<Settings> = {}) => renderWithEvents(
<VisitsSettings settings={fromPartial(settings)} setVisitsSettings={setVisitsSettings} />,
);
afterEach(jest.clearAllMocks);
it('renders expected components', () => {
setUp();

8
test/settings/__snapshots__/UserInterfaceSettings.test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<UserInterfaceSettings /> shows different icons based on theme 1`] = `
exports[`<UserInterfaceSettings /> > shows different icons based on theme 1`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-moon user-interface__theme-icon"
@ -18,7 +18,7 @@ exports[`<UserInterfaceSettings /> shows different icons based on theme 1`] = `
</svg>
`;
exports[`<UserInterfaceSettings /> shows different icons based on theme 2`] = `
exports[`<UserInterfaceSettings /> > shows different icons based on theme 2`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-sun user-interface__theme-icon"
@ -36,7 +36,7 @@ exports[`<UserInterfaceSettings /> shows different icons based on theme 2`] = `
</svg>
`;
exports[`<UserInterfaceSettings /> shows different icons based on theme 3`] = `
exports[`<UserInterfaceSettings /> > shows different icons based on theme 3`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-sun user-interface__theme-icon"

2
test/short-urls/CreateShortUrl.test.tsx
View file

@ -8,7 +8,7 @@ describe('<CreateShortUrl />', () => {
const CreateShortUrlResult = () => <span>CreateShortUrlResult</span>;
const shortUrlCreation = { validateUrls: true };
const shortUrlCreationResult = fromPartial<ShortUrlCreation>({});
const createShortUrl = jest.fn(async () => Promise.resolve());
const createShortUrl = vi.fn(async () => Promise.resolve());
const CreateShortUrl = createShortUrlsCreator(ShortUrlForm, CreateShortUrlResult);
const setUp = () => render(
<CreateShortUrl

4
test/short-urls/EditShortUrl.test.tsx
View file

@ -15,8 +15,8 @@ describe('<EditShortUrl />', () => {
selectedServer={null}
shortUrlDetail={fromPartial(detail)}
shortUrlEdition={fromPartial(edition)}
getShortUrlDetail={jest.fn()}
editShortUrl={jest.fn(async () => Promise.resolve())}
getShortUrlDetail={vi.fn()}
editShortUrl={vi.fn(async () => Promise.resolve())}
/>
</MemoryRouter>,
);

4
test/short-urls/ShortUrlForm.test.tsx
View file

@ -10,7 +10,7 @@ import type { OptionalString } from '../../src/utils/utils';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<ShortUrlForm />', () => {
const createShortUrl = jest.fn(async () => Promise.resolve());
const createShortUrl = vi.fn(async () => Promise.resolve());
const ShortUrlForm = createShortUrlForm(() => <span>TagsSelector</span>, () => <span>DomainSelector</span>);
const setUp = (selectedServer: SelectedServer = null, mode: Mode = 'create', title?: OptionalString) =>
renderWithEvents(
@ -23,8 +23,6 @@ describe('<ShortUrlForm />', () => {
/>,
);
afterEach(jest.clearAllMocks);
it.each([
[
async (user: UserEvent) => {

16
test/short-urls/ShortUrlsFilteringBar.test.tsx
View file

@ -8,17 +8,17 @@ import { formatDate } from '../../src/utils/helpers/date';
import type { DateRange } from '../../src/utils/helpers/dateIntervals';
import { renderWithEvents } from '../__helpers__/setUpTest';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useParams: jest.fn().mockReturnValue({ serverId: '1' }),
useNavigate: jest.fn(),
useLocation: jest.fn().mockReturnValue({}),
vi.mock('react-router-dom', async () => ({
...(await vi.importActual<any>('react-router-dom')),
useParams: vi.fn().mockReturnValue({ serverId: '1' }),
useNavigate: vi.fn(),
useLocation: vi.fn().mockReturnValue({}),
}));
describe('<ShortUrlsFilteringBar />', () => {
const ShortUrlsFilteringBar = filteringBarCreator(() => <>ExportShortUrlsBtn</>, () => <>TagsSelector</>);
const navigate = jest.fn();
const handleOrderBy = jest.fn();
const navigate = vi.fn();
const handleOrderBy = vi.fn();
const now = new Date();
const setUp = (search = '', selectedServer?: SelectedServer) => {
(useLocation as any).mockReturnValue({ search });
@ -36,8 +36,6 @@ describe('<ShortUrlsFilteringBar />', () => {
);
};
afterEach(jest.clearAllMocks);
it('renders expected children components', () => {
setUp();

14
test/short-urls/ShortUrlsList.test.tsx
View file

@ -10,17 +10,17 @@ import type { ShortUrlsTableType } from '../../src/short-urls/ShortUrlsTable';
import type { SemVer } from '../../src/utils/helpers/version';
import { renderWithEvents } from '../__helpers__/setUpTest';
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useNavigate: jest.fn().mockReturnValue(jest.fn()),
useLocation: jest.fn().mockReturnValue({ search: '?tags=test%20tag&search=example.com' }),
vi.mock('react-router-dom', async () => ({
...(await vi.importActual<any>('react-router-dom')),
useNavigate: vi.fn().mockReturnValue(vi.fn()),
useLocation: vi.fn().mockReturnValue({ search: '?tags=test%20tag&search=example.com' }),
}));
describe('<ShortUrlsList />', () => {
const ShortUrlsTable: ShortUrlsTableType = ({ onTagClick }) => <span onClick={() => onTagClick?.('foo')}>ShortUrlsTable</span>;
const ShortUrlsFilteringBar = () => <span>ShortUrlsFilteringBar</span>;
const listShortUrlsMock = jest.fn();
const navigate = jest.fn();
const listShortUrlsMock = vi.fn();
const navigate = vi.fn();
const shortUrlsList = fromPartial<ShortUrlsListModel>({
shortUrls: {
data: [
@ -51,8 +51,6 @@ describe('<ShortUrlsList />', () => {
(useNavigate as any).mockReturnValue(navigate);
});
afterEach(jest.clearAllMocks);
it('wraps expected components', () => {
setUp();

4
test/short-urls/ShortUrlsTable.test.tsx
View file

@ -9,14 +9,12 @@ import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<ShortUrlsTable />', () => {
const shortUrlsList = fromPartial<ShortUrlsList>({});
const orderByColumn = jest.fn();
const orderByColumn = vi.fn();
const ShortUrlsTable = shortUrlsTableCreator(() => <span>ShortUrlsRow</span>);
const setUp = (server: SelectedServer = null) => renderWithEvents(
<ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={server} orderByColumn={() => orderByColumn} />,
);
afterEach(jest.resetAllMocks);
it('should render inner table by default', () => {
setUp();
expect(screen.getByRole('table')).toBeInTheDocument();

6
test/short-urls/helpers/CreateShortUrlResult.test.tsx
View file

@ -6,15 +6,13 @@ import type { TimeoutToggle } from '../../../src/utils/helpers/hooks';
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<CreateShortUrlResult />', () => {
const copyToClipboard = jest.fn();
const useTimeoutToggle = jest.fn(() => [false, copyToClipboard]) as TimeoutToggle;
const copyToClipboard = vi.fn();
const useTimeoutToggle = vi.fn(() => [false, copyToClipboard]) as TimeoutToggle;
const CreateShortUrlResult = createResult(useTimeoutToggle);
const setUp = (creation: ShortUrlCreation) => renderWithEvents(
<CreateShortUrlResult resetCreateShortUrl={() => {}} creation={creation} />,
);
afterEach(jest.clearAllMocks);
it('renders an error when error is true', () => {
setUp({ error: true, saved: false, saving: false });
expect(screen.getByText('An error occurred while creating the URL :(')).toBeInTheDocument();

8
test/short-urls/helpers/DeleteShortUrlModal.test.tsx
View file

@ -14,8 +14,8 @@ describe('<DeleteShortUrlModal />', () => {
shortCode: 'abc123',
longUrl: 'https://long-domain.com/foo/bar',
});
const deleteShortUrl = jest.fn().mockResolvedValue(undefined);
const shortUrlDeleted = jest.fn();
const deleteShortUrl = vi.fn().mockResolvedValue(undefined);
const shortUrlDeleted = vi.fn();
const setUp = (shortUrlDeletion: Partial<ShortUrlDeletion>) => renderWithEvents(
<TestModalWrapper
renderModal={(args) => (
@ -25,14 +25,12 @@ describe('<DeleteShortUrlModal />', () => {
shortUrlDeletion={fromPartial(shortUrlDeletion)}
deleteShortUrl={deleteShortUrl}
shortUrlDeleted={shortUrlDeleted}
resetDeleteShortUrl={jest.fn()}
resetDeleteShortUrl={vi.fn()}
/>
)}
/>,
);
afterEach(jest.clearAllMocks);
it('shows generic error when non-threshold error occurs', () => {
setUp({
loading: false,

8
test/short-urls/helpers/ExportShortUrlsBtn.test.tsx
View file

@ -8,9 +8,9 @@ import { ExportShortUrlsBtn as createExportShortUrlsBtn } from '../../../src/sho
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<ExportShortUrlsBtn />', () => {
const listShortUrls = jest.fn();
const buildShlinkApiClient = jest.fn().mockReturnValue({ listShortUrls });
const exportShortUrls = jest.fn();
const listShortUrls = vi.fn();
const buildShlinkApiClient = vi.fn().mockReturnValue({ listShortUrls });
const exportShortUrls = vi.fn();
const reportExporter = fromPartial<ReportExporter>({ exportShortUrls });
const ExportShortUrlsBtn = createExportShortUrlsBtn(buildShlinkApiClient, reportExporter);
const setUp = (amount?: number, selectedServer?: SelectedServer) => renderWithEvents(
@ -19,8 +19,6 @@ describe('<ExportShortUrlsBtn />', () => {
</MemoryRouter>,
);
afterEach(jest.clearAllMocks);
it.each([
[undefined, '0'],
[1, '1'],

4
test/short-urls/helpers/QrCodeModal.test.tsx
View file

@ -5,7 +5,7 @@ import type { SemVer } from '../../../src/utils/helpers/version';
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<QrCodeModal />', () => {
const saveImage = jest.fn().mockReturnValue(Promise.resolve());
const saveImage = vi.fn().mockReturnValue(Promise.resolve());
const QrCodeModal = createQrCodeModal(fromPartial({ saveImage }));
const shortUrl = 'https://s.test/abc123';
const setUp = (version: SemVer = '2.8.0') => renderWithEvents(
@ -17,8 +17,6 @@ describe('<QrCodeModal />', () => {
/>,
);
afterEach(jest.clearAllMocks);
it('shows an external link to the URL in the header', () => {
setUp();
const externalLink = screen.getByRole('heading').querySelector('a');

2
test/short-urls/helpers/ShortUrlsFilterDropdown.test.tsx
View file

@ -4,7 +4,7 @@ import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<ShortUrlsFilterDropdown />', () => {
const setUp = (supportsDisabledFiltering: boolean) => renderWithEvents(
<ShortUrlsFilterDropdown onChange={jest.fn()} supportsDisabledFiltering={supportsDisabledFiltering} />,
<ShortUrlsFilterDropdown onChange={vi.fn()} supportsDisabledFiltering={supportsDisabledFiltering} />,
);
it.each([

10
test/short-urls/helpers/ShortUrlsRow.test.tsx
View file

@ -20,14 +20,14 @@ interface SetUpOptions {
settings?: Partial<Settings>;
}
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
useLocation: jest.fn().mockReturnValue({}),
vi.mock('react-router-dom', async () => ({
...(await vi.importActual<any>('react-router-dom')),
useLocation: vi.fn().mockReturnValue({}),
}));
describe('<ShortUrlsRow />', () => {
const timeoutToggle = jest.fn(() => true);
const useTimeoutToggle = jest.fn(() => [false, timeoutToggle]) as TimeoutToggle;
const timeoutToggle = vi.fn(() => true);
const useTimeoutToggle = vi.fn(() => [false, timeoutToggle]) as TimeoutToggle;
const server = fromPartial<ReachableServer>({ url: 'https://s.test' });
const shortUrl: ShortUrl = {
shortCode: 'abc123',

18
test/short-urls/helpers/__snapshots__/ShortUrlsRow.test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<ShortUrlsRow /> displays expected status icon 1`] = `
exports[`<ShortUrlsRow /> > displays expected status icon 1`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-calendar-xmark text-danger"
@ -18,7 +18,7 @@ exports[`<ShortUrlsRow /> displays expected status icon 1`] = `
</svg>
`;
exports[`<ShortUrlsRow /> displays expected status icon 2`] = `
exports[`<ShortUrlsRow /> > displays expected status icon 2`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-calendar-xmark text-warning"
@ -36,7 +36,7 @@ exports[`<ShortUrlsRow /> displays expected status icon 2`] = `
</svg>
`;
exports[`<ShortUrlsRow /> displays expected status icon 3`] = `
exports[`<ShortUrlsRow /> > displays expected status icon 3`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-link-slash text-danger"
@ -54,7 +54,7 @@ exports[`<ShortUrlsRow /> displays expected status icon 3`] = `
</svg>
`;
exports[`<ShortUrlsRow /> displays expected status icon 4`] = `
exports[`<ShortUrlsRow /> > displays expected status icon 4`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-link-slash text-danger"
@ -72,7 +72,7 @@ exports[`<ShortUrlsRow /> displays expected status icon 4`] = `
</svg>
`;
exports[`<ShortUrlsRow /> displays expected status icon 5`] = `
exports[`<ShortUrlsRow /> > displays expected status icon 5`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-calendar-xmark text-danger"
@ -90,7 +90,7 @@ exports[`<ShortUrlsRow /> displays expected status icon 5`] = `
</svg>
`;
exports[`<ShortUrlsRow /> displays expected status icon 6`] = `
exports[`<ShortUrlsRow /> > displays expected status icon 6`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-check text-primary"
@ -108,7 +108,7 @@ exports[`<ShortUrlsRow /> displays expected status icon 6`] = `
</svg>
`;
exports[`<ShortUrlsRow /> displays expected status icon 7`] = `
exports[`<ShortUrlsRow /> > displays expected status icon 7`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-check text-primary"
@ -126,7 +126,7 @@ exports[`<ShortUrlsRow /> displays expected status icon 7`] = `
</svg>
`;
exports[`<ShortUrlsRow /> displays expected status icon 8`] = `
exports[`<ShortUrlsRow /> > displays expected status icon 8`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-check text-primary"

4
test/short-urls/helpers/qr-codes/QrErrorCorrectionDropdown.test.tsx
View file

@ -5,13 +5,11 @@ import { renderWithEvents } from '../../../__helpers__/setUpTest';
describe('<QrErrorCorrectionDropdown />', () => {
const initialErrorCorrection: QrErrorCorrection = 'Q';
const setErrorCorrection = jest.fn();
const setErrorCorrection = vi.fn();
const setUp = () => renderWithEvents(
<QrErrorCorrectionDropdown errorCorrection={initialErrorCorrection} setErrorCorrection={setErrorCorrection} />,
);
afterEach(jest.clearAllMocks);
it('renders initial state', async () => {
const { user } = setUp();
const btn = screen.getByRole('button');

4
test/short-urls/helpers/qr-codes/QrFormatDropdown.test.tsx
View file

@ -5,11 +5,9 @@ import { renderWithEvents } from '../../../__helpers__/setUpTest';
describe('<QrFormatDropdown />', () => {
const initialFormat: QrCodeFormat = 'svg';
const setFormat = jest.fn();
const setFormat = vi.fn();
const setUp = () => renderWithEvents(<QrFormatDropdown format={initialFormat} setFormat={setFormat} />);
afterEach(jest.clearAllMocks);
it('renders initial state', async () => {
const { user } = setUp();
const btn = screen.getByRole('button');

6
test/short-urls/reducers/shortUrlCreation.test.ts
View file

@ -9,13 +9,11 @@ import {
describe('shortUrlCreationReducer', () => {
const shortUrl = fromPartial<ShortUrl>({});
const createShortUrlCall = jest.fn();
const createShortUrlCall = vi.fn();
const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ createShortUrl: createShortUrlCall });
const createShortUrl = createShortUrlCreator(buildShlinkApiClient);
const { reducer, resetCreateShortUrl } = shortUrlCreationReducerCreator(createShortUrl);
afterEach(jest.resetAllMocks);
describe('reducer', () => {
it('returns loading on CREATE_SHORT_URL_START', () => {
expect(reducer(undefined, createShortUrl.pending('', fromPartial({})))).toEqual({
@ -52,7 +50,7 @@ describe('shortUrlCreationReducer', () => {
});
describe('createShortUrl', () => {
const dispatch = jest.fn();
const dispatch = vi.fn();
const getState = () => fromPartial<ShlinkState>({});
it('calls API on success', async () => {

8
test/short-urls/reducers/shortUrlDeletion.test.ts
View file

@ -7,13 +7,11 @@ import {
} from '../../../src/short-urls/reducers/shortUrlDeletion';
describe('shortUrlDeletionReducer', () => {
const deleteShortUrlCall = jest.fn();
const deleteShortUrlCall = vi.fn();
const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ deleteShortUrl: deleteShortUrlCall });
const deleteShortUrl = deleteShortUrlCreator(buildShlinkApiClient);
const { reducer, resetDeleteShortUrl } = shortUrlDeletionReducerCreator(deleteShortUrl);
beforeEach(jest.clearAllMocks);
describe('reducer', () => {
it('returns loading on DELETE_SHORT_URL_START', () =>
expect(reducer(undefined, deleteShortUrl.pending('', { shortCode: '' }))).toEqual({
@ -56,8 +54,8 @@ describe('shortUrlDeletionReducer', () => {
});
describe('deleteShortUrl', () => {
const dispatch = jest.fn();
const getState = jest.fn().mockReturnValue({ selectedServer: {} });
const dispatch = vi.fn();
const getState = vi.fn().mockReturnValue({ selectedServer: {} });
it.each(
[[undefined], [null], ['example.com']],

6
test/short-urls/reducers/shortUrlDetail.test.ts
View file

@ -6,12 +6,10 @@ import { shortUrlDetailReducerCreator } from '../../../src/short-urls/reducers/s
import type { ShortUrlsList } from '../../../src/short-urls/reducers/shortUrlsList';
describe('shortUrlDetailReducer', () => {
const getShortUrlCall = jest.fn();
const getShortUrlCall = vi.fn();
const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ getShortUrl: getShortUrlCall });
const { reducer, getShortUrlDetail } = shortUrlDetailReducerCreator(buildShlinkApiClient);
beforeEach(jest.clearAllMocks);
describe('reducer', () => {
it('returns loading on GET_SHORT_URL_DETAIL_START', () => {
const { loading } = reducer({ loading: false, error: false }, getShortUrlDetail.pending('', { shortCode: '' }));
@ -41,7 +39,7 @@ describe('shortUrlDetailReducer', () => {
});
describe('getShortUrlDetail', () => {
const dispatchMock = jest.fn();
const dispatchMock = vi.fn();
const buildGetState = (shortUrlsList?: ShortUrlsList) => () => fromPartial<ShlinkState>({ shortUrlsList });
it.each([

10
test/short-urls/reducers/shortUrlEdition.test.ts
View file

@ -11,13 +11,11 @@ describe('shortUrlEditionReducer', () => {
const longUrl = 'https://shlink.io';
const shortCode = 'abc123';
const shortUrl = fromPartial<ShortUrl>({ longUrl, shortCode });
const updateShortUrl = jest.fn().mockResolvedValue(shortUrl);
const buildShlinkApiClient = jest.fn().mockReturnValue({ updateShortUrl });
const updateShortUrl = vi.fn().mockResolvedValue(shortUrl);
const buildShlinkApiClient = vi.fn().mockReturnValue({ updateShortUrl });
const editShortUrl = editShortUrlCreator(buildShlinkApiClient);
const { reducer } = shortUrlEditionReducerCreator(editShortUrl);
afterEach(jest.clearAllMocks);
describe('reducer', () => {
it('returns loading on EDIT_SHORT_URL_START', () => {
expect(reducer(undefined, editShortUrl.pending('', fromPartial({})))).toEqual({
@ -46,13 +44,11 @@ describe('shortUrlEditionReducer', () => {
});
describe('editShortUrl', () => {
const dispatch = jest.fn();
const dispatch = vi.fn();
const createGetState = (selectedServer: SelectedServer = null) => () => fromPartial<ShlinkState>({
selectedServer,
});
afterEach(jest.clearAllMocks);
it.each([[undefined], [null], ['example.com']])('dispatches short URL on success', async (domain) => {
await editShortUrl({ shortCode, domain, data: { longUrl } })(dispatch, createGetState(), {});

8
test/short-urls/reducers/shortUrlsList.test.ts
View file

@ -14,15 +14,13 @@ import type { CreateVisit } from '../../../src/visits/types';
describe('shortUrlsListReducer', () => {
const shortCode = 'abc123';
const listShortUrlsMock = jest.fn();
const listShortUrlsMock = vi.fn();
const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ listShortUrls: listShortUrlsMock });
const listShortUrls = listShortUrlsCreator(buildShlinkApiClient);
const editShortUrl = editShortUrlCreator(buildShlinkApiClient);
const createShortUrl = createShortUrlCreator(buildShlinkApiClient);
const { reducer } = shortUrlsListReducerCreator(listShortUrls, editShortUrl, createShortUrl);
afterEach(jest.clearAllMocks);
describe('reducer', () => {
it('returns loading on LIST_SHORT_URLS_START', () =>
expect(reducer(undefined, listShortUrls.pending(''))).toEqual({
@ -188,8 +186,8 @@ describe('shortUrlsListReducer', () => {
});
describe('listShortUrls', () => {
const dispatch = jest.fn();
const getState = jest.fn().mockReturnValue({ selectedServer: {} });
const dispatch = vi.fn();
const getState = vi.fn().mockReturnValue({ selectedServer: {} });
it('dispatches proper actions if API client request succeeds', async () => {
listShortUrlsMock.mockResolvedValue({});

4
test/tags/TagsList.test.tsx
View file

@ -8,7 +8,7 @@ import { TagsList as createTagsList } from '../../src/tags/TagsList';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<TagsList />', () => {
const filterTags = jest.fn();
const filterTags = vi.fn();
const TagsListComp = createTagsList(({ sortedTags }) => <>TagsTable ({sortedTags.map((t) => t.visits).join(',')})</>);
const setUp = (tagsList: Partial<TagsList>, excludeBots = false) => renderWithEvents(
<TagsListComp
@ -21,8 +21,6 @@ describe('<TagsList />', () => {
/>,
);
afterEach(jest.clearAllMocks);
it('shows a loading message when tags are being loaded', () => {
setUp({ loading: true });

9
test/tags/TagsTable.test.tsx
View file

@ -5,10 +5,13 @@ import { TagsTable as createTagsTable } from '../../src/tags/TagsTable';
import { rangeOf } from '../../src/utils/utils';
import { renderWithEvents } from '../__helpers__/setUpTest';
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useLocation: jest.fn() }));
vi.mock('react-router-dom', async () => ({
...(await vi.importActual<any>('react-router-dom')),
useLocation: vi.fn(),
}));
describe('<TagsTable />', () => {
const orderByColumn = jest.fn();
const orderByColumn = vi.fn();
const TagsTable = createTagsTable(({ tag }) => <tr><td>TagsTableRow [{tag.tag}]</td></tr>);
const tags = (amount: number) => rangeOf(amount, (i) => `tag_${i}`);
const setUp = (sortedTags: string[] = [], search = '') => {
@ -23,8 +26,6 @@ describe('<TagsTable />', () => {
);
};
afterEach(jest.clearAllMocks);
it('renders empty result if there are no tags', () => {
setUp();

8
test/tags/helpers/DeleteTagConfirmModal.test.tsx
View file

@ -5,21 +5,19 @@ import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DeleteTagConfirmModal />', () => {
const tag = 'nodejs';
const deleteTag = jest.fn();
const toggle = jest.fn();
const deleteTag = vi.fn();
const toggle = vi.fn();
const setUp = (tagDelete: TagDeletion) => renderWithEvents(
<DeleteTagConfirmModal
tag={tag}
toggle={toggle}
isOpen
deleteTag={deleteTag}
tagDeleted={jest.fn()}
tagDeleted={vi.fn()}
tagDelete={tagDelete}
/>,
);
afterEach(jest.resetAllMocks);
it('asks confirmation for provided tag to be deleted', () => {
setUp({ error: false, deleted: false, deleting: false });

10
test/tags/helpers/EditTagModal.test.tsx
View file

@ -5,18 +5,16 @@ import type { TagEdition } from '../../../src/tags/reducers/tagEdit';
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<EditTagModal />', () => {
const EditTagModal = createEditTagModal(fromPartial({ getColorForKey: jest.fn(() => 'green') }));
const editTag = jest.fn().mockReturnValue(Promise.resolve());
const toggle = jest.fn();
const EditTagModal = createEditTagModal(fromPartial({ getColorForKey: vi.fn(() => 'green') }));
const editTag = vi.fn().mockReturnValue(Promise.resolve());
const toggle = vi.fn();
const setUp = (tagEdit: Partial<TagEdition> = {}) => {
const edition = fromPartial<TagEdition>(tagEdit);
return renderWithEvents(
<EditTagModal isOpen tag="foo" tagEdit={edition} editTag={editTag} tagEdited={jest.fn()} toggle={toggle} />,
<EditTagModal isOpen tag="foo" tagEdit={edition} editTag={editTag} tagEdited={vi.fn()} toggle={toggle} />,
);
};
afterEach(jest.clearAllMocks);
it('allows modal to be toggled with different mechanisms', async () => {
const { user } = setUp();

10
test/tags/helpers/Tag.test.tsx
View file

@ -20,10 +20,10 @@ const hexToRgb = (hex: string) => {
};
describe('<Tag />', () => {
const onClick = jest.fn();
const onClose = jest.fn();
const isColorLightForKey = jest.fn(() => false);
const getColorForKey = jest.fn(() => MAIN_COLOR);
const onClick = vi.fn();
const onClose = vi.fn();
const isColorLightForKey = vi.fn(() => false);
const getColorForKey = vi.fn(() => MAIN_COLOR);
const colorGenerator = fromPartial<ColorGenerator>({ getColorForKey, isColorLightForKey });
const setUp = (text: string, clearable?: boolean, children?: ReactNode) => renderWithEvents(
<Tag text={text} clearable={clearable} colorGenerator={colorGenerator} onClick={onClick} onClose={onClose}>
@ -31,8 +31,6 @@ describe('<Tag />', () => {
</Tag>,
);
afterEach(jest.clearAllMocks);
it.each([
[true],
[false],

6
test/tags/helpers/TagsSelector.test.tsx
View file

@ -6,7 +6,7 @@ import { renderWithEvents } from '../../__helpers__/setUpTest';
import { colorGeneratorMock } from '../../utils/services/__mocks__/ColorGenerator.mock';
describe('<TagsSelector />', () => {
const onChange = jest.fn();
const onChange = vi.fn();
const TagsSelector = createTagsSelector(colorGeneratorMock);
const tags = ['foo', 'bar'];
const tagsList = fromPartial<TagsList>({ tags: [...tags, 'baz'] });
@ -15,13 +15,11 @@ describe('<TagsSelector />', () => {
selectedTags={tags}
tagsList={tagsList}
settings={fromPartial({})}
listTags={jest.fn()}
listTags={vi.fn()}
onChange={onChange}
/>,
);
afterEach(jest.clearAllMocks);
it('has an input for tags', () => {
setUp();
expect(screen.getByPlaceholderText('Add tags to the URL')).toBeInTheDocument();

6
test/tags/reducers/tagDelete.test.ts
View file

@ -4,12 +4,10 @@ import type { ShlinkState } from '../../../src/container/types';
import { tagDeleted, tagDeleteReducerCreator } from '../../../src/tags/reducers/tagDelete';
describe('tagDeleteReducer', () => {
const deleteTagsCall = jest.fn();
const deleteTagsCall = vi.fn();
const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ deleteTags: deleteTagsCall });
const { reducer, deleteTag } = tagDeleteReducerCreator(buildShlinkApiClient);
beforeEach(jest.clearAllMocks);
describe('reducer', () => {
it('returns loading on DELETE_TAG_START', () => {
expect(reducer(undefined, deleteTag.pending('', ''))).toEqual({
@ -43,7 +41,7 @@ describe('tagDeleteReducer', () => {
});
describe('deleteTag', () => {
const dispatch = jest.fn();
const dispatch = vi.fn();
const getState = () => fromPartial<ShlinkState>({});
it('calls API on success', async () => {

8
test/tags/reducers/tagEdit.test.ts
View file

@ -8,9 +8,9 @@ describe('tagEditReducer', () => {
const oldName = 'foo';
const newName = 'bar';
const color = '#ff0000';
const editTagCall = jest.fn();
const editTagCall = vi.fn();
const buildShlinkApiClient = () => fromPartial<ShlinkApiClient>({ editTag: editTagCall });
const colorGenerator = fromPartial<ColorGenerator>({ setColorForKey: jest.fn() });
const colorGenerator = fromPartial<ColorGenerator>({ setColorForKey: vi.fn() });
const editTag = editTagCreator(buildShlinkApiClient, colorGenerator);
const { reducer } = tagEditReducerCreator(editTag);
@ -50,11 +50,9 @@ describe('tagEditReducer', () => {
});
describe('editTag', () => {
const dispatch = jest.fn();
const dispatch = vi.fn();
const getState = () => fromPartial<ShlinkState>({});
afterEach(jest.clearAllMocks);
it('calls API on success', async () => {
editTagCall.mockResolvedValue(undefined);

10
test/tags/reducers/tagsList.test.ts
View file

@ -16,13 +16,11 @@ import type { CreateVisit } from '../../../src/visits/types';
describe('tagsListReducer', () => {
const state = (props: Partial<TagsList>) => fromPartial<TagsList>(props);
const buildShlinkApiClient = jest.fn();
const buildShlinkApiClient = vi.fn();
const listTags = listTagsCreator(buildShlinkApiClient, true);
const createShortUrl = createShortUrlCreator(buildShlinkApiClient);
const { reducer } = tagsListReducerCreator(listTags, createShortUrl);
afterEach(jest.clearAllMocks);
describe('reducer', () => {
it('returns loading on LIST_TAGS_START', () => {
expect(reducer(undefined, listTags.pending(''))).toEqual(expect.objectContaining({
@ -196,9 +194,9 @@ describe('tagsListReducer', () => {
});
describe('listTags', () => {
const dispatch = jest.fn();
const getState = jest.fn(() => fromPartial<ShlinkState>({}));
const listTagsMock = jest.fn();
const dispatch = vi.fn();
const getState = vi.fn(() => fromPartial<ShlinkState>({}));
const listTagsMock = vi.fn();
const assertNoAction = async (tagsList: TagsList) => {
getState.mockReturnValue(fromPartial<ShlinkState>({ tagsList }));

2
test/utils/Checkbox.test.tsx
View file

@ -24,7 +24,7 @@ describe('<Checkbox />', () => {
});
it.each([[true], [false]])('changes checked status on input change', async (checked) => {
const onChange = jest.fn();
const onChange = vi.fn();
const { user } = renderWithEvents(<Checkbox onChange={onChange} checked={checked}>Foo</Checkbox>);
expect(onChange).not.toHaveBeenCalled();

4
test/utils/CopyToClipboardIcon.test.tsx
View file

@ -2,11 +2,9 @@ import { CopyToClipboardIcon } from '../../src/utils/CopyToClipboardIcon';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<CopyToClipboardIcon />', () => {
const onCopy = jest.fn();
const onCopy = vi.fn();
const setUp = (text = 'foo') => renderWithEvents(<CopyToClipboardIcon text={text} onCopy={onCopy} />);
afterEach(jest.clearAllMocks);
it('wraps expected components', () => {
const { container } = setUp();
expect(container).toMatchSnapshot();

6
test/utils/OrderingDropdown.test.tsx
View file

@ -12,7 +12,7 @@ describe('<OrderingDropdown />', () => {
baz: 'Hello World',
};
const setUp = (props: Partial<OrderingDropdownProps> = {}) => renderWithEvents(
<OrderingDropdown items={items} order={{}} onChange={jest.fn()} {...props} />,
<OrderingDropdown items={items} order={{}} onChange={vi.fn()} {...props} />,
);
const setUpWithDisplayedMenu = async (props: Partial<OrderingDropdownProps> = {}) => {
const result = setUp(props);
@ -65,7 +65,7 @@ describe('<OrderingDropdown />', () => {
])(
'triggers change with proper params depending on clicked item and initial state',
async (initialOrder, expectedNewField, expectedNewDir) => {
const onChange = jest.fn();
const onChange = vi.fn();
const { user } = await setUpWithDisplayedMenu({ onChange, order: initialOrder });
await user.click(screen.getAllByRole('menuitem')[0]);
@ -76,7 +76,7 @@ describe('<OrderingDropdown />', () => {
);
it('clears selection when last item is clicked', async () => {
const onChange = jest.fn();
const onChange = vi.fn();
const { user } = await setUpWithDisplayedMenu({ onChange, order: { field: 'baz', dir: 'ASC' } });
await user.click(screen.getAllByRole('menuitem')[3]);

4
test/utils/PaginationDropdown.test.tsx
View file

@ -3,7 +3,7 @@ import { PaginationDropdown } from '../../src/utils/PaginationDropdown';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<PaginationDropdown />', () => {
const setValue = jest.fn();
const setValue = vi.fn();
const setUp = async () => {
const result = renderWithEvents(<PaginationDropdown ranges={[10, 50, 100, 200]} value={50} setValue={setValue} />);
const { user } = result;
@ -13,8 +13,6 @@ describe('<PaginationDropdown />', () => {
return result;
};
afterEach(jest.clearAllMocks);
it('renders expected amount of items', async () => {
await setUp();
expect(screen.getAllByRole('menuitem')).toHaveLength(5);

4
test/utils/__snapshots__/CopyToClipboardIcon.test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<CopyToClipboardIcon /> wraps expected components 1`] = `
exports[`<CopyToClipboardIcon /> > wraps expected components 1`] = `
<div>
<svg
aria-hidden="true"

4
test/utils/__snapshots__/ExportBtn.test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<ExportBtn /> renders expected icon 1`] = `
exports[`<ExportBtn /> > renders expected icon 1`] = `
<svg
aria-hidden="true"
class="svg-inline--fa fa-file-csv "

8
test/utils/__snapshots__/IconInput.test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`<IconInput /> displays provided icon 1`] = `
exports[`<IconInput /> > displays provided icon 1`] = `
<div>
<div
class="icon-input-container"
@ -28,7 +28,7 @@ exports[`<IconInput /> displays provided icon 1`] = `
</div>
`;
exports[`<IconInput /> displays provided icon 2`] = `
exports[`<IconInput /> > displays provided icon 2`] = `
<div>
<div
class="icon-input-container"
@ -56,7 +56,7 @@ exports[`<IconInput /> displays provided icon 2`] = `
</div>
`;
exports[`<IconInput /> displays provided icon 3`] = `
exports[`<IconInput /> > displays provided icon 3`] = `
<div>
<div
class="icon-input-container"

4
test/utils/dates/DateIntervalDropdownItems.test.tsx
View file

@ -6,7 +6,7 @@ import { DATE_INTERVALS, rangeOrIntervalToString } from '../../../src/utils/help
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DateIntervalDropdownItems />', () => {
const onChange = jest.fn();
const onChange = vi.fn();
const setUp = async () => {
const { user, ...renderResult } = renderWithEvents(
<DropdownBtn text="text">
@ -20,8 +20,6 @@ describe('<DateIntervalDropdownItems />', () => {
return { user, ...renderResult };
};
afterEach(jest.clearAllMocks);
it('renders expected amount of items', async () => {
await setUp();

2
test/utils/dates/DateIntervalSelector.test.tsx
View file

@ -6,7 +6,7 @@ import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DateIntervalSelector />', () => {
const activeInterval: DateInterval = 'last7Days';
const onChange = jest.fn();
const onChange = vi.fn();
const setUp = () => renderWithEvents(
<DateIntervalSelector allText="All text" active={activeInterval} onChange={onChange} />,
);

6
test/utils/dates/DateRangeRow.test.tsx
View file

@ -3,14 +3,12 @@ import { DateRangeRow } from '../../../src/utils/dates/DateRangeRow';
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DateRangeRow />', () => {
const onEndDateChange = jest.fn();
const onStartDateChange = jest.fn();
const onEndDateChange = vi.fn();
const onStartDateChange = vi.fn();
const setUp = () => renderWithEvents(
<DateRangeRow onEndDateChange={onEndDateChange} onStartDateChange={onStartDateChange} />,
);
afterEach(jest.clearAllMocks);
it('renders two date inputs', () => {
setUp();
expect(screen.getAllByRole('textbox')).toHaveLength(2);

4
test/utils/dates/DateRangeSelector.test.tsx
View file

@ -6,7 +6,7 @@ import type { DateInterval } from '../../../src/utils/helpers/dateIntervals';
import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DateRangeSelector />', () => {
const onDatesChange = jest.fn();
const onDatesChange = vi.fn();
const setUp = async (props: Partial<DateRangeSelectorProps> = {}) => {
const result = renderWithEvents(
<DateRangeSelector
@ -22,8 +22,6 @@ describe('<DateRangeSelector />', () => {
return result;
};
afterEach(jest.clearAllMocks);
it('renders proper amount of items', async () => {
const { container } = await setUp();

5
test/utils/services/ColorGenerator.test.ts
View file

@ -6,12 +6,11 @@ import { MAIN_COLOR } from '../../../src/utils/theme';
describe('ColorGenerator', () => {
let colorGenerator: ColorGenerator;
const storageMock = fromPartial<LocalStorage>({
set: jest.fn(),
get: jest.fn(),
set: vi.fn(),
get: vi.fn().mockImplementation(() => undefined),
});
beforeEach(() => {
jest.clearAllMocks();
colorGenerator = new ColorGenerator(storageMock);
});

5
test/utils/services/LocalStorage.test.ts
View file

@ -2,13 +2,12 @@ import { fromPartial } from '@total-typescript/shoehorn';
import { LocalStorage } from '../../../src/utils/services/LocalStorage';
describe('LocalStorage', () => {
const getItem = jest.fn((key) => (key === 'shlink.foo' ? JSON.stringify({ foo: 'bar' }) : null));
const setItem = jest.fn();
const getItem = vi.fn((key) => (key === 'shlink.foo' ? JSON.stringify({ foo: 'bar' }) : null));
const setItem = vi.fn();
const localStorageMock = fromPartial<Storage>({ getItem, setItem });
let storage: LocalStorage;
beforeEach(() => {
jest.clearAllMocks();
storage = new LocalStorage(localStorageMock);
});

Some files were not shown because too many files have changed in this diff Show more