@luomus/laji-form 14.3.8 → 15.1.0

package/test-export/test-utils.js

@@ -20,128 +20,245 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.maybeJSONPointerToLocator = exports.filterUUIDs = exports.mockImageMetadata = exports.updateValue = exports.removeUnit = exports.putForeignMarkerToMap = exports.waitUntilBlockingLoaderHides = exports.createForm = exports.NamedPlaceChooserPO = exports.isDisplayed = exports.Form = exports.getFocusedId = exports.getFocusedElement = exports.lajiFormLocate = exports.lajiFormLocator = exports.navigateToForm = exports.emptyForm = exports.getLocatorForContextId = exports.EC = void 0;
-const protractor_1 = require("protractor");
+exports.getRemoveUnit = exports.maybeJSONPointerToLocator = exports.filterUUIDs = exports.createForm = exports.DemoPageForm = exports.Form = exports.getFocusedElement = exports.lajiFormLocator = exports.navigateToForm = exports.emptyForm = void 0;
 const path = require("path");
-const { HOST, PORT } = process.env;
-exports.EC = protractor_1.protractor.ExpectedConditions;
-const getLocatorForContextId = (contextId) => (path) => `#_laji-form_${contextId}_root${typeof path === "string" && path.length ? `_${path.replace(/\./g, "_")}` : ""}`;
-exports.getLocatorForContextId = getLocatorForContextId;
-const emptyForm = (params = "") => __awaiter(void 0, void 0, void 0, function* () { return protractor_1.browser.get(`http://${HOST}:${PORT}?test=true&settings=false&mockApi=true&${params}`); });
+const test_utils_1 = require("@luomus/laji-map/test-export/test-utils");
+const emptyForm = (page, params = "") => __awaiter(void 0, void 0, void 0, function* () { return page.goto(`/?test=true&settings=false&mockApi=true&${params}`); });
 exports.emptyForm = emptyForm;
-const navigateToForm = (formID, params = "") => __awaiter(void 0, void 0, void 0, function* () { return protractor_1.browser.get(`http://${HOST}:${PORT}?id=${formID}&local=true&settings=false&mockApi=true${params}`); });
+const navigateToForm = (page, formID, params = "") => __awaiter(void 0, void 0, void 0, function* () { return page.goto(`/?id=${formID}&local=true&settings=false&mockApi=true${params}`); });
 exports.navigateToForm = navigateToForm;
-exports.lajiFormLocator = exports.getLocatorForContextId(0);
-const lajiFormLocate = (str) => protractor_1.$(exports.lajiFormLocator(str));
-exports.lajiFormLocate = lajiFormLocate;
-const getFocusedElement = () => protractor_1.browser.driver.switchTo().activeElement();
+const lajiFormLocator = (path) => `#_laji-form_root${typeof path === "string" && path.length ? `_${path.replace(/\./g, "_")}` : ""}`;
+exports.lajiFormLocator = lajiFormLocator;
+const getFocusedElement = (page) => page.locator("*:focus");
 exports.getFocusedElement = getFocusedElement;
