Skip to content

Commit

Permalink
rename isSimpleComponent -> componentRendersItsOwnValidationErrors
Browse files Browse the repository at this point in the history 
Explains better how the function is used.
Also fix some minor type issues.

New interface IComponentProps

Previously all components had their own interface. It is better when
all share the common props from GenericComponent

```
export interface  IComponentProps extends IGenericComponentProps {
  handleDataChange: (value: string, key?:string) => void,
  handleFocusUpdate: (componentId: string, step?: number) => void,
  getTextResource: (key: string) => React.ReactNode,
  getTextResourceAsString: (key: string) => string,
  formData: any,
  isValid: boolean,
  language: any,
  shouldFocus: boolean,
  text: React.ReactNode,
  label: ()=>JSX.Element,
  legend: ()=>JSX.Element,
};
```

Make formData type stable and use .simpleBinding everywhere

Use React.ReactNode as type for getTextResource

Apply formatting corrections from code review

Co-authored-by: Steffen Lorang Ekeberg <steffen.ekeberg@gmail.com>

Use a proper key for AltinnMobileTable

Rename componentRendersItsOwnValidationErrors => componentValidationsHandledByGenericComponent

Fix missing `?.simpleBinding` in Components

Remove ITextAreaComponentProps to fix @typescript-eslint/no-empty-interface
  • Loading branch information
