Better error messages for required fields (#230)

* better error messages for required fields * Update src/altinn-app-frontend/src/utils/formComponentUtils.test.ts Co-authored-by: Steffen Lorang Ekeberg <[email protected]> * update error message test in cypress test * remove .only on describe statement * Remove . at end of validation message * update tests * a few more .s Co-authored-by: Steffen Lorang Ekeberg <[email protected]>
Altinn · Jun 22, 2022 · 53acf65 · 53acf65
1 parent ccfb8ff
commit 53acf65
Show file tree

Hide file tree

Showing 13 changed files with 362 additions and 106 deletions.
diff --git a/src/altinn-app-frontend/src/features/form/data/submit/submitFormDataSagas.ts b/src/altinn-app-frontend/src/features/form/data/submit/submitFormDataSagas.ts
@@ -57,6 +57,7 @@ function* submitFormSaga({ payload: { apiMode, stopWithWarnings } }: PayloadActi
       state.language.language,
       state.formLayout.uiConfig.hiddenFields,
       state.formLayout.uiConfig.repeatingGroups,
+      state.textResources.resources,
     );
 
     validations = mergeValidationObjects(validations, componentSpecificValidations);

diff --git a/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts b/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts
@@ -160,6 +160,7 @@ export function* updateCurrentViewSaga({ payload: {
         state.language.language,
         state.formLayout.uiConfig.hiddenFields,
         state.formLayout.uiConfig.repeatingGroups,
+        state.textResources.resources,
       );
       let validations = mergeValidationObjects(validationResult.validations, componentSpecificValidations, emptyFieldsValidations);
       const instanceId = state.instanceData.instance.id;

diff --git a/src/altinn-app-frontend/src/utils/databindings.test.ts b/src/altinn-app-frontend/src/utils/databindings.test.ts
@@ -4,6 +4,7 @@ import type { IMapping } from 'src/types';
 
 import {
   flattenObject,
+  getFormDataFromFieldKey,
   getKeyWithoutIndex,
   mapFormData,
   removeGroupData,
@@ -271,4 +272,31 @@ describe('utils/databindings.ts', () => {
       },
     );
   });
+
+  describe('getFormDataFromFieldKey', () => {
+    const formData = {
+      'field1': 'value1',
+      'group[0].field': 'someValue',
+      'group[1].field': 'another value',
+    }
+    it('should return correct form data for a field not in a group', () => {
+      const result = getFormDataFromFieldKey(
+        'simpleBinding',
+        { simpleBinding: 'field1' },
+        formData,
+      );
+      expect(result).toEqual('value1');
+    });
+
+    it('should return correct form data for a field in a group', () => {
+      const result = getFormDataFromFieldKey(
+        'simpleBinding',
+        { simpleBinding: 'group.field' },
+        formData,
+        'group',
+        1,
+      );
+      expect(result).toEqual('another value');
+    });
+  });
 });
diff --git a/src/altinn-app-frontend/src/utils/databindings.ts b/src/altinn-app-frontend/src/utils/databindings.ts
@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import { object } from 'dot-object';
 import { ILayout, ILayoutGroup } from 'src/features/form/layout';
-import { IMapping, IRepeatingGroup } from 'src/types';
+import { IDataModelBindings, IMapping, IRepeatingGroup } from 'src/types';
 import { getParentGroup } from './validation';
 import { IFormData } from 'src/features/form/data/formDataReducer';
 
@@ -157,3 +157,20 @@ export function mapFormData(formData: IFormData, mapping: IMapping) {
   });
   return mappedFormData;
 }
+
+export function getFormDataFromFieldKey(
+  fieldKey: string,
+  dataModelBindings: IDataModelBindings,
+  formData: any,
+  groupDataBinding?: string,
+  index?: number,
+) {
+    let dataModelBindingKey = dataModelBindings[fieldKey];
+    if (groupDataBinding) {
+      dataModelBindingKey = dataModelBindingKey.replace(
+        groupDataBinding,
+        `${groupDataBinding}[${index}]`,
+      );
+    }
+    return formData[dataModelBindingKey];
+}
diff --git a/src/altinn-app-frontend/src/utils/formComponentUtils.test.ts b/src/altinn-app-frontend/src/utils/formComponentUtils.test.ts
@@ -20,6 +20,7 @@ import {
   isComponentValid,
   componentValidationsHandledByGenericComponent,
   componentHasValidationMessages,
+  getFieldName,
 } from './formComponentUtils';
 
 describe('formComponentUtils', () => {
@@ -451,4 +452,59 @@ describe('formComponentUtils', () => {
         expect(result).toEqual(true);
       });
   });
+
+  describe('getFieldName', () => {
+    const mockTextResources = [
+      { id: 'title', value: 'Component name'},
+      { id: 'short', value: 'name'},
+    ];
+    const mockLanguage = {
+      form_filler: {
+        error_required: 'Du må fylle ut {0}',
+        address: 'Gateadresse',
+        postPlace: 'Poststed',
+        zipCode: 'Postnummer',
+      },
+      validation: {
+        generic_field: 'dette feltet',
+      },
+    };
+
+    it('should return field text from languages when fieldKey is present', () => {
+      const result = getFieldName(
+        { title: 'title' },
+        mockTextResources,
+        mockLanguage,
+        'address'
+      );
+      expect(result).toEqual('Gateadresse');
+    });
+
+    it('should return component shortName (textResourceBindings) when no fieldKey is present', () => {
+      const result = getFieldName(
+        { title: 'title', shortName: 'short' },
+        mockTextResources,
+        mockLanguage,
+      );
+      expect(result).toEqual('name');
+    });
+
+    it('should return component title (textResourceBindings) when no shortName (textResourceBindings) and no fieldKey is present', () => {
+      const result = getFieldName(
+        { title: 'title' },
+        mockTextResources,
+        mockLanguage,
+      );
+      expect(result).toEqual('Component name');
+    });
+
+    it('should return generic field name when fieldKey, shortName and title are all not available', () => {
+      const result = getFieldName(
+        { something: 'someTextKey' },
+        mockTextResources,
+        mockLanguage,
+      );
+      expect(result).toEqual('dette feltet');
+    });
+  });
 });
diff --git a/src/altinn-app-frontend/src/utils/formComponentUtils.ts b/src/altinn-app-frontend/src/utils/formComponentUtils.ts
@@ -23,6 +23,7 @@ import {
 } from 'src/types';
 import { AsciiUnitSeparator } from './attachment';
 import { getOptionLookupKey } from './options';
+import { getTextFromAppOrDefault } from './textResource';
 
 export const componentValidationsHandledByGenericComponent = (
   dataModelBindings: any,
@@ -412,3 +413,25 @@ export const atleastOneTagExists = (attachments: IAttachment[]): boolean => {
 
   return totalTagCount !== undefined && totalTagCount >= 1;
 };
+
+export function getFieldName(
+  textResourceBindings: ITextResourceBindings,
+  textResources: ITextResource[],
+  language: ILanguage,
+  fieldKey?: string,
+): string {
+  if (fieldKey)
+  {
+    return getTextFromAppOrDefault(`form_filler.${fieldKey}`, textResources, language, null, true);
+  }
+
+  if (textResourceBindings.shortName) {
+    return getTextResourceByKey(textResourceBindings.shortName, textResources);
+  }
+
+  if (textResourceBindings.title) {
+    return getTextResourceByKey(textResourceBindings.title, textResources);
+  }
+
+  return getLanguageFromKey('validation.generic_field', language);
+}