From 67252e29937f7dd143cac09bf02e8dbfe57e3f38 Mon Sep 17 00:00:00 2001 From: mahmoud adel <58145645+mahmoudadel54@users.noreply.github.com> Date: Wed, 24 Apr 2024 15:36:36 +0200 Subject: [PATCH] #10026: fix functional tests for Interactive legend for TOC layers [WMS Support] (#10249) --- .../TOC/fragments/settings/Display.jsx | 8 ++- .../settings/__tests__/Display-test.jsx | 63 ++++++++++++++++++- .../widgets/builder/wizard/map/NodeEditor.jsx | 1 + web/client/plugins/TOCItemsSettings.jsx | 1 + .../plugins/mapEditor/DefaultConfiguration.js | 7 ++- web/client/utils/LayersUtils.js | 1 + 6 files changed, 74 insertions(+), 7 deletions(-) diff --git a/web/client/components/TOC/fragments/settings/Display.jsx b/web/client/components/TOC/fragments/settings/Display.jsx index 130b6b064d..3b00af2926 100644 --- a/web/client/components/TOC/fragments/settings/Display.jsx +++ b/web/client/components/TOC/fragments/settings/Display.jsx @@ -38,12 +38,14 @@ export default class extends React.Component { isCesiumActive: PropTypes.bool, projection: PropTypes.string, resolutions: PropTypes.array, - zoom: PropTypes.number + zoom: PropTypes.number, + hideInteractiveLegendOption: PropTypes.bool }; static defaultProps = { onChange: () => {}, - opacityText: + opacityText: , + hideInteractiveLegendOption: false }; constructor(props) { @@ -263,7 +265,7 @@ export default class extends React.Component { - { this.props.element?.serverType !== ServerTypes.NO_VENDOR && + { this.props.element?.serverType !== ServerTypes.NO_VENDOR && !this.props?.hideInteractiveLegendOption && { ReactTestUtils.Simulate.focus(inputs[0]); expect(inputs[0].value).toBe('100'); }); - it('tests Display component for wms', () => { + it('tests Display component for wms for map viewer', () => { const l = { name: 'layer00', title: 'Layer', @@ -80,6 +80,34 @@ describe('test Layer Properties Display module component', () => { inputs[8].click(); expect(spy.calls.length).toBe(1); }); + it('tests Display component for wms for dashboard or geostory', () => { + const l = { + name: 'layer00', + title: 'Layer', + visibility: true, + storeIndex: 9, + type: 'wms', + url: 'fakeurl' + }; + const settings = { + options: {opacity: 0.7} + }; + const handlers = { + onChange() {} + }; + let spy = expect.spyOn(handlers, "onChange"); + // wrap in a stateful component, stateless components render return null + // see: https://facebook.github.io/react/docs/top-level-api.html#reactdom.render + const comp = ReactDOM.render(, document.getElementById("container")); + expect(comp).toBeTruthy(); + const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" ); + expect(inputs).toBeTruthy(); + expect(inputs.length).toBe(13); + ReactTestUtils.Simulate.focus(inputs[2]); + expect(inputs[2].value).toBe('70'); + inputs[8].click(); + expect(spy.calls.length).toBe(1); + }); it('tests Display component for wms with format fetch', (done) => { const l = { name: 'layer00', @@ -227,7 +255,7 @@ describe('test Layer Properties Display module component', () => { expect(spyOn.calls[0].arguments).toEqual([ 'forceProxy', true ]); }); - it('tests Layer Properties Legend component', () => { + it('tests Layer Properties Legend component for map viewer only', () => { const l = { name: 'layer00', title: 'Layer', @@ -257,7 +285,36 @@ describe('test Layer Properties Display module component', () => { expect(labels[6].innerText).toBe("layerProperties.legendOptions.legendHeight"); expect(labels[7].innerText).toBe("layerProperties.legendOptions.legendPreview"); }); - + it('tests Layer Properties Legend component for dashboard or geostory', () => { + const l = { + name: 'layer00', + title: 'Layer', + visibility: true, + storeIndex: 9, + type: 'wms', + url: 'fakeurl' + }; + const settings = { + options: {opacity: 1} + }; + const handlers = { + onChange() {} + }; + const comp = ReactDOM.render(, document.getElementById("container")); + expect(comp).toBeTruthy(); + const labels = ReactTestUtils.scryRenderedDOMComponentsWithClass( comp, "control-label" ); + const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" ); + const legendWidth = inputs[11]; + const legendHeight = inputs[12]; + // Default legend values + expect(legendWidth.value).toBe('12'); + expect(legendHeight.value).toBe('12'); + expect(labels.length).toBe(8); + expect(labels[4].innerText).toBe("layerProperties.legendOptions.title"); + expect(labels[5].innerText).toBe("layerProperties.legendOptions.legendWidth"); + expect(labels[6].innerText).toBe("layerProperties.legendOptions.legendHeight"); + expect(labels[7].innerText).toBe("layerProperties.legendOptions.legendPreview"); + }); it('tests Layer Properties Legend component events', () => { const l = { name: 'layer00', diff --git a/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx b/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx index f0ad36cff7..75a900f69c 100644 --- a/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx +++ b/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx @@ -41,6 +41,7 @@ export default ({ {tabs.filter(tab => tab.id && tab.id === activeTab).filter(tab => tab.Component).map(tab => ( ({}), { * @prop cfg.hideTitleTranslations {bool} if true hide the title translations tool * @prop cfg.showTooltipOptions {bool} if true, it shows tooltip section * @prop cfg.initialActiveTab {string} tab that will be enabled initially when the settings are opened. Possible values: + * @prop cfg.hideInteractiveLegendOption {bool} if true, it hide the checkbox of enable interactive legend in display tab * 'general' (General tab), 'display' (Display tab), 'style' (Style tab), 'feature' (Feature info tab). * @example * { diff --git a/web/client/plugins/mapEditor/DefaultConfiguration.js b/web/client/plugins/mapEditor/DefaultConfiguration.js index 14f2959489..d8cb7505b0 100644 --- a/web/client/plugins/mapEditor/DefaultConfiguration.js +++ b/web/client/plugins/mapEditor/DefaultConfiguration.js @@ -64,7 +64,12 @@ export default { } }, "AddGroup", "MapFooter", - "TOCItemsSettings", + { + "name": "TOCItemsSettings", + "cfg": { + "hideInteractiveLegendOption": true + } + }, "MapImport", "MapExport", { diff --git a/web/client/utils/LayersUtils.js b/web/client/utils/LayersUtils.js index 09438d372c..f80ad6b938 100644 --- a/web/client/utils/LayersUtils.js +++ b/web/client/utils/LayersUtils.js @@ -709,6 +709,7 @@ export const saveLayer = (layer) => { version: layer.version, expanded: layer.expanded || false }, + layer?.enableInteractiveLegend !== undefined ? { enableInteractiveLegend: layer?.enableInteractiveLegend } : {}, layer.sources ? { sources: layer.sources } : {}, layer.heightOffset ? { heightOffset: layer.heightOffset } : {}, layer.params ? { params: layer.params } : {},