Skip to content

Commit

Permalink
Merge pull request #1395 from KaiVolland/monaco-editor
Browse files Browse the repository at this point in the history 
Introduces monaco-editor
  • Loading branch information
@KaiVolland
KaiVolland committed Mar 17, 2021
2 parents 5365462 + 5109e5a commit b9f9210
Show file tree
Hide file tree
Showing 11 changed files with 1,129 additions and 502 deletions.
238 changes: 188 additions & 50 deletions package-lock.json
View file

Large diffs are not rendered by default.

8 changes: 6 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"@monaco-editor/react": "^4.0.11",
"@types/chroma-js": "^2.1.3",
"@types/codemirror": "^0.0.106",
"@types/color": "^3.0.1",
Expand All @@ -70,13 +71,15 @@
"geostyler-geojson-parser": "^1.0.1",
"geostyler-openlayers-parser": "^2.1.0",
"geostyler-sld-parser": "^2.2.0",
"geostyler-style": "^2.1.0",
"geostyler-style": "^2.2.0",
"geostyler-wfs-parser": "^1.0.1",
"lodash": "^4.17.20",
"moment": "^2.29.1",
"monaco-editor": "^0.23.0",
"react-codemirror2": "^7.2.1",
"react-color": "^2.19.3",
"react-rnd": "^10.2.4"
"react-rnd": "^10.2.4",
"typescript-json-schema": "^0.50.0"
},
"devDependencies": {
"@ant-design/icons": "^4.4.0",
Expand Down Expand Up @@ -125,6 +128,7 @@
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-loader": "^3.0.0",
"raw-loader": "^4.0.2",
"react": "^16.13.1",
"react-docgen-typescript": "^1.20.5",
"react-dom": "^16.13.1",
Expand Down
15 changes: 4 additions & 11 deletions src/Component/CodeEditor/CodeEditor.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,6 @@
flex-direction: column;
align-items: flex-end;

.gs-code-editor-codemirror {
flex: 1;
display: flex;
flex-direction: column;
align-self: stretch;
}

.CodeMirror {
flex: 1;
}

.gs-code-editor-errormessage {
color: red;
background-color: lightgray;
Expand All @@ -56,6 +45,10 @@
display: flex;
align-items: center;
justify-content: center;

.gs-code-editor-format-select {
width: 300px;
}
}

.gs-code-editor-download-button,
Expand Down
170 changes: 5 additions & 165 deletions src/Component/CodeEditor/CodeEditor.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import { CodeEditor, CodeEditorProps } from './CodeEditor';
import TestUtil from '../../Util/TestUtil';

import SldStyleParser from 'geostyler-sld-parser';
import { StyleParser } from 'geostyler-style';

describe('CodeEditor', () => {
let wrapper: any;
Expand Down Expand Up @@ -71,175 +70,16 @@ describe('CodeEditor', () => {
delay
};
const defaultValueWrapper = TestUtil.shallowRenderComponent(CodeEditor, defaultParserProps);
const activeParser: StyleParser = defaultValueWrapper.state('activeParser');
expect(activeParser.title).toEqual(SldStyleParser.title);
const select = defaultValueWrapper.find('.gs-code-editor-format-select');
expect(select.props().value).toEqual(SldStyleParser.title);
});
});

describe('updateValueFromStyle', () => {
it('sets the value to the geostyler-style if no activeparser is set', () => {
const updateValueFromStyle = wrapper.instance().updateValueFromStyle;
updateValueFromStyle(dummyStyle);
const value = wrapper.state().value;
expect(value).toEqual(JSON.stringify(dummyStyle, null, 2));
});
// TODO
// it('sets the value as sld if active parsers is SLD Parser', async () => {
// await new Promise((resolve) => {
// const sldParser = new SldStyleParser();
// sldParser.writeStyle(dummyStyle)
// .then(async (sld: string) => {
// wrapper.setState({
// activeParser: SldStyleParser
// });
// const updateValueFromStyle = wrapper.instance().updateValueFromStyle;
// await updateValueFromStyle(dummyStyle);
// const value = wrapper.state().value;
// expect(value).toEqual(sld);
// resolve();
// });
// });
// });
});

describe('valueFromStyleInput', () => {
it('returns geostyler-style if no activeparser is set', async () => {
const valueFromStyleInput = wrapper.instance().valueFromStyleInput;
const value = await valueFromStyleInput(dummyStyle);
expect(value).toEqual(JSON.stringify(dummyStyle, null, 2));
});
it('returns the value as sld if active parsers is SLD Parser', async () => {
wrapper.setState({
activeParser: sldParser
});
await new Promise((resolve) => {
sldParser.writeStyle(dummyStyle)
.then(async (sld: string) => {
const valueFromStyleInput = wrapper.instance().valueFromStyleInput;
const value = await valueFromStyleInput(dummyStyle);
expect(value).toEqual(sld);
resolve();
});
});
});
});

