mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-24 09:58:21 +03:00
commit
0a0de86ecd
19 changed files with 226 additions and 155 deletions
2
.github/workflows/ci.yml
vendored
2
.github/workflows/ci.yml
vendored
|
@ -11,6 +11,6 @@ jobs:
|
||||||
ci:
|
ci:
|
||||||
uses: shlinkio/github-actions/.github/workflows/web-app-ci.yml@main
|
uses: shlinkio/github-actions/.github/workflows/web-app-ci.yml@main
|
||||||
with:
|
with:
|
||||||
node-version: 16.13
|
node-version: 16.15
|
||||||
with-mutation-tests: true
|
with-mutation-tests: true
|
||||||
publish-coverage: true
|
publish-coverage: true
|
||||||
|
|
2
.github/workflows/deploy-preview.yml
vendored
2
.github/workflows/deploy-preview.yml
vendored
|
@ -16,7 +16,7 @@ jobs:
|
||||||
- name: Use node.js
|
- name: Use node.js
|
||||||
uses: actions/setup-node@v1
|
uses: actions/setup-node@v1
|
||||||
with:
|
with:
|
||||||
node-version: 16.13
|
node-version: 16.15
|
||||||
- name: Build
|
- name: Build
|
||||||
run: |
|
run: |
|
||||||
npm ci && \
|
npm ci && \
|
||||||
|
|
2
.github/workflows/publish-release.yml
vendored
2
.github/workflows/publish-release.yml
vendored
|
@ -14,7 +14,7 @@ jobs:
|
||||||
- name: Use node.js
|
- name: Use node.js
|
||||||
uses: actions/setup-node@v1
|
uses: actions/setup-node@v1
|
||||||
with:
|
with:
|
||||||
node-version: 16.13
|
node-version: 16.15
|
||||||
- name: Generate release assets
|
- name: Generate release assets
|
||||||
run: npm ci && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
|
run: npm ci && VERSION=${GITHUB_REF#refs/tags/v} npm run build:dist
|
||||||
- name: Publish release with assets
|
- name: Publish release with assets
|
||||||
|
|
17
CHANGELOG.md
17
CHANGELOG.md
|
@ -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).
|
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).
|
||||||
|
|
||||||
|
## [3.7.1] - 2022-05-25
|
||||||
|
### Added
|
||||||
|
* *Nothing*
|
||||||
|
|
||||||
|
### Changed
|
||||||
|
* [#648](https://github.com/shlinkio/shlink-web-client/pull/648) Migrated some scripts to ESM and updated to chalk 5.
|
||||||
|
|
||||||
|
### Deprecated
|
||||||
|
* *Nothing*
|
||||||
|
|
||||||
|
### Removed
|
||||||
|
* *Nothing*
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
* [#653](https://github.com/shlinkio/shlink-web-client/pull/653) Fixed rendering values greater than 1000 in charts, when the browser has certain locales configured.
|
||||||
|
|
||||||
|
|
||||||
## [3.7.0] - 2022-05-14
|
## [3.7.0] - 2022-05-14
|
||||||
### Added
|
### Added
|
||||||
* [#622](https://github.com/shlinkio/shlink-web-client/pull/622) Added support to load domain visits when consuming Shlink 3.1.0 or newer.
|
* [#622](https://github.com/shlinkio/shlink-web-client/pull/622) Added support to load domain visits when consuming Shlink 3.1.0 or newer.
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
FROM node:16.13-alpine as node
|
FROM node:16.15-alpine as node
|
||||||
COPY . /shlink-web-client
|
COPY . /shlink-web-client
|
||||||
ARG VERSION="latest"
|
ARG VERSION="latest"
|
||||||
ENV VERSION ${VERSION}
|
ENV VERSION ${VERSION}
|
||||||
|
|
|
@ -3,7 +3,7 @@ version: '3'
|
||||||
services:
|
services:
|
||||||
shlink_web_client_node:
|
shlink_web_client_node:
|
||||||
container_name: shlink_web_client_node
|
container_name: shlink_web_client_node
|
||||||
image: node:16.13-alpine
|
image: node:16.15-alpine
|
||||||
command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
|
command: /bin/sh -c "cd /home/shlink/www && npm install && npm run start"
|
||||||
volumes:
|
volumes:
|
||||||
- ./:/home/shlink/www
|
- ./:/home/shlink/www
|
||||||
|
|
54
package-lock.json
generated
54
package-lock.json
generated
|
@ -4436,22 +4436,6 @@
|
||||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@stryker-mutator/core/node_modules/chalk": {
|
|
||||||
"version": "4.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
|
||||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
|
||||||
"ansi-styles": "^4.1.0",
|
|
||||||
"supports-color": "^7.1.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@stryker-mutator/core/node_modules/cli-cursor": {
|
"node_modules/@stryker-mutator/core/node_modules/cli-cursor": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
|
||||||
|
@ -4616,6 +4600,22 @@
|
||||||
"node": ">=8.0.0"
|
"node": ">=8.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@stryker-mutator/core/node_modules/inquirer/node_modules/chalk": {
|
||||||
|
"version": "4.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||||
|
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"ansi-styles": "^4.1.0",
|
||||||
|
"supports-color": "^7.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=10"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@stryker-mutator/core/node_modules/is-fullwidth-code-point": {
|
"node_modules/@stryker-mutator/core/node_modules/is-fullwidth-code-point": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
||||||
|
@ -29962,16 +29962,6 @@
|
||||||
"color-convert": "^2.0.1"
|
"color-convert": "^2.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"chalk": {
|
|
||||||
"version": "4.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
|
||||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"ansi-styles": "^4.1.0",
|
|
||||||
"supports-color": "^7.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"cli-cursor": {
|
"cli-cursor": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
|
||||||
|
@ -30088,6 +30078,18 @@
|
||||||
"string-width": "^4.1.0",
|
"string-width": "^4.1.0",
|
||||||
"strip-ansi": "^6.0.0",
|
"strip-ansi": "^6.0.0",
|
||||||
"through": "^2.3.6"
|
"through": "^2.3.6"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": {
|
||||||
|
"version": "4.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||||
|
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"ansi-styles": "^4.1.0",
|
||||||
|
"supports-color": "^7.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"is-fullwidth-code-point": {
|
"is-fullwidth-code-point": {
|
||||||
|
|
|
@ -13,8 +13,8 @@
|
||||||
"lint:css:fix": "npm run lint:css -- --fix",
|
"lint:css:fix": "npm run lint:css -- --fix",
|
||||||
"lint:js:fix": "npm run lint:js -- --fix",
|
"lint:js:fix": "npm run lint:js -- --fix",
|
||||||
"start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
|
"start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
|
||||||
"build": "DISABLE_ESLINT_PLUGIN=true react-scripts build && node scripts/replace-version.js",
|
"build": "DISABLE_ESLINT_PLUGIN=true react-scripts build && node scripts/replace-version.mjs",
|
||||||
"build:dist": "npm run build && node scripts/create-dist-file.js",
|
"build:dist": "npm run build && node scripts/create-dist-file.mjs",
|
||||||
"build:serve": "serve -p 5000 ./build",
|
"build:serve": "serve -p 5000 ./build",
|
||||||
"test": "jest --env=jsdom --colors --verbose",
|
"test": "jest --env=jsdom --colors --verbose",
|
||||||
"test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",
|
"test:coverage": "npm run test -- --coverage --coverageReporters=text --coverageReporters=text-summary",
|
||||||
|
|
|
@ -2,9 +2,9 @@
|
||||||
process.env.BABEL_ENV = 'production';
|
process.env.BABEL_ENV = 'production';
|
||||||
process.env.NODE_ENV = 'production';
|
process.env.NODE_ENV = 'production';
|
||||||
|
|
||||||
const chalk = require('chalk');
|
import chalk from 'chalk';
|
||||||
const AdmZip = require('adm-zip');
|
import AdmZip from 'adm-zip';
|
||||||
const fs = require('fs');
|
import fs from 'fs';
|
||||||
|
|
||||||
function zipDist(version) {
|
function zipDist(version) {
|
||||||
const versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;
|
const versionFileName = `./dist/shlink-web-client_${version}_dist.zip`;
|
|
@ -1,4 +1,4 @@
|
||||||
const fs = require('fs');
|
import fs from 'fs';
|
||||||
|
|
||||||
function replaceVersionPlaceholder(version) {
|
function replaceVersionPlaceholder(version) {
|
||||||
const staticJsFilesPath = './build/static/js';
|
const staticJsFilesPath = './build/static/js';
|
|
@ -38,7 +38,7 @@ export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal isOpen={isOpen} toggle={toggle} centered>
|
<Modal isOpen={isOpen} toggle={toggle} centered>
|
||||||
<form onSubmit={handleSubmit}>
|
<form name="domainRedirectsModal" onSubmit={handleSubmit}>
|
||||||
<ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
|
<ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
|
||||||
<ModalBody>
|
<ModalBody>
|
||||||
<FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
|
<FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
|
||||||
|
|
|
@ -10,7 +10,7 @@ export interface ServersDropdownProps {
|
||||||
selectedServer: SelectedServer;
|
selectedServer: SelectedServer;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
|
export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
|
||||||
const serversList = values(servers);
|
const serversList = values(servers);
|
||||||
|
|
||||||
const renderServers = () => {
|
const renderServers = () => {
|
||||||
|
@ -46,5 +46,3 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
|
||||||
</UncontrolledDropdown>
|
</UncontrolledDropdown>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ServersDropdown;
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import Bottle from 'bottlejs';
|
import Bottle from 'bottlejs';
|
||||||
import CreateServer from '../CreateServer';
|
import CreateServer from '../CreateServer';
|
||||||
import ServersDropdown from '../ServersDropdown';
|
import { ServersDropdown } from '../ServersDropdown';
|
||||||
import DeleteServerModal from '../DeleteServerModal';
|
import DeleteServerModal from '../DeleteServerModal';
|
||||||
import DeleteServerButton from '../DeleteServerButton';
|
import DeleteServerButton from '../DeleteServerButton';
|
||||||
import { EditServer } from '../EditServer';
|
import { EditServer } from '../EditServer';
|
||||||
|
|
|
@ -11,8 +11,6 @@ export const pointerOnHover = ({ native }: ChartEvent, [firstElement]: ActiveEle
|
||||||
canvas.style.cursor = firstElement ? 'pointer' : 'default';
|
canvas.style.cursor = firstElement ? 'pointer' : 'default';
|
||||||
};
|
};
|
||||||
|
|
||||||
export const renderChartLabel = ({ dataset, formattedValue }: TooltipItem<ChartType>) =>
|
export const renderChartLabel = ({ dataset, raw }: TooltipItem<ChartType>) => `${dataset.label}: ${prettify(`${raw}`)}`;
|
||||||
`${dataset.label}: ${prettify(formattedValue)}`;
|
|
||||||
|
|
||||||
export const renderPieChartLabel = ({ label, formattedValue }: TooltipItem<ChartType>) =>
|
export const renderPieChartLabel = ({ label, raw }: TooltipItem<ChartType>) => `${label}: ${prettify(`${raw}`)}`;
|
||||||
`${label}: ${prettify(formattedValue)}`;
|
|
||||||
|
|
|
@ -300,19 +300,19 @@ const VisitsStats: FC<VisitsStatsProps> = ({
|
||||||
{visits.length > 0 && (
|
{visits.length > 0 && (
|
||||||
<div className="col-lg-5 col-xl-6 mt-3 mt-lg-0">
|
<div className="col-lg-5 col-xl-6 mt-3 mt-lg-0">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<Button
|
|
||||||
outline
|
|
||||||
disabled={highlightedVisits.length === 0}
|
|
||||||
className="btn-md-block me-2"
|
|
||||||
onClick={() => setSelectedVisits([])}
|
|
||||||
>
|
|
||||||
Clear selection {highlightedVisits.length > 0 && <>({prettify(highlightedVisits.length)})</>}
|
|
||||||
</Button>
|
|
||||||
<ExportBtn
|
<ExportBtn
|
||||||
className="btn-md-block"
|
className="btn-md-block"
|
||||||
amount={normalizedVisits.length}
|
amount={normalizedVisits.length}
|
||||||
onClick={() => exportCsv(normalizedVisits)}
|
onClick={() => exportCsv(normalizedVisits)}
|
||||||
/>
|
/>
|
||||||
|
<Button
|
||||||
|
outline
|
||||||
|
disabled={highlightedVisits.length === 0}
|
||||||
|
className="btn-md-block ms-2"
|
||||||
|
onClick={() => setSelectedVisits([])}
|
||||||
|
>
|
||||||
|
Clear selection {highlightedVisits.length > 0 && <>({prettify(highlightedVisits.length)})</>}
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
import { shallow, ShallowWrapper } from 'enzyme';
|
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import { Button, ModalHeader } from 'reactstrap';
|
|
||||||
import { ShlinkDomain } from '../../../src/api/types';
|
import { ShlinkDomain } from '../../../src/api/types';
|
||||||
import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal';
|
import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal';
|
||||||
import { InfoTooltip } from '../../../src/utils/InfoTooltip';
|
|
||||||
|
|
||||||
describe('<EditDomainRedirectsModal />', () => {
|
describe('<EditDomainRedirectsModal />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
|
||||||
const editDomainRedirects = jest.fn().mockResolvedValue(undefined);
|
const editDomainRedirects = jest.fn().mockResolvedValue(undefined);
|
||||||
const toggle = jest.fn();
|
const toggle = jest.fn();
|
||||||
const domain = Mock.of<ShlinkDomain>({
|
const domain = Mock.of<ShlinkDomain>({
|
||||||
|
@ -15,81 +13,67 @@ describe('<EditDomainRedirectsModal />', () => {
|
||||||
baseUrlRedirect: 'baz',
|
baseUrlRedirect: 'baz',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const setUp = () => ({
|
||||||
beforeEach(() => {
|
user: userEvent.setup(),
|
||||||
wrapper = shallow(
|
...render(
|
||||||
<EditDomainRedirectsModal domain={domain} isOpen toggle={toggle} editDomainRedirects={editDomainRedirects} />,
|
<EditDomainRedirectsModal domain={domain} isOpen toggle={toggle} editDomainRedirects={editDomainRedirects} />,
|
||||||
);
|
),
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(jest.clearAllMocks);
|
afterEach(jest.clearAllMocks);
|
||||||
afterEach(() => wrapper?.unmount());
|
|
||||||
|
|
||||||
it('renders domain in header', () => {
|
it('renders domain in header', () => {
|
||||||
const header = wrapper.find(ModalHeader);
|
setUp();
|
||||||
|
expect(screen.getByRole('heading')).toHaveTextContent('Edit redirects for foo.com');
|
||||||
expect(header.html()).toContain('foo.com');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('expected amount of form groups and tooltips', () => {
|
it('has different handlers to toggle the modal', async () => {
|
||||||
const formGroups = wrapper.find('FormGroup');
|
const { user } = setUp();
|
||||||
const tooltips = wrapper.find(InfoTooltip);
|
|
||||||
|
|
||||||
expect(formGroups).toHaveLength(3);
|
|
||||||
expect(tooltips).toHaveLength(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('has different handlers to toggle the modal', () => {
|
|
||||||
expect(toggle).not.toHaveBeenCalled();
|
expect(toggle).not.toHaveBeenCalled();
|
||||||
|
await user.click(screen.getByLabelText('Close'));
|
||||||
(wrapper.prop('toggle') as Function)();
|
await user.click(screen.getByRole('button', { name: 'Cancel' }));
|
||||||
(wrapper.find(ModalHeader).prop('toggle') as Function)();
|
expect(toggle).toHaveBeenCalledTimes(2);
|
||||||
wrapper.find(Button).first().simulate('click');
|
|
||||||
|
|
||||||
expect(toggle).toHaveBeenCalledTimes(3);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('saves expected values when form is submitted', () => {
|
it('saves expected values when form is submitted', async () => {
|
||||||
const formGroups = wrapper.find('FormGroup');
|
const { user } = setUp();
|
||||||
|
// TODO Using fire event because userEvent.click on the Submit button does not submit the form
|
||||||
|
const submitForm = () => fireEvent.submit(screen.getByRole('form'));
|
||||||
|
|
||||||
expect(editDomainRedirects).not.toHaveBeenCalled();
|
expect(editDomainRedirects).not.toHaveBeenCalled();
|
||||||
|
submitForm();
|
||||||
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
|
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
||||||
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
|
||||||
baseUrlRedirect: 'baz',
|
baseUrlRedirect: 'baz',
|
||||||
regular404Redirect: null,
|
regular404Redirect: null,
|
||||||
invalidShortUrlRedirect: null,
|
invalidShortUrlRedirect: null,
|
||||||
});
|
}));
|
||||||
|
|
||||||
formGroups.at(0).simulate('change', 'new_base_url');
|
await user.clear(screen.getByDisplayValue('baz'));
|
||||||
formGroups.at(2).simulate('change', 'new_invalid_short_url');
|
await user.type(screen.getAllByPlaceholderText('No redirect')[0], 'new_base_url');
|
||||||
|
await user.type(screen.getAllByPlaceholderText('No redirect')[2], 'new_invalid_short_url');
|
||||||
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
|
submitForm();
|
||||||
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
||||||
baseUrlRedirect: 'new_base_url',
|
baseUrlRedirect: 'new_base_url',
|
||||||
regular404Redirect: null,
|
regular404Redirect: null,
|
||||||
invalidShortUrlRedirect: 'new_invalid_short_url',
|
invalidShortUrlRedirect: 'new_invalid_short_url',
|
||||||
});
|
}));
|
||||||
|
|
||||||
formGroups.at(1).simulate('change', 'new_regular_404');
|
await user.type(screen.getAllByPlaceholderText('No redirect')[1], 'new_regular_404');
|
||||||
formGroups.at(2).simulate('change', '');
|
await user.clear(screen.getByDisplayValue('new_invalid_short_url'));
|
||||||
|
submitForm();
|
||||||
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
|
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
||||||
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
|
||||||
baseUrlRedirect: 'new_base_url',
|
baseUrlRedirect: 'new_base_url',
|
||||||
regular404Redirect: 'new_regular_404',
|
regular404Redirect: 'new_regular_404',
|
||||||
invalidShortUrlRedirect: null,
|
invalidShortUrlRedirect: null,
|
||||||
});
|
}));
|
||||||
|
|
||||||
formGroups.at(0).simulate('change', '');
|
await Promise.all(screen.getAllByPlaceholderText('No redirect').map((element) => user.clear(element)));
|
||||||
formGroups.at(1).simulate('change', '');
|
submitForm();
|
||||||
formGroups.at(2).simulate('change', '');
|
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
||||||
|
|
||||||
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
|
|
||||||
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
|
||||||
baseUrlRedirect: null,
|
baseUrlRedirect: null,
|
||||||
regular404Redirect: null,
|
regular404Redirect: null,
|
||||||
invalidShortUrlRedirect: null,
|
invalidShortUrlRedirect: null,
|
||||||
});
|
}));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,29 +1,39 @@
|
||||||
import { shallow, ShallowWrapper } from 'enzyme';
|
import { ReactNode } from 'react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
import { render, screen, waitFor } from '@testing-library/react';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import deleteServerButtonConstruct from '../../src/servers/DeleteServerButton';
|
import deleteServerButtonConstruct from '../../src/servers/DeleteServerButton';
|
||||||
import { ServerWithId } from '../../src/servers/data';
|
import { ServerWithId } from '../../src/servers/data';
|
||||||
|
|
||||||
describe('<DeleteServerButton />', () => {
|
describe('<DeleteServerButton />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
const DeleteServerButton = deleteServerButtonConstruct(
|
||||||
const DeleteServerModal = () => null;
|
({ isOpen }) => <>DeleteServerModal {isOpen ? '[Open]' : '[Closed]'}</>,
|
||||||
|
);
|
||||||
beforeEach(() => {
|
const setUp = (children?: ReactNode) => ({
|
||||||
const DeleteServerButton = deleteServerButtonConstruct(DeleteServerModal);
|
user: userEvent.setup(),
|
||||||
|
...render(
|
||||||
wrapper = shallow(<DeleteServerButton server={Mock.all<ServerWithId>()} className="button" />);
|
<DeleteServerButton server={Mock.all<ServerWithId>()} textClassName="button">{children}</DeleteServerButton>,
|
||||||
});
|
),
|
||||||
afterEach(() => wrapper.unmount());
|
|
||||||
|
|
||||||
it('renders a button and a modal', () => {
|
|
||||||
expect(wrapper.find('.button')).toHaveLength(1);
|
|
||||||
expect(wrapper.find(DeleteServerModal)).toHaveLength(1);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('displays modal when button is clicked', () => {
|
it.each([
|
||||||
const btn = wrapper.find('.button');
|
['Foo bar'],
|
||||||
|
['baz'],
|
||||||
|
['something'],
|
||||||
|
[undefined],
|
||||||
|
])('renders expected content', (children) => {
|
||||||
|
const { container } = setUp(children);
|
||||||
|
expect(container.firstChild).toBeTruthy();
|
||||||
|
expect(container.firstChild).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(false);
|
it('displays modal when button is clicked', async () => {
|
||||||
btn.simulate('click');
|
const { user, container } = setUp();
|
||||||
expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(true);
|
|
||||||
|
expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Closed/);
|
||||||
|
expect(screen.getByText(/DeleteServerModal/)).not.toHaveTextContent(/Open/);
|
||||||
|
container.firstElementChild && await user.click(container.firstElementChild);
|
||||||
|
|
||||||
|
await waitFor(() => expect(screen.getByText(/DeleteServerModal/)).toHaveTextContent(/Open/));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,44 +1,50 @@
|
||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
import { values } from 'ramda';
|
import { values } from 'ramda';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import { shallow, ShallowWrapper } from 'enzyme';
|
import { MemoryRouter } from 'react-router-dom';
|
||||||
import { DropdownItem, DropdownToggle } from 'reactstrap';
|
import { ServersDropdown } from '../../src/servers/ServersDropdown';
|
||||||
import ServersDropdown from '../../src/servers/ServersDropdown';
|
import { ServersMap, ServerWithId } from '../../src/servers/data';
|
||||||
import { ServerWithId } from '../../src/servers/data';
|
|
||||||
|
|
||||||
describe('<ServersDropdown />', () => {
|
describe('<ServersDropdown />', () => {
|
||||||
let wrapped: ShallowWrapper;
|
const fallbackServers: ServersMap = {
|
||||||
const servers = {
|
|
||||||
'1a': Mock.of<ServerWithId>({ name: 'foo', id: '1a' }),
|
'1a': Mock.of<ServerWithId>({ name: 'foo', id: '1a' }),
|
||||||
'2b': Mock.of<ServerWithId>({ name: 'bar', id: '2b' }),
|
'2b': Mock.of<ServerWithId>({ name: 'bar', id: '2b' }),
|
||||||
'3c': Mock.of<ServerWithId>({ name: 'baz', id: '3c' }),
|
'3c': Mock.of<ServerWithId>({ name: 'baz', id: '3c' }),
|
||||||
};
|
};
|
||||||
|
const setUp = (servers: ServersMap = fallbackServers) => ({
|
||||||
beforeEach(() => {
|
user: userEvent.setup(),
|
||||||
wrapped = shallow(<ServersDropdown servers={servers} selectedServer={null} />);
|
...render(<MemoryRouter><ServersDropdown servers={servers} selectedServer={null} /></MemoryRouter>),
|
||||||
});
|
|
||||||
afterEach(() => wrapped.unmount());
|
|
||||||
|
|
||||||
it('contains the list of servers, the divider, the create button and the export button', () =>
|
|
||||||
expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 2));
|
|
||||||
|
|
||||||
it('contains a toggle with proper title', () =>
|
|
||||||
expect(wrapped.find(DropdownToggle)).toHaveLength(1));
|
|
||||||
|
|
||||||
it('contains a button to export servers', () => {
|
|
||||||
const items = wrapped.find(DropdownItem);
|
|
||||||
|
|
||||||
expect(items.filter('[divider]')).toHaveLength(1);
|
|
||||||
expect(items.filterWhere((item) => item.prop('to') === '/manage-servers')).toHaveLength(1);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('shows only create link when no servers exist yet', () => {
|
it('contains the list of servers and the "mange servers" button', async () => {
|
||||||
wrapped = shallow(
|
const { user } = setUp();
|
||||||
<ServersDropdown servers={{}} selectedServer={null} />,
|
|
||||||
);
|
|
||||||
const item = wrapped.find(DropdownItem);
|
|
||||||
|
|
||||||
expect(item).toHaveLength(1);
|
await user.click(screen.getByText('Servers'));
|
||||||
expect(item.prop('to')).toEqual('/server/create');
|
const items = screen.getAllByRole('menuitem');
|
||||||
expect(item.find('span').text()).toContain('Add a server');
|
expect(items).toHaveLength(values(fallbackServers).length + 1);
|
||||||
|
expect(items[0]).toHaveTextContent('foo');
|
||||||
|
expect(items[1]).toHaveTextContent('bar');
|
||||||
|
expect(items[2]).toHaveTextContent('baz');
|
||||||
|
expect(items[3]).toHaveTextContent('Manage servers');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('contains a toggle with proper text', () => {
|
||||||
|
setUp();
|
||||||
|
expect(screen.getByRole('link')).toHaveTextContent('Servers');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('contains a button to manage servers', async () => {
|
||||||
|
const { user } = setUp();
|
||||||
|
|
||||||
|
await user.click(screen.getByText('Servers'));
|
||||||
|
expect(screen.getByRole('menuitem', { name: 'Manage servers' })).toHaveAttribute('href', '/manage-servers');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows only create link when no servers exist yet', async () => {
|
||||||
|
const { user } = setUp({});
|
||||||
|
|
||||||
|
await user.click(screen.getByText('Servers'));
|
||||||
|
expect(screen.getByRole('menuitem')).toHaveTextContent('Add a server');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
56
test/servers/__snapshots__/DeleteServerButton.test.tsx.snap
Normal file
56
test/servers/__snapshots__/DeleteServerButton.test.tsx.snap
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`<DeleteServerButton /> renders expected content 1`] = `
|
||||||
|
<span>
|
||||||
|
<span
|
||||||
|
class="button"
|
||||||
|
>
|
||||||
|
Foo bar
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<DeleteServerButton /> renders expected content 2`] = `
|
||||||
|
<span>
|
||||||
|
<span
|
||||||
|
class="button"
|
||||||
|
>
|
||||||
|
baz
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<DeleteServerButton /> renders expected content 3`] = `
|
||||||
|
<span>
|
||||||
|
<span
|
||||||
|
class="button"
|
||||||
|
>
|
||||||
|
something
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<DeleteServerButton /> renders expected content 4`] = `
|
||||||
|
<span>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="svg-inline--fa fa-circle-minus fa-fw "
|
||||||
|
data-icon="circle-minus"
|
||||||
|
data-prefix="fas"
|
||||||
|
focusable="false"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM168 232C154.7 232 144 242.7 144 256C144 269.3 154.7 280 168 280H344C357.3 280 368 269.3 368 256C368 242.7 357.3 232 344 232H168z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="button"
|
||||||
|
>
|
||||||
|
Remove this server
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
`;
|
Loading…
Reference in a new issue