@ivarne
ivarne committed Jan 4, 2022
1 parent ba79444 commit 25c8529
Show file tree
Hide file tree
Showing 47 changed files with 185 additions and 282 deletions.
4 changes: 1 addition & 3 deletions ...Apps/AppFrontend/react/altinn-app-frontend/__tests__/components/GenericComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,7 @@ describe('>>> components/GenericComponent.tsx', () => {

const formData = getFormDataStateMock({
formData: {
mockId: {
mockDataBinding: 'value',
},
mockDataBinding: 'value',
},
});

Expand Down
11 changes: 10 additions & 1 deletion ...rontend/react/altinn-app-frontend/__tests__/components/advanced/AddressComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -48,6 +49,7 @@ describe('components > advanced > AddressComponent', () => {
required={mockRequired}
language={mockLanguage}
textResourceBindings={mocktextResourceBindings}
{...({} as IComponentProps)}
/>,
);
expect(shallowAddressComponent.find('input').length).toBe(3);
Expand All @@ -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);
Expand All @@ -88,6 +91,7 @@ describe('components > advanced > AddressComponent', () => {
required={mockRequired}
language={mockLanguage}
textResourceBindings={mocktextResourceBindings}
{...({} as IComponentProps)}
/>,
);
shallowAddressComponent.find('input').forEach((node: any) => {
Expand All @@ -110,6 +114,7 @@ describe('components > advanced > AddressComponent', () => {
required={mockRequired}
language={mockLanguage}
textResourceBindings={mocktextResourceBindings}
{...({} as IComponentProps)}
/>,
);
shallowAddressComponent.find('input').forEach((node: any) => {
Expand All @@ -133,6 +138,7 @@ describe('components > advanced > AddressComponent', () => {
required={false}
language={mockLanguage}
textResourceBindings={mocktextResourceBindings}
{...({} as IComponentProps)}
/>,
);
expect(shallowAddressComponent.find('span.label-optional')).toHaveLength(2);
Expand All @@ -154,6 +160,7 @@ describe('components > advanced > AddressComponent', () => {
labelSettings={{ optionalIndicator: false }}
language={mockLanguage}
textResourceBindings={mocktextResourceBindings}
{...({} as IComponentProps)}
/>,
);
expect(shallowAddressComponent.find('.label-optional')).toHaveLength(0);
Expand All @@ -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'}})
Expand All @@ -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: ''}})
Expand Down
2 changes: 1 addition & 1 deletion ...tend/react/altinn-app-frontend/__tests__/components/base/AttachmentListComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
3 changes: 3 additions & 0 deletions .../AppFrontend/react/altinn-app-frontend/__tests__/components/base/ButtonComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -61,6 +62,7 @@ describe('components/base/ButtonComponent.tsx', () => {
disabled={mockDisabled}
formDataCount={formDataCount}
language={mockLanguage}
{...({} as IComponentProps)}
/>
</Provider>
);
Expand All @@ -78,6 +80,7 @@ describe('components/base/ButtonComponent.tsx', () => {
disabled={mockDisabled}
formDataCount={formDataCount}
language={mockLanguage}
{...({} as IComponentProps)}
/>
</Provider>
);
Expand Down
2 changes: 2 additions & 0 deletions ...ppFrontend/react/altinn-app-frontend/__tests__/components/base/DropdownComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -47,6 +48,7 @@ describe('>>> components/base/DropdownComponent.tsx --- Snapshot', () => {
optionsId={mockOptionsId}
isValid={mockIsValid}
readOnly={false}
{...({} as IComponentProps)}
/>
</Provider>,
);
Expand Down
5 changes: 4 additions & 1 deletion ...Frontend/react/altinn-app-frontend/__tests__/components/base/FileUploadComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -79,6 +80,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
maxNumberOfAttachments={mockMaxNumberOfAttachments}
minNumberOfAttachments={mockMinNumberOfAttachments}
readOnly={mockReadOnly}
{...({} as IComponentProps)}
/>
</Provider>
);
Expand Down Expand Up @@ -207,6 +209,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
maxNumberOfAttachments={mockMaxNumberOfAttachments}
minNumberOfAttachments={mockMinNumberOfAttachments}
readOnly={mockReadOnly}
{...({} as IComponentProps)}
/>
</Provider>
);
Expand Down Expand Up @@ -272,7 +275,7 @@ describe('>>> components/base/FileUploadComponent.tsx', () => {
minNumberOfAttachments: mockMinNumberOfAttachments,
isValid: mockIsValid,
readOnly: mockReadOnly,
};
} as IFileUploadProps;

return render(
<Provider store={mockStore}>
Expand Down
3 changes: 2 additions & 1 deletion .../AppFrontend/react/altinn-app-frontend/__tests__/components/base/HeaderComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -16,7 +17,7 @@ const render = (props = {}) => {
language: {},
textResourceBindings: {},
...props,
};
} as IComponentProps;

rtlRender(<HeaderComponent {...allProps} />);
};
Expand Down
7 changes: 4 additions & 3 deletions ...s/AppFrontend/react/altinn-app-frontend/__tests__/components/base/InputComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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');
Expand All @@ -83,7 +84,7 @@ describe('components/base/InputComponent.tsx', () => {
isValid: mockIsValid,
readOnly: mockReadOnly,
required: mockRequired,
};
} as unknown as IInputProps;

return render(<InputComponent {...defaultProps} {...props}/>);
}
Expand Down
21 changes: 10 additions & 11 deletions ...pFrontend/react/altinn-app-frontend/__tests__/components/base/ParagraphComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}

Expand All @@ -28,6 +24,7 @@ describe('>>> components/base/ParagraphComponent.tsx --- Snapshot', () => {
language={mockLanguage}
getTextResource={mockGetTextResource}
textResourceBindings={mockTextResourceBindings}
{...({} as IComponentProps)}
/>,
);
expect(rendered).toMatchSnapshot();
Expand All @@ -40,6 +37,7 @@ describe('>>> components/base/ParagraphComponent.tsx --- Snapshot', () => {
language={mockLanguage}
getTextResource={mockGetTextResource}
textResourceBindings={mockTextResourceBindings}
{...({} as IComponentProps)}
/>,
);

Expand All @@ -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)}
/>,
);

Expand Down
12 changes: 8 additions & 4 deletions ...ppFrontend/react/altinn-app-frontend/__tests__/components/base/TextAreaComponent.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -30,6 +31,7 @@ describe('>>> components/base/TextAreaComponent.tsx', () => {
handleDataChange={mockHandleDataChange}
isValid={mockIsValid}
readOnly={mockReadOnly}
{...({} as IComponentProps)}
/>,
);
expect(rendered).toMatchSnapshot();
Expand All @@ -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);
Expand All @@ -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}/>);
}
Expand Down
4 changes: 4 additions & 0 deletions ...end/react/altinn-app-frontend/__tests__/components/presentation/NavigationButton.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -92,6 +93,7 @@ describe('>>> components/presentation/NavigationButton.tsx', () => {
id='nav-button-1'
showBackButton={false}
textResourceBindings={null}
{...({} as IComponentProps)}
/>
</Provider>,
);
Expand All @@ -107,6 +109,7 @@ describe('>>> components/presentation/NavigationButton.tsx', () => {
id='nav-button-1'
showBackButton={true}
textResourceBindings={null}
{...({} as IComponentProps)}
/>
</Provider>,
);
Expand Down Expand Up @@ -136,6 +139,7 @@ describe('>>> components/presentation/NavigationButton.tsx', () => {
id='nav-button-2'
showBackButton={true}
textResourceBindings={null}
{...({} as IComponentProps)}
/>
</Provider>,
);
Expand Down
12 changes: 6 additions & 6 deletions ...ontend/react/altinn-app-frontend/__tests__/features/form/data/submitFormDataSagas.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ describe('submitFormDataSagas', () => {
formData: getFormDataStateMock({
formData: {
field1: 'value1',
field2: 123,
field2: '123',
},
}),
};
Expand Down Expand Up @@ -89,9 +89,7 @@ describe('submitFormDataSagas', () => {
},
formData: {
...stateMock.formData,
formData: {
formData,
},
formData: formData,
},
formLayout: {
...stateMock.formLayout,
Expand Down Expand Up @@ -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();
Expand Down
Loading

0 comments on commit 25c8529

Please sign in to comment.