[ACA-1920] automate tests for Create file from template (#1303)

* change component ancestor from ElementFinder to string for better usability
better naming for some methods
small code cleanup

* add test components and automate tests for Create File from Template action

* ignore e2e-downloads folder

* add return types

* enable check

* enable check after issue got fixed

e2e/components/breadcrumb/breadcrumb.ts

@@ -36,7 +36,7 @@ export class Breadcrumb extends Component {
   items: ElementArrayFinder = this.component.all(by.css(Breadcrumb.selectors.item));
   currentItem: ElementFinder = this.component.element(by.css(Breadcrumb.selectors.currentItem));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(Breadcrumb.selectors.root, ancestor);
   }
 

e2e/components/breadcrumb/dropdown-breadcrumb.ts

@@ -0,0 +1,77 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2019 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 } from 'protractor';
+import { BROWSER_WAIT_TIMEOUT } from '../../configs';
+import { Component } from '../component';
+
+export class DropDownBreadcrumb extends Component {
+  private static selectors = {
+    root: '.adf-dropdown-breadcrumb',
+    trigger: '.adf-dropdown-breadcrumb-trigger',
+
+    currentFolder: '.adf-current-folder',
+
+    pathOption: '.adf-dropdown-breadcrumb-path-option .mat-option-text'
+  };
+
+  trigger: ElementFinder = this.component.element(by.css(DropDownBreadcrumb.selectors.trigger));
+  pathItems: ElementArrayFinder = browser.$$(DropDownBreadcrumb.selectors.pathOption);
+  pathItemsContainer: ElementFinder = browser.element(by.css('.mat-select-panel'));
+  currentFolder: ElementFinder = this.component.element(by.css(DropDownBreadcrumb.selectors.currentFolder));
+
+  constructor(ancestor?: string) {
+    super(DropDownBreadcrumb.selectors.root, ancestor);
+  }
+
+  async waitForPathListDropdownToOpen(): Promise<void> {
+    await browser.wait(EC.presenceOf(this.pathItemsContainer), BROWSER_WAIT_TIMEOUT, 'Timeout waiting for breadcrumb dropdown to open');
+  }
+
+  async waitForPathListDropdownToClose(): Promise<void> {
+    await browser.wait(EC.stalenessOf(browser.$(DropDownBreadcrumb.selectors.pathOption)), BROWSER_WAIT_TIMEOUT, 'Timeout waiting for breadcrumb dropdown to close');
+  }
+
+  async getCurrentFolderName(): Promise<string> {
+    return this.currentFolder.getText();
+  }
+
+  async openPath(): Promise<void> {
+    await this.trigger.click();
+    await this.waitForPathListDropdownToOpen();
+  }
+
+  async clickPathItem(name: string): Promise<void> {
+    const elem = browser.element(by.cssContainingText(DropDownBreadcrumb.selectors.pathOption, name));
+    await elem.click();
+  }
+
+  async getPathItems(): Promise<string[]> {
+    const items: string[] = await this.pathItems.map(async elem => {
+      return elem.getText();
+    });
+    return items;
+  }
+}

e2e/components/component.ts

