Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug/1247-optional-fields #2217

Merged
merged 6 commits into from
Jul 18, 2019
+232 −30
Merged

bug/1247-optional-fields #2217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9e29352
fix for optional fields
malmil Jul 16, 2019
6a72432
console log deleted
malmil Jul 17, 2019
8092f2f
Merge branch 'master' into bug/1247-optional-fields
malmil Jul 17, 2019
9544f9d
var-fix
malmil Jul 17, 2019
f49631d
jest tests
malmil Jul 18, 2019
2768c3f
more tests
malmil Jul 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 148 additions & 4 deletions src/react-apps/applications/ux-editor/__tests__/containers/EditContainer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
/* tslint:disable:jsx-wrap-multiline */
import { mount } from 'enzyme';
import 'jest';
import * as React from 'react';
import { Provider } from 'react-redux';
import * as renderer from 'react-test-renderer';
import configureStore from 'redux-mock-store';
import FormDesignerActionDispatchers from '../../src/actions/formDesignerActions/formDesignerActionDispatcher';
import { EditContainer } from '../../src/containers/EditContainer';
import { Edit, EditContainer } from '../../src/containers/EditContainer';

describe('>>> containers/EditContainer', () => {
let mockId: string;
Expand All @@ -18,23 +19,52 @@ describe('>>> containers/EditContainer', () => {
const initialState = {
appData: {
language: {
language: {},
language: {
ux_editor: {
modal_properties_data_model_helper: 'Lenke til datamodell',
},
general: {
for: 'for',
},
},
},
dataModel: {
model: [] as any[],
},
textResources: {
resources: [{ id: 'ServiceName', value: 'Test' }],
},
codeLists: {
codeLists: [] as any[],
},
},
formDesigner: {
layout: {
activeList: [{
firstInActiveList: true,
id: '4a66b4ea-13f1-4187-864a-fd4bb6e8cf88',
inEditMode: false,
inEditMode: true,
lastInActiveList: true,
}],
order: {
'd70339c4-bb2d-4c09-b786-fed3622d042c': [
'4a66b4ea-13f1-4187-864a-fd4bb6e8cf88',
],
},
components: {
'4a66b4ea-13f1-4187-864a-fd4bb6e8cf88': {
id: '4a66b4ea-13f1-4187-864a-fd4bb6e8cf88',
componentType: 2,
dataModelBindings: {},
itemType: 'COMPONENT',
readOnly: false,
required: false,
textResourceBindings: {
title: 'Input',
},
type: 'Input',
},
},
},
},
serviceConfigurations: {
Expand All @@ -43,10 +73,15 @@ describe('>>> containers/EditContainer', () => {
connections: null as any,
},
},
thirdPartyComponents: {
components: null as any,
},
};

mockId = 'mockId';
mockId = '4a66b4ea-13f1-4187-864a-fd4bb6e8cf88';
mockComponent = {
id: '4a66b4ea-13f1-4187-864a-fd4bb6e8cf88',
componentType: 2,
dataModelBindings: {},
itemType: 'COMPONENT',
readOnly: false,
Expand Down Expand Up @@ -82,4 +117,113 @@ describe('>>> containers/EditContainer', () => {
);
expect(rendered).toMatchSnapshot();
});
it('+++ should run handleSetActive when clicked', () => {
const mountedEditContainer = mount(
<Provider store={mockStore}>
<EditContainer
component={mockComponent}
id={mockId}
firstInActiveList={false}
lastInActiveList={false}
sendItemToParent={mockHandleActiveListChange}
singleSelected={false}
>
<div />
</EditContainer>
</Provider>,
);
const instance = mountedEditContainer.find('Edit').instance() as Edit;
const spy = jest.spyOn(instance, 'handleSetActive');
const listItem = mountedEditContainer.find('Edit').find('li').first();

listItem.simulate('click');
listItem.simulate('click');
instance.forceUpdate();
expect(spy).toHaveBeenCalled();
});
it('+++ should show elements when isEditMode and run handleSave when CheckBtn is clicked', () => {
const mountedEditContainer = mount(
<Provider store={mockStore}>
<EditContainer
component={mockComponent}
id={mockId}
firstInActiveList={false}
lastInActiveList={false}
sendItemToParent={mockHandleActiveListChange}
singleSelected={false}
>
<div />
</EditContainer>
</Provider>,
);
const instance = mountedEditContainer.find('Edit').instance() as Edit;
instance.setState({isEditMode: true});
instance.forceUpdate();
mountedEditContainer.update();
/* Check if html has updated */
expect(instance.state.isEditMode).toEqual(true);
expect(mountedEditContainer.find('Edit').find('i').last().hasClass('fa-circlecheck')).toEqual(true);

/* Click on checkBtn */
instance.setState({component: {
id: '4a66b4ea-13f1-4187-864a-fd4bb6e8cf88',
componentType: 2,
dataModelBindings: {},
itemType: 'COMPONENT',
readOnly: false,
required: true,
textResourceBindings: {
title: 'Input',
},
type: 'Input',
}});
instance.forceUpdate();
mountedEditContainer.update();
const checkBtn = mountedEditContainer.find('Edit').find('button').last();
checkBtn.simulate('click');
instance.forceUpdate();
expect(instance.state.isEditMode).toEqual(false);
});
it('+++ should run handleSaveChange', () => {
const mountedEditContainer = mount(
<Provider store={mockStore}>
<EditContainer
component={mockComponent}
id={mockId}
firstInActiveList={false}
lastInActiveList={false}
sendItemToParent={mockHandleActiveListChange}
singleSelected={false}
>
<div />
</EditContainer>
</Provider>,
);
const instance = mountedEditContainer.find('Edit').instance() as Edit;
const spy = jest.spyOn(instance, 'handleSaveChange');
instance.setState({
isEditMode: true,
component: {
id: '4a66b4ea-13f1-4187-864a-fd4bb6e8cf88',
componentType: 2,
dataModelBindings: {
simpleBinding: 'skattyterinforgrp5801.infogrp5802.oppgavegiverNavnPreutfyltdatadef25795.value',
},
itemType: 'COMPONENT',
readOnly: false,
required: true,
textResourceBindings: {
title: 'Input',
},
type: 'Input',
}});
instance.forceUpdate();
mountedEditContainer.update();

const checkBtn = mountedEditContainer.find('Edit').find('button').last();
checkBtn.simulate('click');
instance.forceUpdate();
expect(instance.state.isEditMode).toEqual(false);
expect(spy).toHaveBeenCalled();
});
});
66 changes: 63 additions & 3 deletions ...pps/applications/ux-editor/__tests__/containers/__snapshots__/EditContainer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`>>> containers/EditContainer >>> Capture snapshot of EditContainer 1`]
className="Connect-Edit--noOutline-14"
>
<li
className="MuiListItem-root-117 MuiListItem-default-120 MuiListItem-gutters-125 Connect-Edit--formComponent-4"
className="MuiListItem-root-117 MuiListItem-default-120 MuiListItem-gutters-125 Connect-Edit--active-1"
disabled={false}
onClick={[Function]}
onKeyPress={[Function]}
Expand All @@ -39,10 +39,70 @@ exports[`>>> containers/EditContainer >>> Capture snapshot of EditContainer 1`]
>
<div
className="MuiGrid-item-21 MuiGrid-grid-xs-12-60"
/>
>
<button
className="MuiButtonBase-root-135 MuiIconButton-root-129 Connect-Edit--formComponentsBtn-5 Connect-Edit--specialBtn-15"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<span
className="MuiIconButton-label-134"
>
<i
className="fa fa-circletrash"
/>
</span>
<span
className="MuiTouchRipple-root-138"
/>
</button>
</div>
<div
className="MuiGrid-item-21 MuiGrid-grid-xs-12-60"
/>
>
<button
className="MuiButtonBase-root-135 MuiIconButton-root-129 Connect-Edit--formComponentsBtn-5"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<span
className="MuiIconButton-label-134"
>
<i
className="fa fa-edit"
/>
</span>
<span
className="MuiTouchRipple-root-138"
/>
</button>
</div>
</div>
</div>
</div>
Expand Down
13 changes: 9 additions & 4 deletions src/react-apps/applications/ux-editor/src/components/config/EditModalContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -583,8 +583,12 @@ export class EditModalContentComponent extends React.Component<IEditModalContent
}

public getMinOccursFromDataModel = (dataBindingName: string): number => {
const element: IDataModelFieldElement = this.props.dataModel.find((e: IDataModelFieldElement) =>
e.DataBindingName === dataBindingName);
const parentComponent = dataBindingName.replace('.value', '');
const element: IDataModelFieldElement = this.props.dataModel.find((e: IDataModelFieldElement) => {
const firstPeriod = e.ID.indexOf('.');
const elementDataBindingName = e.ID.substr(firstPeriod + 1, e.ID.length - (firstPeriod + 1));
return elementDataBindingName.toLowerCase() === parentComponent.toLowerCase();
});
return element.MinOccurs;
}

Expand Down Expand Up @@ -653,18 +657,19 @@ export class EditModalContentComponent extends React.Component<IEditModalContent
dataModelBinding = {};
}
dataModelBinding[key] = selectedDataModelElement;
if (this.getMinOccursFromDataModel(selectedDataModelElement) === 1) {
if (this.getMinOccursFromDataModel(selectedDataModelElement) === 0) {
this.setState({
component: {
...this.state.component,
required: true,
required: false,
dataModelBindings: dataModelBinding,
},
}, () => this.props.handleComponentUpdate(this.state.component));
} else {
this.setState({
component: {
...this.state.component,
required: true,
dataModelBindings: dataModelBinding,
},
}, () => this.props.handleComponentUpdate(this.state.component));
Expand Down
8 changes: 4 additions & 4 deletions src/react-apps/applications/ux-editor/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const schemaComponents: IComponent[] = [
Tag: InputComponent,
Type: ComponentTypes.Input,
customProperties: {
required: false,
required: true,
readOnly: false,
},
Icon: componentIcons.Input,
Expand All @@ -84,7 +84,7 @@ export const schemaComponents: IComponent[] = [
Tag: TextAreaComponent,
Type: ComponentTypes.TextArea,
customProperties: {
required: false,
required: true,
readOnly: false,
},
Icon: componentIcons.TextArea,
Expand All @@ -96,7 +96,7 @@ export const schemaComponents: IComponent[] = [
Icon: componentIcons.Checkboxes,
customProperties: {
options: [],
required: false,
required: true,
readOnly: false,
},
},
Expand All @@ -107,7 +107,7 @@ export const schemaComponents: IComponent[] = [
Icon: componentIcons.RadioButtons,
customProperties: {
options: [],
required: false,
required: true,
readOnly: false,
},
},
Expand Down
12 changes: 0 additions & 12 deletions ...t-apps/applications/ux-editor/src/components/rightDrawerMenu/CollapsibleMenuComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,15 +72,6 @@ const CollapsibleMenus = (props: ICollapsableMenuProps) => {
setComponent(props.components[props.componentId]);
}, [props]);

const getMinOccursFromDataModel = (dataBindingName: string): boolean => {
if (dataBindingName) {
const element: IDataModelFieldElement = props.dataModel.find((e: IDataModelFieldElement) =>
e.DataBindingName === dataBindingName);
return element ? element.MinOccurs === 1 : false;
}
return false;
};

const toggleMenu = () => {
setMenuIsOpen(!menuIsOpen);
};
Expand Down Expand Up @@ -139,9 +130,6 @@ const CollapsibleMenus = (props: ICollapsableMenuProps) => {
checked={!component.required}
onChangeFunction={toggleCheckbox('required')}
onKeyPressFunction={handleKeyPress(toggleCheckbox('required'))}
disabled={getMinOccursFromDataModel(component.dataModelBindings ?
(component.dataModelBindings.simpleBinding ? component.dataModelBindings.simpleBinding : null)
: null)}
/>
{props.language.general.optional}
</ListItem>
Expand Down
Loading