From 18c289c22a5b47aa4edec84f5db8ae614f7b4467 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 17 Dec 2020 06:35:18 -0700 Subject: [PATCH 1/3] [Maps] fix layer style editor is empty for EMS boundaries layer --- .../vector_style_editor.test.tsx.snap | 319 ++++++++++++++++++ .../components/vector_style_editor.test.tsx | 81 +++++ .../vector/components/vector_style_editor.tsx | 5 +- 3 files changed, 404 insertions(+), 1 deletion(-) create mode 100644 x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap create mode 100644 x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap new file mode 100644 index 0000000000000..87c6d05ddeb7e --- /dev/null +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap @@ -0,0 +1,319 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render 1`] = ` + + + + + + + + + + +`; + +exports[`should render with no style fields 1`] = ` + + + + + + + + + + +`; diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx new file mode 100644 index 0000000000000..958082d39f1fb --- /dev/null +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx @@ -0,0 +1,81 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; +import { VectorStyleEditor } from './vector_style_editor'; +import { getDefaultStaticProperties } from '../vector_style_defaults'; +import { IVectorLayer } from '../../../layers/vector_layer/vector_layer'; +import { IVectorSource } from '../../../sources/vector_source'; +import { FIELD_ORIGIN, VECTOR_SHAPE_TYPE } from '../../../../../common/constants'; +import { AbstractField, IField } from '../../../fields/field'; + +jest.mock('../../../../kibana_services', () => { + return { + getIsDarkMode() { + return false; + }, + }; +}); + +class MockField extends AbstractField {} + +function createLayerMock(numFields: number, supportedShapeTypes: VECTOR_SHAPE_TYPE[]) { + const fields: IField[] = []; + for (let i = 0; i < numFields; i++) { + fields.push(new MockField({ fieldName: `field${i}`, origin: FIELD_ORIGIN.SOURCE })); + } + return ({ + getStyleEditorFields: async () => { + return fields; + }, + getSource: () => { + return ({ + getSupportedShapeTypes: async () => { + return supportedShapeTypes; + }, + } as unknown) as IVectorSource; + }, + } as unknown) as IVectorLayer; +} + +const defaultProps = { + layer: createLayerMock(1, [VECTOR_SHAPE_TYPE.POLYGON]), + isPointsOnly: true, + isLinesOnly: false, + onIsTimeAwareChange: (isTimeAware: boolean) => {}, + handlePropertyChange: (propertyName: VECTOR_STYLES, stylePropertyDescriptor: unknown) => {}, + hasBorder: true, + styleProperties: getDefaultStaticProperties(), + isTimeAware: true, + showIsTimeAware: true, +}; + +// if (!this._isMounted || (_.isEqual(styleFields, this.state.styleFields) && this.state.styleFieldsHelper !== undefined)) { + +test('should render', async () => { + const component = shallow(); + + // Ensure all promises resolve + await new Promise((resolve) => process.nextTick(resolve)); + // Ensure the state changes are reflected + component.update(); + + expect(component).toMatchSnapshot(); +}); + +test('should render with no style fields', async () => { + const component = shallow( + + ); + + // Ensure all promises resolve + await new Promise((resolve) => process.nextTick(resolve)); + // Ensure the state changes are reflected + component.update(); + + expect(component).toMatchSnapshot(); +}); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx index 95e32f0e9969b..5d5ba2143677c 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx @@ -117,7 +117,10 @@ export class VectorStyleEditor extends Component { await this.props.layer.getStyleEditorFields() ); const styleFields = styleFieldsHelper.getStyleFields(); - if (!this._isMounted || _.isEqual(styleFields, this.state.styleFields)) { + if ( + !this._isMounted || + (_.isEqual(styleFields, this.state.styleFields) && this.state.styleFieldsHelper !== undefined) + ) { return; } From 1a1ce629554ea9fec31e6743d3bac51b5edfcd99 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 17 Dec 2020 06:37:48 -0700 Subject: [PATCH 2/3] remove cruft --- .../styles/vector/components/vector_style_editor.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx index 958082d39f1fb..d4085e8f80c70 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx @@ -54,8 +54,6 @@ const defaultProps = { showIsTimeAware: true, }; -// if (!this._isMounted || (_.isEqual(styleFields, this.state.styleFields) && this.state.styleFieldsHelper !== undefined)) { - test('should render', async () => { const component = shallow(); From 2471738d31d129f295f013e56aca8c394b141df4 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 17 Dec 2020 07:22:34 -0700 Subject: [PATCH 3/3] tslint --- .../vector_style_editor.test.tsx.snap | 36 +++++++++---------- .../components/vector_style_editor.test.tsx | 27 ++++++++++++-- 2 files changed, 42 insertions(+), 21 deletions(-) diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap index 87c6d05ddeb7e..312f8e5d91ffa 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap @@ -35,11 +35,11 @@ exports[`should render 1`] = ` onDynamicStyleChange={[Function]} onStaticStyleChange={[Function]} styleProperty={ - Object { - "options": Object { + StaticColorProperty { + "_options": Object { "color": "#54B399", }, - "type": "STATIC", + "_styleName": "fillColor", } } swatches={ @@ -93,11 +93,11 @@ exports[`should render 1`] = ` onDynamicStyleChange={[Function]} onStaticStyleChange={[Function]} styleProperty={ - Object { - "options": Object { + StaticColorProperty { + "_options": Object { "color": "#41937c", }, - "type": "STATIC", + "_styleName": "lineColor", } } swatches={ @@ -143,11 +143,11 @@ exports[`should render 1`] = ` onDynamicStyleChange={[Function]} onStaticStyleChange={[Function]} styleProperty={ - Object { - "options": Object { + StaticSizeProperty { + "_options": Object { "size": 1, }, - "type": "STATIC", + "_styleName": "lineWidth", } } /> @@ -194,11 +194,11 @@ exports[`should render with no style fields 1`] = ` onDynamicStyleChange={[Function]} onStaticStyleChange={[Function]} styleProperty={ - Object { - "options": Object { + StaticColorProperty { + "_options": Object { "color": "#54B399", }, - "type": "STATIC", + "_styleName": "fillColor", } } swatches={ @@ -242,11 +242,11 @@ exports[`should render with no style fields 1`] = ` onDynamicStyleChange={[Function]} onStaticStyleChange={[Function]} styleProperty={ - Object { - "options": Object { + StaticColorProperty { + "_options": Object { "color": "#41937c", }, - "type": "STATIC", + "_styleName": "lineColor", } } swatches={ @@ -292,11 +292,11 @@ exports[`should render with no style fields 1`] = ` onDynamicStyleChange={[Function]} onStaticStyleChange={[Function]} styleProperty={ - Object { - "options": Object { + StaticSizeProperty { + "_options": Object { "size": 1, }, - "type": "STATIC", + "_styleName": "lineWidth", } } /> diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx index d4085e8f80c70..982ffe53d6147 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.test.tsx @@ -6,12 +6,18 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { VectorStyleEditor } from './vector_style_editor'; +import { StyleProperties, VectorStyleEditor } from './vector_style_editor'; import { getDefaultStaticProperties } from '../vector_style_defaults'; import { IVectorLayer } from '../../../layers/vector_layer/vector_layer'; import { IVectorSource } from '../../../sources/vector_source'; -import { FIELD_ORIGIN, VECTOR_SHAPE_TYPE } from '../../../../../common/constants'; +import { + FIELD_ORIGIN, + LAYER_STYLE_TYPE, + VECTOR_SHAPE_TYPE, + VECTOR_STYLES, +} from '../../../../../common/constants'; import { AbstractField, IField } from '../../../fields/field'; +import { VectorStyle } from '../vector_style'; jest.mock('../../../../kibana_services', () => { return { @@ -42,6 +48,21 @@ function createLayerMock(numFields: number, supportedShapeTypes: VECTOR_SHAPE_TY } as unknown) as IVectorLayer; } +const vectorStyleDescriptor = { + type: LAYER_STYLE_TYPE.VECTOR, + properties: getDefaultStaticProperties(), + isTimeAware: true, +}; +const vectorStyle = new VectorStyle( + vectorStyleDescriptor, + ({} as unknown) as IVectorSource, + ({} as unknown) as IVectorLayer +); +const styleProperties: StyleProperties = {}; +vectorStyle.getAllStyleProperties().forEach((styleProperty) => { + styleProperties[styleProperty.getStyleName()] = styleProperty; +}); + const defaultProps = { layer: createLayerMock(1, [VECTOR_SHAPE_TYPE.POLYGON]), isPointsOnly: true, @@ -49,7 +70,7 @@ const defaultProps = { onIsTimeAwareChange: (isTimeAware: boolean) => {}, handlePropertyChange: (propertyName: VECTOR_STYLES, stylePropertyDescriptor: unknown) => {}, hasBorder: true, - styleProperties: getDefaultStaticProperties(), + styleProperties, isTimeAware: true, showIsTimeAware: true, };