initial e2e integration (#329)

* e2e integration with ci

* update travis config

* try always build image

* build the app in production mode

* try to stop previous

* stop default postgresql service

* try upgrade selenium-webdriver

* disable Gecko for webdriver-manager

* use stable chrome and latest protractor

e2e/components/component.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, element, by, ExpectedConditions as EC, browser } from 'protractor';
+import { BROWSER_WAIT_TIMEOUT } from '../configs';
+
+export abstract class Component {
+    component: ElementFinder;
+
+    constructor(selector: string, ancestor?: ElementFinder) {
+        const locator = by.css(selector);
+
+        this.component = ancestor
+            ? ancestor.element(locator)
+            : element(locator);
+    }
+
+    wait() {
+        return browser.wait(EC.presenceOf(this.component), BROWSER_WAIT_TIMEOUT);
+    }
+}

e2e/components/components.ts

@@ -0,0 +1,32 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export * from './login/login';
+export * from './header/header';
+export * from './header/user-info';
+export * from './data-table/data-table';
+export * from './pagination/pagination';
+export * from './sidenav/sidenav';
+export * from './toolbar/toolbar';

e2e/components/data-table/data-table.ts

@@ -0,0 +1,243 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, ElementArrayFinder, promise, by, browser, ExpectedConditions as EC, protractor } from 'protractor';
+import { BROWSER_WAIT_TIMEOUT } from '../../configs';
+import { Component } from '../component';
+import { Utils } from '../../utilities/utils';
+
+export class DataTable extends Component {
+    private static selectors = {
+        root: 'adf-datatable',
+
+        head: '.adf-datatable-header',
+        columnHeader: '.adf-datatable-row .adf-datatable-table-cell-header',
+        sortedColumnHeader: `
+            .adf-data-table__header--sorted-asc,
+            .adf-data-table__header--sorted-desc
+        `,
+
+        body: '.adf-datatable-body',
+        row: '.adf-datatable-row[role]',
+        selectedRow: '.adf-datatable-row.is-selected',
+        cell: '.adf-data-table-cell',
+        locationLink: 'app-location-link',
+
+        selectedIcon: '.mat-icon',
+
+        emptyListContainer: 'div.adf-no-content-container',
+        emptyFolderDragAndDrop: '.adf-empty-list_template .adf-empty-folder',
+
+        emptyListTitle: '.app-empty-folder__title',
+        emptyListSubtitle: '.app-empty-folder__subtitle',
+        emptyListText: '.app-empty-folder__text'
+    };
+
+    head: ElementFinder = this.component.element(by.css(DataTable.selectors.head));
+    body: ElementFinder = this.component.element(by.css(DataTable.selectors.body));
+    cell = by.css(DataTable.selectors.cell);
+    locationLink = by.css(DataTable.selectors.locationLink);
+    emptyList: ElementFinder = this.component.element(by.css(DataTable.selectors.emptyListContainer));
+    emptyFolderDragAndDrop: ElementFinder = this.component.element(by.css(DataTable.selectors.emptyFolderDragAndDrop));
+    emptyListTitle: ElementFinder = this.component.element(by.css(DataTable.selectors.emptyListTitle));
+    emptyListSubtitle: ElementFinder = this.component.element(by.css(DataTable.selectors.emptyListSubtitle));
+    emptyListText: ElementArrayFinder = this.component.all(by.css(DataTable.selectors.emptyListText));
+
+    constructor(ancestor?: ElementFinder) {
+        super(DataTable.selectors.root, ancestor);
+    }
+
+    // Wait methods (waits for elements)
+    waitForHeader() {
+        return browser.wait(EC.presenceOf(this.head), BROWSER_WAIT_TIMEOUT);
+    }
+
+    waitForEmptyState() {
+        return browser.wait(EC.presenceOf(this.emptyList), BROWSER_WAIT_TIMEOUT);
+    }
+
+    // Header/Column methods
+    getColumnHeaders(): ElementArrayFinder {
+        const locator = by.css(DataTable.selectors.columnHeader);
+        return this.head.all(locator);
+    }
+
+    getNthColumnHeader(nth: number): ElementFinder {
+        return this.getColumnHeaders().get(nth - 1);
+    }
+
+    getColumnHeaderByLabel(label: string): ElementFinder {
+        const locator = by.cssContainingText(DataTable.selectors.columnHeader, label);
+        return this.head.element(locator);
+    }
+
+    getSortedColumnHeader(): ElementFinder {
+        const locator = by.css(DataTable.selectors.sortedColumnHeader);
+        return this.head.element(locator);
+    }
+
+    getSortingOrder() {
+        return this.getSortedColumnHeader().getAttribute('class')
+            .then(str => {
+                if (str.includes('asc')) {
+                    return 'asc';
+                } else {
+                    if (str.includes('desc')) {
+                        return 'desc';
+                    }
+                }
+            });
+    }
+
+    sortByColumn(columnName: string): promise.Promise<void> {
+        const column = this.getColumnHeaderByLabel(columnName);
+        const click = browser.actions().mouseMove(column).click();
+
+        return click.perform();
+    }
+
+    // Rows methods
+    getRows(): ElementArrayFinder {
+        return this.body.all(by.css(DataTable.selectors.row));
+    }
+
+    getSelectedRows(): ElementArrayFinder {
+        return this.body.all(by.css(DataTable.selectors.selectedRow));
+    }
+
+    countSelectedRows(): promise.Promise<number> {
+        return this.getSelectedRows().count();
+    }
+
+    getNthRow(nth: number): ElementFinder {
+        return this.getRows().get(nth - 1);
+    }
+
+    getRowName(name: string): ElementFinder {
+        return this.body.element(by.cssContainingText(`.adf-data-table-cell span`, name));
+    }
+
+    getItemNameTooltip(name: string): promise.Promise<string> {
+        return this.getRowName(name).getAttribute('title');
+    }
+
+    countRows(): promise.Promise<number> {
+        return this.getRows().count();
+    }
+
+    hasCheckMarkIcon(itemName: string) {
+        return this.getRowName(itemName).element(by.xpath(`./ancestor::div[contains(@class, 'adf-datatable-row')]`))
+            .element(by.css(DataTable.selectors.selectedIcon)).isPresent();
+    }
+
+    // Navigation/selection methods
+    doubleClickOnItemName(name: string): promise.Promise<any> {
+        const dblClick = browser.actions()
+            .mouseMove(this.getRowName(name))
+            .click()
+            .click();
+
+        return dblClick.perform();
+    }
+
+    clickOnItemName(name: string): promise.Promise<any> {
+        const item = this.getRowName(name);
+        return Utils.waitUntilElementClickable(item)
+            .then(() => this.getRowName(name).click());
+    }
+
+    selectMultipleItems(names: string[]): promise.Promise<void> {
+        return this.clearSelection()
+            .then(() => browser.actions().sendKeys(protractor.Key.COMMAND).perform())
+            .then(() => {
+                names.forEach(name => {
+                    this.clickOnItemName(name);
+                });
+            })
+            .then(() => browser.actions().sendKeys(protractor.Key.NULL).perform());
+    }
+
+    clearSelection(): promise.Promise<void> {
+        return this.getSelectedRows().count()
+            .then(count => {
+                if (count !== 0) { browser.refresh().then(() => this.waitForHeader()); }
+            });
+    }
+
+    getItemLocation(name: string) {
+        return this.getRowName(name).element(by.xpath(`./ancestor::div[contains(@class, 'adf-datatable-row')]`))
+            .element(this.locationLink);
+    }
+
+    getItemLocationTooltip(name: string): promise.Promise<string> {
+        return this.getItemLocation(name).$('a').getAttribute('title');
+    }
+
+    clickItemLocation(name: string) {
+        return this.getItemLocation(name).click();
+    }
+
+    // empty state methods
+    isEmptyList(): promise.Promise<boolean> {
+        return this.emptyList.isPresent();
+    }
+
+    isEmptyWithDragAndDrop(): promise.Promise<boolean> {
+        return this.emptyFolderDragAndDrop.isDisplayed();
+    }
+
+    getEmptyDragAndDropText(): promise.Promise<string> {
+        return this.isEmptyWithDragAndDrop()
+            .then(() => {
+                return this.emptyFolderDragAndDrop.getText();
+            });
+    }
+
+    getEmptyStateTitle(): promise.Promise<string> {
+        return this.isEmptyList()
+            .then(() => {
+                return this.emptyListTitle.getText();
+            });
+    }
+
+    getEmptyStateSubtitle(): promise.Promise<string> {
+        return this.isEmptyList()
+            .then(() => {
+                return this.emptyListSubtitle.getText();
+            });
+    }
+
+    getEmptyStateText(): promise.Promise<string> {
+        return this.isEmptyList()
+            .then(() => {
+                return this.emptyListText.getText();
+            });
+    }
+
+    getCellsContainingName(name: string) {
+        return this.getRows().all(by.cssContainingText(DataTable.selectors.cell, name))
+            .map(cell => cell.getText());
+    }
+}