describe('getModeByParser', () => {
it('returns "application/json" if activeParser is NOT "SLD Style Parser"', () => {
const getModeByParser = wrapper.instance().getModeByParser;
const value = getModeByParser();
expect(value).toEqual('application/json');
});
it('returns "application/xml" if activeParser is "SLD Style Parser"', () => {
wrapper.setState({
activeParser: sldParser
});
const getModeByParser = wrapper.instance().getModeByParser;
const value = getModeByParser();
expect(value).toEqual('application/xml');
});
});

describe('styleFromValue', () => {
it('returns geostyler-style if no activeparser is set', async () => {
const styleFromValue = wrapper.instance().styleFromValue;
const value = await styleFromValue(JSON.stringify(dummyStyle));
expect(value).toEqual(dummyStyle);
});
it('returns geostyler-style if active parsers is SLD Parser and value is SLD string', async () => {
wrapper.setState({
activeParser: sldParser
});
await new Promise((resolve) => {
sldParser.writeStyle(dummyStyle)
.then(async (sld: string) => {
const styleFromValue = wrapper.instance().styleFromValue;
const value = await styleFromValue(sld);
expect(value).toEqual(dummyStyle);
resolve();
});
});
});
});

describe('onChange', () => {
it('sets the passed value in the state', () => {
const onChange = wrapper.instance().onChange;
const value = JSON.stringify(dummyStyle);
onChange(null, null, value);
expect(wrapper.state().value).toBe(value);
});
it('tries to parse the passed value', () => {
const onChange = wrapper.instance().onChange;
const value = JSON.stringify(dummyStyle);
const styleFromValueDummy = wrapper.instance().styleFromValue = jest.fn();
onChange(null, null, value);
expect(styleFromValueDummy).toBeCalledWith(value);
});
// TODO
// it('calls a passed onStyleChange method with the parsed style', async () => {
// const onChange = wrapper.instance().onChange;
// wrapper.setState({
// activeParser: SldStyleParser
// });
// await new Promise((resolve) => {
// const sldParser = new SldStyleParser();
// sldParser.writeStyle(dummyStyle)
// .then(async (sld: string) => {
// await onChange(null, null, sld);
// expect(onStyleChangeDummy).toBeCalledWith(dummyStyle);
// resolve();
// });
// });
// });
});

describe('onSelect', () => {
it('sets select parser as active parser', () => {
const onSelect = wrapper.instance().onSelect;
onSelect(sldParser.title);
expect(wrapper.state().activeParser).toEqual(sldParser);
});
it('calls "updateValueFromStyle"', () => {
const updateValueFromStyleDummy = wrapper.instance().updateValueFromStyle = jest.fn();
const onSelect = wrapper.instance().onSelect;
onSelect(sldParser.title);
expect(updateValueFromStyleDummy).toBeCalledWith(dummyStyle);
});
});

describe('handleOnChange', () => {
it('calls "onChange" after [props.delay] milliseconds', () => {
jest.useFakeTimers();
const handleOnChange = wrapper.instance().handleOnChange;
const onChangeDummy = wrapper.instance().onChange = jest.fn();
handleOnChange(null, null, dummyStyle);
expect(setTimeout).toHaveBeenCalledTimes(1);
expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), delay);
jest.runOnlyPendingTimers();
expect(onChangeDummy).toBeCalledWith(null, null, dummyStyle);
jest.clearAllTimers();
});
});

describe('getParserOptions', () => {
describe('generates an option for every parser', () => {
it('returns a Select.Option for every passed parser', () => {
const getParserOptions = wrapper.instance().getParserOptions;
const gots = getParserOptions();
gots.forEach((got: any, index: number) => {
expect(got.type.name).toBe('Option');
});
const gots = wrapper.find('Option');
expect(gots.length).toBe(2);
});
});

// TODO
// describe('onDownloadButtonClick', () => {
// it('calls saveAs', () => {
// const spy = jest.spyOn(fileSaver, 'saveAs');
// const onDownloadButtonClick = wrapper.instance().onDownloadButtonClick;
// onDownloadButtonClick();
// expect(spy).toBeCalled();
// });
// });

});

0 comments on commit b9f9210

Please sign in to comment.