ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-25 07:30:00 +00:00
Code Issues Projects Releases Wiki Activity

Improve tests (#854)

Browse Source 
Recover commented out tests, 
Improve usage of helper in driver, 
Added data-wd-key for test to use instead of classes
Moved all non tsx file to a single folder (lib) instead of lib and utils

---------

Co-authored-by: Yuri Astrakhan <yuriastrakhan@gmail.com>
This commit is contained in:
Harel M
2023-12-27 10:19:59 +02:00
committed by GitHub
parent 09a1f3f87b
commit b784bf2b84
31 changed files with 62 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AppMessagePanel.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react'
import {formatLayerId} from '../util/format';
import {formatLayerId} from '../libs/format';
import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
type AppMessagePanelProps = {

2
src/components/AppToolbar.tsx
View File

@@ -36,6 +36,7 @@ class ToolbarLink extends React.Component<ToolbarLinkProps> {
href={this.props.href}
rel="noopener noreferrer"
target="_blank"
data-wd-key="toolbar:link"
>
{this.props.children}
</a>
@@ -56,6 +57,7 @@ class ToolbarLinkHighlighted extends React.Component<ToolbarLinkHighlightedProps
href={this.props.href}
rel="noopener noreferrer"
target="_blank"
data-wd-key="toolbar:link-highlighted"
>
<span className="maputnik-toolbar-link-wrapper">
{this.props.children}

1
src/components/FieldComment.tsx
View File

@@ -26,6 +26,7 @@ export default class FieldComment extends React.Component<FieldCommentProps> {
value={this.props.value}
onChange={this.props.onChange}
default="Comment..."
data-wd-key="layer-comment.input"
/>
</Block>
}

2
src/components/FieldFunction.tsx
View File

@@ -5,7 +5,7 @@ import DataProperty, { Stop } from './_DataProperty'
import ZoomProperty from './_ZoomProperty'
import ExpressionProperty from './_ExpressionProperty'
import {function as styleFunction} from '@maplibre/maplibre-gl-style-spec';
import {findDefaultFromSpec} from '../util/spec-helper';
import {findDefaultFromSpec} from '../libs/spec-helper';
function isLiteralExpression(value: any) {

1
src/components/FieldId.tsx
View File

@@ -20,6 +20,7 @@ export default class FieldId extends React.Component<FieldIdProps> {
<InputString
value={this.props.value}
onInput={this.props.onChange}
data-wd-key={this.props.wdKey + ".input"}
/>
</Block>
}

1
src/components/FieldMaxZoom.tsx
View File

@@ -23,6 +23,7 @@ export default class FieldMaxZoom extends React.Component<FieldMaxZoomProps> {
min={latest.layer.maxzoom.minimum}
max={latest.layer.maxzoom.maximum}
default={latest.layer.maxzoom.maximum}
data-wd-key="max-zoom.input"
/>
</Block>
}

1
src/components/FieldMinZoom.tsx
View File

@@ -23,6 +23,7 @@ export default class FieldMinZoom extends React.Component<FieldMinZoomProps> {
min={latest.layer.minzoom.minimum}
max={latest.layer.minzoom.maximum}
default={latest.layer.minzoom.minimum}
data-wd-key='min-zoom.input'
/>
</Block>
}

1
src/components/FieldType.tsx
View File

@@ -44,6 +44,7 @@ export default class FieldType extends React.Component<FieldTypeProps> {
]}
onChange={this.props.onChange}
value={this.props.value}
data-wd-key={this.props.wdKey + ".select"}
/>
}
</Block>

2
src/components/InputJson.tsx
View File

@@ -8,7 +8,7 @@ import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint.css'
import stringifyPretty from 'json-stringify-pretty-compact'
import '../util/codemirror-mgl';
import '../libs/codemirror-mgl';
export type InputJsonProps = {

6
src/components/InputNumber.tsx
View File

@@ -9,7 +9,7 @@ export type InputNumberProps = {
onChange?(value: number | undefined): unknown
allowRange?: boolean
rangeStep?: number
wdKey?: string
"data-wd-key"?: string
required?: boolean
"aria-label"?: string
};
@@ -197,6 +197,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
dirtyValue: this.state.value,
});
}}
data-wd-key={this.props["data-wd-key"] + "-range"}
/>
<input
key="text"
@@ -215,6 +216,8 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
this.setState({editing: false});
this.resetValue()
}}
data-wd-key={this.props["data-wd-key"] + "-text"}
/>
</div>
}
@@ -233,6 +236,7 @@ export default class InputNumber extends React.Component<InputNumberProps, Input
}}
onBlur={this.resetValue}
required={this.props.required}
data-wd-key={this.props["data-wd-key"]}
/>
}
}

2
src/components/LayerEditor.tsx
View File