e2e/components/dialog/create-edit-folder-dialog.ts

@@ -0,0 +1,108 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, by, browser, protractor, ExpectedConditions as EC, promise } from 'protractor';
+import { BROWSER_WAIT_TIMEOUT } from '../../configs';
+import { Component } from '../component';
+import { Utils } from '../../utilities/utils';
+
+export class CreateOrEditFolderDialog extends Component {
+    private static selectors = {
+        root: 'adf-folder-dialog',
+
+        title: '.mat-dialog-title',
+        nameInput: 'input[placeholder="Name" i]',
+        descriptionTextArea: 'textarea[placeholder="Description" i]',
+        button: '.mat-dialog-actions button',
+        validationMessage: '.mat-hint span'
+    };
+
+    title: ElementFinder = this.component.element(by.css(CreateOrEditFolderDialog.selectors.title));
+    nameInput: ElementFinder = this.component.element(by.css(CreateOrEditFolderDialog.selectors.nameInput));
+    descriptionTextArea: ElementFinder = this.component.element(by.css(CreateOrEditFolderDialog.selectors.descriptionTextArea));
+    createButton: ElementFinder = this.component.element(by.cssContainingText(CreateOrEditFolderDialog.selectors.button, 'Create'));
+    cancelButton: ElementFinder = this.component.element(by.cssContainingText(CreateOrEditFolderDialog.selectors.button, 'Cancel'));
+    updateButton: ElementFinder = this.component.element(by.cssContainingText(CreateOrEditFolderDialog.selectors.button, 'Update'));
+    validationMessage: ElementFinder = this.component.element(by.css(CreateOrEditFolderDialog.selectors.validationMessage));
+
+    constructor(ancestor?: ElementFinder) {
+        super(CreateOrEditFolderDialog.selectors.root, ancestor);
+    }
+
+    waitForDialogToOpen() {
+        return browser.wait(EC.presenceOf(this.title), BROWSER_WAIT_TIMEOUT)
+            .then(() => browser.wait(EC.presenceOf(browser.element(by.css('.cdk-overlay-backdrop'))), BROWSER_WAIT_TIMEOUT));
+
+    }
+
+    waitForDialogToClose() {
+        return browser.wait(EC.stalenessOf(this.title), BROWSER_WAIT_TIMEOUT);
+    }
+
+    getTitle(): promise.Promise<string> {
+        return this.title.getText();
+    }
+
+    isValidationMessageDisplayed(): promise.Promise<boolean> {
+        return this.validationMessage.isDisplayed();
+    }
+
+    getValidationMessage(): promise.Promise<string> {
+        return this.isValidationMessageDisplayed()
+            .then(() => this.validationMessage.getText());
+    }
+
+    enterName(name: string) {
+        return this.nameInput.clear()
+            // .then(() => this.nameInput.sendKeys(name));
+            .then(() => Utils.typeInField(this.nameInput, name));
+    }
+
+    enterDescription(description: string) {
+        return this.descriptionTextArea.clear()
+            // .then(() => this.descriptionTextArea.sendKeys(description));
+            .then(() => Utils.typeInField(this.descriptionTextArea, description));
+    }
+
+    deleteNameWithBackspace(): promise.Promise<void> {
+        return this.nameInput.clear()
+            .then(() => {
+                return this.nameInput.sendKeys(' ', protractor.Key.CONTROL, 'a', protractor.Key.NULL, protractor.Key.BACK_SPACE);
+            });
+    }
+
+    clickCreate() {
+        return this.createButton.click();
+    }
+
+    clickCancel() {
+        return this.cancelButton.click()
+            .then(() => this.waitForDialogToClose());
+    }
+
+    clickUpdate() {
+        return this.updateButton.click();
+    }
+}