-const getFocusedId = () => exports.getFocusedElement().getAttribute("id");
-exports.getFocusedId = getFocusedId;
 function getEnumWidgetForContainer($container) {
     return {
         $container,
         openEnums: () => __awaiter(this, void 0, void 0, function* () {
             yield $container.click();
-            yield protractor_1.browser.wait(protractor_1.protractor.ExpectedConditions.visibilityOf($container.$$(".rw-list-option").first()), 300, "select list timeout");
         }),
-        $enumContainer: $container.$(".rw-popup-container"),
-        $$enums: $container.$$(".rw-list-option"),
-        $input: $container.$("input")
+        $enumContainer: $container.locator(".rw-popup-container"),
+        $enums: $container.locator(".rw-list-option"),
+        $input: $container.locator("input")
     };
 }
 class Form {
-    constructor(params = {}) {
-        this.$form = protractor_1.$(".laji-form  .rjsf");
-        this.getMockStr = (path, query) => `window.mockResponses[window.getMockQueryKey(${JSON.stringify(path)}, ${JSON.stringify(query)})]`;
+    constructor(page, $locator = page.locator(".laji-form")) {
+        this.page = page;
+        this.$locator = $locator;
+        this.$form = this.$locator.locator(".rjsf");
         this.createValidatorPO = (type) => ({
-            $$all: protractor_1.$$(`.laji-form-error-list:not(.laji-form-failed-jobs-list) .${type}-panel .list-group button`),
-            $panel: protractor_1.$(`.laji-form-error-list:not(.laji-form-failed-jobs-list) .${type}-panel`)
+            $all: this.$locator.locator(`.laji-form-error-list:not(.laji-form-failed-jobs-list) .${type}-panel .list-group button`),
+            $panel: this.$locator.locator(`.laji-form-error-list:not(.laji-form-failed-jobs-list) .${type}-panel`)
         });
         this.errors = this.createValidatorPO("error");
         this.warnings = this.createValidatorPO("warning");
         this.failedJobs = {
-            $container: protractor_1.$(".laji-form-failed-jobs-list")
+            $container: this.$locator.locator(".laji-form-failed-jobs-list"),
+            $errors: this.$locator.locator(".laji-form-failed-jobs-list").locator(".list-group-item")
         };
-        this.$acknowledgeWarnings = protractor_1.$(".laji-form-warning-list .panel-footer button");
-        this.isBlocked = () => protractor_1.$(".laji-form.blocking-loader").isDisplayed();
-        this.mockImageUpload = (lajiFormLocator) => __awaiter(this, void 0, void 0, function* () {
-            const filePath = path.resolve(__dirname, "./pixel.png");
-            const imageResponse = [{ name: "data", filename: "pixel.png", id: "mock", expires: 1575979685 }];
-            const { resolve, remove } = yield this.setMockResponse("/images", false);
-            const mdResponse = exports.mockImageMetadata;
-            const { resolve: mdResolve, remove: mdRemove } = yield this.setMockResponse("/images/mock", false);
-            yield this.getImageArrayField(lajiFormLocator).$dropzone.$("input").sendKeys(filePath);
+        this.$runningJobs = this.$locator.locator(".running-jobs");
+        this.$acknowledgeWarnings = this.$locator.locator(".laji-form-warning-list .panel-footer button");
+        this.$blocker = this.page.locator(".laji-form.blocking-loader");
+        this.$mapFieldFullscreenMap = this.page.locator(".laji-form.fullscreen .laji-form-map");
+        this.getImageArrayField = (lajiFormLocator) => {
+            const $container = this.$locate(lajiFormLocator).locator(".laji-form-medias");
+            const $imgContainers = this.$locate(lajiFormLocator).locator(".media-container");
+            const $modal = this.page.locator(".laji-form.media-modal");
+            const $addModal = this.page.locator(".laji-form.media-add-modal");
             return {
-                resolve: () => __awaiter(this, void 0, void 0, function* () {
-                    yield resolve(imageResponse);
-                    yield protractor_1.browser.sleep(300);
-                    yield mdResolve(mdResponse);
-                }),
-                remove: () => __awaiter(this, void 0, void 0, function* () {
-                    yield remove();
-                    yield mdRemove();
-                })
+                $container,
+                $imgContainers,
+                $imgs: $imgContainers.locator("img"),
+                $imgLoading: $imgContainers.locator(".react-spinner"),
+                $imgRemoves: $imgContainers.locator(".button-corner"),
+                $imgRemoveConfirmButton: (id) => this.$locateAddition(id, "delete-confirm-yes", true),
+                $dropzone: this.$locate(lajiFormLocator).locator(".laji-form-drop-zone"),
+                $modal,
+                $addModal,
+                $modalClose: $modal.locator(".modal-header .close"),
+                $addModalCancel: $addModal.locator(".cancel")
             };
-        });
-        this._getImageArrayField = (form) => (lajiFormLocator) => new class ImageArrayFieldPO {
-            constructor() {
-                this.$container = form.$locate(lajiFormLocator).$(".laji-form-medias");
-                this.$$imgs = form.$locate(lajiFormLocator).$$(".media-container");
-                this.$$imgInteractives = this.$$imgs.$$(".media-container a");
-                this.$$imgRemoves = this.$$imgs.$$(".button-corner");
-                this.$imgRemoveConfirmButton = (id) => form.$locateAddition(id, "delete-confirm-yes");
-                this.$dropzone = form.$locate(lajiFormLocator).$(".laji-form-drop-zone");
-                this.$modal = protractor_1.$(".laji-form.media-modal");
-                this.$modalClose = this.$modal.$(".close");
-            }
         };
-        this.getImageArrayField = this._getImageArrayField(this);
-        this._getTaxonAutosuggestWidget = (form) => (lajiFormLocator) => new class TaxonAutosuggestWidgetPO {
-            constructor() {
-                this.$input = form.$locate(lajiFormLocator).$("input");
-                this.$suggestionsContainer = form.$locate(lajiFormLocator).$(".rw-list");
-                this.$$suggestions = form.$locate(lajiFormLocator).$$(".rw-list-option");
-                this.waitForSuggestionsToLoad = () => protractor_1.browser.wait(exports.EC.visibilityOf(this.$suggestionsContainer), 5000, "Suggestion list timeout");
-                this.waitForGlyph = () => protractor_1.browser.wait(exports.EC.visibilityOf(form.$locate(lajiFormLocator).$(".glyphicon.form-control-feedback")), 5000, "Glyph didn't load");
-                this.isSuggested = () => exports.isDisplayed(form.$locate(lajiFormLocator).$(".glyphicon-ok"));
-                this.isNonsuggested = () => exports.isDisplayed(form.$locate(lajiFormLocator).$(".glyphicon-warning-sign"));
-                this.$powerUserButton = protractor_1.$(".power-user-addon");
-                this.powerUserButtonIsActive = () => __awaiter(this, void 0, void 0, function* () { return (yield this.$powerUserButton.getAttribute("class")).includes("active"); });
-                this.waitForPopoverToHide = () => protractor_1.browser.wait(exports.EC.invisibilityOf(form.$locate(lajiFormLocator).$(".popover-content")), 5000, "Popover didn't hide");
-            }
+        this.getTaxonAutosuggestWidget = (lajiFormLocator) => {
+            return {
+                $input: this.$locate(lajiFormLocator).locator("input"),
+                $suggestionsContainer: this.$locate(lajiFormLocator).locator(".rw-list"),
+                $suggestions: this.$locate(lajiFormLocator).locator(".rw-list-option"),
+                $getGlyph: (glyph) => this.$locate(lajiFormLocator).locator(glyph),
+                $suggestedGlyph: this.$locate(lajiFormLocator).locator(".glyphicon-ok"),
+                $nonsuggestedGlyph: this.$locate(lajiFormLocator).locator(".glyphicon-warning-sign"),
+                $powerUserButton: this.$locator.locator(".power-user-addon")
+            };
         };
-        this.getTaxonAutosuggestWidget = this._getTaxonAutosuggestWidget(this);
         this.getScopeField = (lajiFormLocator) => ({
             $button: this.$locateButton(lajiFormLocator, "additionals"),
-            $$listItems: this.$locate(lajiFormLocator).$$(".dropdown.open li a")
+            $listItems: this.$locate(lajiFormLocator).locator(".dropdown.open li a"),
+            modal: {
+                $container: this.page.locator(".scope-field-modal"),
+                $close: this.page.locator(".scope-field-modal .close"),
+                $loadingGroup: this.page.locator(".scope-field-modal .list-group .react-spinner"),
+                $groupTitles: this.page.locator(".scope-field-modal .list-group .list-group-item strong"),
+                $listItems: this.page.locator(".scope-field-modal .list-group-item"),
+            }
         });
+        this.getLocationChooser = (lajiFormLocator) => {
+            const $peeker = this.$locateButton(lajiFormLocator, "location-peeker", true);
+            return {
+                $button: this.$locateButton(lajiFormLocator, "location"),
+                modal: {
+                    $container: this.page.locator(".map-dialog"),
+                    map: new test_utils_1.MapPageObject(this.page, this.page.locator(".map-dialog .laji-map"))
+                },
+                peeker: {
+                    $popover: $peeker,
+                    $map: $peeker.locator(".laji-map"),
+                    $markers: $peeker.locator(".vector-marker path"),
+                }
+            };
+        };
         this.getUnitListShorthandArrayField = (lajiFormLocator) => ({
             $button: this.$locateButton(lajiFormLocator, "addUnitList"),
             modal: {
-                $input: protractor_1.$(".unit-list-shorthand-modal input"),
-                $addButton: protractor_1.$(".unit-list-shorthand-modal button")
+                $input: this.page.locator(".unit-list-shorthand-modal input"),
+                $addButton: this.page.locator(".unit-list-shorthand-modal button")
             }
         });
+        this.$getShortHandWidget = (lajiFormLocator) => this.$locateAddition(lajiFormLocator, "shortHandText");
+        this.getGeocoder = (lajiFormLocator = "") => ({
+            $btn: this.$locate(lajiFormLocator).locator(".geocoder-btn"),
+            $spinner: this.$locate(lajiFormLocator).locator(".geocoder-btn .react-spinner")
+        });
+        this.getNamedPlaceChooser = () => {
+            const $namedPlaceChooserModal = this.page.locator(".named-place-chooser-modal");
+            const $mapPopupContainer = this.page.locator(".named-place-popup");
+            return {
+                select: getEnumWidgetForContainer(this.page.locator("#named-place-chooser-select")),
+                mapPopup: {
+                    $container: $mapPopupContainer,
+                    $useBtn: $mapPopupContainer.locator(".btn-default")
+                },
+                $alert: $namedPlaceChooserModal.locator(".alert"),
+                $close: $namedPlaceChooserModal.locator(".close")
+            };
+        };
+    }
+    /** Locates a field with a dot separated identifier, e.g. "gatherings.0.units.1" */
+    $locate(path) {
+        return this.$locator.locator(exports.lajiFormLocator(path));
+    }
+    /** Locates a button for a field with a dot separated identifier, e.g. "gatherings.0.units.1" */
+    $locateButton(path, selector, locateFromBody = false) {
+        return (locateFromBody ? this.page : this.$locator).locator(`#root${typeof path === "string" && path.length > 0 ? `_${path.replace(/\./g, "_")}` : ""}-${selector}`);
+    }
+    /** Locates some additional element for a field with a dot separated identifier, e.g. "gatherings.0.units.1" */
+    $locateAddition(path, selector, locateFromBody = false) {
+        return this.$locateButton(path, selector, locateFromBody);
+    }
+    getBooleanWidget(str) {
+        const $container = this.$locate(str).locator(".btn-toolbar");
+        return {
+            $container,
+            $true: $container.locator(".btn").nth(0),
+            $false: $container.locator(".btn").nth(1),
+            $undefined: this.$locate(str).locator(".btn").nth(2),
+            $active: $container.locator(".btn.active"),
+            $nonactive: $container.locator(".btn:not(.active)").first()
+        };
+    }
+    $getInputWidget(str) {
+        return this.$locate(str).locator("input");
+    }
+    $getTextareaWidget(str) {
+        return this.$locate(str).locator("textarea");
+    }
+    $getEnumWidget(str) {
+        const $container = this.$locate(str).locator(".rw-combobox");
+        return getEnumWidgetForContainer($container);
+    }
+    getDateWidget(str) {
+        const $widget = this.$locate(str).locator(".date-widget");
+        return {
+            $container: $widget,
+            $input: $widget.locator("input"),
+            buttons: {
+                $today: $widget.locator(".today"),
+                $yesterday: $widget.locator(".yesterday"),
+                $same: $widget.locator(".same"),
+                $date: $widget.locator(".rw-i-calendar"),
+                $time: $widget.locator(".rw-i-clock-o")
+            },
+            calendar: {
+                $today: $widget.locator(".rw-calendar-footer button"),
+            },
+            clock: {
+                "$01:00": $widget.locator(".rw-list li").nth(2),
+            }
+        };
+    }
+    $getFieldErrors(str) {
+        return this.$locate(str).locator(".laji-form-error-container li");
+    }
+    /** Draws a marker to the center of a laji-map rendered to the given locator. The locator defaults to "gatherings" */
+    putMarkerToMap(lajiFormLocator = "gatherings") {
+        return __awaiter(this, void 0, void 0, function* () {
+            const $map = this.$locate(lajiFormLocator).locator(".laji-map");
+            yield $map.scrollIntoViewIfNeeded();
+            const map = new test_utils_1.MapPageObject(this.page, $map);
+            yield map.drawMarker();
+        });
+    }
+    updateValue($input, value, blur = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield $input.fill(value);
+            if (blur) {
+                yield $input.press("Tab");
+            }
+        });
+    }
+}
+exports.Form = Form;
+class DemoPageForm extends Form {
+    constructor(page, params = {}) {
+        super(page);
+        this.getMockStr = (path, query) => `window.mockResponses[window.getMockQueryKey(${JSON.stringify(path)}, ${JSON.stringify(query)})]`;
+        this.mockImageUpload = (lajiFormLocator) => __awaiter(this, void 0, void 0, function* () {
+            const filePath = path.resolve(__dirname, "./mocks/pixel.png");
+            const imageResponse = [{ name: "data", filename: "pixel.png", id: "mock", expires: 1575979685 }];
+            const { resolve, remove } = yield this.setMockResponse("/images", false);
+            const mdResponse = require("./mocks/image-metadata.json");
+            const { resolve: metadataResolve, remove: metadataRemove } = yield this.setMockResponse("/images/mock", false);
+            yield this.getImageArrayField(lajiFormLocator).$dropzone.locator("input").setInputFiles(filePath);
+            return {
+                resolve: () => __awaiter(this, void 0, void 0, function* () {
+                    yield resolve(imageResponse);
+                    yield metadataResolve(mdResponse);
+                }),
+                remove: () => __awaiter(this, void 0, void 0, function* () {
+                    yield remove();
+                    yield metadataRemove();
+                })
+            };
+        });
+        // this.page = page;
         this.props = params;
     }
-    initialize(beforeInit, contextId) {
+    initialize(beforeInit) {
         return __awaiter(this, void 0, void 0, function* () {
             const query = (params) => Object.keys(params).reduce((q, key) => `${q}&${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`, "");
             if (this.props.id) {
                 const _a = this.props, { id } = _a, _props = __rest(_a, ["id"]);
-                yield exports.navigateToForm(id, query(_props));
+                yield exports.navigateToForm(this.page, id, query(_props));
             }
             else {
-                yield exports.emptyForm();
+                yield exports.emptyForm(this.page);
             }
             beforeInit && (yield beforeInit(this));
             yield this.setState(this.props);
-            this.contextId = contextId !== null && contextId !== void 0 ? contextId : yield this.e("lajiForm._id");
         });
     }
     e(path) {
-        return protractor_1.browser.executeScript(`return window.lajiForm.${path}`);
+        return this.page.evaluate(`window.lajiForm.${path}`);
     }
     setState(state) {
         const onSubmit = "function(data) {window.submittedData = data.formData;}";
@@ -149,51 +266,32 @@ class Form {
         return this.e(`setState({onSubmit: ${onSubmit}, onChange: ${onChange}, ...${JSON.stringify(state)}})`);
     }
     getState() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return protractor_1.browser.executeScript("const {formData} = window.lajiForm.lajiForm.state; return {formData};");
+        return this.page.evaluate(() => {
+            const { formData } = window.lajiForm.lajiForm.state;
+            return { formData };
         });
     }
     submit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.e("submit()");
-            yield waitUntilBlockingLoaderHides();
-        });
-    }
-    startSubmit() {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.e("submit()");
         });
     }
     submitOnlySchemaValidations() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.e("submitOnlySchemaValidations()");
