@coolon/angular-ui-powerups 12.3.1 → 12.4.0-alpha.0

package/bundles/coolon-angular-ui-powerups-cypress.umd.js

@@ -1,15 +1,49 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@coolon/typescript-utilities')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups/cypress', ['exports', '@coolon/typescript-utilities'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = global.coolon['angular-ui-powerups'] || {}, global.coolon['angular-ui-powerups'].cypress = {}), global.typescriptUtilities));
-}(this, (function (exports, typescriptUtilities) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('@coolon/typescript-utilities'), require('@angular/router')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups/cypress', ['exports', 'lodash', '@coolon/typescript-utilities', '@angular/router'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = global.coolon['angular-ui-powerups'] || {}, global.coolon['angular-ui-powerups'].cypress = {}), global._, global.typescriptUtilities, global.ng.router));
+}(this, (function (exports, _, typescriptUtilities, router) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
+    }
+
+    var ___namespace = /*#__PURE__*/_interopNamespace(_);
 
     var PageElement = /** @class */ (function () {
-        function PageElement(rootElementAccessor) {
-            this.rootElementAccessor = rootElementAccessor;
+        function PageElement(parent, selector) {
+            this.parentElementAccessor = parent instanceof PageElement ? function () { return parent.element(); } : parent;
+            this.elementAccessStrategy = ___namespace.isString(selector) ? {
+                findIn: function (p) { return p.find(selector); },
+                shouldNotExist: function (p) { return p.should('not.have', selector); }
+            } : selector;
         }
         PageElement.prototype.element = function () {
-            return this.rootElementAccessor ? this.rootElementAccessor() : undefined;
+            var parent = this.getParentElement();
+            return parent ? this.elementAccessStrategy.findIn(parent) : undefined;
+        };
+        PageElement.prototype.getParentElement = function () {
+            return this.parentElementAccessor ? this.parentElementAccessor() : undefined;
+        };
+        PageElement.prototype.find = function (selector) {
+            var _this = this;
+            return new PageElement(function () { return _this.element(); }, selector);
         };
         PageElement.prototype.click = function (text) {
             text ? this.element().contains(text).click() : this.element().click();
@@ -22,10 +56,13 @@
             configurable: true
         });
         PageElement.prototype.shouldBeVisible = function () {
-            this.should("be.visible");
+            this.should('be.visible');
         };
         PageElement.prototype.shouldNotBeVisible = function () {
-            this.should("not.be.visible");
+            if (!this.elementAccessStrategy.shouldNotExist) {
+                typescriptUtilities.lang.abstractMethod(this.constructor);
+            }
+            this.elementAccessStrategy.shouldNotExist(this.getParentElement());
         };
         return PageElement;
     }());
@@ -342,54 +379,131 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
+    var urlSerialiser = new router.DefaultUrlSerializer();
+    exports.Path = /** @class */ (function () {
+        function Path(segments) {
+            this.segments = segments;
+        }
+        Path.extractVisitParameters = function (url) {
+            var result = {};
+            var urlTree = urlSerialiser.parse(url);
+            urlTree.root.children.primary.segments.forEach(function (s) {
+                result = Object.assign(Object.assign({}, result), s.parameters);
+            });
+            return result;
+        };
+        Path.prototype.toUrl = function (params) {
+            return this.segments.map(function (s) { return s.toUrlPart(params); }).join('/');
+        };
+        return Path;
+    }());
+    (function (Path) {
+        function setUrlSerialiser(serialiser) {
+            urlSerialiser = serialiser;
+        }
+        Path.setUrlSerialiser = setUrlSerialiser;
+        var Segment = /** @class */ (function () {
+            function Segment(path, params) {
+                if (params === void 0) { params = {}; }
+                var _a;
+                this.path = path;
+                this.routeId = params === null || params === void 0 ? void 0 : params.routeId;
+                this.visitParams = (_a = params === null || params === void 0 ? void 0 : params.visitParams) !== null && _a !== void 0 ? _a : [];
+            }
+            Segment.prototype.toUrlPart = function (params) {
+                var path = this.path;
+                this.visitParams.forEach(function (p) {
+                    var value = params[p];
+                    if (value) {
+                        path = path + ";" + p + "=" + value;
+                    }
+                });
+                if (this.routeId && params[this.routeId]) {
+                    path = path + '/' + params[this.routeId];
+                }
+                return path;
+            };
+            return Segment;
+        }());
+        Path.Segment = Segment;
+        var Builder = /** @class */ (function () {
+            function Builder() {
+                this.segments = [];
+            }
+            Builder.prototype.segment = function (name, params) {
+                var builder = new Segment(name, params);
+                this.segments.push(builder);
+                return this;
+            };
+            Builder.prototype.getPath = function () {
+                return new Path(this.segments);
+            };
+            return Builder;
+        }());
+        Path.Builder = Builder;
+    })(exports.Path || (exports.Path = {}));
+
     var AupCommandFace = /** @class */ (function (_super) {
         __extends(AupCommandFace, _super);
-        function AupCommandFace() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function AupCommandFace(parentElement, face) {
+            return _super.call(this, function () { return parentElement.element(); }, AupCommandFace.createAccessor(face)) || this;
         }
-        AupCommandFace.create = function (parent, face) {
-            var parentFinder = function () { return parent.element(); };
-            var rootElementAccessor = this.createFinder(parentFinder, face);
-            return new AupCommandFace(rootElementAccessor);
-        };
-        AupCommandFace.createFinder = function (parent, face) {
+        AupCommandFace.createAccessor = function (face) {
             // AOT barfs if we return a lambda
-            var finder = function () { return face.text ?
-                parent().contains("aup-command-face", face.text()) :
-                face.icon ?
-                    parent().find("aup-icon[ng-reflect-icon=" + face.icon() + "]").closest('aup-command-face') :
-                    undefined; };
-            return finder;
+            var accessor = {
+                findIn: function (parent) {
+                    return face.text ?
+                        parent.contains("aup-command-face", face.text()) :
+                        face.icon ?
+                            parent.find("aup-icon[ng-reflect-icon=" + face.icon() + "]").closest('aup-command-face') :
+                            undefined;
+                },
+                shouldNotExist: function (parent) {
+                    return face.text ?
+                        parent.should("not.contain", "aup-command-face", face.text()) :
+                        face.icon ?
+                            parent.should("not.contain", "aup-icon[ng-reflect-icon=" + face.icon() + "]") :
+                            undefined;
+                }
+            };
+            return accessor;
         };
         return AupCommandFace;
     }(PageElement));
 
-    var Button = /** @class */ (function (_super) {
-        __extends(Button, _super);
-        function Button() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        Button.prototype.click = function () {
-            return this.element().click();
-        };
-        Button.prototype.shouldBeDisabled = function () {
-            this.should("be.disabled");
-            // this.should("have.css", "color", "rgba(0,0,0,0.26)")
-        };
-        return Button;
-    }(PageElement));
+    function ButtonMixin(Base) {
+        return /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            function class_1() {
+                var args = [];
+                for (var _i = 0; _i < arguments.length; _i++) {
+                    args[_i] = arguments[_i];
+                }
+                return _super.apply(this, __spreadArray([], __read(args))) || this;
+            }
+            class_1.prototype.click = function () {
+                return this.element().click();
+            };
+            class_1.prototype.shouldBeDisabled = function () {
+                this.should("be.disabled");
+                // this.should("have.css", "color", "rgba(0,0,0,0.26)")
+            };
+            return class_1;
+        }(Base));
+    }
 
     var AupCommand = /** @class */ (function (_super) {
         __extends(AupCommand, _super);
-        function AupCommand() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function AupCommand(parentElementAccessor, face) {
+            var _this = this;
+            var faceAccessor = AupCommandFace.createAccessor(face);
+            _this = _super.call(this, parentElementAccessor, {
+                findIn: function (parent) {
+                    return faceAccessor.findIn(parent).closest("aup-command");
+                }
+            }) || this;
+            return _this;
         }
-        AupCommand.create = function (parent, face) {
-            var parentFinder = function () { return parent.element().find('aup-command'); };
-            var findFace = AupCommandFace.createFinder(parentFinder, face);
-            var commandFinder = function () { return findFace().closest("aup-command"); };
-            return new AupCommand(commandFinder);
-        };
         Object.defineProperty(AupCommand.prototype, "should", {
             get: function () {
                 return this.element().find('button').should;
@@ -398,7 +512,7 @@
             configurable: true
         });
         return AupCommand;
-    }(Button));
+    }(ButtonMixin(PageElement)));
 
     exports.AupInput = /** @class */ (function (_super) {
         __extends(AupInput, _super);
@@ -508,15 +622,11 @@
         function AupNavigation() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        AupNavigation.create = function (parent, selector) {
-            var rootElementAccessor = function () { return parent.element().find(selector); };
-            return new AupNavigation(rootElementAccessor);
-        };
         AupNavigation.prototype.click = function (label) {
             return _super.prototype.click.call(this, label);
         };
         AupNavigation.prototype.face = function (label) {
-            return AupCommandFace.create(this, { text: function () { return label; } });
+            return new AupCommandFace(this, { text: function () { return label; } });
         };
         AupNavigation.prototype.shouldHaveLink = function (label) {
             this.face(label).shouldBeVisible();
@@ -527,6 +637,70 @@
         return AupNavigation;
     }(PageElement));
 
+    exports.AupTable = /** @class */ (function (_super) {
+        __extends(AupTable, _super);
+        function AupTable(parentElementAccessor, selector) {
+            return _super.call(this, parentElementAccessor, selector) || this;
+        }
+        AupTable.prototype.row = function (rowId) {
+            var _this = this;
+            return new AupTable.Row(function () { return _this.element(); }, "tr[aup-table-id=" + rowId + "]");
+        };
+        AupTable.prototype.column = function (columnId) {
+            return new AupTable.Column(this, columnId);
+        };
+        return AupTable;
+    }(PageElement));
+    (function (AupTable) {
+        var Row = /** @class */ (function (_super) {
+            __extends(Row, _super);
+            function Row() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            return Row;
+        }(PageElement));
+        AupTable.Row = Row;
+        var Column = /** @class */ (function () {
+            function Column(table, columnId) {
+                this.table = table;
+                this.columnId = columnId;
+            }
+            Column.prototype.cell = function (content) {
+                var self = this;
+                return new Cell(this.table, {
+                    findIn: function (parent) {
+                        return parent.contains("aup-table-cell-renderer[column-id=" + self.columnId + "]", content);
+                    }
+                });
+            };
+            return Column;
+        }());
+        AupTable.Column = Column;
+        var Cell = /** @class */ (function (_super) {
+            __extends(Cell, _super);
+            function Cell() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            return Cell;
+        }(PageElement));
+        AupTable.Cell = Cell;
+    })(exports.AupTable || (exports.AupTable = {}));
+
+    var Button = /** @class */ (function (_super) {
+        __extends(Button, _super);
+        function Button(parentElementAccessor, buttonText) {
+            return _super.call(this, parentElementAccessor, {
+                findIn: function (parent) {
+                    return parent.contains('button', buttonText);
+                },
+                shouldNotExist: function (parent) {
+                    return parent.should('not.contain', buttonText);
+                }
+            }) || this;
+        }
+        return Button;
+    }(ButtonMixin(PageElement)));
+
     exports.Section = void 0;
     (function (Section) {
         function Mixin(Base) {
@@ -537,41 +711,55 @@
                 }
                 class_1.prototype.section = function (selector, section) {
                     var _this = this;
-                    var impl = new Impl(function () { return _this.element().find(selector); });
+                    var impl = new Impl(function () { return _this.element(); }, selector);
                     return typescriptUtilities.Mixin.createProxy(section(impl), impl);
                 };
+                class_1.prototype.find = function (selector) {
+                    var _this = this;
+                    return new PageElement(function () { return _this.element(); }, selector);
+                };
                 class_1.prototype.contains = function (text) {
                     var _this = this;
-                    return new PageElement(function () { return _this.element().contains(text); });
+                    return new PageElement(function () { return _this.element(); }, {
+                        findIn: function (parent) { return parent.contains(text); },
+                        shouldNotExist: function (parent) { return parent.should("not.contain", text); }
+                    });
                 };
                 class_1.prototype.button = function (text) {
                     var _this = this;
-                    return new Button(function () { return _this.element().contains("button", text); });
+                    return new Button(function () { return _this.element(); }, text);
                 };
                 class_1.prototype.aupStringInput = function (selector) {
                     var _this = this;
-                    return new exports.AupInput.HtmlInput(function () { return _this.element().find(selector !== null && selector !== void 0 ? selector : 'aup-string-input'); });
+                    return new exports.AupInput.HtmlInput(function () { return _this.element(); }, selector !== null && selector !== void 0 ? selector : 'aup-string-input');
                 };
                 class_1.prototype.aupTextInput = function (selector) {
                     var _this = this;
-                    return new exports.AupInput.TextAreaInput(function () { return _this.element().find(selector !== null && selector !== void 0 ? selector : 'aup-text-input'); });
+                    return new exports.AupInput.TextAreaInput(function () { return _this.element(); }, selector !== null && selector !== void 0 ? selector : 'aup-text-input');
                 };
                 class_1.prototype.aupPasswordInput = function (selector) {
                     var _this = this;
-                    return new exports.AupInput.HtmlInput(function () { return _this.element().find(selector !== null && selector !== void 0 ? selector : 'aup-password-input'); });
+                    return new exports.AupInput.HtmlInput(function () { return _this.element(); }, selector !== null && selector !== void 0 ? selector : 'aup-password-input');
                 };
                 class_1.prototype.aupNumberInput = function (selector) {
                     var _this = this;
-                    return new exports.AupInput.HtmlInput(function () { return _this.element().find(selector !== null && selector !== void 0 ? selector : 'aup-number-input'); });
+                    return new exports.AupInput.HtmlInput(function () { return _this.element(); }, selector !== null && selector !== void 0 ? selector : 'aup-number-input');
                 };
                 class_1.prototype.aupCommand = function (face) {
-                    return AupCommand.create(this, face);
+                    var _this = this;
+                    return new AupCommand(function () { return _this.element(); }, face);
                 };
                 class_1.prototype.aupTabbedNavigation = function () {
-                    return AupNavigation.create(this, 'aup-tabbed-place-navigation');
+                    var _this = this;
+                    return new AupNavigation(function () { return _this.element(); }, 'aup-tabbed-place-navigation');
                 };
                 class_1.prototype.aupSideNavigation = function () {
-                    return AupNavigation.create(this, 'aup-list-place-nav');
+                    var _this = this;
+                    return new AupNavigation(function () { return _this.element(); }, 'aup-list-place-nav');
+                };
+                class_1.prototype.aupTable = function (selector) {
+                    var _this = this;
+                    return new exports.AupTable(function () { return _this.element(); }, selector !== null && selector !== void 0 ? selector : 'aup-table');
                 };
                 return class_1;
             }(Base));
@@ -589,7 +777,7 @@
     exports.Page = /** @class */ (function (_super) {
         __extends(Page, _super);
         function Page(path) {
-            var _this = _super.call(this) || this;
+            var _this = _super.call(this, undefined, undefined) || this;
             _this.path = path;
             _this.rootElementSelector = 'body';
             return _this;
@@ -597,12 +785,12 @@
         Page.prototype.element = function () {
             return cy.get(this.rootElementSelector);
         };
-        Page.prototype.visit = function () {
-            this.tryAndVisit();
-            this.shouldBeActive();
+        Page.prototype.visit = function (params) {
+            this.tryAndVisit(params);
+            this.shouldBeActive(params);
         };
-        Page.prototype.tryAndVisit = function () {
-            cy.visit(this.path);
+        Page.prototype.tryAndVisit = function (params) {
+            cy.visit("/" + this.path.toUrl(params !== null && params !== void 0 ? params : {}));
         };
         Page.prototype.shouldHaveActivityIds = function () {
             var ids = [];
@@ -614,42 +802,50 @@
         Page.prototype.shouldNotHaveActivityIds = function () {
             cy.location('search').should('not.contain', "?aup-interactions");
         };
-        Page.prototype.shouldBeActive = function (options) {
+        Page.prototype.shouldHaveTitle = function (title) {
+            cy.title().should('eq', title);
+        };
+        Page.prototype.shouldBeActive = function (withParameters) {
             // Note: cy.window() doesn't return a promise... it's a chainable.
             cy.window().then(function (window) {
                 cy['waitUntil'](function () {
                     return window['aup.PlaceRouter'] && !window['aup.PlaceRouter'].isNavigating();
                 });
             });
-            var bits = [this.path];
-            // TODO: add support for parameter names...
-            if (options && options.withParameters) {
-                bits.push(";([^?]+)");
-            }
-            if (options && options.withActivities) {
-                bits.push("?aup-interactions=" + options.withActivities.join('--') + ")");
-            }
-            cy.location('pathname').should('match', new RegExp("^" + bits.join('') + "$"));
-            if (options && options.withTitle) {
-                cy.title().should('eq', options.withTitle);
+            if (withParameters) {
+                cy.location('pathname').then(function (path) {
+                    var urlParams = exports.Path.extractVisitParameters(path);
+                    Object.keys(withParameters).forEach(function (param) {
+                        var expected = withParameters[param];
+                        // @ts-ignore
+                        expect(urlParams[param]).to.equal(expected);
+                    });
+                });
             }
         };
         return Page;
     }(PageElement));
     (function (Page) {
-        function create(path, page) {
-            var builder = new Builder(path);
+        function create(pathOrPathBuilder, page) {
+            var pathBuilder = new exports.Path.Builder();
+            if (___namespace.isString(pathOrPathBuilder)) {
+                pathOrPathBuilder.split("/").filter(function (p) { return !___namespace.isEmpty(p); }).forEach(function (p) { return pathBuilder.segment(p); });
+            }
+            else {
+                pathOrPathBuilder(pathBuilder);
+            }
+            var builder = new PageBuilder(pathBuilder.getPath());
             return typescriptUtilities.Mixin.createProxy(page(builder), builder);
         }
         Page.create = create;
-        var Builder = /** @class */ (function (_super) {
-            __extends(Builder, _super);
-            function Builder() {
+        var PageBuilder = /** @class */ (function (_super) {
+            __extends(PageBuilder, _super);
+            function PageBuilder() {
                 return _super !== null && _super.apply(this, arguments) || this;
             }
-            return Builder;
+            return PageBuilder;
         }(exports.Section.Mixin(Page)));
-        Page.Builder = Builder;
+        Page.PageBuilder = PageBuilder;
     })(exports.Page || (exports.Page = {}));
 
     var AupCommandGroup = /** @class */ (function (_super) {
@@ -666,21 +862,28 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         AupMoreMenu.create = function (parent) {
-            var finder = function () { return parent.element().contains('aup-more-menu'); };
-            return new AupMoreMenu(finder);
+            return new AupMoreMenu(parent, 'aup-more-menu');
         };
         return AupMoreMenu;
     }(PageElement));
 
     var AupPopupMenu = /** @class */ (function (_super) {
         __extends(AupPopupMenu, _super);
-        function AupPopupMenu() {
-            return _super !== null && _super.apply(this, arguments) || this;
+        function AupPopupMenu(parentElementAccessor, face) {
+            var _this = this;
+            var accessor = AupCommandFace.createAccessor(face);
+            _this = _super.call(this, parentElementAccessor, {
+                findIn: function (parent) {
+                    return accessor.findIn(parent).closest('button');
+                },
+                shouldNotExist: function (parent) {
+                    accessor.shouldNotExist(parent);
+                }
+            }) || this;
+            return _this;
         }
         AupPopupMenu.create = function (parent, face) {
-            var faceFinder = AupCommandFace.createFinder(function () { return parent.element(); }, face);
-            var buttonFinder = function () { return faceFinder().closest('button'); };
-            return new AupPopupMenu(buttonFinder);
+            return new AupPopupMenu(parent, face);
         };
         return AupPopupMenu;
     }(PageElement));
@@ -713,6 +916,7 @@
     exports.AupPopupMenu = AupPopupMenu;
     exports.AupToolBar = AupToolBar;
     exports.Button = Button;
+    exports.ButtonMixin = ButtonMixin;
     exports.PageElement = PageElement;
 
     Object.defineProperty(exports, '__esModule', { value: true });