e2e/components/header/header.ts

@@ -0,0 +1,42 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, by } from 'protractor';
+import { Component } from '../component';
+import { UserInfo } from './user-info';
+
+export class Header extends Component {
+    private locators = {
+        logoLink: by.css('.app-menu__title'),
+        userInfo: by.css('app-current-user')
+    };
+
+    logoLink: ElementFinder = this.component.element(this.locators.logoLink);
+    userInfo: UserInfo = new UserInfo(this.component);
+
+    constructor(ancestor?: ElementFinder) {
+        super('app-header', ancestor);
+    }
+}

e2e/components/header/user-info.ts

@@ -0,0 +1,64 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, by, promise } from 'protractor';
+import { Menu } from '../menu/menu';
+import { Component } from '../component';
+
+export class UserInfo extends Component {
+    private locators = {
+        avatar: by.css('.current-user__avatar'),
+        fullName: by.css('.current-user__full-name'),
+        menuItems: by.css('[mat-menu-item]')
+    };
+
+    fullName: ElementFinder = this.component.element(this.locators.fullName);
+    avatar: ElementFinder = this.component.element(this.locators.avatar);
+
+    menu: Menu = new Menu();
+
+    constructor(ancestor?: ElementFinder) {
+        super('app-current-user', ancestor);
+    }
+
+    openMenu(): promise.Promise<Menu> {
+        const { menu, avatar } = this;
+
+        return avatar.click()
+            .then(() => menu.wait())
+            .then(() => menu);
+    }
+
+    get name(): promise.Promise<string> {
+        return this.fullName.getText();
+    }
+
+    signOut(): promise.Promise<void> {
+        return this.openMenu()
+            .then(menu => {
+                menu.clickMenuItem('Sign out');
+            });
+    }
+}

