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

#10026: fix functional tests for Interactive legend for TOC layers [WMS Support] #10249

Merged
merged 4 commits into from
Apr 24, 2024
Merged

#10026: fix functional tests for Interactive legend for TOC layers [WMS Support] #10249

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0e66ce1
#10026: fix Interactive legend for TOC layers [WMS Support]
mahmoudadel54 Apr 23, 2024
7d85735
#10026: fix Interactive legend for TOC layers [WMS Support]
mahmoudadel54 Apr 23, 2024
aa7ce53
#10026: fix Interactive legend for TOC layers [WMS Support]
mahmoudadel54 Apr 24, 2024
f5ea251
#10026: fix Interactive legend for TOC layers [WMS Support]
mahmoudadel54 Apr 24, 2024
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
8 changes: 5 additions & 3 deletions web/client/components/TOC/fragments/settings/Display.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
isMapOpen: PropTypes.bool
};

static defaultProps = {
onChange: () => {},
opacityText: <Message msgId="opacity"/>
opacityText: <Message msgId="opacity"/>,
isMapOpen: false
};

constructor(props) {
Expand Down Expand Up @@ -263,7 +265,7 @@ export default class extends React.Component {
<Col xs={12} className={"legend-label"}>
<label key="legend-options-title" className="control-label"><Message msgId="layerProperties.legendOptions.title" /></label>
</Col>
{ this.props.element?.serverType !== ServerTypes.NO_VENDOR &&
{ this.props.element?.serverType !== ServerTypes.NO_VENDOR && this.props?.isMapOpen &&
mahmoudadel54 marked this conversation as resolved.
Show resolved Hide resolved
<Col xs={12} className="first-selectize">
<Checkbox
data-qa="display-interactive-legend-option"
Expand Down
71 changes: 64 additions & 7 deletions web/client/components/TOC/fragments/settings/__tests__/Display-test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ describe('test Layer Properties Display module component', () => {
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',
Expand All @@ -70,7 +70,7 @@ describe('test Layer Properties Display module component', () => {
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(<Display element={l} settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
const comp = ReactDOM.render(<Display element={l} isMapOpen settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
expect(comp).toBeTruthy();
const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" );
expect(inputs).toBeTruthy();
Expand All @@ -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(<Display element={l} isMapOpen={false} settings={settings} onChange={handlers.onChange}/>, 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',
Expand Down Expand Up @@ -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',
Expand All @@ -242,7 +270,7 @@ describe('test Layer Properties Display module component', () => {
const handlers = {
onChange() {}
};
const comp = ReactDOM.render(<Display element={l} settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
const comp = ReactDOM.render(<Display element={l} isMapOpen settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
expect(comp).toBeTruthy();
const labels = ReactTestUtils.scryRenderedDOMComponentsWithClass( comp, "control-label" );
const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" );
Expand All @@ -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(<Display element={l} settings={settings} onChange={handlers.onChange}/>, 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',
Expand All @@ -281,7 +338,7 @@ describe('test Layer Properties Display module component', () => {
onChange() {}
};
let spy = expect.spyOn(handlers, "onChange");
const comp = ReactDOM.render(<Display element={l} settings={settings} onChange={handlers.onChange}/>, document.getElementById("container"));
const comp = ReactDOM.render(<Display element={l} settings={settings} isMapOpen onChange={handlers.onChange}/>, document.getElementById("container"));
expect(comp).toBeTruthy();
const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" );
const legendPreview = ReactTestUtils.scryRenderedDOMComponentsWithClass( comp, "legend-preview" );
Expand Down Expand Up @@ -359,7 +416,7 @@ describe('test Layer Properties Display module component', () => {
opacity: 1
}
};
const comp = ReactDOM.render(<Display element={l} settings={settings}/>, document.getElementById("container"));
const comp = ReactDOM.render(<Display element={l} isMapOpen settings={settings}/>, document.getElementById("container"));
mahmoudadel54 marked this conversation as resolved.
Show resolved Hide resolved
expect(comp).toBeTruthy();
const inputs = ReactTestUtils.scryRenderedDOMComponentsWithTag( comp, "input" );
expect(inputs).toBeTruthy();
Expand Down
10 changes: 6 additions & 4 deletions web/client/plugins/TOCItemsSettings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {
import { createPlugin } from '../utils/PluginsUtils';
import defaultSettingsTabs from './tocitemssettings/defaultSettingsTabs';
import { isCesium } from '../selectors/maptype';
import { showEditableFeatureCheckboxSelector } from "../selectors/map";
import { showEditableFeatureCheckboxSelector, isMapOnlyOpenedSelector } from "../selectors/map";
import { isAnnotationLayer } from './Annotations/utils/AnnotationsUtils';

const tocItemsSettingsSelector = createSelector([
Expand All @@ -44,8 +44,9 @@ const tocItemsSettingsSelector = createSelector([
elementSelector,
isLocalizedLayerStylesEnabledSelector,
isCesium,
showEditableFeatureCheckboxSelector
], (settings, groups, currentLocale, currentLocaleLanguage, dockStyle, isAdmin, activeTab, element, isLocalizedLayerStylesEnabled, isCesiumActive, showFeatureEditOption) => ({
showEditableFeatureCheckboxSelector,
isMapOnlyOpenedSelector
], (settings, groups, currentLocale, currentLocaleLanguage, dockStyle, isAdmin, activeTab, element, isLocalizedLayerStylesEnabled, isCesiumActive, showFeatureEditOption, isMapOpen) => ({
settings,
element,
groups,
Expand All @@ -56,7 +57,8 @@ const tocItemsSettingsSelector = createSelector([
activeTab,
isLocalizedLayerStylesEnabled,
isCesiumActive,
showFeatureEditOption
showFeatureEditOption,
isMapOpen
}));
mahmoudadel54 marked this conversation as resolved.
Show resolved Hide resolved

const SettingsButton = connect(() => ({}), {
Expand Down
4 changes: 4 additions & 0 deletions web/client/selectors/map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,3 +156,7 @@ export const identifyFloatingToolSelector = (state) => {
return mouseMoveListenerSelector(state).includes('identifyFloatingTool') || state.mode === "embedded" || (state.mapPopups?.popups && detectIdentifyInMapPopUp(state));
};

export const isMapOnlyOpenedSelector = (state) => {
// state?.mapEditor?.onwer --> to exclude geostory
return projectionSelector(state) && !state?.mapEditor?.owner;
};
mahmoudadel54 marked this conversation as resolved.
Show resolved Hide resolved
1 change: 1 addition & 0 deletions web/client/utils/LayersUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 } : {},
Expand Down
Loading