From 9e29352ed7726ffc5040d37f9f59ecc0709601cb Mon Sep 17 00:00:00 2001 From: milmal Date: Tue, 16 Jul 2019 16:51:39 +0200 Subject: [PATCH 1/5] fix for optional fields --- .../src/components/config/EditModalContent.tsx | 13 +++++++++---- .../applications/ux-editor/src/components/index.ts | 8 ++++---- .../rightDrawerMenu/CollapsibleMenuComponent.tsx | 12 ------------ .../ux-editor/src/containers/EditContainer.tsx | 9 ++++++++- 4 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/react-apps/applications/ux-editor/src/components/config/EditModalContent.tsx b/src/react-apps/applications/ux-editor/src/components/config/EditModalContent.tsx index 1d7cbf52c03..20c23c80fb1 100644 --- a/src/react-apps/applications/ux-editor/src/components/config/EditModalContent.tsx +++ b/src/react-apps/applications/ux-editor/src/components/config/EditModalContent.tsx @@ -583,8 +583,12 @@ export class EditModalContentComponent extends React.Component { - 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; } @@ -653,11 +657,11 @@ export class EditModalContentComponent extends React.Component this.props.handleComponentUpdate(this.state.component)); @@ -665,6 +669,7 @@ export class EditModalContentComponent extends React.Component this.props.handleComponentUpdate(this.state.component)); diff --git a/src/react-apps/applications/ux-editor/src/components/index.ts b/src/react-apps/applications/ux-editor/src/components/index.ts index 6661e6d27d8..74d486221e1 100644 --- a/src/react-apps/applications/ux-editor/src/components/index.ts +++ b/src/react-apps/applications/ux-editor/src/components/index.ts @@ -74,7 +74,7 @@ export const schemaComponents: IComponent[] = [ Tag: InputComponent, Type: ComponentTypes.Input, customProperties: { - required: false, + required: true, readOnly: false, }, Icon: componentIcons.Input, @@ -84,7 +84,7 @@ export const schemaComponents: IComponent[] = [ Tag: TextAreaComponent, Type: ComponentTypes.TextArea, customProperties: { - required: false, + required: true, readOnly: false, }, Icon: componentIcons.TextArea, @@ -96,7 +96,7 @@ export const schemaComponents: IComponent[] = [ Icon: componentIcons.Checkboxes, customProperties: { options: [], - required: false, + required: true, readOnly: false, }, }, @@ -107,7 +107,7 @@ export const schemaComponents: IComponent[] = [ Icon: componentIcons.RadioButtons, customProperties: { options: [], - required: false, + required: true, readOnly: false, }, }, diff --git a/src/react-apps/applications/ux-editor/src/components/rightDrawerMenu/CollapsibleMenuComponent.tsx b/src/react-apps/applications/ux-editor/src/components/rightDrawerMenu/CollapsibleMenuComponent.tsx index b01b9c0aad2..a79f49f939f 100644 --- a/src/react-apps/applications/ux-editor/src/components/rightDrawerMenu/CollapsibleMenuComponent.tsx +++ b/src/react-apps/applications/ux-editor/src/components/rightDrawerMenu/CollapsibleMenuComponent.tsx @@ -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); }; @@ -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} diff --git a/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx b/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx index 2526100ae32..09163caac56 100644 --- a/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx +++ b/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx @@ -261,7 +261,14 @@ class Edit extends React.Component { inEditMode: false, }, }, () => { - this.handleSaveChange(this.state.component); + console.log(this.state.component, this.props.component); + /* tslint:disable:no-var-keyword prefer-const */ + var {required, ...restState} = this.state.component; + var {required, ...restProps} = this.props.component; + /* tslint:enable:no-var-keyword prefer-const */ + if (JSON.stringify(restState) !== JSON.stringify(restProps)) { + this.handleSaveChange(this.state.component); + } this.props.sendItemToParent(this.state.listItem); FormDesignerActionDispatchers.deleteActiveListAction(); }); From 6a72432a75492fe320d38c2c1860949ea2104315 Mon Sep 17 00:00:00 2001 From: milmal Date: Wed, 17 Jul 2019 09:25:30 +0200 Subject: [PATCH 2/5] console log deleted --- .../applications/ux-editor/src/containers/EditContainer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx b/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx index 09163caac56..7143ad323b8 100644 --- a/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx +++ b/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx @@ -198,7 +198,8 @@ class Edit extends React.Component { } public handleComponentDelete = (e: any): void => { - if (this.props.activeList.length > 1) { + const activeListLength = this.props.activeList.length; + if (activeListLength > 1) { this.props.activeList.forEach((component: any) => { FormDesignerActionDispatchers.deleteFormComponent(component.id); }); @@ -261,7 +262,6 @@ class Edit extends React.Component { inEditMode: false, }, }, () => { - console.log(this.state.component, this.props.component); /* tslint:disable:no-var-keyword prefer-const */ var {required, ...restState} = this.state.component; var {required, ...restProps} = this.props.component; From 9544f9d3bf9e15e52bd6368c4d13a16c79c894f1 Mon Sep 17 00:00:00 2001 From: milmal Date: Wed, 17 Jul 2019 09:45:42 +0200 Subject: [PATCH 3/5] var-fix --- .../applications/ux-editor/src/containers/EditContainer.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx b/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx index 7143ad323b8..8c92c1339ea 100644 --- a/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx +++ b/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx @@ -262,10 +262,8 @@ class Edit extends React.Component { inEditMode: false, }, }, () => { - /* tslint:disable:no-var-keyword prefer-const */ - var {required, ...restState} = this.state.component; - var {required, ...restProps} = this.props.component; - /* tslint:enable:no-var-keyword prefer-const */ + const {required: requiredState, ...restState} = this.state.component; + const {required: requiredProps, ...restProps} = this.props.component; if (JSON.stringify(restState) !== JSON.stringify(restProps)) { this.handleSaveChange(this.state.component); } From f49631d97fe17c59452a3ad4d63d361a62204b44 Mon Sep 17 00:00:00 2001 From: milmal Date: Thu, 18 Jul 2019 09:13:37 +0200 Subject: [PATCH 4/5] jest tests --- .../containers/EditContainer.test.tsx | 78 ++++++++++++++++++- .../src/containers/EditContainer.tsx | 2 +- 2 files changed, 76 insertions(+), 4 deletions(-) diff --git a/src/react-apps/applications/ux-editor/__tests__/containers/EditContainer.test.tsx b/src/react-apps/applications/ux-editor/__tests__/containers/EditContainer.test.tsx index 533fd664e4b..7b7d0c35950 100644 --- a/src/react-apps/applications/ux-editor/__tests__/containers/EditContainer.test.tsx +++ b/src/react-apps/applications/ux-editor/__tests__/containers/EditContainer.test.tsx @@ -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; @@ -18,7 +19,14 @@ 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[], @@ -26,15 +34,23 @@ describe('>>> containers/EditContainer', () => { 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', + ], + }, }, }, serviceConfigurations: { @@ -43,6 +59,9 @@ describe('>>> containers/EditContainer', () => { connections: null as any, }, }, + thirdPartyComponents: { + components: null as any, + }, }; mockId = 'mockId'; @@ -82,4 +101,57 @@ describe('>>> containers/EditContainer', () => { ); expect(rendered).toMatchSnapshot(); }); + it('+++ should run handleSetActive when clicked', () => { + const mountedEditContainer = mount( + + +
+ + , + ); + 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( + + +
+ + , + ); + 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 */ + const checkBtn = mountedEditContainer.find('Edit').find('button').last(); + checkBtn.simulate('click'); + instance.forceUpdate(); + expect(instance.state.isEditMode).toEqual(false); + }); }); diff --git a/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx b/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx index 8c92c1339ea..d771b32dc8e 100644 --- a/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx +++ b/src/react-apps/applications/ux-editor/src/containers/EditContainer.tsx @@ -163,7 +163,7 @@ export interface IEditContainerState { activeList: any; } -class Edit extends React.Component { +export class Edit extends React.Component { constructor(_props: IEditContainerProps, _state: IEditContainerState) { super(_props, _state); if (!_props.component.textResourceBindings) { From 2768c3fa661b1f3359f5928f9669347b77a258ae Mon Sep 17 00:00:00 2001 From: milmal Date: Thu, 18 Jul 2019 10:24:34 +0200 Subject: [PATCH 5/5] more tests --- .../containers/EditContainer.test.tsx | 74 ++++++++++++++++++- .../__snapshots__/EditContainer.test.tsx.snap | 66 ++++++++++++++++- 2 files changed, 136 insertions(+), 4 deletions(-) diff --git a/src/react-apps/applications/ux-editor/__tests__/containers/EditContainer.test.tsx b/src/react-apps/applications/ux-editor/__tests__/containers/EditContainer.test.tsx index 7b7d0c35950..17b92ad0599 100644 --- a/src/react-apps/applications/ux-editor/__tests__/containers/EditContainer.test.tsx +++ b/src/react-apps/applications/ux-editor/__tests__/containers/EditContainer.test.tsx @@ -51,6 +51,20 @@ describe('>>> containers/EditContainer', () => { '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: { @@ -64,8 +78,10 @@ describe('>>> containers/EditContainer', () => { }, }; - mockId = 'mockId'; + mockId = '4a66b4ea-13f1-4187-864a-fd4bb6e8cf88'; mockComponent = { + id: '4a66b4ea-13f1-4187-864a-fd4bb6e8cf88', + componentType: 2, dataModelBindings: {}, itemType: 'COMPONENT', readOnly: false, @@ -149,9 +165,65 @@ describe('>>> containers/EditContainer', () => { 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( + + +
+ + , + ); + 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(); }); }); diff --git a/src/react-apps/applications/ux-editor/__tests__/containers/__snapshots__/EditContainer.test.tsx.snap b/src/react-apps/applications/ux-editor/__tests__/containers/__snapshots__/EditContainer.test.tsx.snap index 781396d4880..6f4e026e25b 100644 --- a/src/react-apps/applications/ux-editor/__tests__/containers/__snapshots__/EditContainer.test.tsx.snap +++ b/src/react-apps/applications/ux-editor/__tests__/containers/__snapshots__/EditContainer.test.tsx.snap @@ -14,7 +14,7 @@ exports[`>>> containers/EditContainer >>> Capture snapshot of EditContainer 1`] className="Connect-Edit--noOutline-14" >
  • >> containers/EditContainer >>> Capture snapshot of EditContainer 1`] >
    + > + +
    + > + +