e2e/components/login/login.ts

@@ -0,0 +1,105 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { by, ElementFinder, promise } from 'protractor';
+import { Component } from '../component';
+
+export class LoginComponent extends Component {
+    static selector = 'adf-login';
+
+    private locators = {
+        usernameInput: by.css('input#username'),
+        passwordInput: by.css('input#password'),
+        passwordVisibility: by.css('.adf-login-password-icon'),
+        submitButton: by.css('button#login-button'),
+        errorMessage: by.css('.login-error-message'),
+        copyright: by.css('.copyright')
+    };
+
+    usernameInput: ElementFinder = this.component.element(this.locators.usernameInput);
+    passwordInput: ElementFinder = this.component.element(this.locators.passwordInput);
+    submitButton: ElementFinder = this.component.element(this.locators.submitButton);
+    errorMessage: ElementFinder = this.component.element(this.locators.errorMessage);
+    copyright: ElementFinder = this.component.element(this.locators.copyright);
+    passwordVisibility: ElementFinder = this.component.element(this.locators.passwordVisibility);
+
+    constructor(ancestor?: ElementFinder) {
+        super(LoginComponent.selector, ancestor);
+    }
+
+    enterUsername(username: string): LoginComponent {
+        const { usernameInput } = this;
+
+        usernameInput.clear();
+        usernameInput.sendKeys(username);
+
+        return this;
+    }
+
+    enterPassword(password: string): LoginComponent {
+        const { passwordInput } = this;
+
+        passwordInput.clear();
+        passwordInput.sendKeys(password);
+
+        return this;
+    }
+
+    enterCredentials(username: string, password: string) {
+        this.enterUsername(username).enterPassword(password);
+
+        return this;
+    }
+
+    submit(): promise.Promise<void> {
+        return this.submitButton.click();
+    }
+
+    getPasswordVisibility() {
+        return this.passwordVisibility.getText()
+            .then(text => {
+                if (text.endsWith('visibility_off')) {
+                    return false;
+                } else {
+                    if (text.endsWith('visibility')) {
+                        return true;
+                    }
+                }
+            });
+    }
+
+    isPasswordShown() {
+        return this.passwordInput.getAttribute('type')
+            .then(type => {
+                if (type === 'text') {
+                    return true;
+                } else {
+                    if (type === 'password') {
+                        return false;
+                    }
+                }
+            });
+    }
+}

e2e/components/menu/menu.ts