@@ -18,7 +18,7 @@ import FieldSource from './FieldSource'
import FieldSourceLayer from './FieldSourceLayer'
import { changeType, changeProperty } from '../libs/layer'
import layout from '../config/layout.json'
import {formatLayerId} from '../util/format';
import {formatLayerId} from '../libs/format';
function getLayoutForType(type: LayerSpecification["type"]) {

4
src/components/_DataProperty.tsx
View File

@@ -10,9 +10,9 @@ import InputSelect from './InputSelect'
import Block from './Block'
import docUid from '../libs/document-uid'
import sortNumerically from '../libs/sort-numerically'
import {findDefaultFromSpec} from '../util/spec-helper';
import {findDefaultFromSpec} from '../libs/spec-helper';
import labelFromFieldName from './_labelFromFieldName'
import labelFromFieldName from '../libs/label-from-field-name'
import DeleteStopButton from './_DeleteStopButton'

2
src/components/_ExpressionProperty.tsx
View File

@@ -4,7 +4,7 @@ import stringifyPretty from 'json-stringify-pretty-compact'
import Block from './Block'
import InputButton from './InputButton'
import labelFromFieldName from './_labelFromFieldName'
import labelFromFieldName from '../libs/label-from-field-name'
import FieldJson from './FieldJson'

31
src/components/_FieldComment.tsx
View File

@@ -1,31 +0,0 @@
import React from 'react'
import Block from './Block'
import FieldString from './FieldString'
type BlockCommentProps = {
value?: string
onChange(...args: unknown[]): unknown
};
export default class BlockComment extends React.Component<BlockCommentProps> {
render() {
const fieldSpec = {
doc: "Comments for the current layer. This is non-standard and not in the spec."
};
return <Block
label={"Comments"}
fieldSpec={fieldSpec}
data-wd-key="layer-comment"
>
<FieldString
multi={true}
value={this.props.value}
onChange={this.props.onChange}
default="Comment..."
/>
</Block>
}
}

61
src/components/_FieldFont.tsx
View File

@@ -1,61 +0,0 @@
import React from 'react'
import Block from './Block'
import FieldAutocomplete from './FieldAutocomplete'
type FieldFontProps = {
value?: string[]
default?: string[]
fonts?: unknown[]
style?: object
onChange(...args: unknown[]): unknown
label?: string
};
export default class FieldFont extends React.Component<FieldFontProps> {
static defaultProps = {
fonts: []
}
get values() {
const out = this.props.value || this.props.default || [];
// Always put a "" in the last field to you can keep adding entries
if (out[out.length-1] !== ""){
return out.concat("");
}
else {
return out;
}
}
changeFont(idx: number, newValue: string) {
const changedValues = this.values.slice(0)
changedValues[idx] = newValue
const filteredValues = changedValues
.filter(v => v !== undefined)
.filter(v => v !== "")
this.props.onChange(filteredValues);
}
render() {
const inputs = this.values.map((value, i) => {
return <li
key={i}
>
<FieldAutocomplete
value={value}
options={this.props.fonts!.map(f => [f, f])}
onChange={this.changeFont.bind(this, i)}
/>
</li>
})
return <Block label={this.props.label}>
<ul className="maputnik-font">
{inputs}
</ul>
</Block>
}
}

27
src/components/_FieldId.tsx
View File

@@ -1,27 +0,0 @@
import React from 'react'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldString from './FieldString'
type BlockIdProps = {
value: string
wdKey: string
onChange(...args: unknown[]): unknown
error?: {message: string}
};
export default class BlockId extends React.Component<BlockIdProps> {
render() {
return <Block label={"ID"} fieldSpec={latest.layer.id}
data-wd-key={this.props.wdKey}
error={this.props.error}
>
<FieldString
value={this.props.value}
onChange={this.props.onChange}
/>
</Block>
}
}

30
src/components/_FieldMaxZoom.tsx
View File

@@ -1,30 +0,0 @@
import React from 'react'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldNumber from './FieldNumber'
type BlockMaxZoomProps = {
value?: number
onChange(...args: unknown[]): unknown
error?: {message: string}
};
export default class BlockMaxZoom extends React.Component<BlockMaxZoomProps> {
render() {
return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
error={this.props.error}
data-wd-key="max-zoom"
>
<FieldNumber
allowRange={true}
value={this.props.value}
onChange={this.props.onChange}
min={latest.layer.maxzoom.minimum}
max={latest.layer.maxzoom.maximum}
default={latest.layer.maxzoom.maximum}
/>
</Block>
}
}

30
src/components/_FieldMinZoom.tsx
View File

@@ -1,30 +0,0 @@
import React from 'react'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldNumber from './FieldNumber'
type BlockMinZoomProps = {
value?: number
onChange(...args: unknown[]): unknown
error?: {message: string}
};
export default class BlockMinZoom extends React.Component<BlockMinZoomProps> {
render() {
return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
error={this.props.error}
data-wd-key="min-zoom"
>
<FieldNumber
allowRange={true}
value={this.props.value}
onChange={this.props.onChange}
min={latest.layer.minzoom.minimum}
max={latest.layer.minzoom.maximum}
default={latest.layer.minzoom.minimum}
/>
</Block>
}
}

36
src/components/_FieldSource.tsx
View File

@@ -1,36 +0,0 @@
import React from 'react'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldAutocomplete from './FieldAutocomplete'
type BlockSourceProps = {
value?: string
wdKey?: string
onChange?(...args: unknown[]): unknown
sourceIds?: unknown[]
error?: {message: string}
};
export default class BlockSource extends React.Component<BlockSourceProps> {
static defaultProps = {
onChange: () => {},
sourceIds: [],
}
render() {
return <Block
label={"Source"}
fieldSpec={latest.layer.source}
error={this.props.error}
data-wd-key={this.props.wdKey}
>
<FieldAutocomplete
value={this.props.value}
onChange={this.props.onChange!}
options={this.props.sourceIds!.map(src => [src, src])}
/>
</Block>
}
}

34
src/components/_FieldSourceLayer.tsx
View File

@@ -1,34 +0,0 @@
import React from 'react'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldAutocomplete from './FieldAutocomplete'
type BlockSourceLayerProps = {
value?: string
onChange?(...args: unknown[]): unknown
sourceLayerIds?: unknown[]
isFixed?: boolean
};
export default class BlockSourceLayer extends React.Component<BlockSourceLayerProps> {
static defaultProps = {
onChange: () => {},
sourceLayerIds: [],
isFixed: false
}
render() {
return <Block label={"Source Layer"} fieldSpec={latest.layer['source-layer']}
data-wd-key="layer-source-layer"
>
<FieldAutocomplete
keepMenuWithinWindowBounds={!!this.props.isFixed}
value={this.props.value}
onChange={this.props.onChange!}
options={this.props.sourceLayerIds!.map(l => [l, l])}
/>
</Block>
}
}

25
src/components/_FieldSymbol.tsx
View File

@@ -1,25 +0,0 @@
import React from 'react'
import FieldAutocomplete from './FieldAutocomplete'
type FieldSymbolProps = {
value?: string
icons?: unknown[]
onChange(...args: unknown[]): unknown
};
export default class FieldSymbol extends React.Component<FieldSymbolProps> {
static defaultProps = {
icons: []
}
render() {
return <FieldAutocomplete
value={this.props.value}
options={this.props.icons!.map(f => [f, f])}
onChange={this.props.onChange}
/>
}
}

52
src/components/_FieldType.tsx
View File

@@ -1,52 +0,0 @@
import React from 'react'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldSelect from './FieldSelect'
import FieldString from './FieldString'
type BlockTypeProps = {
value: string
wdKey?: string
onChange(...args: unknown[]): unknown
error?: {message: string}
disabled?: boolean
};
export default class BlockType extends React.Component<BlockTypeProps> {
static defaultProps = {
disabled: false,
}
render() {
return <Block label={"Type"} fieldSpec={latest.layer.type}
data-wd-key={this.props.wdKey}
error={this.props.error}
>
{this.props.disabled &&
<FieldString
value={this.props.value}
disabled={true}
/>
}
{!this.props.disabled &&
<FieldSelect
options={[
['background', 'Background'],
['fill', 'Fill'],
['line', 'Line'],
['symbol', 'Symbol'],
['raster', 'Raster'],
['circle', 'Circle'],
['fill-extrusion', 'Fill Extrusion'],
['hillshade', 'Hillshade'],
['heatmap', 'Heatmap'],
]}
onChange={this.props.onChange}
value={this.props.value}
/>
}
</Block>
}
}

2
src/components/_SpecProperty.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react'
import SpecField, {SpecFieldProps} from './SpecField'
import FunctionButtons from './_FunctionButtons'
import labelFromFieldName from './_labelFromFieldName'
import labelFromFieldName from '../libs/label-from-field-name'
type SpecPropertyProps = SpecFieldProps & {

2
src/components/_ZoomProperty.tsx
View File

@@ -9,7 +9,7 @@ import InputSelect from './InputSelect'
import Block from './Block'
import DeleteStopButton from './_DeleteStopButton'
import labelFromFieldName from './_labelFromFieldName'
import labelFromFieldName from '../libs/label-from-field-name'
import docUid from '../libs/document-uid'
import sortNumerically from '../libs/sort-numerically'

13
src/components/_labelFromFieldName.ts
View File

@@ -1,13 +0,0 @@
import capitalize from 'lodash.capitalize'
export default function labelFromFieldName(fieldName: string) {
let label;
const parts = fieldName.split('-');
if (parts.length > 1) {
label = fieldName.split('-').slice(1).join(' ');
}
else {
label = fieldName;
}
return capitalize(label);
}