-        });
-    }
-    waitUntilBlockingLoaderHides(timeout) {
-        return waitUntilBlockingLoaderHides(timeout);
+        return this.e("submitOnlySchemaValidations()");
     }
     getSubmittedData() {
-        return protractor_1.browser.executeScript("return window.submittedData");
+        return this.page.evaluate("window.submittedData");
     }
     getChangedData() {
-        return protractor_1.browser.executeScript("return window.changedData");
+        return this.page.evaluate("window.changedData");
     }
     getPropsData() {
         return this.e("lajiForm.props.formData");
     }
-    $locate(path) {
-        return protractor_1.$(exports.getLocatorForContextId(this.contextId)(path));
-    }
-    $locateButton(path, selector) {
-        return protractor_1.$(`#root${typeof path === "string" && path.length > 0 ? `_${path.replace(/\./g, "_")}` : ""}-${selector}`);
-    }
-    $locateAddition(path, selector) {
-        return this.$locateButton(path, selector);
-    }
     setMockResponse(path, query) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield protractor_1.browser.executeScript(`return window.setMockResponse(${JSON.stringify(path)}, ${JSON.stringify(query)})`);
-            const mock = (method, response, raw) => protractor_1.browser.executeScript(`return ${this.getMockStr(path, query)}.${method}(${JSON.stringify(response)}, ${JSON.stringify(raw)})`);
+            yield this.page.evaluate(`window.setMockResponse(${JSON.stringify(path)}, ${JSON.stringify(query)})`);
+            const mock = (method, response, raw) => this.page.evaluate(`${this.getMockStr(path, query)}.${method}(${JSON.stringify(response)}, ${JSON.stringify(raw)})`);
             return {
                 resolve: (response, raw) => mock("resolve", response, raw),
                 reject: (response, raw) => mock("reject", response, raw),
@@ -203,15 +301,15 @@ class Form {
     }
     createMockResponseQueue(path, query) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield protractor_1.browser.executeScript(`return window.createMockResponseQueue(${JSON.stringify(path)}, ${JSON.stringify(query)})`);
+            yield this.page.evaluate(`window.createMockResponseQueue(${JSON.stringify(path)}, ${JSON.stringify(query)})`);
             const queueStr = `window.mockQueues[window.getMockQueryKey(${JSON.stringify(path)}, ${JSON.stringify(query)})]`;
             const mock = (method, response, raw, pointer) => {
-                return protractor_1.browser.executeScript(`return ${this.getMockStr(path, query)}[${pointer}].${method}(${JSON.stringify(response)}, ${JSON.stringify(raw)})`);
+                return this.page.evaluate(`${this.getMockStr(path, query)}[${pointer}].${method}(${JSON.stringify(response)}, ${JSON.stringify(raw)})`);
             };
             let pointer = 0;
             return {
                 create: () => __awaiter(this, void 0, void 0, function* () {
-                    yield protractor_1.browser.executeScript(`return ${queueStr}.create()`);
+                    yield this.page.evaluate(`${queueStr}.create()`);
                     const _pointer = pointer;
                     pointer = pointer + 1;
                     return {
@@ -219,127 +317,20 @@ class Form {
                         reject: (response, raw) => mock("reject", response, raw, _pointer),
                     };
                 }),
-                remove: () => protractor_1.browser.executeScript(`return ${queueStr}.remove()`)
+                remove: () => this.page.evaluate(`${queueStr}.remove()`)
             };
         });
     }
