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..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 @@ -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,37 @@ 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', + ], + }, + 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: { @@ -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, @@ -82,4 +117,113 @@ 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 */ + 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`] >
    + > + +
    + > + +
    • 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..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) { @@ -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,11 @@ class Edit extends React.Component { inEditMode: false, }, }, () => { - this.handleSaveChange(this.state.component); + 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); + } this.props.sendItemToParent(this.state.listItem); FormDesignerActionDispatchers.deleteActiveListAction(); });