@@ -0,0 +1,106 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, ElementArrayFinder, by, browser, ExpectedConditions as EC, promise } from 'protractor';
+import { BROWSER_WAIT_TIMEOUT } from '../../configs';
+import { Component } from '../component';
+
+export class Menu extends Component {
+    private static selectors = {
+        root: '.mat-menu-panel',
+        item: '.mat-menu-item',
+        icon: '.mat-icon',
+        uploadFiles: 'input[id="upload-multiple-files"]'
+    };
+
+    items: ElementArrayFinder = this.component.all(by.css(Menu.selectors.item));
+    backdrop: ElementFinder = browser.element(by.css('.cdk-overlay-backdrop'));
+    uploadFiles: ElementFinder = this.component.element(by.css(Menu.selectors.uploadFiles));
+
+    constructor(ancestor?: ElementFinder) {
+        super(Menu.selectors.root, ancestor);
+    }
+
+    waitForMenuToOpen() {
+        return browser.wait(EC.presenceOf(browser.element(by.css('.mat-menu-panel'))), BROWSER_WAIT_TIMEOUT)
+            .then(() => browser.wait(EC.presenceOf(browser.element(by.css('.cdk-overlay-backdrop'))), BROWSER_WAIT_TIMEOUT))
+            .then(() => browser.wait(EC.visibilityOf(this.items.get(0)), BROWSER_WAIT_TIMEOUT));
+    }
+
+    waitForMenuToClose() {
+        return browser.wait(EC.not(EC.presenceOf(browser.element(by.css('.mat-menu-panel')))), BROWSER_WAIT_TIMEOUT);
+    }
+
+    closeMenu() {
+        if (this.backdrop.isPresent()) {
+            return this.backdrop.click();
+        } else {
+            return browser.actions().mouseMove(browser.$('body'), { x: 0, y: 0 }).click().perform();
+        }
+    }
+
+    getNthItem(nth: number): ElementFinder {
+        return this.items.get(nth - 1);
+    }
+
+    getItemByLabel(menuItem: string): ElementFinder {
+        return this.component.element(by.cssContainingText(Menu.selectors.item, menuItem));
+    }
+
+    getItemTooltip(menuItem: string): promise.Promise<string> {
+        return this.getItemByLabel(menuItem).getAttribute('title');
+    }
+
+    getItemIconText(menuItem: string) {
+        return this.getItemByLabel(menuItem).element(by.css(Menu.selectors.icon)).getText();
+
+    }
+
+    getItemsCount(): promise.Promise<number> {
+        return this.items.count();
+    }
+
+    clickNthItem(nth: number): promise.Promise<any> {
+        const elem = this.getNthItem(nth);
+        return browser.wait(EC.elementToBeClickable(elem), BROWSER_WAIT_TIMEOUT)
+            .then(() => browser.actions().mouseMove(elem).click().perform())
+            .then(() => this.waitForMenuToClose());
+    }
+
+    clickMenuItem(menuItem: string): promise.Promise<any> {
+        const elem = this.getItemByLabel(menuItem);
+        return browser.wait(EC.elementToBeClickable(elem), BROWSER_WAIT_TIMEOUT)
+            .then(() => elem.click())
+            .then(() => this.waitForMenuToClose());
+    }
+
+    isMenuItemPresent(title: string): promise.Promise<boolean> {
+        return this.component.element(by.cssContainingText(Menu.selectors.item, title)).isPresent();
+    }
+
+    uploadFile() {
+        return this.uploadFiles;
+    }
+}

e2e/components/pagination/pagination.ts