-    getBooleanWidget(str) {
-        const $container = this.$locate(str).$(".btn-toolbar");
-        return {
-            $container,
-            $true: $container.$$(".btn").get(0),
-            $false: $container.$$(".btn").get(1),
-            $undefined: this.$locate(str).$$(".btn").get(2),
-            $active: $container.$(".btn.active"),
-            $nonactive: $container.$$(".btn").filter(($btn) => __awaiter(this, void 0, void 0, function* () { return !(yield $btn.getAttribute("class")).includes("active"); })).first()
-        };
-    }
-    $getInputWidget(str) {
-        return this.$locate(str).$("input");
-    }
-    $getTextareaWidget(str) {
-        return this.$locate(str).$("textarea");
-    }
-    $getEnumWidget(str) {
-        const $container = this.$locate(str).$(".rw-combobox");
-        return getEnumWidgetForContainer($container);
-    }
-    getDateWidget(str) {
-        const $widget = this.$locate(str).$(".date-widget");
-        return {
-            $container: $widget,
-            $input: $widget.$("input"),
-            buttons: {
-                $today: $widget.$(".today"),
-                $yesterday: $widget.$(".yesterday"),
-                $same: $widget.$(".same"),
-                $date: $widget.$(".rw-i-calendar"),
-                $time: $widget.$(".rw-i-clock-o")
-            },
-            calendar: {
-                $today: $widget.$(".rw-calendar-footer button"),
-                waitAnimation: () => protractor_1.browser.wait(exports.EC.visibilityOf($widget.$(".rw-calendar-footer button")), 1000, "Calendar didn't show")
-            },
-            clock: {
-                "$01:00": $widget.$$(".rw-list li").get(2),
-                waitAnimation: () => protractor_1.browser.wait(exports.EC.visibilityOf($widget.$(".rw-list")), 1000, "Clock didn't show")
-            }
-        };
-    }
-    $$getFieldErrors(str) {
-        return this.$locate(str).$$(".laji-form-error-container li");
-    }
 }
