mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Alejandro Celaya
GitHub
commit
c668f4fa2f
42 changed files with 309 additions and 79 deletions
|
|
@ -1,7 +1,19 @@
|
|||
import 'vitest-canvas-mock';
|
||||
import '@testing-library/jest-dom/vitest';
|
||||
import { cleanup } from '@testing-library/react';
|
||||
import axe from 'axe-core';
|
||||
import { afterEach } from 'vitest';
|
||||
|
||||
axe.configure({
|
||||
checks: [
|
||||
{
|
||||
// Disable color contrast checking, as it doesn't work in jsdom
|
||||
id: 'color-contrast',
|
||||
enabled: false,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// Clear all mocks and cleanup DOM after every test
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
|
|
|
|||
158
package-lock.json
generated
158
package-lock.json
generated
|
|
@ -15,9 +15,9 @@
|
|||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@json2csv/plainjs": "^7.0.3",
|
||||
"@reduxjs/toolkit": "^1.9.6",
|
||||
"@shlinkio/shlink-frontend-kit": "^0.3.0",
|
||||
"@shlinkio/shlink-frontend-kit": "^0.4.0",
|
||||
"@shlinkio/shlink-js-sdk": "^0.1.0",
|
||||
"@shlinkio/shlink-web-component": "^0.3.4",
|
||||
"@shlinkio/shlink-web-component": "^0.3.5",
|
||||
"bootstrap": "5.2.3",
|
||||
"bottlejs": "^2.0.1",
|
||||
"classnames": "^2.3.2",
|
||||
|
|
@ -53,6 +53,7 @@
|
|||
"@vitejs/plugin-react": "^4.1.0",
|
||||
"@vitest/coverage-v8": "^0.34.6",
|
||||
"adm-zip": "^0.5.10",
|
||||
"axe-core": "^4.8.2",
|
||||
"chalk": "^5.3.0",
|
||||
"eslint": "^8.50.0",
|
||||
"history": "^5.3.0",
|
||||
|
|
@ -62,7 +63,8 @@
|
|||
"typescript": "^5.2.2",
|
||||
"vite": "^4.4.9",
|
||||
"vite-plugin-pwa": "^0.16.5",
|
||||
"vitest": "^0.34.6"
|
||||
"vitest": "^0.34.6",
|
||||
"vitest-canvas-mock": "^0.3.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@aashutoshrathi/word-wrap": {
|
||||
|
|
@ -2806,13 +2808,13 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@shlinkio/shlink-frontend-kit": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.3.0.tgz",
|
||||
"integrity": "sha512-MjftbQKc+Vq2rGsjsTQHcnq4IFSjaazBZ82T/TSEz9wza/y/Siy7bBQlTdALyaHW+FT0Lv5nOf/V5RH+iotsCA==",
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.4.0.tgz",
|
||||
"integrity": "sha512-Z9GqIqc6iHGMs9GHEQ+ERv5NfdvnoReHJbz5WPgXMlVT0s5ooL7s0hdsR/zgppLVF0r8HsKLXKlKR8bMY8B22g==",
|
||||
"dependencies": {
|
||||
"classnames": "^2.3.2",
|
||||
"qs": "^6.11.2",
|
||||
"uuid": "^9.0.0"
|
||||
"uuid": "^9.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.4.2",
|
||||
|
|
@ -2830,9 +2832,9 @@
|
|||
"integrity": "sha512-03xlTFZH/XbjTDxrMJPD+fhJp+Vysb/lS4MKyOodcxdFieIeiBogCJrRuXiiAwNaXzJoxaon7T3s6yz5DVsbTQ=="
|
||||
},
|
||||
"node_modules/@shlinkio/shlink-web-component": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.4.tgz",
|
||||
"integrity": "sha512-2oGkrYmzMzbpZae2pjzU0jHQ0UBHnQdmPDg3ODkC2/aRGtOh5tXZhtEmwEJsLHU/seKheL83E0WRowxLqUjqew==",
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.5.tgz",
|
||||
"integrity": "sha512-YthW30jx0SEGk+QqmJxeLkC1HdZbnCroxhm4Fa27le2Rhr/wDeTwHnOMkW0e0+3vO0hL9QOc8egk4vly8upMIA==",
|
||||
"dependencies": {
|
||||
"@json2csv/plainjs": "^7.0.3",
|
||||
"bottlejs": "^2.0.1",
|
||||
|
|
@ -2846,11 +2848,11 @@
|
|||
"ramda": "^0.27.2",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
"react-datepicker": "^4.16.0",
|
||||
"react-datepicker": "^4.18.0",
|
||||
"react-external-link": "^2.2.0",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-swipeable": "^7.0.1",
|
||||
"react-tag-autocomplete": "^7.0.1"
|
||||
"react-tag-autocomplete": "^7.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
||||
|
|
@ -2859,7 +2861,7 @@
|
|||
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@reduxjs/toolkit": "^1.9.5",
|
||||
"@shlinkio/shlink-frontend-kit": "^0.3.0",
|
||||
"@shlinkio/shlink-frontend-kit": "^0.4.0",
|
||||
"@shlinkio/shlink-js-sdk": "^0.1.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
|
|
@ -4309,10 +4311,10 @@
|
|||
}
|
||||
},
|
||||
"node_modules/axe-core": {
|
||||
"version": "4.4.1",
|
||||
"version": "4.8.2",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
|
||||
"integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
|
|
@ -4849,6 +4851,12 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/cssfontparser": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz",
|
||||
"integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/cssstyle": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
|
||||
|
|
@ -6982,6 +6990,16 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-canvas-mock": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz",
|
||||
"integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cssfontparser": "^1.2.1",
|
||||
"moo-color": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/jest-worker": {
|
||||
"version": "26.6.2",
|
||||
"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
|
||||
|
|
@ -7568,6 +7586,15 @@
|
|||
"ufo": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/moo-color": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz",
|
||||
"integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"color-name": "^1.1.4"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.0.0",
|
||||
"dev": true,
|
||||
|
|
@ -8218,15 +8245,15 @@
|
|||
}
|
||||
},
|
||||
"node_modules/react-datepicker": {
|
||||
"version": "4.16.0",
|
||||
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.16.0.tgz",
|
||||
"integrity": "sha512-hNQ0PAg/LQoVbDUO/RWAdm/RYmPhN3cz7LuQ3hqbs24OSp69QCiKOJRrQ4jk1gv1jNR5oYu8SjjgfDh8q6Q1yw==",
|
||||
"version": "4.18.0",
|
||||
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.18.0.tgz",
|
||||
"integrity": "sha512-0MYt3HmLbHVk1sw4v+RCbLAVg5TA3jWP7RyjZbo53PC+SEi+pjdgc92lB53ai/ENZaTOhbXmgni9GzvMrorMAw==",
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"classnames": "^2.2.6",
|
||||
"date-fns": "^2.30.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-onclickoutside": "^6.12.2",
|
||||
"react-onclickoutside": "^6.13.0",
|
||||
"react-popper": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
@ -8383,9 +8410,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/react-tag-autocomplete": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-7.0.1.tgz",
|
||||
"integrity": "sha512-Aw+VJpCY+PUX03aFs1MD9QeXmrDcThCZqI8ttVt4RpsHGEfjgtr3Zq8iJ9+PJgTW6RKPoI8dhheYNYGEN7AG/A==",
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-7.1.0.tgz",
|
||||
"integrity": "sha512-2eSOC48BK2MArCw/I89pOm41pKjYifg7X6P3RM4del8yNBq2W6qzM5jYBonnlFFieW4L8igt7oA+CaDAp7okKQ==",
|
||||
"engines": {
|
||||
"node": ">= 16.12.0"
|
||||
},
|
||||
|
|
@ -10052,6 +10079,18 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vitest-canvas-mock": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/vitest-canvas-mock/-/vitest-canvas-mock-0.3.3.tgz",
|
||||
"integrity": "sha512-3P968tYBpqYyzzOaVtqnmYjqbe13576/fkjbDEJSfQAkHtC5/UjuRHOhFEN/ZV5HVZIkaROBUWgazDKJ+Ibw+Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"jest-canvas-mock": "~2.5.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vitest": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/vitest/node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
|
|
@ -12438,13 +12477,13 @@
|
|||
}
|
||||
},
|
||||
"@shlinkio/shlink-frontend-kit": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.3.0.tgz",
|
||||
"integrity": "sha512-MjftbQKc+Vq2rGsjsTQHcnq4IFSjaazBZ82T/TSEz9wza/y/Siy7bBQlTdALyaHW+FT0Lv5nOf/V5RH+iotsCA==",
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-frontend-kit/-/shlink-frontend-kit-0.4.0.tgz",
|
||||
"integrity": "sha512-Z9GqIqc6iHGMs9GHEQ+ERv5NfdvnoReHJbz5WPgXMlVT0s5ooL7s0hdsR/zgppLVF0r8HsKLXKlKR8bMY8B22g==",
|
||||
"requires": {
|
||||
"classnames": "^2.3.2",
|
||||
"qs": "^6.11.2",
|
||||
"uuid": "^9.0.0"
|
||||
"uuid": "^9.0.1"
|
||||
}
|
||||
},
|
||||
"@shlinkio/shlink-js-sdk": {
|
||||
|
|
@ -12453,9 +12492,9 @@
|
|||
"integrity": "sha512-03xlTFZH/XbjTDxrMJPD+fhJp+Vysb/lS4MKyOodcxdFieIeiBogCJrRuXiiAwNaXzJoxaon7T3s6yz5DVsbTQ=="
|
||||
},
|
||||
"@shlinkio/shlink-web-component": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.4.tgz",
|
||||
"integrity": "sha512-2oGkrYmzMzbpZae2pjzU0jHQ0UBHnQdmPDg3ODkC2/aRGtOh5tXZhtEmwEJsLHU/seKheL83E0WRowxLqUjqew==",
|
||||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@shlinkio/shlink-web-component/-/shlink-web-component-0.3.5.tgz",
|
||||
"integrity": "sha512-YthW30jx0SEGk+QqmJxeLkC1HdZbnCroxhm4Fa27le2Rhr/wDeTwHnOMkW0e0+3vO0hL9QOc8egk4vly8upMIA==",
|
||||
"requires": {
|
||||
"@json2csv/plainjs": "^7.0.3",
|
||||
"bottlejs": "^2.0.1",
|
||||
|
|
@ -12469,11 +12508,11 @@
|
|||
"ramda": "^0.27.2",
|
||||
"react-chartjs-2": "^5.2.0",
|
||||
"react-copy-to-clipboard": "^5.1.0",
|
||||
"react-datepicker": "^4.16.0",
|
||||
"react-datepicker": "^4.18.0",
|
||||
"react-external-link": "^2.2.0",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-swipeable": "^7.0.1",
|
||||
"react-tag-autocomplete": "^7.0.1"
|
||||
"react-tag-autocomplete": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"@shlinkio/stylelint-config-css-coding-standard": {
|
||||
|
|
@ -13438,9 +13477,10 @@
|
|||
"dev": true
|
||||
},
|
||||
"axe-core": {
|
||||
"version": "4.4.1",
|
||||
"dev": true,
|
||||
"peer": true
|
||||
"version": "4.8.2",
|
||||
"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
|
||||
"integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
|
||||
"dev": true
|
||||
},
|
||||
"axobject-query": {
|
||||
"version": "2.2.0",
|
||||
|
|
@ -13791,6 +13831,12 @@
|
|||
"version": "3.0.0",
|
||||
"dev": true
|
||||
},
|
||||
"cssfontparser": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz",
|
||||
"integrity": "sha512-6tun4LoZnj7VN6YeegOVb67KBX/7JJsqvj+pv3ZA7F878/eN33AbGa5b/S/wXxS/tcp8nc40xRUrsPlxIyNUPg==",
|
||||
"dev": true
|
||||
},
|
||||
"cssstyle": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz",
|
||||
|
|
@ -15216,6 +15262,16 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"jest-canvas-mock": {
|
||||
"version": "2.5.2",
|
||||
"resolved": "https://registry.npmjs.org/jest-canvas-mock/-/jest-canvas-mock-2.5.2.tgz",
|
||||
"integrity": "sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cssfontparser": "^1.2.1",
|
||||
"moo-color": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"jest-worker": {
|
||||
"version": "26.6.2",
|
||||
"resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
|
||||
|
|
@ -15641,6 +15697,15 @@
|
|||
"ufo": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"moo-color": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/moo-color/-/moo-color-1.0.3.tgz",
|
||||
"integrity": "sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-name": "^1.1.4"
|
||||
}
|
||||
},
|
||||
"ms": {
|
||||
"version": "2.0.0",
|
||||
"dev": true,
|
||||
|
|
@ -16044,15 +16109,15 @@
|
|||
}
|
||||
},
|
||||
"react-datepicker": {
|
||||
"version": "4.16.0",
|
||||
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.16.0.tgz",
|
||||
"integrity": "sha512-hNQ0PAg/LQoVbDUO/RWAdm/RYmPhN3cz7LuQ3hqbs24OSp69QCiKOJRrQ4jk1gv1jNR5oYu8SjjgfDh8q6Q1yw==",
|
||||
"version": "4.18.0",
|
||||
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.18.0.tgz",
|
||||
"integrity": "sha512-0MYt3HmLbHVk1sw4v+RCbLAVg5TA3jWP7RyjZbo53PC+SEi+pjdgc92lB53ai/ENZaTOhbXmgni9GzvMrorMAw==",
|
||||
"requires": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"classnames": "^2.2.6",
|
||||
"date-fns": "^2.30.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-onclickoutside": "^6.12.2",
|
||||
"react-onclickoutside": "^6.13.0",
|
||||
"react-popper": "^2.3.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -16140,9 +16205,9 @@
|
|||
"requires": {}
|
||||
},
|
||||
"react-tag-autocomplete": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-7.0.1.tgz",
|
||||
"integrity": "sha512-Aw+VJpCY+PUX03aFs1MD9QeXmrDcThCZqI8ttVt4RpsHGEfjgtr3Zq8iJ9+PJgTW6RKPoI8dhheYNYGEN7AG/A==",
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-tag-autocomplete/-/react-tag-autocomplete-7.1.0.tgz",
|
||||
"integrity": "sha512-2eSOC48BK2MArCw/I89pOm41pKjYifg7X6P3RM4del8yNBq2W6qzM5jYBonnlFFieW4L8igt7oA+CaDAp7okKQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-transition-group": {
|
||||
|
|
@ -17267,6 +17332,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"vitest-canvas-mock": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/vitest-canvas-mock/-/vitest-canvas-mock-0.3.3.tgz",
|
||||
"integrity": "sha512-3P968tYBpqYyzzOaVtqnmYjqbe13576/fkjbDEJSfQAkHtC5/UjuRHOhFEN/ZV5HVZIkaROBUWgazDKJ+Ibw+Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"jest-canvas-mock": "~2.5.2"
|
||||
}
|
||||
},
|
||||
"w3c-xmlserializer": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -31,9 +31,9 @@
|
|||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@json2csv/plainjs": "^7.0.3",
|
||||
"@reduxjs/toolkit": "^1.9.6",
|
||||
"@shlinkio/shlink-frontend-kit": "^0.3.0",
|
||||
"@shlinkio/shlink-frontend-kit": "^0.4.0",
|
||||
"@shlinkio/shlink-js-sdk": "^0.1.0",
|
||||
"@shlinkio/shlink-web-component": "^0.3.4",
|
||||
"@shlinkio/shlink-web-component": "^0.3.5",
|
||||
"bootstrap": "5.2.3",
|
||||
"bottlejs": "^2.0.1",
|
||||
"classnames": "^2.3.2",
|
||||
|
|
@ -69,6 +69,7 @@
|
|||
"@vitejs/plugin-react": "^4.1.0",
|
||||
"@vitest/coverage-v8": "^0.34.6",
|
||||
"adm-zip": "^0.5.10",
|
||||
"axe-core": "^4.8.2",
|
||||
"chalk": "^5.3.0",
|
||||
"eslint": "^8.50.0",
|
||||
"history": "^5.3.0",
|
||||
|
|
@ -78,7 +79,8 @@
|
|||
"typescript": "^5.2.2",
|
||||
"vite": "^4.4.9",
|
||||
"vite-plugin-pwa": "^0.16.5",
|
||||
"vitest": "^0.34.6"
|
||||
"vitest": "^0.34.6",
|
||||
"vitest-canvas-mock": "^0.3.3"
|
||||
},
|
||||
"browserslist": [
|
||||
">0.2%",
|
||||
|
|
|
|||
|
|
@ -70,10 +70,10 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
|
|||
<table className="table table-hover responsive-table mb-0">
|
||||
<thead className="responsive-table__header">
|
||||
<tr>
|
||||
{hasAutoConnect && <th aria-label="Auto-connect" style={{ width: '50px' }} />}
|
||||
{hasAutoConnect && <th style={{ width: '50px' }}><span className="sr-only">Auto-connect</span></th>}
|
||||
<th>Name</th>
|
||||
<th>Base URL</th>
|
||||
<th aria-label="Options" />
|
||||
<th><span className="sr-only">Options</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const ManageServersRowDropdown: FCWithDeps<ManageServersRowDropdownConnectProps,
|
|||
<DropdownItem onClick={() => setAutoConnect(server, !isAutoConnect)}>
|
||||
<FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem divider tag="hr" />
|
||||
<DropdownItem className="dropdown-item--danger" onClick={showModal}>
|
||||
<FontAwesomeIcon icon={deleteIcon} fixedWidth /> Remove server
|
||||
</DropdownItem>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProp
|
|||
{name}
|
||||
</DropdownItem>
|
||||
))}
|
||||
<DropdownItem divider />
|
||||
<DropdownItem divider tag="hr" />
|
||||
<DropdownItem tag={Link} to="/manage-servers">
|
||||
<FontAwesomeIcon icon={serverIcon} /> <span className="ms-1">Manage servers</span>
|
||||
</DropdownItem>
|
||||
|
|
|
|||
|
|
@ -21,9 +21,11 @@ const ServerListItem = ({ id, name }: { id: string; name: string }) => (
|
|||
|
||||
export const ServersListGroup: FC<ServersListGroupProps> = ({ servers, children, embedded = false }) => (
|
||||
<>
|
||||
{children && <h5 className="mb-md-3">{children}</h5>}
|
||||
{children && <div data-testid="title" className="mb-0 fs-5 fw-normal lh-sm">{children}</div>}
|
||||
{servers.length > 0 && (
|
||||
<ListGroup
|
||||
data-testid="list"
|
||||
tag="div"
|
||||
className={classNames('servers-list__list-group', { 'servers-list__list-group--embedded': embedded })}
|
||||
>
|
||||
{servers.map(({ id, name }) => <ServerListItem key={id} id={id} name={name} />)}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ const ImportServersBtn: FCWithDeps<ImportServersBtnConnectProps, ImportServersBt
|
|||
You can create servers by importing a CSV file with <b>name</b>, <b>apiKey</b> and <b>url</b> columns.
|
||||
</UncontrolledTooltip>
|
||||
|
||||
<input type="file" accept="text/csv" className="d-none" ref={ref} onChange={onFile} />
|
||||
<input type="file" accept="text/csv" className="d-none" ref={ref} onChange={onFile} aria-hidden />
|
||||
|
||||
<DuplicatedServersModal
|
||||
isOpen={isModalOpen}
|
||||
|
|
|
|||
|
|
@ -36,17 +36,19 @@ const ServerError: FCWithDeps<ServerErrorProps, ServerErrorDeps> = ({ servers, s
|
|||
</Message>
|
||||
|
||||
<ServersListGroup servers={Object.values(servers)}>
|
||||
<p className="mb-md-3">
|
||||
These are the Shlink servers currently configured. Choose one of
|
||||
them or <Link to="/server/create">add a new one</Link>.
|
||||
</p>
|
||||
</ServersListGroup>
|
||||
|
||||
{isServerWithId(selectedServer) && (
|
||||
<div className="container mt-3 mt-md-5">
|
||||
<h5>
|
||||
<p className="fs-5 fw-normal lh-sm">
|
||||
Alternatively, if you think you may have miss-configured this server, you
|
||||
can <DeleteServerButton server={selectedServer} className="server-error__delete-btn">remove it</DeleteServerButton> or
|
||||
<Link to={`/server/${selectedServer.id}/edit?reconnect=true`}>edit it</Link>.
|
||||
</h5>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
12
test/__helpers__/accessibility.ts
Normal file
12
test/__helpers__/accessibility.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { run } from 'axe-core';
|
||||
|
||||
type ContainerWrapper = { container: HTMLElement };
|
||||
|
||||
type AccessibilityTestSubject = ContainerWrapper | Promise<ContainerWrapper>;
|
||||
|
||||
export const checkAccessibility = async (subject: AccessibilityTestSubject) => {
|
||||
const { container } = await subject;
|
||||
const { violations } = await run(container);
|
||||
|
||||
expect(violations).toStrictEqual([]);
|
||||
};
|
||||
|
|
@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import { createMemoryHistory } from 'history';
|
||||
import { Router } from 'react-router-dom';
|
||||
import { AppFactory } from '../../src/app/App';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
|
||||
describe('<App />', () => {
|
||||
const App = AppFactory(
|
||||
|
|
@ -34,6 +35,8 @@ describe('<App />', () => {
|
|||
);
|
||||
};
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders children components', () => {
|
||||
setUp();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { screen } from '@testing-library/react';
|
||||
import { AppUpdateBanner } from '../../src/common/AppUpdateBanner';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<AppUpdateBanner />', () => {
|
||||
|
|
@ -7,6 +8,8 @@ describe('<AppUpdateBanner />', () => {
|
|||
const forceUpdate = vi.fn();
|
||||
const setUp = () => renderWithEvents(<AppUpdateBanner isOpen toggle={toggle} forceUpdate={forceUpdate} />);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders initial state', () => {
|
||||
setUp();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import { screen } from '@testing-library/react';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import type { PropsWithChildren, ReactNode } from 'react';
|
||||
import { ErrorHandler as BaseErrorHandler } from '../../src/common/ErrorHandler';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
const ComponentWithError = () => {
|
||||
|
|
@ -13,13 +14,16 @@ describe('<ErrorHandler />', () => {
|
|||
const location = fromPartial<Window['location']>({ reload });
|
||||
const cons = fromPartial<Console>({ error: vi.fn() });
|
||||
const ErrorHandler = (props: PropsWithChildren) => <BaseErrorHandler console={cons} location={location} {...props} />;
|
||||
const setUp = (children: ReactNode = 'Error') => renderWithEvents(<ErrorHandler>{children}</ErrorHandler>);
|
||||
|
||||
beforeEach(() => {
|
||||
vi.spyOn(console, 'error').mockImplementation(() => {}); // Silence react errors
|
||||
});
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders children when no error has occurred', () => {
|
||||
render(<ErrorHandler><span>Foo</span></ErrorHandler>);
|
||||
setUp(<span>Foo</span>);
|
||||
|
||||
expect(screen.getByText('Foo')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Oops! This is awkward :S')).not.toBeInTheDocument();
|
||||
|
|
@ -27,14 +31,14 @@ describe('<ErrorHandler />', () => {
|
|||
});
|
||||
|
||||
it('renders error page when error has occurred', () => {
|
||||
render(<ErrorHandler><ComponentWithError /></ErrorHandler>);
|
||||
setUp(<ComponentWithError />);
|
||||
|
||||
expect(screen.getByText('Oops! This is awkward :S')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('reloads page on button click', async () => {
|
||||
const { user } = renderWithEvents(<ErrorHandler><ComponentWithError /></ErrorHandler>);
|
||||
const { user } = setUp(<ComponentWithError />);
|
||||
|
||||
expect(reload).not.toHaveBeenCalled();
|
||||
await user.click(screen.getByRole('button'));
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import { MemoryRouter } from 'react-router';
|
||||
import { Home } from '../../src/common/Home';
|
||||
import type { ServersMap, ServerWithId } from '../../src/servers/data';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
|
||||
describe('<Home />', () => {
|
||||
const setUp = (servers: ServersMap = {}) => render(
|
||||
|
|
@ -11,6 +12,10 @@ describe('<Home />', () => {
|
|||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(
|
||||
setUp({ '1a': fromPartial<ServerWithId>({ name: 'foo', id: '1' }) }),
|
||||
));
|
||||
|
||||
it('renders title', () => {
|
||||
setUp();
|
||||
expect(screen.getByRole('heading', { name: 'Welcome!' })).toBeInTheDocument();
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import { createMemoryHistory } from 'history';
|
||||
import { Router } from 'react-router-dom';
|
||||
import { MainHeaderFactory } from '../../src/common/MainHeader';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<MainHeader />', () => {
|
||||
const MainHeader = MainHeaderFactory(fromPartial({
|
||||
ServersDropdown: () => <>ServersDropdown</>,
|
||||
// Fake this component as a li, as it gets rendered inside a ul
|
||||
ServersDropdown: () => <li>ServersDropdown</li>,
|
||||
}));
|
||||
const setUp = (pathname = '') => {
|
||||
const history = createMemoryHistory();
|
||||
|
|
@ -20,6 +22,8 @@ describe('<MainHeader />', () => {
|
|||
);
|
||||
};
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders ServersDropdown', () => {
|
||||
setUp();
|
||||
expect(screen.getByText('ServersDropdown')).toBeInTheDocument();
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router';
|
||||
import { NotFound } from '../../src/common/NotFound';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
|
||||
describe('<NotFound />', () => {
|
||||
const setUp = (props = {}) => render(<MemoryRouter><NotFound {...props} /></MemoryRouter>);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('shows expected error title', () => {
|
||||
setUp();
|
||||
expect(screen.getByText('Oops! We could not find requested route.')).toBeInTheDocument();
|
||||
|
|
|
|||
|
|
@ -1,14 +1,19 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router';
|
||||
import { ScrollToTop } from '../../src/common/ScrollToTop';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
|
||||
describe('<ScrollToTop />', () => {
|
||||
const setUp = (children = 'Foo') => render(<MemoryRouter><ScrollToTop>{children}</ScrollToTop></MemoryRouter>);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it.each([
|
||||
['Foobar'],
|
||||
['Barfoo'],
|
||||
['Something'],
|
||||
])('just renders children', (children) => {
|
||||
render(<MemoryRouter><ScrollToTop>{children}</ScrollToTop></MemoryRouter>);
|
||||
setUp(children);
|
||||
expect(screen.getByText(children)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,10 +3,15 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import type { ShlinkVersionsProps } from '../../src/common/ShlinkVersions';
|
||||
import { ShlinkVersions } from '../../src/common/ShlinkVersions';
|
||||
import type { NonReachableServer, NotFoundServer, ReachableServer } from '../../src/servers/data';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
|
||||
describe('<ShlinkVersions />', () => {
|
||||
const setUp = (props: ShlinkVersionsProps) => render(<ShlinkVersions {...props} />);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(
|
||||
setUp({ selectedServer: fromPartial({ version: '1.0.0', printableVersion: '1.0.0' }) }),
|
||||
));
|
||||
|
||||
it.each([
|
||||
['1.2.3', fromPartial<ReachableServer>({ version: '1.0.0', printableVersion: 'foo' }), 'v1.2.3', 'foo'],
|
||||
['foo', fromPartial<ReachableServer>({ version: '1.0.0', printableVersion: '1.2.3' }), 'latest', '1.2.3'],
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import { createMemoryHistory } from 'history';
|
||||
import { Router } from 'react-router-dom';
|
||||
import { ShlinkVersionsContainer } from '../../src/common/ShlinkVersionsContainer';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
|
||||
describe('<ShlinkVersionsContainer />', () => {
|
||||
const setUp = (activeRoute: string) => {
|
||||
const setUp = (activeRoute: string = '') => {
|
||||
const history = createMemoryHistory();
|
||||
history.push(activeRoute);
|
||||
|
||||
|
|
@ -16,6 +17,8 @@ describe('<ShlinkVersionsContainer />', () => {
|
|||
);
|
||||
};
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it.each([
|
||||
['/something', 'text-center'],
|
||||
['/server/foo/edit', 'text-center'],
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import { useParams } from 'react-router-dom';
|
||||
import { ShlinkWebComponentContainerFactory } from '../../src/common/ShlinkWebComponentContainer';
|
||||
import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
|
||||
vi.mock('react-router-dom', async () => ({
|
||||
...(await vi.importActual<any>('react-router-dom')),
|
||||
|
|
@ -24,6 +25,8 @@ describe('<ShlinkWebComponentContainer />', () => {
|
|||
(useParams as any).mockReturnValue({ serverId: 'abc123' });
|
||||
});
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp(fromPartial({ version: '3.0.0' }))));
|
||||
|
||||
it('shows loading indicator while loading server', () => {
|
||||
setUp(null);
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,12 @@ import { MAIN_COLOR } from '@shlinkio/shlink-frontend-kit';
|
|||
import { render } from '@testing-library/react';
|
||||
import type { ShlinkLogoProps } from '../../../src/common/img/ShlinkLogo';
|
||||
import { ShlinkLogo } from '../../../src/common/img/ShlinkLogo';
|
||||
import { checkAccessibility } from '../../__helpers__/accessibility';
|
||||
|
||||
describe('<ShlinkLogo />', () => {
|
||||
const setUp = (props: ShlinkLogoProps) => render(<ShlinkLogo {...props} />);
|
||||
const setUp = (props: ShlinkLogoProps = {}) => render(<ShlinkLogo {...props} />);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it.each([
|
||||
[undefined, MAIN_COLOR],
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import { useNavigate } from 'react-router-dom';
|
||||
import { CreateServerFactory } from '../../src/servers/CreateServer';
|
||||
import type { ServersMap } from '../../src/servers/data';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
vi.mock('react-router-dom', async () => ({
|
||||
|
|
@ -39,6 +40,8 @@ describe('<CreateServer />', () => {
|
|||
return renderWithEvents(<CreateServer createServers={createServersMock} servers={servers} />);
|
||||
};
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('shows success message when imported is true', () => {
|
||||
setUp({ serversImported: true });
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import type { ReactNode } from 'react';
|
||||
import { DeleteServerButtonFactory } from '../../src/servers/DeleteServerButton';
|
||||
import type { DeleteServerModalProps } from '../../src/servers/DeleteServerModal';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<DeleteServerButton />', () => {
|
||||
|
|
@ -13,6 +14,8 @@ describe('<DeleteServerButton />', () => {
|
|||
<DeleteServerButton server={fromPartial({})} textClassName="button">{children}</DeleteServerButton>,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp('Delete me')));
|
||||
|
||||
it.each([
|
||||
['Foo bar'],
|
||||
['baz'],
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { screen, waitFor } from '@testing-library/react';
|
|||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
import { TestModalWrapper } from '../__helpers__/TestModalWrapper';
|
||||
|
||||
|
|
@ -30,6 +31,8 @@ describe('<DeleteServerModal />', () => {
|
|||
);
|
||||
};
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders a modal window', () => {
|
||||
setUp();
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import { MemoryRouter, useNavigate } from 'react-router-dom';
|
||||
import type { ReachableServer, SelectedServer } from '../../src/servers/data';
|
||||
import { EditServerFactory } from '../../src/servers/EditServer';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
vi.mock('react-router-dom', async () => ({
|
||||
|
|
@ -31,6 +32,8 @@ describe('<EditServer />', () => {
|
|||
(useNavigate as any).mockReturnValue(navigate);
|
||||
});
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders nothing if selected server is not reachable', () => {
|
||||
setUp(fromPartial<SelectedServer>({}));
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { MemoryRouter } from 'react-router-dom';
|
|||
import type { ServersMap, ServerWithId } from '../../src/servers/data';
|
||||
import { ManageServersFactory } from '../../src/servers/ManageServers';
|
||||
import type { ServersExporter } from '../../src/servers/services/ServersExporter';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<ManageServers />', () => {
|
||||
|
|
@ -25,6 +26,12 @@ describe('<ManageServers />', () => {
|
|||
<MemoryRouter><ManageServers servers={servers} /></MemoryRouter>,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp({
|
||||
foo: createServerMock('foo'),
|
||||
bar: createServerMock('bar'),
|
||||
baz: createServerMock('baz'),
|
||||
})));
|
||||
|
||||
it('shows search field which allows searching servers, affecting te amount of rendered rows', async () => {
|
||||
const { user } = setUp({
|
||||
foo: createServerMock('foo'),
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import { MemoryRouter } from 'react-router-dom';
|
||||
import type { ServerWithId } from '../../src/servers/data';
|
||||
import { ManageServersRowFactory } from '../../src/servers/ManageServersRow';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
|
||||
describe('<ManageServersRow />', () => {
|
||||
const ManageServersRow = ManageServersRowFactory(fromPartial({
|
||||
|
|
@ -24,6 +25,8 @@ describe('<ManageServersRow />', () => {
|
|||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it.each([
|
||||
[true, 4],
|
||||
[false, 3],
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import { screen } from '@testing-library/react';
|
||||
import type { UserEvent } from '@testing-library/user-event';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import type { ServerWithId } from '../../src/servers/data';
|
||||
import { ManageServersRowDropdownFactory } from '../../src/servers/ManageServersRowDropdown';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<ManageServersRowDropdown />', () => {
|
||||
|
|
@ -20,12 +22,23 @@ describe('<ManageServersRowDropdown />', () => {
|
|||
</MemoryRouter>,
|
||||
);
|
||||
};
|
||||
const toggleDropdown = (user: UserEvent) => user.click(screen.getByRole('button'));
|
||||
|
||||
it.each([
|
||||
[setUp],
|
||||
[async () => {
|
||||
const { user, container } = setUp();
|
||||
await toggleDropdown(user);
|
||||
|
||||
return { container };
|
||||
}],
|
||||
])('passes a11y checks', (setUp) => checkAccessibility(setUp()));
|
||||
|
||||
it('renders expected amount of dropdown items', async () => {
|
||||
const { user } = setUp();
|
||||
|
||||
expect(screen.queryByRole('menu')).not.toBeInTheDocument();
|
||||
await user.click(screen.getByRole('button'));
|
||||
await toggleDropdown(user);
|
||||
expect(screen.getByRole('menu')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getAllByRole('menuitem')).toHaveLength(4);
|
||||
|
|
@ -37,7 +50,7 @@ describe('<ManageServersRowDropdown />', () => {
|
|||
const { user } = setUp();
|
||||
|
||||
expect(setAutoConnect).not.toHaveBeenCalled();
|
||||
await user.click(screen.getByRole('button'));
|
||||
await toggleDropdown(user);
|
||||
await user.click(screen.getByRole('menuitem', { name: 'Auto-connect' }));
|
||||
expect(setAutoConnect).toHaveBeenCalledWith(expect.objectContaining({ id: 'abc123' }), true);
|
||||
});
|
||||
|
|
@ -48,7 +61,7 @@ describe('<ManageServersRowDropdown />', () => {
|
|||
expect(screen.queryByText('DeleteServerModal [OPEN]')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('DeleteServerModal [CLOSED]')).toBeInTheDocument();
|
||||
|
||||
await user.click(screen.getByRole('button'));
|
||||
await toggleDropdown(user);
|
||||
await user.click(screen.getByRole('menuitem', { name: 'Remove server' }));
|
||||
|
||||
expect(screen.getByText('DeleteServerModal [OPEN]')).toBeInTheDocument();
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { values } from 'ramda';
|
|||
import { MemoryRouter } from 'react-router-dom';
|
||||
import type { ServersMap } from '../../src/servers/data';
|
||||
import { ServersDropdown } from '../../src/servers/ServersDropdown';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<ServersDropdown />', () => {
|
||||
|
|
@ -13,9 +14,15 @@ describe('<ServersDropdown />', () => {
|
|||
'3c': fromPartial({ name: 'baz', id: '3c' }),
|
||||
};
|
||||
const setUp = (servers: ServersMap = fallbackServers) => renderWithEvents(
|
||||
<MemoryRouter><ServersDropdown servers={servers} selectedServer={null} /></MemoryRouter>,
|
||||
<MemoryRouter>
|
||||
<ul>
|
||||
<ServersDropdown servers={servers} selectedServer={null} />
|
||||
</ul>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('contains the list of servers and the "mange servers" button', async () => {
|
||||
const { user } = setUp();
|
||||
|
||||
|
|
|
|||
|
|
@ -3,13 +3,14 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import { MemoryRouter } from 'react-router-dom';
|
||||
import type { ServerWithId } from '../../src/servers/data';
|
||||
import { ServersListGroup } from '../../src/servers/ServersListGroup';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
|
||||
describe('<ServersListGroup />', () => {
|
||||
const servers: ServerWithId[] = [
|
||||
fromPartial({ name: 'foo', id: '123' }),
|
||||
fromPartial({ name: 'bar', id: '456' }),
|
||||
];
|
||||
const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean }) => {
|
||||
const setUp = (params: { servers?: ServerWithId[]; withChildren?: boolean; embedded?: boolean } = {}) => {
|
||||
const { servers = [], withChildren = true, embedded } = params;
|
||||
|
||||
return render(
|
||||
|
|
@ -21,14 +22,16 @@ describe('<ServersListGroup />', () => {
|
|||
);
|
||||
};
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders title', () => {
|
||||
setUp({});
|
||||
expect(screen.getByRole('heading')).toHaveTextContent('The list of servers');
|
||||
expect(screen.getByTestId('title')).toHaveTextContent('The list of servers');
|
||||
});
|
||||
|
||||
it('does not render title when children is not provided', () => {
|
||||
setUp({ withChildren: false });
|
||||
expect(screen.queryByRole('heading')).not.toBeInTheDocument();
|
||||
expect(screen.queryByTestId('title')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.each([
|
||||
|
|
@ -37,7 +40,7 @@ describe('<ServersListGroup />', () => {
|
|||
])('shows servers list', (servers) => {
|
||||
setUp({ servers });
|
||||
|
||||
expect(screen.queryAllByRole('list')).toHaveLength(servers.length ? 1 : 0);
|
||||
expect(screen.queryAllByTestId('list')).toHaveLength(servers.length ? 1 : 0);
|
||||
expect(screen.queryAllByRole('link')).toHaveLength(servers.length);
|
||||
});
|
||||
|
||||
|
|
@ -47,6 +50,6 @@ describe('<ServersListGroup />', () => {
|
|||
[undefined, 'servers-list__list-group'],
|
||||
])('renders proper classes for embedded', (embedded, expectedClasses) => {
|
||||
setUp({ servers, embedded });
|
||||
expect(screen.getByRole('list')).toHaveAttribute('class', `${expectedClasses} list-group`);
|
||||
expect(screen.getByTestId('list')).toHaveAttribute('class', `${expectedClasses} list-group`);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { screen } from '@testing-library/react';
|
|||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import type { ServerData } from '../../../src/servers/data';
|
||||
import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
|
||||
import { checkAccessibility } from '../../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../../__helpers__/setUpTest';
|
||||
|
||||
describe('<DuplicatedServersModal />', () => {
|
||||
|
|
@ -12,6 +13,8 @@ describe('<DuplicatedServersModal />', () => {
|
|||
);
|
||||
const mockServer = (data: Partial<ServerData> = {}) => fromPartial<ServerData>(data);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it.each([
|
||||
[[], 0],
|
||||
[[mockServer()], 2],
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import type {
|
|||
ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
|
||||
import { ImportServersBtnFactory } from '../../../src/servers/helpers/ImportServersBtn';
|
||||
import type { ServersImporter } from '../../../src/servers/services/ServersImporter';
|
||||
import { checkAccessibility } from '../../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../../__helpers__/setUpTest';
|
||||
|
||||
describe('<ImportServersBtn />', () => {
|
||||
|
|
@ -22,6 +23,8 @@ describe('<ImportServersBtn />', () => {
|
|||
/>,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('shows tooltip on button hover', async () => {
|
||||
const { user } = setUp();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,22 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import type { NonReachableServer, NotFoundServer } from '../../../src/servers/data';
|
||||
import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data';
|
||||
import { ServerErrorFactory } from '../../../src/servers/helpers/ServerError';
|
||||
import { checkAccessibility } from '../../__helpers__/accessibility';
|
||||
|
||||
describe('<ServerError />', () => {
|
||||
const ServerError = ServerErrorFactory(fromPartial({ DeleteServerButton: () => null }));
|
||||
const setUp = (selectedServer: SelectedServer) => render(
|
||||
<MemoryRouter>
|
||||
<ServerError servers={{}} selectedServer={selectedServer} />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
|
||||
it.each([
|
||||
[fromPartial<NotFoundServer>({})],
|
||||
[fromPartial<NonReachableServer>({ id: 'abc123' })],
|
||||
])('passes a11y checks', (selectedServer) => checkAccessibility(setUp(selectedServer)));
|
||||
|
||||
it.each([
|
||||
[
|
||||
|
|
@ -31,11 +42,7 @@ describe('<ServerError />', () => {
|
|||
},
|
||||
],
|
||||
])('renders expected information based on provided server type', (selectedServer, { found, notFound }) => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<ServerError servers={{}} selectedServer={selectedServer} />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
setUp(selectedServer);
|
||||
|
||||
found.forEach((text) => expect(screen.getByText(text)).toBeInTheDocument());
|
||||
notFound.forEach((text) => expect(screen.queryByText(text)).not.toBeInTheDocument());
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { ServerForm } from '../../../src/servers/helpers/ServerForm';
|
||||
import { checkAccessibility } from '../../__helpers__/accessibility';
|
||||
|
||||
describe('<ServerForm />', () => {
|
||||
const onSubmit = vi.fn();
|
||||
const setUp = () => render(<ServerForm onSubmit={onSubmit}>Something</ServerForm>);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders components', () => {
|
||||
setUp();
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import type { RealTimeUpdatesSettings as RealTimeUpdatesSettingsOptions } from '
|
|||
import { screen } from '@testing-library/react';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { RealTimeUpdatesSettings } from '../../src/settings/RealTimeUpdatesSettings';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<RealTimeUpdatesSettings />', () => {
|
||||
|
|
@ -15,6 +16,8 @@ describe('<RealTimeUpdatesSettings />', () => {
|
|||
/>,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders enabled real time updates as expected', () => {
|
||||
setUp({ enabled: true });
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
|||
import { createMemoryHistory } from 'history';
|
||||
import { Router } from 'react-router-dom';
|
||||
import { SettingsFactory } from '../../src/settings/Settings';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
|
||||
describe('<Settings />', () => {
|
||||
const Settings = SettingsFactory(fromPartial({
|
||||
|
|
@ -19,6 +20,8 @@ describe('<Settings />', () => {
|
|||
return render(<Router location={history.location} navigator={history}><Settings /></Router>);
|
||||
};
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it.each([
|
||||
['/general', {
|
||||
visibleComps: ['UserInterface', 'RealTimeUpdates'],
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import type { ShortUrlCreationSettings as ShortUrlsSettings } from '@shlinkio/sh
|
|||
import { screen } from '@testing-library/react';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { ShortUrlCreationSettings } from '../../src/settings/ShortUrlCreationSettings';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<ShortUrlCreationSettings />', () => {
|
||||
|
|
@ -13,6 +14,8 @@ describe('<ShortUrlCreationSettings />', () => {
|
|||
/>,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it.each([
|
||||
[{ validateUrls: true }, true],
|
||||
[{ validateUrls: false }, false],
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import type { ShortUrlsListSettings as ShortUrlsSettings } from '@shlinkio/shlin
|
|||
import { screen } from '@testing-library/react';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<ShortUrlsListSettings />', () => {
|
||||
|
|
@ -10,6 +11,8 @@ describe('<ShortUrlsListSettings />', () => {
|
|||
<ShortUrlsListSettings settings={fromPartial({ shortUrlsList })} setShortUrlsListSettings={setSettings} />,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it.each([
|
||||
[undefined, 'Order by: Created at - DESC'],
|
||||
[fromPartial<ShortUrlsSettings>({}), 'Order by: Created at - DESC'],
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { screen } from '@testing-library/react';
|
|||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import type { TagsOrder } from '../../src/settings/TagsSettings';
|
||||
import { TagsSettings } from '../../src/settings/TagsSettings';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<TagsSettings />', () => {
|
||||
|
|
@ -11,6 +12,8 @@ describe('<TagsSettings />', () => {
|
|||
<TagsSettings settings={fromPartial({ tags })} setTagsSettings={setTagsSettings} />,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders expected amount of groups', () => {
|
||||
setUp();
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { screen } from '@testing-library/react';
|
|||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import type { UiSettings } from '../../src/settings/reducers/settings';
|
||||
import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<UserInterfaceSettings />', () => {
|
||||
|
|
@ -11,6 +12,8 @@ describe('<UserInterfaceSettings />', () => {
|
|||
<UserInterfaceSettings settings={fromPartial({ ui })} setUiSettings={setUiSettings} />,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it.each([
|
||||
[{ theme: 'dark' as Theme }, true],
|
||||
[{ theme: 'light' as Theme }, false],
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import type { Settings } from '@shlinkio/shlink-web-component';
|
|||
import { screen } from '@testing-library/react';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { VisitsSettings } from '../../src/settings/VisitsSettings';
|
||||
import { checkAccessibility } from '../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../__helpers__/setUpTest';
|
||||
|
||||
describe('<VisitsSettings />', () => {
|
||||
|
|
@ -10,6 +11,8 @@ describe('<VisitsSettings />', () => {
|
|||
<VisitsSettings settings={fromPartial(settings)} setVisitsSettings={setVisitsSettings} />,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('renders expected components', () => {
|
||||
setUp();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { screen, waitFor } from '@testing-library/react';
|
||||
import type { DateInterval } from '../../../src/utils/dates/DateIntervalSelector';
|
||||
import { DateIntervalSelector, INTERVAL_TO_STRING_MAP } from '../../../src/utils/dates/DateIntervalSelector';
|
||||
import { checkAccessibility } from '../../__helpers__/accessibility';
|
||||
import { renderWithEvents } from '../../__helpers__/setUpTest';
|
||||
|
||||
describe('<DateIntervalSelector />', () => {
|
||||
|
|
@ -10,6 +11,8 @@ describe('<DateIntervalSelector />', () => {
|
|||
<DateIntervalSelector allText="All text" active={activeInterval} onChange={onChange} />,
|
||||
);
|
||||
|
||||
it('passes a11y checks', () => checkAccessibility(setUp()));
|
||||
|
||||
it('passes props down to nested DateIntervalDropdownItems', async () => {
|
||||
const { user } = setUp();
|
||||
const btn = screen.getByRole('button');
|
||||
|
|
|
|||
Loading…
Reference in a new issue