@@ -0,0 +1,98 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, promise, by } from 'protractor';
+import { Menu } from '../menu/menu';
+import { Component } from '../component';
+
+export class Pagination extends Component {
+    private static selectors = {
+        root: 'adf-pagination',
+        range: '.adf-pagination__range',
+        maxItems: '.adf-pagination__max-items',
+        currentPage: '.adf-pagination__current-page',
+        totalPages: '.adf-pagination__total-pages',
+
+        previousButton: '.adf-pagination__previous-button',
+        nextButton: '.adf-pagination__next-button',
+        maxItemsButton: '.adf-pagination__max-items + button[mat-icon-button]',
+        pagesButton: '.adf-pagination__current-page + button[mat-icon-button]'
+    };
+
+    range: ElementFinder = this.component.element(by.css(Pagination.selectors.range));
+    maxItems: ElementFinder = this.component.element(by.css(Pagination.selectors.maxItems));
+    currentPage: ElementFinder = this.component.element(by.css(Pagination.selectors.currentPage));
+    totalPages: ElementFinder = this.component.element(by.css(Pagination.selectors.totalPages));
+    previousButton: ElementFinder = this.component.element(by.css(Pagination.selectors.previousButton));
+    nextButton: ElementFinder = this.component.element(by.css(Pagination.selectors.nextButton));
+    maxItemsButton: ElementFinder = this.component.element(by.css(Pagination.selectors.maxItemsButton));
+    pagesButton: ElementFinder = this.component.element(by.css(Pagination.selectors.pagesButton));
+
+    menu: Menu = new Menu();
+
+    constructor(ancestor?: ElementFinder) {
+        super(Pagination.selectors.root, ancestor);
+    }
+
+    openMaxItemsMenu(): promise.Promise<Menu> {
+        const { menu, maxItemsButton } = this;
+
+        return maxItemsButton.click()
+            .then(() => menu.waitForMenuToOpen())
+            .then(() => menu);
+    }
+
+    openCurrentPageMenu(): promise.Promise<Menu> {
+        const { menu, pagesButton } = this;
+
+        return pagesButton.click()
+            .then(() => menu.waitForMenuToOpen())
+            .then(() => menu);
+    }
+
+    getText(elem: ElementFinder) {
+        return elem.getText();
+    }
+
+    resetToDefaultPageSize(): promise.Promise<any> {
+        return this.openMaxItemsMenu()
+            .then(menu => menu.clickMenuItem('25'))
+            .then(() => this.menu.waitForMenuToClose());
+    }
+
+    resetToDefaultPageNumber(): promise.Promise<any> {
+        return this.openCurrentPageMenu()
+            .then(menu => menu.clickMenuItem('1'))
+            .then(() => this.menu.waitForMenuToClose());
+    }
+
+    clickNext(): promise.Promise<any> {
+        return this.nextButton.click();
+    }
+
+    clickPrevious(): promise.Promise<any> {
+        return this.previousButton.click();
+    }
+}

e2e/components/sidenav/sidenav.ts

@@ -0,0 +1,82 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, ElementArrayFinder, by, promise } from 'protractor';
+import { Menu } from '../menu/menu';
+import { Component } from '../component';
+
+export class Sidenav extends Component {
+    private static selectors = {
+        root: 'app-sidenav',
+        link: '.sidenav-menu__item',
+        label: '.menu__item--label',
+        activeLink: '.menu__item--active',
+        newButton: '.sidenav__section--new__button'
+    };
+
+    links: ElementArrayFinder = this.component.all(by.css(Sidenav.selectors.link));
+    activeLink: ElementFinder = this.component.element(by.css(Sidenav.selectors.activeLink));
+    newButton: ElementArrayFinder = this.component.all(by.css(Sidenav.selectors.newButton));
+
+    menu: Menu = new Menu();
+
+    constructor(ancestor?: ElementFinder) {
+        super(Sidenav.selectors.root, ancestor);
+    }
+
+    openNewMenu(): promise.Promise<Menu> {
+        const { menu, newButton } = this;
+
+        return newButton.click()
+            .then(() => menu.waitForMenuToOpen())
+            .then(() => menu);
+    }
+
+    openCreateDialog(): any {
+        return this.openNewMenu()
+            .then(() => this.menu.clickMenuItem('Create folder'));
+    }
+
+    isActiveByLabel(label: string): promise.Promise<boolean> {
+        return this.getLinkByLabel(label).getAttribute('class')
+            .then(className => className.includes(Sidenav.selectors.activeLink.replace('.', '')));
+    }
+
+    getLink(label: string): ElementFinder {
+        return this.component.element(by.cssContainingText(Sidenav.selectors.link, label));
+    }
+
+    getLinkByLabel(label: string): ElementFinder {
+        return this.component.element(by.cssContainingText(Sidenav.selectors.label, label));
+    }
+
+    getLinkTooltip(label: string): promise.Promise<string> {
+        return this.getLink(label).getAttribute('title');
+    }
+
+    navigateToLinkByLabel(label: string): promise.Promise<any> {
+        return this.getLinkByLabel(label).click();
+    }
+}

