Make FormData type stable, and add/improve lots of related Typescirpt typings

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/GenericComponent.test.tsx

@@ -51,9 +51,7 @@ describe('>>> components/GenericComponent.tsx', () => {
 
     const formData = getFormDataStateMock({
       formData: {
-        mockId: {
-          mockDataBinding: 'value',
-        },
+        mockDataBinding: 'value',
       },
     });
 

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/advanced/AddressComponent.test.tsx

@@ -2,12 +2,13 @@
 import { mount, shallow } from 'enzyme';
 import 'jest';
 import * as React from 'react';
+import { IComponentProps } from 'src/components';
 import { AddressComponent } from '../../../src/components/advanced/AddressComponent';
 
 describe('components > advanced > AddressComponent', () => {
   const mockId = 'mock-id';
   const mockFormData = { address: 'adresse 1' };
-  const mockHandleDataChange = (data: any) => '';
+  const mockHandleDataChange = (data: string) => '';
   const mockGetTextResource = (resourceKey: string) => 'test';
   const mockIsValid = true;
   const mockSimplified = true;
@@ -48,6 +49,7 @@ describe('components > advanced > AddressComponent', () => {
         required={mockRequired}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     expect(shallowAddressComponent.find('input').length).toBe(3);
@@ -68,6 +70,7 @@ describe('components > advanced > AddressComponent', () => {
         required={mockRequired}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     expect(shallowAddressComponent.find('.address-component-small-inputs').hasClass('disabled')).toBe(false);
@@ -88,6 +91,7 @@ describe('components > advanced > AddressComponent', () => {
         required={mockRequired}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     shallowAddressComponent.find('input').forEach((node: any) => {
@@ -110,6 +114,7 @@ describe('components > advanced > AddressComponent', () => {
         required={mockRequired}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     shallowAddressComponent.find('input').forEach((node: any) => {
@@ -133,6 +138,7 @@ describe('components > advanced > AddressComponent', () => {
         required={false}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     expect(shallowAddressComponent.find('span.label-optional')).toHaveLength(2);
@@ -154,6 +160,7 @@ describe('components > advanced > AddressComponent', () => {
         labelSettings={{ optionalIndicator: false }}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     expect(shallowAddressComponent.find('.label-optional')).toHaveLength(0);
@@ -175,6 +182,7 @@ describe('components > advanced > AddressComponent', () => {
         required={false}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />);
     const input = component.find(`#address_zip_code_${mockId}`);
     input.simulate('change', { target: { value: '123'}})
@@ -198,6 +206,7 @@ describe('components > advanced > AddressComponent', () => {
         required={false}
         language={mockLanguage}
         textResourceBindings={mocktextResourceBindings}
+        {...({} as IComponentProps)}
       />);
     const input = component.find(`#address_zip_code_${mockId}`);
     input.simulate('change', { target: { value: ''}})

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/AttachmentListComponent.test.tsx

@@ -71,7 +71,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
       id: mockId,
       text: 'Attachments',
       dataTypeIds: ['test-data-type-1'],
-    };
+    } as IAttachmentListProps;
 
     return render(
       <Provider store={mockStore}>

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/ButtonComponent.test.tsx

@@ -5,6 +5,7 @@ import configureStore from 'redux-mock-store';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { ButtonComponent } from '../../../src/components/base/ButtonComponent';
+import { IComponentProps } from 'src/components';
 
 describe('components/base/ButtonComponent.tsx', () => {
   let mockId: string;
@@ -61,6 +62,7 @@ describe('components/base/ButtonComponent.tsx', () => {
           disabled={mockDisabled}
           formDataCount={formDataCount}
           language={mockLanguage}
+          {...({} as IComponentProps)}
         />
       </Provider>
     );
@@ -78,6 +80,7 @@ describe('components/base/ButtonComponent.tsx', () => {
           disabled={mockDisabled}
           formDataCount={formDataCount}
           language={mockLanguage}
+          {...({} as IComponentProps)}
         />
       </Provider>
     );

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/DropdownComponent.test.tsx

@@ -4,6 +4,7 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import { render } from '@testing-library/react';
 import DropdownComponent from '../../../src/components/base/DropdownComponent';
+import { IComponentProps } from 'src/components';
 
 describe('>>> components/base/DropdownComponent.tsx --- Snapshot', () => {
   let mockId: string;
@@ -47,6 +48,7 @@ describe('>>> components/base/DropdownComponent.tsx --- Snapshot', () => {
           optionsId={mockOptionsId}
           isValid={mockIsValid}
           readOnly={false}
+          {...({} as IComponentProps)}
         />
       </Provider>,
     );

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/FileUploadComponent.test.tsx

@@ -9,6 +9,7 @@ import { render } from '@testing-library/react';
 import { bytesInOneMB, FileUploadComponent, IFileUploadProps } from '../../../src/components/base/FileUploadComponent';
 import { getFileEnding, removeFileEnding } from '../../../src/utils/attachment';
 import { getFileUploadComponentValidations } from '../../../src/utils/formComponentUtils';
+import { IComponentProps } from 'src/components';
 
 
 describe('>>> components/base/FileUploadComponent.tsx', () => {
@@ -79,6 +80,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
           maxNumberOfAttachments={mockMaxNumberOfAttachments}
           minNumberOfAttachments={mockMinNumberOfAttachments}
           readOnly={mockReadOnly}
+          {...({} as IComponentProps)}
         />
       </Provider>
     );
@@ -207,6 +209,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
           maxNumberOfAttachments={mockMaxNumberOfAttachments}
           minNumberOfAttachments={mockMinNumberOfAttachments}
           readOnly={mockReadOnly}
+          {...({} as IComponentProps)}
         />
       </Provider>
     );
@@ -272,7 +275,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
       minNumberOfAttachments: mockMinNumberOfAttachments,
       isValid: mockIsValid,
       readOnly: mockReadOnly,
-    };
+    } as IFileUploadProps;
 
     return render(
       <Provider store={mockStore}>

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/HeaderComponent.test.tsx

@@ -7,6 +7,7 @@ import {
 } from '@testing-library/react';
 
 import { HeaderComponent } from '../../../src/components/base/HeaderComponent';
+import { IComponentProps } from 'src/components';
 
 const render = (props = {}) => {
   const allProps = {
@@ -16,7 +17,7 @@ const render = (props = {}) => {
     language: {},
     textResourceBindings: {},
     ...props,
-  };
+  } as IComponentProps;
 
   rtlRender(<HeaderComponent {...allProps} />);
 };

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/InputComponent.test.tsx

@@ -4,6 +4,7 @@ import 'jest';
 import * as React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { InputComponent, IInputProps } from '../../../src/components/base/InputComponent';
+import { IComponentProps } from 'src/components';
 
 describe('components/base/InputComponent.tsx', () => {
   let mockId: string;
@@ -35,7 +36,7 @@ describe('components/base/InputComponent.tsx', () => {
   });
 
   test('components/base/InputComponent.tsx -- should have correct value with specified form data', async () => {
-    const customProps = { formData: 'Test123' };
+    const customProps:Partial<IComponentProps> = { formData: {simpleBinding:'Test123'} };
     const { findByTestId } = renderInputComponent(customProps);
     const inputComponent: any = await findByTestId(mockId);
 
@@ -69,7 +70,7 @@ describe('components/base/InputComponent.tsx', () => {
           prefix: '$',
         },
       },
-      formData: '1234',
+      formData: {simpleBinding:'1234'},
     });
     const inputComponent: any = await findByTestId(`${mockId}-formatted-number`);
     expect(inputComponent.value).toEqual('$1,234');
@@ -83,7 +84,7 @@ describe('components/base/InputComponent.tsx', () => {
       isValid: mockIsValid,
       readOnly: mockReadOnly,
       required: mockRequired,
-    };
+    } as unknown as IInputProps;
 
     return render(<InputComponent {...defaultProps} {...props}/>);
   }

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/ParagraphComponent.test.tsx

@@ -3,20 +3,16 @@ import { shallow } from 'enzyme';
 import 'jest';
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
+import { IComponentProps } from 'src/components';
 import { ParagraphComponent } from '../../../src/components/base/ParagraphComponent';
 import { ITextResourceBindings } from '../../../src/features/form/layout';
 
 describe('>>> components/base/ParagraphComponent.tsx --- Snapshot', () => {
-  let mockId: string;
-  let mockText: string;
-  let mockGetTextResource: (key: string) => string;
-  let mockLanguage: any;
-  let mockTextResourceBindings: ITextResourceBindings;
-  mockId = 'mock-id';
-  mockText = 'Here goes a paragraph';
-  mockGetTextResource = (key: string) => key;
-  mockLanguage = {};
-  mockTextResourceBindings = {
+  const mockId = 'mock-id';
+  const mockText = 'Here goes a paragraph';
+  const mockGetTextResource = (key: string) => key;
+  const mockLanguage: any = {};
+  const mockTextResourceBindings: ITextResourceBindings = {
     tile: mockText,
   }
 
@@ -28,6 +24,7 @@ describe('>>> components/base/ParagraphComponent.tsx --- Snapshot', () => {
         language={mockLanguage}
         getTextResource={mockGetTextResource}
         textResourceBindings={mockTextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
     expect(rendered).toMatchSnapshot();
@@ -40,6 +37,7 @@ describe('>>> components/base/ParagraphComponent.tsx --- Snapshot', () => {
         language={mockLanguage}
         getTextResource={mockGetTextResource}
         textResourceBindings={mockTextResourceBindings}
+        {...({} as IComponentProps)}
       />,
     );
 
@@ -53,7 +51,8 @@ describe('>>> components/base/ParagraphComponent.tsx --- Snapshot', () => {
         text={mockText}
         language={mockLanguage}
         getTextResource={mockGetTextResource}
-        textResourceBindings={{ help: 'this is the help text'}}
+        textResourceBindings={{ help: 'this is the help text' }}
+        {...({} as IComponentProps)}
       />,
     );
 

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/base/TextAreaComponent.test.tsx

@@ -4,8 +4,9 @@ import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 
 import { mount } from 'enzyme';
-import { TextAreaComponent, ITextAreaComponentProps } from '../../../src/components/base/TextAreaComponent';
+import { TextAreaComponent } from '../../../src/components/base/TextAreaComponent';
 import { render, fireEvent } from '@testing-library/react';
+import { IComponentProps } from 'src/components';
 
 describe('>>> components/base/TextAreaComponent.tsx', () => {
   let mockId: string;
@@ -30,6 +31,7 @@ describe('>>> components/base/TextAreaComponent.tsx', () => {
         handleDataChange={mockHandleDataChange}
         isValid={mockIsValid}
         readOnly={mockReadOnly}
+        {...({} as IComponentProps)}
       />,
     );
     expect(rendered).toMatchSnapshot();
@@ -52,6 +54,7 @@ describe('>>> components/base/TextAreaComponent.tsx', () => {
         handleDataChange={mockHandleDataChange}
         isValid={mockIsValid}
         readOnly={mockReadOnly}
+        {...({} as IComponentProps)}
       />,
     );
     expect(wrapper.find('textarea').hasClass('disabled')).toBe(false);
@@ -66,20 +69,21 @@ describe('>>> components/base/TextAreaComponent.tsx', () => {
         handleDataChange={mockHandleDataChange}
         isValid={mockIsValid}
         readOnly={true}
+        {...({} as IComponentProps)}
       />,
     );
     expect(wrapper.find('textarea').hasClass('disabled')).toBe(true);
     expect(wrapper.find('textarea').prop('readOnly')).toBe(true);
   });
 
-  function renderTextAreaComponent(props: Partial<ITextAreaComponentProps> = {}) {
-    const defaultProps: ITextAreaComponentProps = {
+  function renderTextAreaComponent(props: Partial<IComponentProps> = {}) {
+    const defaultProps: IComponentProps = {
       id: mockId,
       formData: mockFormData,
       handleDataChange: mockHandleDataChange,
       isValid: mockIsValid,
       readOnly: mockReadOnly,
-    };
+    } as IComponentProps;
 
     return render(<TextAreaComponent {...defaultProps} {...props}/>);
   }

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/presentation/NavigationButton.test.tsx

@@ -7,6 +7,7 @@ import { render, screen } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { getFormLayoutStateMock, getInitialStateMock } from '../../../__mocks__/mocks';
 import { NavigationButtons } from '../../../src/components/presentation/NavigationButtons';
+import { IComponentProps } from 'src/components';
 
 describe('>>> components/presentation/NavigationButton.tsx', () => {
   let mockStore;
@@ -92,6 +93,7 @@ describe('>>> components/presentation/NavigationButton.tsx', () => {
           id='nav-button-1'
           showBackButton={false}
           textResourceBindings={null}
+          {...({} as IComponentProps)}
         />
       </Provider>,
     );
@@ -107,6 +109,7 @@ describe('>>> components/presentation/NavigationButton.tsx', () => {
           id='nav-button-1'
           showBackButton={true}
           textResourceBindings={null}
+          {...({} as IComponentProps)}
         />
       </Provider>,
     );
@@ -136,6 +139,7 @@ describe('>>> components/presentation/NavigationButton.tsx', () => {
           id='nav-button-2'
           showBackButton={true}
           textResourceBindings={null}
+          {...({} as IComponentProps)}
         />
       </Provider>,
     );

src/Altinn.Apps/AppFrontend/react/altinn-app-frontend/__tests__/features/form/data/submitFormDataSagas.test.ts

@@ -53,7 +53,7 @@ describe('submitFormDataSagas', () => {
       formData: getFormDataStateMock({
         formData: {
           field1: 'value1',
-          field2: 123,
+          field2: '123',
         },
       }),
     };
@@ -89,9 +89,7 @@ describe('submitFormDataSagas', () => {
       },
       formData: {
         ...stateMock.formData,
-        formData: {
-          formData,
-        },
+        formData: formData,
       },
       formLayout: {
         ...stateMock.formLayout,
@@ -125,11 +123,13 @@ describe('submitFormDataSagas', () => {
         }],
       ])
       .call(saveStatelessData, state, model)
-      .put(FormDataActions.fetchFormDataFulfilled({ formData:
+      .put(FormDataActions.fetchFormDataFulfilled({
+        formData:
         {
           ...formData,
           'group.field1': 'value1',
-        } }))
+        }
+      }))
       .call(FormDynamicsActions.checkIfConditionalRulesShouldRun)
       .put(FormDataActions.submitFormDataFulfilled())
       .run();