diff --git a/packages/angular-material/test/number-control.spec.ts b/packages/angular-material/test/number-control.spec.ts index 2e1156f6e..715ae20e5 100644 --- a/packages/angular-material/test/number-control.spec.ts +++ b/packages/angular-material/test/number-control.spec.ts @@ -213,4 +213,122 @@ describe('Number control custom', () => { expect(numberNativeElement.value).toBe('1000000'); }); + + it('should have description property set correctly', () => { + const schema = { + type: 'object', + properties: { + foo: { + type: 'number', + description: 'This is a number field', + }, + }, + }; + const uischema = Object.assign({}, defaultUischema); + component.uischema = uischema; + const state: JsonFormsCore = { + data: defaultData, + schema: schema, + uischema: uischema, + }; + getJsonFormsService(component).init({ + core: state, + i18n: { + locale: 'en', + }, + }); + getJsonFormsService(component).updateCore( + Actions.init(state.data, state.schema) + ); + component.ngOnInit(); + fixture.detectChanges(); + + // Verify the description property is set correctly on the component + expect(component.description).toBe('This is a number field'); + }); + + it('should show description when showUnfocusedDescription is true', () => { + const schema = { + type: 'object', + properties: { + foo: { + type: 'number', + description: 'This is a number field', + }, + }, + }; + const uischema = Object.assign({}, defaultUischema); + uischema.options = { + showUnfocusedDescription: true, + }; + component.uischema = uischema; + const state: JsonFormsCore = { + data: defaultData, + schema: schema, + uischema: uischema, + }; + getJsonFormsService(component).init({ + core: state, + i18n: { + locale: 'en', + }, + }); + getJsonFormsService(component).updateCore( + Actions.init(state.data, state.schema) + ); + component.ngOnInit(); + fixture.detectChanges(); + + // Description should be visible even without focus + const matHint = fixture.nativeElement.querySelector('mat-hint'); + expect(matHint).toBeTruthy(); + expect(matHint.textContent.trim()).toBe('This is a number field'); + }); + + it('should render translated description correctly', () => { + const schema = { + type: 'object', + properties: { + foo: { + type: 'number', + description: 'description.number', + }, + }, + }; + const uischema = Object.assign({}, defaultUischema); + uischema.options = { + showUnfocusedDescription: true, + }; + component.uischema = uischema; + const state: JsonFormsCore = { + data: defaultData, + schema: schema, + uischema: uischema, + }; + getJsonFormsService(component).init({ + core: state, + i18n: { + locale: 'en', + translate: (key: string, defaultMessage: string | undefined) => { + const translations: { [key: string]: string } = { + 'foo.description': 'Translated number description', + }; + return translations[key] ?? defaultMessage; + }, + }, + }); + getJsonFormsService(component).updateCore( + Actions.init(state.data, state.schema) + ); + component.ngOnInit(); + fixture.detectChanges(); + + // Verify the description is translated and rendered correctly + expect(component.description).toBe('Translated number description'); + + // Check that the translated description is displayed in the DOM + const matHint = fixture.nativeElement.querySelector('mat-hint'); + expect(matHint).toBeTruthy(); + expect(matHint.textContent.trim()).toBe('Translated number description'); + }); }); diff --git a/packages/angular/src/library/abstract-control.ts b/packages/angular/src/library/abstract-control.ts index 4d3f4f54c..0da994a05 100644 --- a/packages/angular/src/library/abstract-control.ts +++ b/packages/angular/src/library/abstract-control.ts @@ -126,10 +126,7 @@ export abstract class JsonFormsAbstractControl< this.hidden = !visible; this.scopedSchema = schema; this.rootSchema = rootSchema; - this.description = - this.scopedSchema !== undefined - ? this.scopedSchema.description - : ''; + this.description = props.description ?? ''; this.id = props.id; this.form.setValue(data); this.propsPath = path;