Skip to content

Commit

Permalink
Improve tests (#854)
Browse files Browse the repository at this point in the history
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 <[email protected]>
  • Loading branch information
HarelM and nyurik authored Dec 27, 2023
1 parent 09a1f3f commit b784bf2
Show file tree
Hide file tree
Showing 31 changed files with 64 additions and 407 deletions.
31 changes: 15 additions & 16 deletions cypress/e2e/driver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export default class MaputnikDriver {
if (styleProperties) {
cy.on("window:confirm", () => true);
}
cy.get(".maputnik-toolbar-link").should("be.visible");
this.helper.get.element("toolbar:link").should("be.visible");
},
fillLayersModal: (opts: {type: string, layer?: string, id?: string}) => {
var type = opts.type;
Expand All @@ -83,22 +83,24 @@ export default class MaputnikDriver {
id = `${type}:${uuid()}`;
}

cy.get(
this.get.dataAttribute("add-layer.layer-type", "select")
).select(type);
cy.get(this.get.dataAttribute("add-layer.layer-id", "input")).type(id);
this.helper.get.element("add-layer.layer-type.select").select(type);
this.helper.get.element("add-layer.layer-id.input").type(id);
if (layer) {
cy.get(
this.get.dataAttribute("add-layer.layer-source-block", "input")
).type(layer);
this.when.within("add-layer.layer-source-block", () => {
cy.get("input").type(layer!);
})
}
this.when.click("add-layer");

return id;
},

typeKeys: (keys: string) => {
cy.get("body").type(keys);
typeKeys: (keys: string, selector?: string) => {
if (selector) {
this.helper.get.element(selector).type(keys);
} else {
cy.get("body").type(keys);
}
},

click: (selector: string) => {
Expand All @@ -124,7 +126,7 @@ export default class MaputnikDriver {
},

setValue: (selector: string, text: string) => {
cy.get(selector).clear().type(text, { parseSpecialCharSequences: false });
this.helper.get.element(selector).clear().type(text, { parseSpecialCharSequences: false });
},

closeModal: (key: string) => {
Expand All @@ -135,8 +137,8 @@ export default class MaputnikDriver {
openLayersModal: () => {
this.helper.when.click("layer-list:add-layer");

cy.get(this.get.dataAttribute("modal:add-layer")).should("exist");
cy.get(this.get.dataAttribute("modal:add-layer")).should("be.visible");
this.helper.get.element("modal:add-layer").should("exist");
this.helper.get.element("modal:add-layer").should("be.visible");
},
};

Expand All @@ -153,9 +155,6 @@ export default class MaputnikDriver {
exampleFileUrl: () => {
return "http://localhost:8888/example-style.json";
},
dataAttribute: (key: string, selector?: string): string => {
return `*[data-wd-key='${key}'] ${selector || ""}`;
},
};

public should = {
Expand Down
59 changes: 21 additions & 38 deletions cypress/e2e/layers.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,7 @@ describe("layers", () => {
var id = uuid();

when.selectWithin("add-layer.layer-type", "background");
when.setValue(
get.dataAttribute("add-layer.layer-id", "input"),
"background:" + id
);
when.setValue("add-layer.layer-id.input", "background:" + id);

when.click("add-layer");

Expand All @@ -162,10 +159,7 @@ describe("layers", () => {
when.click("layer-list-item:background:" + bgId);

var id = uuid();
when.setValue(
get.dataAttribute("layer-editor.layer-id", "input"),
"foobar:" + id
);
when.setValue("layer-editor.layer-id.input", "foobar:" + id);
when.click("min-zoom");

should.equalStyleStore(
Expand All @@ -183,10 +177,7 @@ describe("layers", () => {
var bgId = createBackground();

when.click("layer-list-item:background:" + bgId);
when.setValue(
get.dataAttribute("min-zoom", 'input[type="text"]'),
"1"
);
when.setValue("min-zoom.input-text", "1");

when.click("layer-editor.layer-id");

Expand All @@ -202,25 +193,20 @@ describe("layers", () => {
);

// AND RESET!
// driver.setValue(driver.get.dataAttribute("min-zoom", "input"), "")
// driver.click(driver.get.dataAttribute("max-zoom", "input"));

// driver.isStyleStoreEqual((a: any) => a.layers, [
// {
// "id": 'background:'+bgId,
// "type": 'background'
// }
// ]);
when.typeKeys("{backspace}", "min-zoom.input-text");
when.click("max-zoom.input-text");

should.equalStyleStore((a: any) => a.layers, [{
"id": 'background:'+bgId,
"type": 'background'
}]);
});

it("max-zoom", () => {
var bgId = createBackground();

when.click("layer-list-item:background:" + bgId);
when.setValue(
get.dataAttribute("max-zoom", 'input[type="text"]'),
"1"
);
when.setValue("max-zoom.input-text", "1");

when.click("layer-editor.layer-id");

Expand All @@ -238,10 +224,10 @@ describe("layers", () => {

it("comments", () => {
var bgId = createBackground();
var id = uuid();
var comment = "42";

when.click("layer-list-item:background:" + bgId);
when.setValue(get.dataAttribute("layer-comment", "textarea"), id);
when.setValue("layer-comment.input", comment);

when.click("layer-editor.layer-id");

Expand All @@ -252,23 +238,20 @@ describe("layers", () => {
id: "background:" + bgId,
type: "background",
metadata: {
"maputnik:comment": id,
"maputnik:comment": comment,
},
},
]
);

// Unset it again.
// TODO: This fails
// driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), "");
// driver.click(driver.getDataAttribute("min-zoom", "input"));

// driver.isStyleStoreEqual((a: any) => a.layers, [
// {
// "id": 'background:'+bgId,
// "type": 'background'
// }
// ]);
when.typeKeys("{backspace}{backspace}", "layer-comment.input");
when.click("min-zoom.input-text");

should.equalStyleStore((a: any) => a.layers, [{
"id": 'background:' + bgId,
"type": 'background'
}]);
});

it("color", () => {
Expand Down
24 changes: 7 additions & 17 deletions cypress/e2e/modals.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe("modals", () => {
it("load from url", () => {
var styleFileUrl = get.exampleFileUrl();

when.setValue(get.dataAttribute("modal:open.url.input"), styleFileUrl);
when.setValue("modal:open.url.input", styleFileUrl);
when.click("modal:open.url.button");
when.waitForExampleFileRequset();

Expand Down Expand Up @@ -83,30 +83,27 @@ describe("modals", () => {
});

it("show name specifications", () => {
when.setValue(get.dataAttribute("modal:settings.name"), "foobar");
when.setValue("modal:settings.name", "foobar");
when.click("modal:settings.owner");

should.equalStyleStore((obj) => obj.name, "foobar");
});

it("owner", () => {
when.setValue(get.dataAttribute("modal:settings.owner"), "foobar");
when.setValue("modal:settings.owner", "foobar");
when.click("modal:settings.name");

should.equalStyleStore((obj) => obj.owner, "foobar");
});
it("sprite url", () => {
when.setValue(
get.dataAttribute("modal:settings.sprite"),
"http://example.com"
);
when.setValue("modal:settings.sprite", "http://example.com");
when.click("modal:settings.name");

should.equalStyleStore((obj) => obj.sprite, "http://example.com");
});
it("glyphs url", () => {
var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
when.setValue(get.dataAttribute("modal:settings.glyphs"), glyphsUrl);
when.setValue("modal:settings.glyphs", glyphsUrl);
when.click("modal:settings.name");

should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
Expand All @@ -115,9 +112,7 @@ describe("modals", () => {
it("maptiler access token", () => {
var apiKey = "testing123";
when.setValue(
get.dataAttribute(
"modal:settings.maputnik:openmaptiles_access_token"
),
"modal:settings.maputnik:openmaptiles_access_token",
apiKey
);
when.click("modal:settings.name");
Expand All @@ -130,12 +125,7 @@ describe("modals", () => {

it("thunderforest access token", () => {
var apiKey = "testing123";
when.setValue(
get.dataAttribute(
"modal:settings.maputnik:thunderforest_access_token"
),
apiKey
);
when.setValue("modal:settings.maputnik:thunderforest_access_token", apiKey);
when.click("modal:settings.name");

should.equalStyleStore(
Expand Down
2 changes: 1 addition & 1 deletion src/components/AppMessagePanel.tsx
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down
2 changes: 2 additions & 0 deletions src/components/AppToolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/components/FieldComment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/FieldFunction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
1 change: 1 addition & 0 deletions src/components/FieldId.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
Expand Down
1 change: 1 addition & 0 deletions src/components/FieldMaxZoom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
Expand Down
1 change: 1 addition & 0 deletions src/components/FieldMinZoom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
Expand Down
1 change: 1 addition & 0 deletions src/components/FieldType.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/InputJson.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
6 changes: 5 additions & 1 deletion src/components/InputNumber.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
Expand Down Expand Up @@ -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"
Expand All @@ -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>
}
Expand All @@ -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"]}
/>
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/LayerEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"]) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/_DataProperty.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'


Expand Down
Loading

0 comments on commit b784bf2

Please sign in to comment.