Compare commits

...

6 Commits

Author SHA1 Message Date
shelly_goldblit 085eda76a1 convert more tests 2023-12-30 18:48:17 +02:00
ShellyDCMS 0dc3f4bf5d fix lock file 2023-12-30 16:41:53 +00:00
shelly_goldblit efc507aecd fix failing test 2023-12-30 18:36:27 +02:00
shelly_goldblit ef902910c8 update keyboard tests 2023-12-30 18:32:19 +02:00
shelly_goldblit 6ed08c7416 modify some of the layer tests 2023-12-30 18:26:50 +02:00
shelly_goldblit 9014e12ca6 improve drivers 2023-12-30 11:49:03 +02:00
10 changed files with 2826 additions and 1187 deletions
+5 -4
View File
@@ -1,7 +1,8 @@
import { then } from "@shellygo/cypress-test-utils/assertable";
import MaputnikDriver from "./maputnik-driver";
describe("accessibility", () => {
let { beforeAndAfter, when, should } = new MaputnikDriver();
let { beforeAndAfter, get, when, should } = new MaputnikDriver();
beforeAndAfter();
describe("skip links", () => {
@@ -15,7 +16,7 @@ describe("accessibility", () => {
when.tab();
should.beFocused(selector);
when.click(selector);
should.beFocused("skip-target-layer-list");
then(get.skipTargetLayerList()).shouldBeFocused();
});
// This fails for some reason only in Chrome, but passes in firefox. Adding a skip here to allow merge and later on we'll decide if we want to fix this or not.
@@ -25,7 +26,7 @@ describe("accessibility", () => {
when.tab().tab();
should.beFocused(selector);
when.click(selector);
should.beFocused("skip-target-layer-editor");
then(get.skipTargetLayerEditor()).shouldBeFocused();
});
it("skip link to map view", () => {
@@ -34,7 +35,7 @@ describe("accessibility", () => {
when.tab().tab().tab();
should.beFocused(selector);
when.click(selector);
should.canvasBeFocused();
then(get.canvas()).shouldBeFocused();
});
});
});
+5 -24
View File
@@ -5,37 +5,18 @@ export default class CypressWrapperDriver {
public given = {
...this.helper.given,
/**
*
* @param url a url to a file, this assumes the file name is the last part of the url
* @param alias
*/
interceptGetToFile(url: string) {
let fileNameAndAlias = url.split('/').pop();
cy.intercept('GET', url, { fixture: fileNameAndAlias }).as(fileNameAndAlias!);
},
interceptAndIgnore(url: string) {
cy.intercept({ method: "GET", url }, []);
}
}
};
public get = {
...this.helper.get,
elementByClassOrType(slector: string) {
return cy.get(slector);
}
}
};
public when = {
...this.helper.when,
visit(address: string) {
cy.visit(address);
},
confirmAlert() {
cy.on("window:confirm", () => true);
}
}
},
};
public beforeAndAfter = this.helper.beforeAndAfter;
}
}
+13 -13
View File
@@ -1,61 +1,61 @@
import { then } from "@shellygo/cypress-test-utils/assertable";
import MaputnikDriver from "./maputnik-driver";
describe("keyboard", () => {
let { beforeAndAfter, given, when, should } = new MaputnikDriver();
let { beforeAndAfter, given, when, get } = new MaputnikDriver();
beforeAndAfter();
describe("shortcuts", () => {
beforeEach(() => {
given.setupInterception();
given.setupMockBackedResponses();
when.setStyle("");
});
it("ESC should unfocus", () => {
const targetSelector = "maputnik-select";
when.focus(targetSelector);
should.beFocused(targetSelector);
then(get.elementByTestId(targetSelector)).shouldBeFocused();
when.typeKeys("{esc}");
expect(should.notBeFocused(targetSelector));
then(get.elementByTestId(targetSelector)).shouldNotBeFocused();
});
it("'?' should show shortcuts modal", () => {
when.typeKeys("?");
should.beVisible("modal:shortcuts");
then(get.elementByTestId("modal:shortcuts")).shouldBeVisible();
});
it("'o' should show open modal", () => {
when.typeKeys("o");
should.beVisible("modal:open");
then(get.elementByTestId("modal:open")).shouldBeVisible();
});
it("'e' should show export modal", () => {
when.typeKeys("e");
should.beVisible("modal:export");
then(get.elementByTestId("modal:export")).shouldBeVisible();
});
it("'d' should show sources modal", () => {
when.typeKeys("d");
should.beVisible("modal:sources");
then(get.elementByTestId("modal:sources")).shouldBeVisible();
});
it("'s' should show settings modal", () => {
when.typeKeys("s");
should.beVisible("modal:settings");
then(get.elementByTestId("modal:settings")).shouldBeVisible();
});
it("'i' should change map to inspect mode", () => {
when.typeKeys("i");
should.beSelected("nav:inspect", "inspect");
then(get.inputValue("maputnik-select")).shouldEqual("inspect");
});
it("'m' should focus map", () => {
when.typeKeys("m");
should.canvasBeFocused();
then(get.canvas()).shouldBeFocused();
});
it("'!' should show debug modal", () => {
when.typeKeys("!");
should.beVisible("modal:debug");
then(get.elementByTestId("modal:debug")).shouldBeVisible();
});
});
});
+100 -98
View File
@@ -1,8 +1,9 @@
import { then } from "@shellygo/cypress-test-utils/assertable";
import { v1 as uuid } from "uuid";
import MaputnikDriver from "./maputnik-driver";
describe("layers", () => {
let { beforeAndAfter, when, should } = new MaputnikDriver();
let { beforeAndAfter, get, when, should } = new MaputnikDriver();
beforeAndAfter();
beforeEach(() => {
when.setStyle("both");
@@ -10,105 +11,95 @@ describe("layers", () => {
});
describe("ops", () => {
it("delete", () => {
let id = when.modal.fillLayers({
let id: string;
beforeEach(() => {
id = when.modal.fillLayers({
type: "background",
});
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id,
type: "background",
},
]
);
when.click("layer-list-item:" + id + ":delete");
should.equalStyleStore((a: any) => a.layers, []);
});
it("duplicate", () => {
let id = when.modal.fillLayers({
type: "background",
it("should update layers in local storage", () => {
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "background",
},
],
});
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id,
type: "background",
},
]
);
when.click("layer-list-item:" + id + ":copy");
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id + "-copy",
type: "background",
},
{
id: id,
type: "background",
},
]
);
});
it("hide", () => {
let id = when.modal.fillLayers({
type: "background",
describe("when clicking delete", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":delete");
});
it("should empty layers in local storage", () => {
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
layers: [],
});
});
});
describe("when clicking duplicate", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":copy");
});
it("should add copy layer in local storage", () => {
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id + "-copy",
type: "background",
},
{
id: id,
type: "background",
},
],
});
});
});
describe("when clicking hide", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":toggle-visibility");
});
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id,
type: "background",
},
]
);
when.click("layer-list-item:" + id + ":toggle-visibility");
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id,
type: "background",
layout: {
visibility: "none",
it("should update visibility to none in local storage", () => {
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "background",
layout: {
visibility: "none",
},
},
},
]
);
],
});
});
when.click("layer-list-item:" + id + ":toggle-visibility");
describe("when clicking show", () => {
beforeEach(() => {
when.click("layer-list-item:" + id + ":toggle-visibility");
});
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: id,
type: "background",
layout: {
visibility: "visible",
},
},
]
);
it("should update visibility to visible in local storage", () => {
then(get.maputnikStyleFromLocalStorage()).shouldDeepNestedInclude({
layers: [
{
id: id,
type: "background",
layout: {
visibility: "visible",
},
},
],
});
});
});
});
});
describe("background", () => {
it("add", () => {
let id = when.modal.fillLayers({
@@ -191,13 +182,18 @@ describe("layers", () => {
);
// AND RESET!
when.typeKeys("{backspace}", "min-zoom.input-text");
when.type("{backspace}", "min-zoom.input-text");
when.click("max-zoom.input-text");
should.equalStyleStore((a: any) => a.layers, [{
"id": 'background:'+bgId,
"type": 'background'
}]);
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: "background:" + bgId,
type: "background",
},
]
);
});
it("max-zoom", () => {
@@ -243,13 +239,18 @@ describe("layers", () => {
);
// Unset it again.
when.typeKeys("{backspace}{backspace}", "layer-comment.input");
when.type("{backspace}{backspace}", "layer-comment.input");
when.click("min-zoom.input-text");
should.equalStyleStore((a: any) => a.layers, [{
"id": 'background:' + bgId,
"type": 'background'
}]);
should.equalStyleStore(
(a: any) => a.layers,
[
{
id: "background:" + bgId,
type: "background",
},
]
);
});
it("color", () => {
@@ -295,13 +296,14 @@ describe("layers", () => {
when.click("layer-list-item:background:" + bgId);
let errorSelector = ".CodeMirror-lint-marker-error";
should.notExist(errorSelector);
// Not a good idea to check that something doesn't exist. infinite things don't exist.
then(get.elementByTestId(errorSelector)).shouldNotExist();
when.click(".CodeMirror");
when.typeKeys(
"\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
);
should.exist(errorSelector);
then(get.elementByTestId(errorSelector)).shouldExist();
});
});
});
+11 -7
View File
@@ -1,23 +1,27 @@
import { then } from "@shellygo/cypress-test-utils/assertable";
import MaputnikDriver from "./maputnik-driver";
describe("map", () => {
let { beforeAndAfter, when, should } = new MaputnikDriver();
let { beforeAndAfter, get, when } = new MaputnikDriver();
beforeAndAfter();
describe("zoom level", () => {
it("via url", () => {
let zoomLevel = 12.37;
when.setStyle("geojson", zoomLevel);
should.beVisible("maplibre:ctrl-zoom");
should.containText("maplibre:ctrl-zoom", "Zoom: " + zoomLevel);
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
"Zoom: " + zoomLevel
);
});
it("via map controls", () => {
let zoomLevel = 12.37;
when.setStyle("geojson", zoomLevel);
should.beVisible("maplibre:ctrl-zoom");
when.clickZoomin();
should.containText("maplibre:ctrl-zoom", "Zoom: "+(zoomLevel + 1));
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldBeVisible();
then(get.elementByTestId("maplibre:ctrl-zoom")).shouldContainText(
"Zoom: " + (zoomLevel + 1)
);
when.clickZoomIn();
});
});
});
+108 -63
View File
@@ -1,7 +1,7 @@
import CypressWrapperDriver from "./cypress-wrapper-driver";
import ModalDriver from "./modal-driver";
const SERVER_ADDRESS = "http://localhost:8888/";
const baseUrl = "http://localhost:8888/";
export default class MaputnikDriver {
private helper = new CypressWrapperDriver();
@@ -9,38 +9,76 @@ export default class MaputnikDriver {
public beforeAndAfter = () => {
beforeEach(() => {
this.given.setupInterception();
this.given.setupMockBackedResponses();
this.when.setStyle("both");
});
};
public given = {
setupInterception: () => {
this.helper.given.interceptGetToFile(SERVER_ADDRESS + "example-style.json");
this.helper.given.interceptGetToFile(SERVER_ADDRESS + "example-layer-style.json");
this.helper.given.interceptGetToFile(SERVER_ADDRESS + "geojson-style.json");
this.helper.given.interceptGetToFile(SERVER_ADDRESS + "raster-style.json");
this.helper.given.interceptGetToFile(SERVER_ADDRESS + "geojson-raster-style.json");
this.helper.given.interceptAndIgnore("*example.local/*");
this.helper.given.interceptAndIgnore("*example.com/*");
setupMockBackedResponses: () => {
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "example-style.json",
response: {
fixture: "example-style.json",
},
alias: "example-style.json",
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "/example-layer-style.json",
response: {
fixture: "example-layer-style.json",
},
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "geojson-style.json",
response: {
fixture: "geojson-style.json",
},
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "raster-style.json",
response: {
fixture: "raster-style.json",
},
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: baseUrl + "geojson-raster-style.json",
response: {
fixture: "geojson-raster-style.json",
},
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: "*example.local/*",
response: [],
});
this.helper.given.interceptAndMockResponse({
method: "GET",
url: "*example.com/*",
response: [],
});
},
};
public when = {
...this.helper.when,
modal: this.modalDriver.when,
within: (selector: string, fn: () => void) => {
this.helper.when.within(fn, selector);
},
tab: () => this.helper.get.elementByClassOrType("body").tab(),
tab: () => this.helper.get.element("body").tab(),
waitForExampleFileRequset: () => {
this.helper.when.waitForResponse("example-style.json");
},
chooseExampleFile: () => {
this.helper.get.elementByClassOrType("input[type='file']").selectFile(
"cypress/fixtures/example-style.json",
{ force: true }
);
this.helper.get
.bySelector("type", "file")
.selectFile("cypress/fixtures/example-style.json", { force: true });
},
setStyle: (
styleProperties: "geojson" | "raster" | "both" | "layer" | "",
@@ -48,53 +86,44 @@ export default class MaputnikDriver {
) => {
let url = "?debug";
switch (styleProperties) {
case "geojson":
url += `&style=${SERVER_ADDRESS}geojson-style.json`;
break;
case "raster":
url += `&style=${SERVER_ADDRESS}raster-style.json`;
break;
case "both":
url += `&style=${SERVER_ADDRESS}geojson-raster-style.json`;
break;
case "layer":
url += `&style=${SERVER_ADDRESS}/example-layer-style.json`;
break;
case "geojson":
url += `&style=${baseUrl}geojson-style.json`;
break;
case "raster":
url += `&style=${baseUrl}raster-style.json`;
break;
case "both":
url += `&style=${baseUrl}geojson-raster-style.json`;
break;
case "layer":
url += `&style=${baseUrl}/example-layer-style.json`;
break;
}
if (zoom) {
url += `#${zoom}/41.3805/2.1635`;
}
this.helper.when.visit(SERVER_ADDRESS + url);
this.helper.when.visit(baseUrl + url);
if (styleProperties) {
this.helper.when.confirmAlert();
}
this.helper.get.element("toolbar:link").should("be.visible");
this.helper.get.elementByTestId("toolbar:link").should("be.visible");
},
typeKeys: (keys: string, selector?: string) => {
if (selector) {
this.helper.get.element(selector).type(keys);
} else {
this.helper.get.elementByClassOrType("body").type(keys);
}
},
typeKeys: (keys: string, selector?: string) =>
this.helper.get.element("body").type(keys),
click: (selector: string) => {
this.helper.when.click(selector);
},
clickZoomin: () => {
this.helper.get.elementByClassOrType(".maplibregl-ctrl-zoom-in").click();
clickZoomIn: () => {
this.helper.get.element(".maplibregl-ctrl-zoom-in").click();
},
selectWithin: (selector: string, value: string) => {
this.when.within(selector, () => {
this.helper.get.elementByClassOrType("select").select(value);
this.helper.get.element("select").select(value);
});
},
select: (selector: string, value: string) => {
this.helper.get.element(selector).select(value);
this.helper.get.elementByTestId(selector).select(value);
},
focus: (selector: string) => {
@@ -102,11 +131,15 @@ export default class MaputnikDriver {
},
setValue: (selector: string, text: string) => {
this.helper.get.element(selector).clear().type(text, { parseSpecialCharSequences: false });
this.helper.get
.elementByTestId(selector)
.clear()
.type(text, { parseSpecialCharSequences: false });
},
};
public get = {
...this.helper.get,
isMac: () => {
return Cypress.platform === "darwin";
},
@@ -116,34 +149,41 @@ export default class MaputnikDriver {
const obj = JSON.parse(styleItem || "");
return obj;
},
exampleFileUrl: () => {
return SERVER_ADDRESS + "example-style.json";
maputnikStyleFromLocalStorage: () => {
const styleId = localStorage.getItem("maputnik:latest_style");
const styleItem = localStorage.getItem(`maputnik:style:${styleId}`);
const obj = JSON.parse(styleItem || "");
return cy.wrap(obj);
},
exampleFileUrl: () => {
return baseUrl + "example-style.json";
},
skipTargetLayerList: () =>
this.helper.get.elementByTestId("skip-target-layer-list"),
skipTargetLayerEditor: () =>
this.helper.get.elementByTestId("skip-target-layer-editor"),
canvas: () => this.helper.get.element("canvas"),
};
public should = {
canvasBeFocused: () => {
this.when.within("maplibre:map", () => {
this.helper.get.elementByClassOrType("canvas").should("be.focused");
});
},
notExist: (selector: string) => {
this.helper.get.elementByClassOrType(selector).should("not.exist");
this.helper.get.element(selector).should("not.exist");
},
beFocused: (selector: string) => {
this.helper.get.element(selector).should("have.focus");
this.helper.get.elementByTestId(selector).should("have.focus");
},
notBeFocused: (selector: string) => {
this.helper.get.element(selector).should("not.have.focus");
this.helper.get.elementByTestId(selector).should("not.have.focus");
},
beVisible: (selector: string) => {
this.helper.get.element(selector).should("be.visible");
this.helper.get.elementByTestId(selector).should("be.visible");
},
notBeVisible: (selector: string) => {
this.helper.get.element(selector).should("not.be.visible");
this.helper.get.elementByTestId(selector).should("not.be.visible");
},
equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
@@ -156,18 +196,23 @@ export default class MaputnikDriver {
styleStoreEqualToExampleFileData: () => {
cy.window().then((win: any) => {
const obj = this.get.styleFromWindow(win);
this.helper.given.fixture("example-style.json", "file:example-style.json").should("deep.equal", obj);
this.helper.given
.fixture("example-style.json", "file:example-style.json")
.should("deep.equal", obj);
});
},
exist: (selector: string) => {
this.helper.get.element(selector).should("exist");
this.helper.get.elementByTestId(selector).should("exist");
},
beSelected: (selector: string, value: string) => {
this.helper.get.element(selector).find(`option[value="${value}"]`).should("be.selected");
this.helper.get
.elementByTestId(selector)
.find(`option[value="${value}"]`)
.should("be.selected");
},
containText: (selector: string, text: string) => {
this.helper.get.element(selector).should("contain.text", text);
}
this.helper.get.elementByTestId(selector).should("contain.text", text);
},
};
}
+9 -13
View File
@@ -5,7 +5,7 @@ export default class ModalDriver {
private helper = new CypressWrapperDriver();
public when = {
fillLayers: (opts: {type: string, layer?: string, id?: string}) => {
fillLayers: (opts: { type: string; layer?: string; id?: string }) => {
let type = opts.type;
let layer = opts.layer;
let id;
@@ -14,29 +14,25 @@ export default class ModalDriver {
} else {
id = `${type}:${uuid()}`;
}
this.helper.get.element("add-layer.layer-type.select").select(type);
this.helper.get.element("add-layer.layer-id.input").type(id);
this.helper.when.selectOption("add-layer.layer-type.select", type);
this.helper.when.type("add-layer.layer-id.input", id);
if (layer) {
this.helper.when.within(() => {
this.helper.get.elementByClassOrType("input").type(layer!);
}, "add-layer.layer-source-block")
this.helper.get.element("input").type(layer!);
}, "add-layer.layer-source-block");
}
this.helper.when.click("add-layer");
return id;
},
open: () => {
this.helper.when.click("layer-list:add-layer");
this.helper.get.element("modal:add-layer").should("exist");
this.helper.get.element("modal:add-layer").should("be.visible");
},
close: (key: string) => {
this.helper.when.waitUntil(() => this.helper.get.element(key));
this.helper.when.click(key + ".close-modal");
},
}
}
};
}
+5 -2
View File
@@ -11,7 +11,7 @@ describe("modals", () => {
when.click("nav:open");
});
it("close", () => {
it.only("close", () => {
when.modal.close("modal:open");
should.notExist("modal:open");
});
@@ -125,7 +125,10 @@ describe("modals", () => {
it("thunderforest access token", () => {
let apiKey = "testing123";
when.setValue("modal:settings.maputnik:thunderforest_access_token", apiKey);
when.setValue(
"modal:settings.maputnik:thunderforest_access_token",
apiKey
);
when.click("modal:settings.name");
should.equalStyleStore(
+2569 -962
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -91,7 +91,7 @@
"@cypress/code-coverage": "^3.12.15",
"@istanbuljs/nyc-config-typescript": "^1.0.2",
"@rollup/plugin-replace": "^5.0.5",
"@shellygo/cypress-test-utils": "^2.0.9",
"@shellygo/cypress-test-utils": "^2.0.14",
"@storybook/addon-a11y": "^7.6.5",
"@storybook/addon-actions": "^7.6.5",
"@storybook/addon-links": "^7.6.5",