e2e/components/toolbar/toolbar-actions.ts

@@ -0,0 +1,64 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, ElementArrayFinder, by, promise } from 'protractor';
+import { Menu } from '../menu/menu';
+import { Component } from '../component';
+
+export class ToolbarActions extends Component {
+    private static selectors = {
+        root: 'adf-toolbar',
+        button: '.mat-icon-button'
+    };
+
+    menu: Menu = new Menu();
+    buttons: ElementArrayFinder = this.component.all(by.css(ToolbarActions.selectors.button));
+
+    constructor(ancestor?: ElementFinder) {
+        super(ToolbarActions.selectors.root, ancestor);
+    }
+
+    isEmpty(): promise.Promise<boolean> {
+        return this.buttons.count().then(count => (count === 0));
+    }
+
+    isButtonPresent(title: string): promise.Promise<boolean> {
+        return this.component.element(by.css(`${ToolbarActions.selectors.button}[title="${title}"]`)).isPresent();
+    }
+
+    getButtonByLabel(label: string): ElementFinder {
+        return this.component.element(by.cssContainingText(ToolbarActions.selectors.button, label));
+    }
+
+    getButtonByTitleAttribute(title: string): ElementFinder {
+        return this.component.element(by.css(`${ToolbarActions.selectors.button}[title="${title}"]`));
+    }
+
+    openMoreMenu() {
+        return this.getButtonByTitleAttribute('More actions').click()
+            .then(() => this.menu.waitForMenuToOpen())
+            .then(() => this.menu);
+    }
+}

e2e/components/toolbar/toolbar-breadcrumb.ts

@@ -0,0 +1,82 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder, ElementArrayFinder, by, promise } from 'protractor';
+import { Component } from '../component';
+
+export class ToolbarBreadcrumb extends Component {
+    private static selectors = {
+        root: 'adf-breadcrumb',
+        item: '.adf-breadcrumb-item',
+        currentItem: '.adf-breadcrumb-item-current'
+    };
+
+    items: ElementArrayFinder = this.component.all(by.css(ToolbarBreadcrumb.selectors.item));
+    currentItem: ElementFinder = this.component.element(by.css(ToolbarBreadcrumb.selectors.currentItem));
+
+    constructor(ancestor?: ElementFinder) {
+        super(ToolbarBreadcrumb.selectors.root, ancestor);
+    }
+
+    getNthItem(nth: number): ElementFinder {
+        return this.items.get(nth - 1);
+    }
+
+    getNthItemName(nth: number) {
+        return this.getNthItem(nth).getText();
+    }
+
+    getItemsCount(): promise.Promise<number> {
+        return this.items.count();
+    }
+
+    getAllItems() {
+        return this.items.map(elem => elem.getText().then(str => str.split('\nchevron_right')[0]));
+    }
+
+    getFirstItemName(): promise.Promise<string> {
+        return this.items.get(0).getText();
+    }
+
+    getCurrentItem() {
+        return this.currentItem;
+    }
+
+    getCurrentItemName(): promise.Promise<string> {
+        return this.currentItem.getText();
+    }
+
+    clickItem(name: string) {
+        return this.component.element(by.css(`${ToolbarBreadcrumb.selectors.item}[title=${name}]`)).click();
+    }
+
+    clickNthItem(nth: number) {
+        return this.getNthItem(nth).click();
+    }
+
+    getNthItemTooltip(nth: number) {
+        return this.getNthItem(nth).getAttribute('title');
+    }
+}

e2e/components/toolbar/toolbar.ts

@@ -0,0 +1,42 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ElementFinder } from 'protractor';
+import { Component } from '../component';
+import { ToolbarActions } from './toolbar-actions';
+import { ToolbarBreadcrumb } from './toolbar-breadcrumb';
+
+export class Toolbar extends Component {
+    private static selectors = {
+        root: '.inner-layout__header'
+    };
+
+    actions: ToolbarActions = new ToolbarActions(this.component);
+    breadcrumb: ToolbarBreadcrumb = new ToolbarBreadcrumb(this.component);
+
+    constructor(ancestor?: ElementFinder) {
+        super(Toolbar.selectors.root, ancestor);
+    }
+}