diff --git a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.html b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.html index e8ce4ac98..11f87ff33 100644 --- a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.html +++ b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.html @@ -19,21 +19,41 @@ [class.device-form-create]="!data.device" [class.device-form-edit]="data.device"> {{ data.title }} - + Device Manufacturer Please enter device manufacturer name + + Please, check. The manufacturer name must be a maximum of 64 + characters. Only letters, numbers, and accented letters are + permitted. + Device Manufacturer is required - + Device Model Please enter device name + + Please, check. The device model name must be a maximum of 64 + characters. Only letters, numbers, and accented letters are + permitted. + Device Model is required diff --git a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.scss b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.scss index 96903ccc5..831f9907a 100644 --- a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.scss +++ b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.scss @@ -34,6 +34,13 @@ $device-form-min-width: 285px; overflow: auto; } +.manufacturer-field, +.model-field { + &::ng-deep.mat-mdc-form-field-subscript-wrapper:has(mat-error) { + height: 40px; + } +} + .device-form-title { color: $grey-800; font-size: 22px; diff --git a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.spec.ts b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.spec.ts index 83d869277..4ffbb402e 100644 --- a/modules/ui/src/app/pages/devices/components/device-form/device-form.component.spec.ts +++ b/modules/ui/src/app/pages/devices/components/device-form/device-form.component.spec.ts @@ -221,6 +221,29 @@ describe('DeviceFormComponent', () => { expect(errors).toBeNull(); }); }); + + it('should have "invalid_format" error when field does not satisfy validation rules', () => { + [ + 'very long value very long value very long value very long value very long value very long value very long value', + 'as&@3$', + ].forEach(value => { + const model: HTMLInputElement = compiled.querySelector( + '.device-form-model' + ) as HTMLInputElement; + model.value = value; + model.dispatchEvent(new Event('input')); + component.model.markAsTouched(); + fixture.detectChanges(); + + const modelError = compiled.querySelector('mat-error')?.innerHTML; + const error = component.model.hasError('invalid_format'); + + expect(error).toBeTruthy(); + expect(modelError).toContain( + 'The device model name must be a maximum of 64 characters. Only letters, numbers, and accented letters are permitted.' + ); + }); + }); }); describe('device manufacturer', () => { @@ -240,6 +263,30 @@ describe('DeviceFormComponent', () => { expect(errors).toBeNull(); }); }); + + it('should have "invalid_format" error when field does not satisfy validation', () => { + [ + 'very long value very long value very long value very long value very long value very long value very long value', + 'as&@3$', + ].forEach(value => { + const manufacturer: HTMLInputElement = compiled.querySelector( + '.device-form-manufacturer' + ) as HTMLInputElement; + manufacturer.value = value; + manufacturer.dispatchEvent(new Event('input')); + component.manufacturer.markAsTouched(); + fixture.detectChanges(); + + const manufacturerError = + compiled.querySelector('mat-error')?.innerHTML; + const error = component.manufacturer.hasError('invalid_format'); + + expect(error).toBeTruthy(); + expect(manufacturerError).toContain( + 'The manufacturer name must be a maximum of 64 characters. Only letters, numbers, and accented letters are permitted.' + ); + }); + }); }); describe('mac address', () => {