@@ -29,11 +29,11 @@ import { BROWSER_WAIT_TIMEOUT } from '../configs';
 export abstract class Component {
   component: ElementFinder;
 
-  constructor(selector: string, ancestor?: ElementFinder) {
+  constructor(selector: string, ancestor?: string) {
     const locator = selector;
 
     this.component = ancestor
-      ? ancestor.$$(locator).first()
+      ? browser.$$(ancestor).first().$$(locator).first()
       : browser.$$(locator).first();
   }
 

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

@@ -57,7 +57,6 @@ export class DataTable extends Component {
 
     emptyListTitle: '.adf-empty-content__title',
     emptyListSubtitle: '.adf-empty-content__subtitle',
-    emptyListText: '.adf-empty-content__text',
 
     emptySearchText: '.empty-search__text',
 
@@ -73,55 +72,55 @@ export class DataTable extends Component {
   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));
+  emptyListContainerText: ElementFinder = this.component.element(by.css(DataTable.selectors.emptyListContainer));
 
   emptySearchText: ElementFinder = this.component.element(by.css(DataTable.selectors.emptySearchText));
 
   menu: Menu = new Menu();
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(DataTable.selectors.root, ancestor);
   }
 
   // Wait methods (waits for elements)
-  async waitForHeader() {
+  async waitForHeader(): Promise<void> {
     await browser.wait(EC.presenceOf(this.head), BROWSER_WAIT_TIMEOUT, '--- timeout waitForHeader ---');
   }
 
-  async waitForBody() {
+  async waitForBody(): Promise<void> {
     await browser.wait(EC.presenceOf(this.body), BROWSER_WAIT_TIMEOUT, '--- timeout waitForBody ---');
   }
 
-  async waitForEmptyState() {
+  async waitForEmptyState(): Promise<void> {
     await browser.wait(EC.presenceOf(this.emptyList), BROWSER_WAIT_TIMEOUT);
   }
 
   // Header/Column methods
-  getColumnHeaders() {
+  getColumnHeaders(): ElementArrayFinder {
     const locator = by.css(DataTable.selectors.columnHeader);
     return this.head.all(locator);
   }
 
-  async getColumnHeadersText() {
+  async getColumnHeadersText(): Promise<string> {
     const el = this.getColumnHeaders();
     return el.getText();
   }
 
-  getNthColumnHeader(nth: number) {
+  getNthColumnHeader(nth: number): ElementFinder {
     return this.getColumnHeaders().get(nth - 1);
   }
 
-  getColumnHeaderByLabel(label: string) {
+  getColumnHeaderByLabel(label: string): ElementFinder {
     const locator = by.cssContainingText(DataTable.selectors.columnHeader, label);
     return this.head.element(locator);
   }
 
-  getSortedColumnHeader() {
+  getSortedColumnHeader(): ElementFinder {
     const locator = by.css(DataTable.selectors.sortedColumnHeader);
     return this.head.element(locator);
   }
 
-  async getSortedColumnHeaderText() {
+  async getSortedColumnHeaderText(): Promise<string> {
     return this.getSortedColumnHeader().getText();
   }
 
@@ -138,7 +137,7 @@ export class DataTable extends Component {
     return 'none';
   }
 
-  async sortByColumn(columnName: string) {
+  async sortByColumn(columnName: string): Promise<void> {
     const column = this.getColumnHeaderByLabel(columnName);
     const click = browser.actions().mouseMove(column).click();
 
@@ -146,27 +145,38 @@ export class DataTable extends Component {
   }
 
   // Rows methods
-  getRows() {
+  getRows(): ElementArrayFinder {
     return this.body.all(by.css(DataTable.selectors.row));
   }
 
-  async countRows() {
+  async getRowsCount(): Promise<number> {
     return this.getRows().count();
   }
 
-  getSelectedRows() {
+  async waitForRowToBeSelected(): Promise<void> {
+    await browser.wait(EC.presenceOf(this.component.element(by.css(DataTable.selectors.selectedRow))), BROWSER_WAIT_TIMEOUT, 'timeout waiting for row to be selected');
+  }
+
+  getSelectedRows(): ElementArrayFinder {
     return this.body.all(by.css(DataTable.selectors.selectedRow));
   }
 
-  async countSelectedRows() {
+  async getSelectedRowsNames(): Promise<string[]> {
+    const rowsText: string[] = await this.getSelectedRows().map((row) => {
+      return row.element(by.css('.adf-datatable-cell[title="Name"]')).getText();
+    });
+    return rowsText;
+  }
+
+  async getSelectedRowsCount(): Promise<number> {
     return this.getSelectedRows().count();
   }
 
-  getNthRow(nth: number) {
+  getNthRow(nth: number): ElementFinder {
     return this.getRows().get(nth - 1);
   }
 
-  getRowByName(name: string, location: string = '') {
+  getRowByName(name: string, location: string = ''): ElementFinder {
     if (location) {
       return this.body.all(by.cssContainingText(DataTable.selectors.row, name))
         .filter(async (elem) => await browser.isElementPresent(elem.element(by.cssContainingText(DataTable.selectors.cell, location))))
@@ -175,46 +185,46 @@ export class DataTable extends Component {
     return this.body.element(by.cssContainingText(DataTable.selectors.row, name));
   }
 
-  getRowCells(name: string, location: string = '') {
+  getRowCells(name: string, location: string = ''): ElementArrayFinder {
     return this.getRowByName(name, location).all(by.css(DataTable.selectors.cell));
   }
 
-  async getRowCellsCount(itemName: string) {
+  async getRowCellsCount(itemName: string): Promise<number> {
     return this.getRowCells(itemName).count();
   }
 
-  getRowFirstCell(name: string, location: string = '') {
+  getRowFirstCell(name: string, location: string = ''): ElementFinder {
     return this.getRowCells(name, location).get(0);
   }
 
-  getRowNameCell(name: string, location: string = '') {
+  getRowNameCell(name: string, location: string = ''): ElementFinder {
     return this.getRowCells(name, location).get(1);
   }
 
-  getRowNameCellSpan(name: string, location: string = '') {
+  getRowNameCellSpan(name: string, location: string = ''): ElementFinder {
     return this.getRowNameCell(name, location).$('span');
   }
 
-  async getItemNameTooltip(name: string, location: string = '') {
+  async getItemNameTooltip(name: string, location: string = ''): Promise<string> {
     return this.getRowNameCellSpan(name, location).getAttribute('title');
   }
 
-  async hasCheckMarkIcon(itemName: string, location: string = '') {
-    const row = this.getRowByName(itemName, location);
+  async hasCheckMarkIcon(itemName: string, location: string = ''): Promise<boolean> {
+    const row: ElementFinder = this.getRowByName(itemName, location);
     return row.element(by.css(DataTable.selectors.selectedIcon)).isPresent();
   }
 
-  async hasLockIcon(itemName: string, location: string = '') {
-    const row = this.getRowByName(itemName, location);
+  async hasLockIcon(itemName: string, location: string = ''): Promise<boolean> {
+    const row: ElementFinder = this.getRowByName(itemName, location);
     return row.element(by.css(DataTable.selectors.lockIcon)).isPresent();
   }
 
-  async hasLockOwnerInfo(itemName: string, location: string = '') {
-    const row = this.getRowByName(itemName, location);
+  async hasLockOwnerInfo(itemName: string, location: string = ''): Promise<boolean> {
+    const row: ElementFinder = this.getRowByName(itemName, location);
     return row.element(by.css(DataTable.selectors.lockOwner)).isPresent();
   }
 
-  async getLockOwner(itemName: string, location: string = '') {
+  async getLockOwner(itemName: string, location: string = ''): Promise<string> {
     if (await this.hasLockOwnerInfo(itemName, location)) {
       const row = this.getRowByName(itemName, location);
       return row.$(DataTable.selectors.lockOwner).$('.locked_by--name').getText();
@@ -222,16 +232,16 @@ export class DataTable extends Component {
     return '';
   }
 
-  getNameLink(itemName: string) {
+  getNameLink(itemName: string): ElementFinder {
     return this.getRowNameCell(itemName).$(DataTable.selectors.nameLink);
   }
 
-  async hasLinkOnName(itemName: string) {
+  async hasLinkOnName(itemName: string): Promise<boolean> {
     return this.getNameLink(itemName).isPresent();
   }
 
   // Navigation/selection methods
-  async doubleClickOnRowByName(name: string, location: string = '') {
+  async doubleClickOnRowByName(name: string, location: string = ''): Promise<void> {
     try {
       const item = this.getRowFirstCell(name, location);
       await Utils.waitUntilElementClickable(item);
@@ -242,7 +252,7 @@ export class DataTable extends Component {
     }
   }
 
-  async selectItem(name: string, location: string = '') {
+  async selectItem(name: string, location: string = ''): Promise<void> {
     const isSelected = await this.hasCheckMarkIcon(name, location);
     if (!isSelected) {
       try {
@@ -253,19 +263,18 @@ export class DataTable extends Component {
         console.log('--- select item catch : ', e);
       }
     }
-
   }
 
-  async clickItem(name: string, location: string = '') {
+  async clickItem(name: string, location: string = ''): Promise<void> {
     const item = this.getRowFirstCell(name, location);
     await item.click();
   }
 
-  async clickNameLink(itemName: string) {
+  async clickNameLink(itemName: string): Promise<void> {
     await this.getNameLink(itemName).click();
   }
 
-  async selectMultipleItems(names: string[], location: string = '') {
+  async selectMultipleItems(names: string[], location: string = ''): Promise<void> {
     await this.clearSelection();
     await browser.actions().sendKeys(protractor.Key.COMMAND).perform();
     for (const name of names) {
@@ -274,9 +283,9 @@ export class DataTable extends Component {
     await browser.actions().sendKeys(protractor.Key.NULL).perform();
   }
 
-  async clearSelection() {
+  async clearSelection(): Promise<void> {
     try {
-      const count = await this.countSelectedRows();
+      const count = await this.getSelectedRowsCount();
       if (count !== 0) {
         await browser.refresh();
         await this.wait();
@@ -286,27 +295,27 @@ export class DataTable extends Component {
     }
   }
 
-  async rightClickOnItem(itemName: string) {
+  async rightClickOnItem(itemName: string): Promise<void> {
     const item = this.getRowFirstCell(itemName);
     await browser.actions().mouseMove(item).perform();
     await browser.actions().click(protractor.Button.RIGHT).perform();
   }
 
-  async rightClickOnMultipleSelection() {
+  async rightClickOnMultipleSelection(): Promise<void> {
     const itemFromSelection = this.getSelectedRows().get(0);
     await browser.actions().mouseMove(itemFromSelection).perform();
     await browser.actions().click(protractor.Button.RIGHT).perform();
   }
 
-  getItemLocationEl(name: string) {
+  getItemLocationEl(name: string): ElementFinder {
     return this.getRowByName(name).element(by.css(DataTable.selectors.locationLink));
   }
 
-  async getItemLocation(name: string) {
+  async getItemLocation(name: string): Promise<string> {
     return this.getItemLocationEl(name).getText();
   }
 
-  async getItemLocationTooltip(name: string) {
+  async getItemLocationTooltip(name: string): Promise<string> {
     const location = this.getItemLocationEl(name).$('a');
     const condition = () => location.getAttribute('title').then(value => value && value.length > 0);
 
@@ -316,16 +325,16 @@ export class DataTable extends Component {
     return location.getAttribute('title');
   }
 
-  async clickItemLocation(name: string) {
+  async clickItemLocation(name: string): Promise<void> {
     await this.getItemLocationEl(name).click();
   }
 
   // empty state methods
-  async isEmptyList() {
+  async isEmpty(): Promise<boolean> {
     return this.emptyList.isPresent();
   }
 
-  async isEmptyWithDragAndDrop() {
+  async isEmptyWithDragAndDrop(): Promise<boolean> {
     return this.emptyFolderDragAndDrop.isDisplayed();
   }
 
@@ -334,66 +343,68 @@ export class DataTable extends Component {
     if (isEmpty) {
       return this.emptyFolderDragAndDrop.getText();
     }
-
     return '';
   }
 
   async getEmptyStateTitle(): Promise<string> {
-    const isEmpty = await this.isEmptyList();
+    const isEmpty = await this.isEmpty();
     if (isEmpty) {
       return this.emptyListTitle.getText();
     }
-
     return '';
   }
 
   async getEmptyStateSubtitle(): Promise<string> {
-    const isEmpty = await this.isEmptyList();
+    const isEmpty = await this.isEmpty();
     if (isEmpty) {
       return this.emptyListSubtitle.getText();
     }
-
     return '';
   }
 
-  async getEmptyStateText(): Promise<string> {
-    const isEmpty = await this.isEmptyList();
+  async getEmptyListText(): Promise<string> {
+    const isEmpty = await this.isEmpty();
     if (isEmpty) {
-      return this.emptyListText.getText();
+      return this.component.element(by.css('adf-custom-empty-content-template')).getText();
     }
-
     return '';
   }
 
-  async getEmptySearchResultsText() {
+  async getEmptySearchResultsText(): Promise<string> {
     return this.emptySearchText.getText();
   }
 
-  async getCellsContainingName(name: string) {
-    const rows = this.getRows().all(by.cssContainingText(DataTable.selectors.cell, name));
-    return rows.map(async cell => await cell.getText());
+  async getCellsContainingName(name: string): Promise<string[]> {
+    const rows: ElementArrayFinder = this.getRows().all(by.cssContainingText(DataTable.selectors.cell, name));
+    const cellsText: string[] = await rows.map(async cell => {
+      return cell.getText();
+    });
+    return cellsText;
   }
 
-  async hasContextMenu() {
+  async hasContextMenu(): Promise<boolean> {
     const count = await this.menu.getItemsCount();
     return count > 0;
   }
 
-  async getLibraryRole(name: string) {
+  async getLibraryRole(name: string): Promise<string> {
     return this.getRowByName(name).element(by.css(DataTable.selectors.libraryRole)).getText();
   }
 
-  async isItemPresent(name: string, location? : string) {
+  async isItemPresent(name: string, location? : string): Promise<boolean> {
     return this.getRowByName(name, location).isPresent();
   }
 
-  async getEntireDataTableText() {
-    return this.getRows().map((row) => {
-      return row.all(by.css(DataTable.selectors.cell)).map(async cell => await cell.getText());
+  async getEntireDataTableText(): Promise<string[]> {
+    const text: string[] = await this.getRows().map((row) => {
+      return row.all(by.css(DataTable.selectors.cell)).map(async cell => {
+        return cell.getText();
+      });
     });
+    return text;
   }
 
-  async getSitesNameAndVisibility() {
+  async getSitesNameAndVisibility(): Promise<{}> {
     const data = await this.getEntireDataTableText();
     return data.reduce((acc, cell) => {
       acc[cell[1]] = cell[3].toUpperCase();
@@ -401,7 +412,7 @@ export class DataTable extends Component {
     }, {});
   }
 
-  async getSitesNameAndRole() {
+  async getSitesNameAndRole(): Promise<{}> {
     const data = await this.getEntireDataTableText();
     return data.reduce((acc, cell) => {
       acc[cell[1]] = cell[2];
@@ -417,7 +428,7 @@ export class DataTable extends Component {
     return this.getSearchResultsRows().get(nth - 1);
   }
 
-  getSearchResultsRowByName(name: string, location: string = '') {
+  getSearchResultsRowByName(name: string, location: string = ''): ElementFinder {
     if (location) {
       return this.body.all(by.cssContainingText(DataTable.selectors.searchResultsRow, name))
         .filter(async (elem) => await browser.isElementPresent(elem.element(by.cssContainingText(DataTable.selectors.searchResultsRowLine, location))))
@@ -426,43 +437,43 @@ export class DataTable extends Component {
     return this.body.element(by.cssContainingText(DataTable.selectors.searchResultsRow, name));
   }
 
-  getSearchResultRowLines(name: string, location: string = '') {
+  getSearchResultRowLines(name: string, location: string = ''): ElementArrayFinder {
     return this.getSearchResultsRowByName(name, location).all(by.css(DataTable.selectors.searchResultsRowLine));
   }
 
-  async getSearchResultLinesCount(name: string, location: string = '') {
+  async getSearchResultLinesCount(name: string, location: string = ''): Promise<number> {
     return this.getSearchResultRowLines(name, location).count();
   }
 
-  getSearchResultNthLine(name: string, location: string = '', index: number) {
+  getSearchResultNthLine(name: string, location: string = '', index: number): ElementFinder {
     return this.getSearchResultRowLines(name, location).get(index);
   }
 
-  async getSearchResultNameAndTitle(name: string, location: string = '') {
+  async getSearchResultNameAndTitle(name: string, location: string = ''): Promise<string> {
     return this.getSearchResultNthLine(name, location, 0).getText();
   }
 
-  async getSearchResultDescription(name: string, location: string = '') {
+  async getSearchResultDescription(name: string, location: string = ''): Promise<string> {
     return this.getSearchResultNthLine(name, location, 1).getText();
   }
 
-  async getSearchResultModified(name: string, location: string = '') {
+  async getSearchResultModified(name: string, location: string = ''): Promise<string> {
     return this.getSearchResultNthLine(name, location, 2).getText();
   }
 
-  async getSearchResultLocation(name: string, location: string = '') {
+  async getSearchResultLocation(name: string, location: string = ''): Promise<string> {
     return this.getSearchResultNthLine(name, location, 3).getText();
   }
 
-  getSearchResultNameLink(itemName: string, location: string = '') {
+  getSearchResultNameLink(itemName: string, location: string = ''): ElementFinder {
     return this.getSearchResultsRowByName(itemName, location).$(DataTable.selectors.searchResultsNameLink);
   }
 
-  async hasLinkOnSearchResultName(itemName: string, location: string = '') {
+  async hasLinkOnSearchResultName(itemName: string, location: string = ''): Promise<boolean> {
     return this.getSearchResultNameLink(itemName, location).isPresent();
   }
 
-  async clickSearchResultNameLink(itemName: string, location: string = '') {
+  async clickSearchResultNameLink(itemName: string, location: string = ''): Promise<void> {
     await this.getSearchResultNameLink(itemName, location).click();
   }
 

e2e/components/datetime-picker/datetime-picker.ts

@@ -48,7 +48,7 @@ export class DateTimePicker extends Component {
   headerYear: ElementFinder = this.component.element(by.css(DateTimePicker.selectors.year));
   dayPicker: ElementFinder = this.component.element(by.css(DateTimePicker.selectors.dayPicker));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(DateTimePicker.selectors.root, ancestor);
   }
 

e2e/components/dialog/confirm-dialog.ts

@@ -44,7 +44,7 @@ export class ConfirmDialog extends Component {
   cancelButton: ElementFinder = this.component.element(by.id(ConfirmDialog.selectors.cancel));
   actionButton: ElementFinder = this.component.element(by.id(ConfirmDialog.selectors.actionButton));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(ConfirmDialog.selectors.root, ancestor);
   }
 

e2e/components/dialog/copy-move-dialog.ts

@@ -33,31 +33,26 @@ export class CopyMoveDialog extends Component {
     root: '.adf-content-node-selector-dialog',
 
     title: '.mat-dialog-title',
-    content: '.mat-dialog-content',
     locationDropDown: 'site-dropdown-container',
     locationOption: '.mat-option .mat-option-text',
 
     dataTable: '.adf-datatable-body',
-    row: '.adf-datatable-row[role]',
     selectedRow: '.adf-is-selected',
 
     button: '.mat-dialog-actions button'
   };
 
   title: ElementFinder = this.component.element(by.css(CopyMoveDialog.selectors.title));
-  content: ElementFinder = this.component.element(by.css(CopyMoveDialog.selectors.content));
   dataTable: ElementFinder = this.component.element(by.css(CopyMoveDialog.selectors.dataTable));
   locationDropDown: ElementFinder = this.component.element(by.id(CopyMoveDialog.selectors.locationDropDown));
   locationPersonalFiles: ElementFinder = browser.element(by.cssContainingText(CopyMoveDialog.selectors.locationOption, 'Personal Files'));
   locationFileLibraries: ElementFinder = browser.element(by.cssContainingText(CopyMoveDialog.selectors.locationOption, 'File Libraries'));
 
-  row: ElementFinder = this.component.element(by.css(CopyMoveDialog.selectors.row));
-
   cancelButton: ElementFinder = this.component.element(by.cssContainingText(CopyMoveDialog.selectors.button, 'Cancel'));
   copyButton: ElementFinder = this.component.element(by.cssContainingText(CopyMoveDialog.selectors.button, 'Copy'));
   moveButton: ElementFinder = this.component.element(by.cssContainingText(CopyMoveDialog.selectors.button, 'Move'));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(CopyMoveDialog.selectors.root, ancestor);
   }
 

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

@@ -47,7 +47,7 @@ export class CreateOrEditFolderDialog extends Component {
   updateButton: ElementFinder = this.component.element(by.cssContainingText(CreateOrEditFolderDialog.selectors.button, 'Update'));
   validationMessage: ElementFinder = this.component.element(by.css(CreateOrEditFolderDialog.selectors.validationMessage));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(CreateOrEditFolderDialog.selectors.root, ancestor);
   }
 
@@ -68,8 +68,8 @@ export class CreateOrEditFolderDialog extends Component {
     return this.title.getText();
   }
 
-  async isValidationMessageDisplayed() {
-    return this.validationMessage.isDisplayed();
+  async isValidationMessageDisplayed(): Promise<boolean> {
+    return (await this.validationMessage.isPresent()) && (await this.validationMessage.isDisplayed());
   }
 
   async isUpdateButtonEnabled() {
@@ -92,9 +92,12 @@ export class CreateOrEditFolderDialog extends Component {
     return this.descriptionTextArea.isDisplayed();
   }
 
-  async getValidationMessage() {
-    await this.isValidationMessageDisplayed();
-    return this.validationMessage.getText();
+  async getValidationMessage(): Promise<string> {
+    if (await this.isValidationMessageDisplayed()) {
+      return this.validationMessage.getText();
+    } else {
+      return '';
+    }
   }
 
   async getName() {

e2e/components/dialog/create-from-template-dialog.ts

@@ -0,0 +1,140 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2019 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 } from 'protractor';
+import { BROWSER_WAIT_TIMEOUT } from '../../configs';
+import { Component } from '../component';
+
+export class CreateFromTemplateDialog extends Component {
+  private static selectors = {
+    root: '.aca-file-from-template-dialog',
+
+    title: '.mat-dialog-title',
+    nameInput: 'input[placeholder="Name" i]',
+    titleInput: 'input[placeholder="Title" i]',
+    descriptionTextArea: 'textarea[placeholder="Description" i]',
+    button: '.mat-dialog-actions button',
+    validationMessage: '.mat-error'
+  };
+
+  title: ElementFinder = this.component.element(by.css(CreateFromTemplateDialog.selectors.title));
+  nameInput: ElementFinder = this.component.element(by.css(CreateFromTemplateDialog.selectors.nameInput));
+  titleInput: ElementFinder = this.component.element(by.css(CreateFromTemplateDialog.selectors.titleInput));
+  descriptionTextArea: ElementFinder = this.component.element(by.css(CreateFromTemplateDialog.selectors.descriptionTextArea));
+  createButton: ElementFinder = this.component.element(by.cssContainingText(CreateFromTemplateDialog.selectors.button, 'Create'));
+  cancelButton: ElementFinder = this.component.element(by.cssContainingText(CreateFromTemplateDialog.selectors.button, 'CANCEL'));
+  validationMessage: ElementFinder = this.component.element(by.css(CreateFromTemplateDialog.selectors.validationMessage));
+
+  constructor(ancestor?: string) {
+    super(CreateFromTemplateDialog.selectors.root, ancestor);
+  }
+
+  async waitForDialogToOpen(): Promise<void> {
+    await browser.wait(EC.presenceOf(this.title), BROWSER_WAIT_TIMEOUT, 'timeout waiting for dialog title');
+    await browser.wait(EC.presenceOf(browser.element(by.css('.cdk-overlay-backdrop'))), BROWSER_WAIT_TIMEOUT, 'timeout waiting for overlay backdrop');
+  }
+
+  async waitForDialogToClose(): Promise<void> {
+    await browser.wait(EC.stalenessOf(this.title), BROWSER_WAIT_TIMEOUT, '---- timeout waiting for dialog to close ----');
+  }
+
+  async isDialogOpen(): Promise<boolean> {
+    return browser.isElementPresent(by.css(CreateFromTemplateDialog.selectors.root));
+  }
+
+  async getTitle(): Promise<string> {
+    return this.title.getText();
+  }
+
+  async isValidationMessageDisplayed(): Promise<boolean> {
+    return (await this.validationMessage.isPresent()) && (await this.validationMessage.isDisplayed());
+  }
+
+  async isCreateButtonEnabled(): Promise<boolean> {
+    return this.createButton.isEnabled();
+  }
+
+  async isCancelButtonEnabled(): Promise<boolean> {
+    return this.cancelButton.isEnabled();
+  }
+
+  async isNameFieldDisplayed(): Promise<boolean> {
+    return this.nameInput.isDisplayed();
+  }
+
+  async isTitleFieldDisplayed(): Promise<boolean> {
+    return this.titleInput.isDisplayed();
+  }
+
+  async isDescriptionFieldDisplayed(): Promise<boolean> {
+    return this.descriptionTextArea.isDisplayed();
+  }
+
+  async getValidationMessage(): Promise<string> {
+    if (await this.isValidationMessageDisplayed()) {
+      return this.validationMessage.getText();
+    } else {
+      return '';
+    }
+  }
+
+  async getName(): Promise<string> {
+    return this.nameInput.getAttribute('value');
+  }
+
+  async getDescription(): Promise<string> {
+    return this.descriptionTextArea.getAttribute('value');
+  }
+
+  async enterName(name: string): Promise<void> {
+    await this.nameInput.clear();
+    await this.nameInput.sendKeys(name);
+  }
+
+  async enterTitle(title: string): Promise<void> {
+    await this.titleInput.clear();
+    await this.titleInput.sendKeys(title);
+  }
+
+  async enterDescription(description: string): Promise<void> {
+    await this.descriptionTextArea.clear();
+    await this.descriptionTextArea.sendKeys(description);
+  }
+
+  async deleteNameWithBackspace(): Promise<void> {
+    await this.nameInput.clear();
+    await this.nameInput.sendKeys(' ', protractor.Key.CONTROL, 'a', protractor.Key.NULL, protractor.Key.BACK_SPACE);
+  }
+
+  async clickCreate(): Promise<void> {
+    await this.createButton.click();
+  }
+
+  async clickCancel(): Promise<void> {
+    await this.cancelButton.click();
+    await this.waitForDialogToClose();
+  }
+
+}

e2e/components/dialog/create-library-dialog.ts

@@ -53,7 +53,7 @@ export class CreateLibraryDialog extends Component {
   cancelButton: ElementFinder = this.component.element(by.cssContainingText(CreateLibraryDialog.selectors.button, 'Cancel'));
   errorMessage: ElementFinder = this.component.element(by.css(CreateLibraryDialog.selectors.errorMessage));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(CreateLibraryDialog.selectors.root, ancestor);
   }
 

e2e/components/dialog/manage-versions-dialog.ts

@@ -40,7 +40,7 @@ export class ManageVersionsDialog extends Component {
   content: ElementFinder = this.component.element(by.css(ManageVersionsDialog.selectors.content));
   closeButton: ElementFinder = this.component.element(by.cssContainingText(ManageVersionsDialog.selectors.button, 'Close'));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(ManageVersionsDialog.selectors.root, ancestor);
   }
 

e2e/components/dialog/password-dialog.ts

@@ -45,7 +45,7 @@ export class PasswordDialog extends Component {
   closeButton: ElementFinder = this.component.element(by.buttonText('Close'));
   submitButton: ElementFinder = this.component.element(by.buttonText('Submit'));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(PasswordDialog.selectors.root, ancestor);
   }
 

e2e/components/dialog/select-template-dialog.ts

@@ -0,0 +1,86 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2019 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, ExpectedConditions as EC } from 'protractor';
+import { BROWSER_WAIT_TIMEOUT } from '../../configs';
+import { Component } from '../component';
+import { DropDownBreadcrumb } from '../breadcrumb/dropdown-breadcrumb';
+import { DataTable } from '../data-table/data-table';
+
+export class SelectTemplateDialog extends Component {
+  private static selectors = {
+    root: '.aca-template-node-selector-dialog',
+    title: '.mat-dialog-title',
+    button: '.mat-dialog-actions button'
+  };
+
+  title: ElementFinder = this.component.element(by.css(SelectTemplateDialog.selectors.title));
+  nextButton: ElementFinder = this.component.element(by.cssContainingText(SelectTemplateDialog.selectors.button, 'Next'));
+  cancelButton: ElementFinder = this.component.element(by.cssContainingText(SelectTemplateDialog.selectors.button, 'Cancel'));
+
+  breadcrumb: DropDownBreadcrumb = new DropDownBreadcrumb();
+  dataTable: DataTable = new DataTable(SelectTemplateDialog.selectors.root);
+
+  constructor(ancestor?: string) {
+    super(SelectTemplateDialog.selectors.root, ancestor);
+  }
+
+  async waitForDialogToOpen(): Promise<void> {
+    await browser.wait(EC.presenceOf(this.title), BROWSER_WAIT_TIMEOUT, 'timeout waiting for dialog title');
+    await browser.wait(EC.presenceOf(browser.element(by.css('.cdk-overlay-backdrop'))), BROWSER_WAIT_TIMEOUT, 'timeout waiting for overlay backdrop');
+  }
+
+  async waitForDialogToClose(): Promise<void> {
+    await browser.wait(EC.stalenessOf(this.title), BROWSER_WAIT_TIMEOUT, '---- timeout waiting for dialog to close ----');
+  }
+
+  async isDialogOpen(): Promise<boolean> {
+    return browser.isElementPresent(by.css(SelectTemplateDialog.selectors.root));
+  }
+
+  async getTitle(): Promise<string> {
+    return this.title.getText();
+  }
+
+  // action buttons
+
+  async isCancelButtonEnabled(): Promise<boolean> {
+    return this.cancelButton.isEnabled();
+  }
+
+  async isNextButtonEnabled(): Promise<boolean> {
+    return this.nextButton.isEnabled();
+  }
+
+  async clickCancel(): Promise<void> {
+    await this.cancelButton.click();
+    await this.waitForDialogToClose();
+  }
+
+  async clickNext(): Promise<void> {
+    await this.nextButton.click();
+    await this.waitForDialogToClose();
+  }
+}

e2e/components/dialog/share-dialog.ts

@@ -58,7 +58,7 @@ export class ShareDialog extends Component {
   closeButton: ElementFinder = this.component.element(by.css(ShareDialog.selectors.button));
 
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(ShareDialog.selectors.root, ancestor);
   }
 

e2e/components/dialog/upload-new-version-dialog.ts

@@ -51,7 +51,7 @@ export class UploadNewVersionDialog extends Component {
 
   description: ElementFinder = this.component.element(by.css(UploadNewVersionDialog.selectors.descriptionTextArea));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(UploadNewVersionDialog.selectors.root, ancestor);
   }
 

e2e/components/header/header.ts

@@ -47,12 +47,12 @@ export class Header extends Component {
   moreActions: ElementFinder = browser.element(Header.selectors.moreActions);
   sidenavToggle: ElementFinder = this.component.element(by.css(Header.selectors.sidenavToggle));
 
-  userInfo: UserInfo = new UserInfo(this.component);
+  userInfo: UserInfo = new UserInfo();
   menu: Menu = new Menu();
   toolbar: Toolbar = new Toolbar();
   searchInput: SearchInput = new SearchInput();
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super('adf-layout-header', ancestor);
   }
 

e2e/components/header/user-info.ts

@@ -39,7 +39,7 @@ export class UserInfo extends Component {
 
   menu: Menu = new Menu();
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super('aca-current-user', ancestor);
   }
 

e2e/components/info-drawer/info-drawer-comments-tab.ts

@@ -58,7 +58,7 @@ export class CommentsTab extends Component {
   commentTime = by.id(CommentsTab.selectors.commentTime);
 
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(CommentsTab.selectors.root, ancestor);
   }
 

e2e/components/info-drawer/info-drawer-metadata-content.ts

@@ -53,7 +53,7 @@ export class ContentMetadata extends Component {
   imagePropertiesPanel: ElementFinder = this.component.element(by.css(`[data-automation-id='adf-metadata-group-APP.CONTENT_METADATA.EXIF_GROUP_TITLE']`));
   expandedImagePropertiesPanel: ElementFinder = this.component.element(by.css(`[data-automation-id='adf-metadata-group-APP.CONTENT_METADATA.EXIF_GROUP_TITLE'].mat-expanded`));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(ContentMetadata.selectors.root, ancestor);
   }
 

e2e/components/info-drawer/info-drawer-metadata-library.ts

@@ -58,7 +58,7 @@ export class LibraryMetadata extends Component {
   error: ElementFinder = this.component.element(by.css(LibraryMetadata.selectors.error));
 
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(LibraryMetadata.selectors.root, ancestor);
   }
 

e2e/components/info-drawer/info-drawer.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ElementFinder, ElementArrayFinder, by, browser, ExpectedConditions as EC, $ } from 'protractor';
+import { ElementFinder, ElementArrayFinder, by, browser, ExpectedConditions as EC } from 'protractor';
 import { Component } from '../component';
 import { BROWSER_WAIT_TIMEOUT } from '../../configs';
 import { CommentsTab } from './info-drawer-comments-tab';
@@ -48,9 +48,9 @@ export class InfoDrawer extends Component {
     headerTitle: '.adf-info-drawer-layout-header-title'
   };
 
-  commentsTab = new CommentsTab($(InfoDrawer.selectors.root));
-  aboutTab = new LibraryMetadata($(InfoDrawer.selectors.root));
-  propertiesTab = new ContentMetadata($(InfoDrawer.selectors.root));
+  commentsTab = new CommentsTab(InfoDrawer.selectors.root);
+  aboutTab = new LibraryMetadata(InfoDrawer.selectors.root);
+  propertiesTab = new ContentMetadata(InfoDrawer.selectors.root);
 
   header: ElementFinder = this.component.element(by.css(InfoDrawer.selectors.header));
   headerTitle: ElementFinder = this.component.element(by.css(InfoDrawer.selectors.headerTitle));
@@ -64,7 +64,7 @@ export class InfoDrawer extends Component {
   previousButton: ElementFinder = this.component.element(by.css(InfoDrawer.selectors.previous));
 
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(InfoDrawer.selectors.root, ancestor);
   }
 

e2e/components/login/login.ts

@@ -45,7 +45,7 @@ export class LoginComponent extends Component {
   copyright: ElementFinder = this.component.element(LoginComponent.selectors.copyright);
   passwordVisibility: ElementFinder = this.component.element(LoginComponent.selectors.passwordVisibility);
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(LoginComponent.selectors.root, ancestor);
   }
 

e2e/components/menu/menu.ts

@@ -74,67 +74,89 @@ export class Menu extends Component {
   shareEditAction: ElementFinder = this.component.element(by.cssContainingText(Menu.selectors.item, 'Shared Link Settings'));
   uploadFileAction: ElementFinder = this.component.element(by.cssContainingText(Menu.selectors.item, 'Upload File'));
   uploadFolderAction: ElementFinder = this.component.element(by.cssContainingText(Menu.selectors.item, 'Upload Folder'));
+  createFileFromTemplateAction: ElementFinder = this.component.element(by.cssContainingText(Menu.selectors.item, 'Create file from template'));
   viewAction: ElementFinder = this.component.element(by.cssContainingText(Menu.selectors.item, 'View'));
   viewDetailsAction: ElementFinder = this.component.element(by.cssContainingText(Menu.selectors.item, 'View Details'));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(Menu.selectors.root, ancestor);
   }
 
-  async waitForMenuToOpen() {
+  async waitForMenuToOpen(): Promise<void> {
     await browser.wait(EC.presenceOf(browser.element(by.css('.cdk-overlay-container .mat-menu-panel'))), BROWSER_WAIT_TIMEOUT);
     await browser.wait(EC.visibilityOf(this.items.get(0)), BROWSER_WAIT_TIMEOUT);
   }
 
-  async waitForMenuToClose() {
+  async waitForMenuToClose(): Promise<void> {
     await browser.wait(EC.not(EC.presenceOf(browser.element(by.css('.cdk-overlay-container .mat-menu-panel')))), BROWSER_WAIT_TIMEOUT);
   }
 
-  async closeMenu() {
+  async closeMenu(): Promise<void> {
     await Utils.pressEscape();
     await this.waitForMenuToClose();
   }
 
-  getNthItem(nth: number) {
+  getNthItem(nth: number): ElementFinder {
     return this.items.get(nth - 1);
   }
 
-  getItemByLabel(menuItem: string) {
+  getItemByLabel(menuItem: string): ElementFinder {
     return this.component.element(by.cssContainingText(Menu.selectors.item, menuItem));
   }
 
-  getSubItemByLabel(subMenuItem: string) {
+  getSubItemByLabel(subMenuItem: string): ElementFinder {
     return this.component.element(by.cssContainingText(Menu.selectors.submenu, subMenuItem));
   }
 
-  getItemById(id: string) {
+  getItemById(id: string): ElementFinder {
     return this.component.element(by.id(id));
   }
 
-  async getItemTooltip(menuItem: string) {
+  async getItemTooltip(menuItem: string): Promise<string> {
     return this.getItemByLabel(menuItem).getAttribute('title');
   }
 
-  async getItemIconText(menuItem: string) {
+  async getTooltipForUploadFile(): Promise<string> {
+    return this.getItemTooltip('Upload File');
+  }
+
+  async getTooltipForUploadFolder(): Promise<string> {
+    return this.getItemTooltip('Upload Folder');
+  }
+
+  async getTooltipForCreateFolder(): Promise<string> {
+    return this.getItemTooltip('Create Folder');
+  }
+
+  async getTooltipForCreateLibrary(): Promise<string> {
+    return this.getItemTooltip('Create Library');
+  }
+
+  async getTooltipForCreateFileFromTemplate(): Promise<string> {
+    return this.getItemTooltip('Create file from template');
+  }
+
+  async getItemIconText(menuItem: string): Promise<string> {
     return this.getItemByLabel(menuItem).element(by.css(Menu.selectors.icon)).getText();
   }
 
-  async getItemIdAttribute(menuItem: string) {
+  async getItemIdAttribute(menuItem: string): Promise<string> {
     return this.getItemByLabel(menuItem).getAttribute('id');
   }
 
-  async getItemsCount() {
+  async getItemsCount(): Promise<number> {
     return this.items.count();
   }
 
   async getMenuItems(): Promise<string[]> {
-    return this.items.map(async (elem) => {
-      const text = await elem.element(by.css('span')).getText();
-      return text;
+    const items: string[] = await this.items.map(async (elem) => {
+      const span: ElementFinder = elem.element(by.css('span'));
+      return span.getText();
     });
+    return items;
   }
 
-  async clickNthItem(nth: number) {
+  async clickNthItem(nth: number): Promise<void> {
     try {
       const elem = this.getNthItem(nth);
       await browser.wait(EC.elementToBeClickable(elem), BROWSER_WAIT_TIMEOUT, 'timeout waiting for menu item to be clickable');
@@ -146,7 +168,7 @@ export class Menu extends Component {
     }
   }
 
-  async clickMenuItem(menuItem: string) {
+  async clickMenuItem(menuItem: string): Promise<void> {
     try {
       const elem = this.getItemByLabel(menuItem);
       await browser.wait(EC.elementToBeClickable(elem), BROWSER_WAIT_TIMEOUT, 'timeout waiting for menu item to be clickable');
@@ -156,7 +178,7 @@ export class Menu extends Component {
     }
   }
 
-  async mouseOverMenuItem(menuItem: string) {
+  async mouseOverMenuItem(menuItem: string): Promise<void> {
     try {
       const elem = this.getItemByLabel(menuItem);
       await browser.wait(EC.elementToBeClickable(elem), BROWSER_WAIT_TIMEOUT);
@@ -179,7 +201,7 @@ export class Menu extends Component {
     }
   }
 
-  async clickSubMenuItem(subMenuItem: string) {
+  async clickSubMenuItem(subMenuItem: string): Promise<void> {
     try {
       const elem = this.getSubItemByLabel(subMenuItem);
       await browser.wait(EC.elementToBeClickable(elem), BROWSER_WAIT_TIMEOUT);
@@ -189,15 +211,15 @@ export class Menu extends Component {
     }
   }
 
-  async isMenuItemPresent(title: string) {
+  async isMenuItemPresent(title: string): Promise<boolean> {
     return browser.element(by.cssContainingText(Menu.selectors.item, title)).isPresent();
   }
 
-  async isSubMenuItemPresent(title: string) {
+  async isSubMenuItemPresent(title: string): Promise<boolean> {
     return browser.element(by.cssContainingText(Menu.selectors.submenu, title)).isPresent();
   }
 
-  async getSubmenuItemsCount() {
+  async getSubmenuItemsCount(): Promise<number> {
     return this.submenus.count();
   }
 
@@ -212,172 +234,158 @@ export class Menu extends Component {
     }
   }
 
-  uploadFile() {
+  uploadFile(): ElementFinder {
     return this.uploadFiles;
   }
 
-  async clickEditFolder() {
+  async clickEditFolder(): Promise<void> {
     await this.editFolderAction.click();
   }
 
-  async clickShare() {
+  async clickShare(): Promise<void> {
     const action = this.shareAction;
     await action.click();
   }
 
-  async clickSharedLinkSettings() {
+  async clickSharedLinkSettings(): Promise<void> {
     const action = this.shareEditAction;
     await action.click();
   }
 
-
-  async isViewPresent() {
+  async isViewPresent(): Promise<boolean> {
     return this.viewAction.isPresent();
   }
 
-  async isDownloadPresent() {
+  async isDownloadPresent(): Promise<boolean> {
     return this.downloadAction.isPresent();
   }
 
-  async isEditFolderPresent() {
+  async isEditFolderPresent(): Promise<boolean> {
     return this.editFolderAction.isPresent();
   }
 
-  async isEditOfflinePresent() {
+  async isEditOfflinePresent(): Promise<boolean> {
     return this.editOfflineAction.isPresent();
   }
 
-  async isCancelEditingPresent() {
+  async isCancelEditingPresent(): Promise<boolean> {
     return this.cancelEditingAction.isPresent();
   }
 
-  async isCopyPresent() {
+  async isCopyPresent(): Promise<boolean> {
     return this.copyAction.isPresent();
   }
 
-  async isMovePresent() {
+  async isMovePresent(): Promise<boolean> {
     return this.moveAction.isPresent();
   }
 
-  async isDeletePresent() {
+  async isDeletePresent(): Promise<boolean> {
     return this.deleteAction.isPresent();
   }
 
-  async isManagePermissionsPresent() {
+  async isManagePermissionsPresent(): Promise<boolean> {
     return this.managePermissionsAction.isPresent();
   }
 
-  async isManageVersionsPresent() {
+  async isManageVersionsPresent(): Promise<boolean> {
     return this.manageVersionsAction.isPresent();
   }
 
-  async isUploadNewVersionPresent() {
+  async isUploadNewVersionPresent(): Promise<boolean> {
     return this.uploadNewVersionAction.isPresent();
   }
 
-  async isFavoritePresent() {
+  async isFavoritePresent(): Promise<boolean> {
     return this.favoriteAction.isPresent();
   }
 
-  async isRemoveFavoritePresent() {
+  async isRemoveFavoritePresent(): Promise<boolean> {
     return this.removeFavoriteAction.isPresent();
   }
 
-  async isToggleFavoritePresent() {
+  async isToggleFavoritePresent(): Promise<boolean> {
     return this.toggleFavoriteAction.isPresent();
   }
 
-  async isToggleRemoveFavoritePresent() {
+  async isToggleRemoveFavoritePresent(): Promise<boolean> {
     return this.toggleRemoveFavoriteAction.isPresent();
   }
 
-  async isJoinLibraryPresent() {
+  async isJoinLibraryPresent(): Promise<boolean> {
     return this.joinAction.isPresent();
   }
 
-  async isCancelJoinPresent() {
+  async isCancelJoinPresent(): Promise<boolean> {
     return this.cancelJoinAction.isPresent();
   }
 
-  async isLeaveLibraryPresent() {
+  async isLeaveLibraryPresent(): Promise<boolean> {
     return this.leaveAction.isPresent();
   }
 
-  async isPermanentDeletePresent() {
+  async isPermanentDeletePresent(): Promise<boolean> {
     return this.permanentDeleteAction.isPresent();
   }
 
-  async isRestorePresent() {
+  async isRestorePresent(): Promise<boolean> {
     return this.restoreAction.isPresent();
   }
 
-  async isSharePresent() {
+  async isSharePresent(): Promise<boolean> {
     return this.shareAction.isPresent();
   }
 
-  async isSharedLinkSettingsPresent() {
+  async isSharedLinkSettingsPresent(): Promise<boolean> {
     return this.shareEditAction.isPresent();
   }
 
-  async isViewDetailsPresent() {
+  async isViewDetailsPresent(): Promise<boolean> {
     return this.viewDetailsAction.isPresent();
   }
 
-  async isCreateFolderPresent() {
-    return this.createFolderAction.isPresent();
-  }
-  async isCreateFolderEnabled() {
-    return this.createFolderAction.isEnabled();
+  async isCreateFolderEnabled(): Promise<boolean> {
+    return (await this.createFolderAction.isPresent()) && (await this.createFolderAction.isEnabled());
   }
 
-  async isCreateLibraryPresent() {
-    return this.createLibraryAction.isPresent();
-  }
-  async isCreateLibraryEnabled() {
-    return this.createLibraryAction.isEnabled();
+  async isCreateLibraryEnabled(): Promise<boolean> {
+    return (await this.createLibraryAction.isPresent()) && (await this.createLibraryAction.isEnabled());
   }
 
-  async isUploadFilePresent() {
-    return this.uploadFileAction.isPresent();
-  }
-  async isUploadFileEnabled() {
-    return this.uploadFileAction.isEnabled();
+  async isUploadFileEnabled(): Promise<boolean> {
+    return (await this.uploadFileAction.isPresent()) && (await this.uploadFileAction.isEnabled());
   }
 
-  async isUploadFolderPresent() {
-    return this.uploadFolderAction.isPresent();
-  }
-  async isUploadFolderEnabled() {
-    return this.uploadFolderAction.isEnabled();
+  async isUploadFolderEnabled(): Promise<boolean> {
+    return (await this.uploadFolderAction.isPresent()) && (await this.uploadFolderAction.isEnabled());
   }
 
-  async isCancelEditingActionPresent(): Promise<boolean> {
-    return this.cancelEditingAction.isPresent();
+  async isCreateFileFromTemplateEnabled(): Promise<boolean> {
+    return (await this.createFileFromTemplateAction.isPresent()) && (await this.createFileFromTemplateAction.isEnabled());
   }
 
-  async isEditOfflineActionPresent(): Promise<boolean> {
-    return this.editOfflineAction.isPresent();
-  }
-
-
-  async clickCreateFolder() {
+  async clickCreateFolder(): Promise<void> {
     const action = this.createFolderAction;
     await action.click();
   }
 
-  async clickCreateLibrary() {
+  async clickCreateLibrary(): Promise<void> {
     const action = this.createLibraryAction;
     await action.click();
   }
 
-  async clickUploadFile() {
+  async clickUploadFile(): Promise<void> {
     const action = this.uploadFileAction;
     await action.click();
   }
 
-  async clickUploadFolder() {
+  async clickUploadFolder(): Promise<void> {
     const action = this.uploadFolderAction;
     await action.click();
   }
 
+  async clickCreateFileFromTemplate(): Promise<void> {
+    const action = this.createFileFromTemplateAction;
+    await action.click();
+  }
 }

e2e/components/metadata-card/metadata-card.ts

@@ -39,7 +39,7 @@ export class MetadataCard extends Component {
   expandButton: ElementFinder = this.component.element(by.css(MetadataCard.selectors.expandButton));
   expansionPanels: ElementArrayFinder = this.component.all(by.css(MetadataCard.selectors.expansionPanel));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(MetadataCard.selectors.root, ancestor);
   }
 

e2e/components/pagination/pagination.ts

@@ -53,7 +53,7 @@ export class Pagination extends Component {
 
   menu: Menu = new Menu();
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(Pagination.selectors.root, ancestor);
   }
 

e2e/components/search/search-filters.ts

@@ -45,7 +45,7 @@ export class SearchFilters extends Component {
   location = new FacetFilter('Location');
   modifiedDate = new FacetFilter('Modified date');
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(SearchFilters.selectors.root, ancestor);
   }
 

e2e/components/search/search-input.ts

@@ -50,7 +50,7 @@ export class SearchInput extends Component {
   searchLibrariesOption: ElementFinder = this.searchOptionsArea.element(by.cssContainingText(SearchInput.selectors.optionCheckbox, 'Libraries'));
   clearSearchButton: ElementFinder = this.searchContainer.$(SearchInput.selectors.clearButton);
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(SearchInput.selectors.root, ancestor);
   }
 

e2e/components/search/search-sorting-picker.ts

@@ -39,7 +39,7 @@ export class SearchSortingPicker extends Component {
   sortByDropdownExpanded: ElementFinder = browser.element(by.css('.mat-select-panel'));
   sortByList: ElementArrayFinder = this.sortByDropdownExpanded.all(by.css(SearchSortingPicker.selectors.sortByOption));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(SearchSortingPicker.selectors.root, ancestor);
   }
 

e2e/components/sidenav/sidenav.ts

@@ -68,11 +68,11 @@ export class Sidenav extends Component {
 
   menu: Menu = new Menu();
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(Sidenav.selectors.root, ancestor);
   }
 
-  private async expandMenu(name: string) {
+  private async expandMenu(name: string): Promise<void> {
     try{
 
       if (await element(by.cssContainingText('.mat-expanded', name)).isPresent()) {
@@ -89,37 +89,42 @@ export class Sidenav extends Component {
     }
   }
 
-  async openNewMenu() {
+  async openNewMenu(): Promise<void> {
     const { menu, newButton } = this;
 
     await newButton.click();
     await menu.waitForMenuToOpen();
   }
 
-  async openCreateFolderDialog() {
+  async openCreateFolderDialog(): Promise<void> {
     await this.openNewMenu();
     await this.menu.clickMenuItem('Create Folder');
   }
 
-  async openCreateLibraryDialog() {
+  async openCreateLibraryDialog(): Promise<void> {
     await this.openNewMenu();
     await this.menu.clickMenuItem('Create Library');
   }
 
-  async isActive(name: string) {
+  async openCreateFileFromTemplateDialog(): Promise<void> {
+    await this.openNewMenu();
+    await this.menu.clickMenuItem('Create file from template');
+  }
+
+  async isActive(name: string): Promise<boolean> {
     return (await this.getLinkLabel(name).getAttribute('class')).includes(Sidenav.selectors.activeClassName);
   }
 
-  async childIsActive(name: string) {
+  async childIsActive(name: string): Promise<boolean> {
     const childClass = await this.getLinkLabel(name).element(by.css('span')).getAttribute('class');
     return childClass.includes(Sidenav.selectors.activeChild);
   }
 
-  getLink(name: string) {
+  getLink(name: string): ElementFinder {
     return this.getLinkLabel(name).element(by.xpath('..'));
   }
 
-  getLinkLabel(name: string) {
+  getLinkLabel(name: string): ElementFinder {
     switch (name) {
       case 'Personal Files': return this.personalFiles;
       case 'File Libraries': return this.fileLibraries;
@@ -133,37 +138,35 @@ export class Sidenav extends Component {
     }
   }
 
-  getActiveLink() {
+  getActiveLink(): ElementFinder {
     return this.activeLink;
   }
 
-  async getLinkTooltip(name: string) {
+  async getLinkTooltip(name: string): Promise<string> {
     const link = this.getLinkLabel(name);
-
     const condition = () => link.getAttribute('title').then(value => value && value.length > 0);
 
     await browser.actions().mouseMove(link).perform();
-
     await browser.wait(condition, BROWSER_WAIT_TIMEOUT);
 
     return link.getAttribute('title');
   }
 
-  async clickLink(name: string) {
+  async clickLink(name: string): Promise<void> {
     try{
       const link = this.getLinkLabel(name);
       await Utils.waitUntilElementClickable(link);
-      return await link.click();
+      await link.click();
     } catch (error) {
       console.log('---- sidebar navigation clickLink catch error: ', error);
     }
   }
 
-  async isFileLibrariesMenuExpanded() {
+  async isFileLibrariesMenuExpanded(): Promise<boolean> {
     return element(by.cssContainingText('.mat-expanded', SIDEBAR_LABELS.FILE_LIBRARIES)).isPresent();
   }
 
-  async expandFileLibraries() {
+  async expandFileLibraries(): Promise<void> {
     await this.expandMenu(SIDEBAR_LABELS.FILE_LIBRARIES);
   }
 

e2e/components/toolbar/toolbar.ts

@@ -64,7 +64,7 @@ export class Toolbar extends Component {
   permanentlyDeleteButton: ElementFinder = this.component.element(by.css(Toolbar.selectors.permanentlyDelete));
   restoreButton: ElementFinder = this.component.element(by.css(Toolbar.selectors.restore));
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(Toolbar.selectors.root, ancestor);
   }
 

e2e/components/viewer/viewer.ts

@@ -50,9 +50,9 @@ export class Viewer extends Component {
   viewerExtensionContent: ElementFinder = this.component.element(by.css(Viewer.selectors.viewerExtensionContent));
   pdfViewerContentPages: ElementArrayFinder = this.component.all(by.css(Viewer.selectors.pdfViewerContentPage));
 
-  toolbar = new Toolbar(this.component);
+  toolbar = new Toolbar(Viewer.selectors.root);
 
-  constructor(ancestor?: ElementFinder) {
+  constructor(ancestor?: string) {
     super(Viewer.selectors.root, ancestor);
   }