Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-21 00:52:43 -05:00
Code Issues Activity

fix(web): admin settings number input validation (#9470)

Browse source 
* fix(web): admin settings number input validation

* fix import by creating *.ts file

* just ignore import error
This commit is contained in:
Michel Heusschen 2024-05-14 17:35:16 +02:00 • committed by GitHub
parent 4d7aa7effd
commit acc611a3d9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 48 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/package-lock.json generated
View file

@ -36,6 +36,7 @@
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/svelte": "^5.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/dom-to-image": "^2.6.7",
"@types/justified-layout": "^4.1.4",
"@types/lodash-es": "^4.17.12",
@ -2154,6 +2155,19 @@
}
}
},
"node_modules/@testing-library/user-event": {
"version": "14.5.2",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
"integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
"dev": true,
"engines": {
"node": ">=12",
"npm": ">=6"
},
"peerDependencies": {
"@testing-library/dom": ">=7.21.4"
}
},
"node_modules/@types/aria-query": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.2.tgz",

1
web/package.json
View file

@ -31,6 +31,7 @@
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/svelte": "^5.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/dom-to-image": "^2.6.7",
"@types/justified-layout": "^4.1.4",
"@types/lodash-es": "^4.17.12",

30
web/src/lib/components/shared-components/settings/setting-input-field.spec.ts Normal file
View file

@ -0,0 +1,30 @@
import { render } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
// @ts-expect-error the import works but tsc check errors
import SettingInputField, { SettingInputFieldType } from './setting-input-field.svelte';
describe('SettingInputField component', () => {
it('validates number input on blur', async () => {
const { getByRole } = render(SettingInputField, {
props: {
label: 'test-number-input',
inputType: SettingInputFieldType.NUMBER,
value: 0,
min: 0,
max: 100,
step: '0.1',
},
});
const user = userEvent.setup();
const numberInput = getByRole('spinbutton') as HTMLInputElement;
expect(numberInput.value).toEqual('0');
await user.click(numberInput);
await user.keyboard('100.1');
expect(numberInput.value).toEqual('100.1');
await user.click(document.body);
expect(numberInput.value).toEqual('100');
});
});

7
web/src/lib/components/shared-components/settings/setting-input-field.svelte
View file

@ -25,9 +25,7 @@
export let isEdited = false;
export let passwordAutocomplete: string = 'current-password';
const handleInput = (e: Event) => {
value = (e.target as HTMLInputElement).value;
const validateInput = () => {
if (inputType === SettingInputFieldType.NUMBER) {
let newValue = Number(value) || 0;
if (newValue < min) {
@ -79,7 +77,8 @@
{step}
{required}
{value}
on:input={handleInput}
on:input={(e) => (value = e.currentTarget.value)}
on:blur={validateInput}
{disabled}
{title}
/>