-exports.Form = Form;
-const isDisplayed = ($elem) => __awaiter(void 0, void 0, void 0, function* () { return (yield $elem.isPresent()) && (yield $elem.isDisplayed()); });
-exports.isDisplayed = isDisplayed;
-const $mapPopupContainer = protractor_1.$(".named-place-popup");
-const $namedPlaceChooserModal = protractor_1.$(".named-place-chooser-modal");
-class NamedPlaceChooserPO {
-    constructor() {
-        this.select = getEnumWidgetForContainer(protractor_1.$("#named-place-chooser-select"));
-        this.mapPopup = {
-            $container: $mapPopupContainer,
-            $useBtn: $mapPopupContainer.$(".btn-default")
-        };
-        this.$alert = $namedPlaceChooserModal.$(".alert");
-        this.$close = $namedPlaceChooserModal.$(".close");
-    }
-}
-exports.NamedPlaceChooserPO = NamedPlaceChooserPO;
-function createForm(props, beforeInit) {
+exports.DemoPageForm = DemoPageForm;
+function createForm(page, props, beforeInit) {
     return __awaiter(this, void 0, void 0, function* () {
-        const form = new Form(props);
+        const form = new DemoPageForm(page, props);
         yield form.initialize(beforeInit);
         return form;
     });
 }
 exports.createForm = createForm;
-function waitUntilBlockingLoaderHides(timeout) {
-    return protractor_1.browser.wait(protractor_1.protractor.ExpectedConditions.invisibilityOf(protractor_1.$(".laji-form.blocking-loader")), timeout || 20000, "Blocking loader timeout");
-}
-exports.waitUntilBlockingLoaderHides = waitUntilBlockingLoaderHides;
-function putForeignMarkerToMap() {
-    return __awaiter(this, void 0, void 0, function* () {
-        const $gatheringsMap = exports.lajiFormLocate("gatherings").$(".laji-map");
-        const $markerButton = protractor_1.$(".leaflet-draw-draw-marker");
-        yield $markerButton.click();
-        yield protractor_1.browser.actions().mouseMove($gatheringsMap.getWebElement(), { x: -100, y: -100 }).perform();
-        yield protractor_1.browser.actions().click().perform();
-    });
-}
-exports.putForeignMarkerToMap = putForeignMarkerToMap;
-function removeUnit(gatheringIdx, unitIdx) {
-    return __awaiter(this, void 0, void 0, function* () {
-        yield protractor_1.$(`#root_gatherings_${gatheringIdx}_units_${unitIdx}-delete`).click();
-        return protractor_1.$(`#root_gatherings_${gatheringIdx}_units_${unitIdx}-delete-confirm-yes`).click();
-    });
-}
-exports.removeUnit = removeUnit;
-const updateValue = ($input, value, blur = true) => __awaiter(void 0, void 0, void 0, function* () {
-    const current = (yield $input.getAttribute("value")) || "";
-    yield $input.click();
-    yield $input.sendKeys(...Array(current.length).fill(protractor_1.protractor.Key.BACK_SPACE), value);
-    if (blur) {
-        return $input.sendKeys(protractor_1.protractor.Key.TAB);
-    }
-});
-exports.updateValue = updateValue;
-exports.mockImageMetadata = {
-    "id": "mock",
-    "capturerVerbatim": [
-        "mock"
-    ],
-    "intellectualOwner": "mock",
-    "intellectualRights": "MZ.intellectualRightsCC-BY-SA-4.0",
-    "fullURL": "https://imagetest.laji.fi/MM.97056/pixel_full.jpg",
-    "largeURL": "https://imagetest.laji.fi/MM.97056/pixel_large.jpg",
-    "squareThumbnailURL": "https://imagetest.laji.fi/MM.97056/pixel_square.jpg",
-    "thumbnailURL": "https://imagetest.laji.fi/MM.97056/pixel_thumb.jpg",
-    "originalURL": "https://imagetest.laji.fi/MM.97056/pixel.png",
-    "uploadedBy": "MA.308",
-    "@context": "http://schema.laji.fi/context/image-en.jsonld"
-};
 const filterUUIDs = (any) => {
     if (typeof any === "object" && !Array.isArray(any) && any !== null) {
         return Object.keys(any).filter(key => key !== "_lajiFormId").reduce((_any, key) => (Object.assign(Object.assign({}, _any), { [key]: exports.filterUUIDs(any[key]) })), {});
@@ -352,3 +343,8 @@ const filterUUIDs = (any) => {
 exports.filterUUIDs = filterUUIDs;
 const maybeJSONPointerToLocator = (pointer) => pointer[0] === "/" ? pointer.slice(1).replace(/\//g, "_") : pointer;
 exports.maybeJSONPointerToLocator = maybeJSONPointerToLocator;
+const getRemoveUnit = (page) => (gatheringIdx, unitIdx) => __awaiter(void 0, void 0, void 0, function* () {
+    yield page.locator(`#root_gatherings_${gatheringIdx}_units_${unitIdx}-delete`).click();
+    return page.locator(`#root_gatherings_${gatheringIdx}_units_${unitIdx}-delete-confirm-yes`).click();
+});
+exports.getRemoveUnit = getRemoveUnit;