[ADF-4390]Added copyContent datatable cell tests (#4614)

* Modified data-table page on demo-shell to make copyClipboard possible to test

* Add a new page in demo-shell.
Add copyContent automated tests.

demo-shell/src/app/app.routes.ts

@@ -377,6 +377,10 @@ export const appRoutes: Routes = [
                 path: 'datatable-lazy',
                 loadChildren: 'app/components/lazy-loading/lazy-loading.module#LazyLoadingModule'
             },
+            {
+                path: 'copy-content',
+                loadChildren: 'app/components/datatable/copy-content/datatable.module#AppDataTableCopyModule'
+            },
             {
                 path: 'template-list',
                 component: TemplateDemoComponent

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -64,7 +64,8 @@ export class AppLayoutComponent implements OnInit {
         { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE', children: [
             { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
             { href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
-            { href: '/datatable/dnd', icon: 'view_module', title: 'Drag and Drop' }
+            { href: '/datatable/dnd', icon: 'view_module', title: 'Drag and Drop' },
+            { href: '/copy-content', icon: 'view_module', title: 'Copy Content' }
         ]},
         { href: '/template-list', icon: 'list_alt', title: 'APP_LAYOUT.TEMPLATE' },
         { href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },

demo-shell/src/app/components/datatable/copy-content/datatable.component.html

@@ -0,0 +1,23 @@
+
+<div style="height: 310px; overflow-y: auto;" data-automation-id="datatable">
+    <adf-datatable
+        #dataTable
+        [data]="data">
+    </adf-datatable>
+</div>
+
+<div>
+    Paste clipboard:
+    <input data-automation-id="paste clipboard input">
+</div>
+
+<div style="height: 310px; overflow-y: auto;" data-automation-id="copyClipboard-datatable">
+    <adf-datatable
+        [data]="dataForCopy">
+        <data-columns>
+            <data-column key="id" title="Id" [copyContent]="true"></data-column>
+            <data-column key="name" title="Name" class="adf-full-width name-column" [copyContent]="false"></data-column>
+            <data-column key="createdBy" title="Created By"></data-column>
+        </data-columns>
+    </adf-datatable>
+</div>

demo-shell/src/app/components/datatable/copy-content/datatable.component.ts

@@ -0,0 +1,125 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input } from '@angular/core';
+import { DataColumn, DataRow } from '@alfresco/adf-core';
+import { ObjectDataTableAdapter } from '@alfresco/adf-core';
+
+export class FilteredDataAdapter extends ObjectDataTableAdapter {
+
+    filterValue = '';
+    filterKey = 'name';
+
+    getRows(): Array<DataRow> {
+        let rows = super.getRows();
+        const filter = (this.filterValue || '').trim().toLowerCase();
+
+        if (this.filterKey && filter) {
+            rows = rows.filter((row) => {
+                const value = row.getValue(this.filterKey);
+                if (value !== undefined && value !== null) {
+                    const stringValue: string = value.toString().trim().toLowerCase();
+                    return stringValue.startsWith(filter);
+                }
+                return false;
+            });
+        }
+        return rows;
+    }
+
+    constructor(data?: any[], schema?: DataColumn[]) {
+        super(data, schema);
+    }
+}
+
+@Component({
+    selector: 'app-datatable',
+    templateUrl: './datatable.component.html'
+})
+export class DataTableComponent {
+
+    @Input()
+    selectionMode = 'single';
+
+    dataForCopy = new FilteredDataAdapter(
+    [
+        {
+            id: 1,
+            name: 'First',
+            createdBy: 'Created one'
+        },
+        {
+            id: 2,
+            name: 'Second',
+            createdBy: 'Created two'
+        },
+        {
+            id: 3,
+            name: 'Third',
+            createdBy: 'Created three'
+        }
+    ]
+);
+    data = new FilteredDataAdapter(
+    [
+        {
+            id: 1,
+            name: 'Name 1',
+            createdBy: 'Created One',
+            icon: 'material-icons://folder_open',
+            json: null
+        },
+        {
+            id: 2,
+            name: 'Name 2',
+            createdBy: 'Created Two',
+            icon: 'material-icons://accessibility',
+            json: null
+        },
+        {
+            id: 3,
+            name: 'Name 3',
+            createdBy: 'Created Three',
+            icon: 'material-icons://alarm',
+            json: null
+        },
+        {
+            id: 4,
+            name: 'Image 8',
+            createdBy: 'Created Four',
+            icon: 'material-icons://alarm',
+            json: {
+                id: 4,
+                name: 'Image 8',
+                createdOn: new Date(2016, 6, 2, 15, 8, 4),
+                createdBy: {
+                    name: 'Felipe',
+                    lastname: 'Melo'
+                },
+                icon: 'material-icons://alarm'
+            }
+        }
+    ],
+    [
+        { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' },
+        { type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: '', copyContent: true },
+        { type: 'text', key: 'name', title: 'Name', cssClass: 'adf-ellipsis-cell', sortable: true, copyContent: false },
+        { type: 'text', key: 'createdBy', title: 'Created By', sortable: true, cssClass: ''},
+        { type: 'json', key: 'json', title: 'Json', cssClass: 'adf-expand-cell-2'}
+    ]
+);
+}

demo-shell/src/app/components/datatable/copy-content/datatable.module.ts

@@ -0,0 +1,41 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import { DataTableComponent } from './datatable.component';
+import { Routes, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
+import { ContentModule } from '@alfresco/adf-content-services';
+
+const routes: Routes = [
+    {
+      path: '',
+      component: DataTableComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        CommonModule,
+        CoreModule.forChild(),
+        RouterModule.forChild(routes),
+        ContentModule.forChild()
+    ],
+    declarations: [DataTableComponent]
+})
+export class AppDataTableCopyModule {}

demo-shell/src/app/components/datatable/datatable.component.html

@@ -10,7 +10,7 @@
     Sticky header
 </mat-slide-toggle>
 
-<div style="height: 310px; overflow-y: auto;">
+<div style="height: 310px; overflow-y: auto;" data-automation-id="datatable">
     <adf-datatable
         #dataTable
         [data]="data"

e2e/core/datatable/data-table-component.e2e.ts

@@ -23,14 +23,17 @@ import TestConfig = require('../../test.config');
 
 import { AlfrescoApiCompatibility as AlfrescoApi } from '@alfresco/js-api';
 import { NavigationBarPage } from '../../pages/adf/navigationBarPage';
+import { NotificationPage } from '../../pages/adf/notificationPage';
 
 describe('Datatable component', () => {
 
-    const dataTablePage = new DataTablePage();
+    const dataTablePage = new DataTablePage('defaultTable');
+    const copyContentDataTablePage = new DataTablePage('copyClipboardDataTable');
     const loginPage = new LoginPage();
     const acsUser = new AcsUserModel();
     const navigationBarPage = new NavigationBarPage();
     const dataTableComponent = new DataTableComponentPage();
+    const notificationPage = new NotificationPage();
 
     beforeAll(async (done) => {
         this.alfrescoJsApi = new AlfrescoApi({
@@ -44,11 +47,22 @@ describe('Datatable component', () => {
 
         loginPage.loginToContentServicesUsingUserModel(acsUser);
 
+        done();
+    });
+
+    describe('Datatable component', () => {
+
+        beforeAll(async (done) => {
             navigationBarPage.navigateToDatatable();
 
             done();
         });
 
+        beforeEach(async (done) => {
+            dataTablePage.clickReset();
+            done();
+        });
+
         it('[C91314] Should be possible add new row to the table', () => {
             dataTableComponent.numberOfRows().then((result) => {
                 dataTablePage.addRow();
@@ -67,11 +81,93 @@ describe('Datatable component', () => {
         });
 
         it('[C277314] Should filter the table rows when the input filter is passed', () => {
+            dataTablePage.replaceRows(1);
+            dataTablePage.replaceColumns();
             expect(dataTableComponent.numberOfRows()).toEqual(4);
             dataTablePage.insertFilter('Name');
             expect(dataTableComponent.numberOfRows()).toEqual(3);
             dataTablePage.insertFilter('I');
             expect(dataTableComponent.numberOfRows()).toEqual(1);
         });
-
+    });
+
+    describe('Datatable component - copyContent', () => {
+
+        beforeAll(async (done) => {
+            navigationBarPage.navigateToCopyContentDatatable();
+            done();
+        });
+
+        it('[C307037] A tooltip is displayed when mouseOver a column with copyContent set to true', () => {
+            dataTablePage.mouseOverIdColumn('1');
+            expect(dataTablePage.getCopyContentTooltip()).toEqual('Click to copy');
+            dataTablePage.mouseOverNameColumn('Name 2');
+            dataTablePage.dataTable.copyContentTooltipIsNotDisplayed();
+        });
+
+        it('[C307045] No tooltip is displayed when hover over a column with copyContent set to false', () => {
+            dataTablePage.mouseOverNameColumn('Name 2');
+            dataTablePage.dataTable.copyContentTooltipIsNotDisplayed();
+            dataTablePage.clickOnNameColumn('Name 2');
+            notificationPage.checkNotificationSnackBarIsNotDisplayed();
+        });
+
+        it('[C307046] No tooltip is displayed when hover over a column that has default value for copyContent property', () => {
+            dataTablePage.mouseOverCreatedByColumn('Created One');
+            dataTablePage.dataTable.copyContentTooltipIsNotDisplayed();
+            dataTablePage.clickOnCreatedByColumn('Created One');
+            notificationPage.checkNotificationSnackBarIsNotDisplayed();
+        });
+
+        it('[C307040] A column value with copyContent set to true is copied when clicking on it', () => {
+            dataTablePage.mouseOverIdColumn('1');
+            expect(dataTablePage.getCopyContentTooltip()).toEqual('Click to copy');
+            dataTablePage.clickOnIdColumn('1');
+            notificationPage.checkNotifyContains('Text copied to clipboard');
+            dataTablePage.pasteClipboard();
+            expect(dataTablePage.getClipboardInputText()).toEqual('1');
+            dataTablePage.clickOnIdColumn('2');
+            notificationPage.checkNotifyContains('Text copied to clipboard');
+            dataTablePage.clickOnIdColumn('3');
+            notificationPage.checkNotifyContains('Text copied to clipboard');
+            dataTablePage.pasteClipboard();
+            expect(dataTablePage.getClipboardInputText()).toEqual('3');
+        });
+
+        it('[C307072] A tooltip is displayed when mouseOver a column with copyContent set to true', () => {
+            copyContentDataTablePage.mouseOverIdColumn('1');
+            expect(copyContentDataTablePage.getCopyContentTooltip()).toEqual('Click to copy');
+            copyContentDataTablePage.mouseOverNameColumn('First');
+            copyContentDataTablePage.dataTable.copyContentTooltipIsNotDisplayed();
+        });
+
+        it('[C307074] No tooltip is displayed when hover over a column with copyContent set to false', () => {
+            copyContentDataTablePage.mouseOverNameColumn('Second');
+            copyContentDataTablePage.dataTable.copyContentTooltipIsNotDisplayed();
+            copyContentDataTablePage.clickOnNameColumn('Second');
+            notificationPage.checkNotificationSnackBarIsNotDisplayed();
+        });
+
+        it('[C307075] No tooltip is displayed when hover over a column that has default value for copyContent property', () => {
+            copyContentDataTablePage.mouseOverCreatedByColumn('Created one');
+            copyContentDataTablePage.dataTable.copyContentTooltipIsNotDisplayed();
+            copyContentDataTablePage.clickOnCreatedByColumn('Created one');
+            notificationPage.checkNotificationSnackBarIsNotDisplayed();
+        });
+
+        it('[C307073] A column value with copyContent set to true is copied when clicking on it', () => {
+            copyContentDataTablePage.mouseOverIdColumn('1');
+            expect(copyContentDataTablePage.getCopyContentTooltip()).toEqual('Click to copy');
+            copyContentDataTablePage.clickOnIdColumn('1');
+            notificationPage.checkNotifyContains('Text copied to clipboard');
+            copyContentDataTablePage.pasteClipboard();
+            expect(copyContentDataTablePage.getClipboardInputText()).toEqual('1');
+            copyContentDataTablePage.clickOnIdColumn('2');
+            notificationPage.checkNotifyContains('Text copied to clipboard');
+            copyContentDataTablePage.clickOnIdColumn('3');
+            notificationPage.checkNotifyContains('Text copied to clipboard');
+            copyContentDataTablePage.pasteClipboard();
+            expect(copyContentDataTablePage.getClipboardInputText()).toEqual('3');
+        });
+    });
 });

e2e/pages/adf/demo-shell/dataTablePage.ts

@@ -21,7 +21,18 @@ import { BrowserVisibility } from '@alfresco/adf-testing';
 
 export class DataTablePage {
 
-    dataTable = new DataTableComponentPage();
+    columns = {
+        id: 'Id',
+        name: 'Name',
+        createdBy: 'Created By'
+    };
+
+    data = {
+        copyClipboardDataTable: 'copyClipboard-datatable',
+        defaultTable: 'datatable'
+    };
+
+    dataTable;
     multiSelect = element(by.css(`div[data-automation-id='multiselect'] label > div[class='mat-checkbox-inner-container']`));
     reset = element(by.xpath(`//span[contains(text(),'Reset to default')]/..`));
     selectionButton = element(by.css(`div[class='mat-select-arrow']`));
@@ -33,6 +44,15 @@ export class DataTablePage {
     replaceRowsElement = element(by.xpath(`//span[contains(text(),'Replace rows')]/..`));
     replaceColumnsElement = element(by.xpath(`//span[contains(text(),'Replace columns')]/..`));
     createdOnColumn = element(by.css(`div[data-automation-id='auto_id_createdOn']`));
+    pasteClipboardInput = element(by.css(`input[data-automation-id='paste clipboard input']`));
+
+    constructor(data?) {
+        if (this.data[data]) {
+            this.dataTable = new DataTableComponentPage(element(by.css(`div[data-automation-id='` + this.data[data] + `']`)));
+        } else {
+            this.dataTable = new DataTableComponentPage(element(by.css(`div[data-automation-id='` + this.data.defaultTable + `']`)));
+        }
+    }
 
     insertFilter(filterText) {
         const inputFilter = element(by.css(`#adf-datatable-filter-input`));
@@ -46,7 +66,7 @@ export class DataTablePage {
     }
 
     replaceRows(id) {
-        const rowID = this.dataTable.getRowElement('Id', id);
+        const rowID = this.dataTable.getRowElement(this.columns.id, id);
         BrowserVisibility.waitUntilElementIsVisible(rowID);
         this.replaceRowsElement.click();
         BrowserVisibility.waitUntilElementIsNotVisible(rowID);
@@ -69,7 +89,7 @@ export class DataTablePage {
     }
 
     checkRowIsNotSelected(rowNumber) {
-        const isRowSelected = this.dataTable.getRowElement('Id', rowNumber)
+        const isRowSelected = this.dataTable.getRowElement(this.columns.id, rowNumber)
             .element(by.xpath(`ancestor::div[contains(@class, 'adf-datatable-row custom-row-style ng-star-inserted is-selected')]`));
         BrowserVisibility.waitUntilElementIsNotOnPage(isRowSelected);
     }
@@ -96,13 +116,13 @@ export class DataTablePage {
     }
 
     clickCheckbox(rowNumber) {
-        const checkbox = this.dataTable.getRowElement('Id', rowNumber).element(by.xpath(`ancestor::div[contains(@class, 'adf-datatable-row')]//mat-checkbox/label`));
+        const checkbox = this.dataTable.getRowElement(this.columns.id, rowNumber).element(by.xpath(`ancestor::div[contains(@class, 'adf-datatable-row')]//mat-checkbox/label`));
         BrowserVisibility.waitUntilElementIsVisible(checkbox);
         checkbox.click();
     }
 
     selectRow(rowNumber) {
-        const locator = this.dataTable.getRowElement('Id', rowNumber);
+        const locator = this.dataTable.getRowElement(this.columns.id, rowNumber);
         BrowserVisibility.waitUntilElementIsVisible(locator);
         BrowserVisibility.waitUntilElementIsClickable(locator);
         locator.click();
@@ -110,7 +130,7 @@ export class DataTablePage {
     }
 
     selectRowWithKeyboard(rowNumber) {
-        const row = this.dataTable.getRowElement('Id', rowNumber);
+        const row = this.dataTable.getRowElement(this.columns.id, rowNumber);
         browser.actions().sendKeys(protractor.Key.COMMAND).click(row).perform();
     }
 
@@ -122,6 +142,47 @@ export class DataTablePage {
     }
 
     getRowCheckbox(rowNumber) {
-        return this.dataTable.getRowElement('Id', rowNumber).element(by.xpath(`ancestor::div/div/mat-checkbox[contains(@class, 'mat-checkbox-checked')]`));
+        return this.dataTable.getRowElement(this.columns.id, rowNumber).element(by.xpath(`ancestor::div/div/mat-checkbox[contains(@class, 'mat-checkbox-checked')]`));
+    }
+
+    getCopyContentTooltip() {
+        return this.dataTable.getCopyContentTooltip();
+    }
+
+    mouseOverNameColumn(name) {
+        return this.dataTable.mouseOverColumn(this.columns.name, name);
+    }
+
+    mouseOverCreatedByColumn(name) {
+        return this.dataTable.mouseOverColumn(this.columns.createdBy, name);
+    }
+
+    mouseOverIdColumn(name) {
+        return this.dataTable.mouseOverColumn(this.columns.id, name);
+    }
+
+    clickOnIdColumn(name) {
+        return this.dataTable.clickColumn(this.columns.id, name);
+    }
+
+    clickOnNameColumn(name) {
+        return this.dataTable.clickColumn(this.columns.name, name);
+    }
+
+    clickOnCreatedByColumn(name) {
+        return this.dataTable.clickColumn(this.columns.createdBy, name);
+    }
+
+    pasteClipboard() {
+        this.pasteClipboardInput.clear();
+        BrowserVisibility.waitUntilElementIsVisible(this.pasteClipboardInput);
+        this.pasteClipboardInput.click();
+        this.pasteClipboardInput.sendKeys(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.INSERT));
+        return this;
+    }
+
+    getClipboardInputText() {
+        BrowserVisibility.waitUntilElementIsVisible(this.pasteClipboardInput);
+        return this.pasteClipboardInput.getAttribute('value');
     }
 }

e2e/pages/adf/navigationBarPage.ts

@@ -27,6 +27,7 @@ export class NavigationBarPage {
     contentServicesButton = element(by.css('a[data-automation-id="Content Services"]'));
     dataTableButton = element(by.css('a[data-automation-id="Datatable"]'));
     dataTableNestedButton = element(by.css('button[data-automation-id="Datatable"]'));
+    dataTableCopyContentButton = element(by.css('button[data-automation-id="Copy Content"]'));
     taskListButton = element(by.css("a[data-automation-id='Task List']"));
     configEditorButton = element(by.css('a[data-automation-id="Configuration Editor"]'));
     processServicesButton = element(by.css('a[data-automation-id="Process Services"]'));
@@ -59,6 +60,13 @@ export class NavigationBarPage {
         this.dataTableNestedButton.click();
     }
 
+    navigateToCopyContentDatatable() {
+        BrowserVisibility.waitUntilElementIsVisible(this.dataTableButton);
+        this.dataTableButton.click();
+        BrowserVisibility.waitUntilElementIsVisible(this.dataTableCopyContentButton);
+        this.dataTableCopyContentButton.click();
+    }
+
     clickContentServicesButton() {
         BrowserVisibility.waitUntilElementIsVisible(this.contentServicesButton);
         this.contentServicesButton.click();

lib/testing/src/lib/core/browser-visibility.ts

@@ -112,4 +112,8 @@ export class BrowserVisibility {
         return browser.wait(until.presenceOf(elementToCheck), waitTimeout, 'Element is not present ' + elementToCheck.locator());
     }
 
+    static waitUntilElementIsNotPresent(elementToCheck, waitTimeout: number = DEFAULT_TIMEOUT) {
+        return browser.wait(until.not(until.presenceOf(elementToCheck)), waitTimeout, 'Element is not in the page ' + elementToCheck.locator());
+    }
+
 }

lib/testing/src/lib/core/pages/data-table-component.page.ts

@@ -31,6 +31,7 @@ export class DataTableComponentPage {
     selectedRowNumber;
     allSelectedRows;
     selectAll;
+    copyColumnTooltip;
 
     constructor(rootElement: ElementFinder = element.all(by.css('adf-datatable')).first()) {
         this.rootElement = rootElement;
@@ -42,6 +43,7 @@ export class DataTableComponentPage {
         this.selectedRowNumber = this.rootElement.element(by.css(`div[class*='is-selected'] div[data-automation-id*='text_']`));
         this.allSelectedRows = this.rootElement.all(by.css(`div[class*='is-selected']`));
         this.selectAll = this.rootElement.element(by.css(`div[class*='adf-datatable-header'] mat-checkbox`));
+        this.copyColumnTooltip = this.rootElement.element(by.css(`adf-datatable-copy-content-tooltip span`));
     }
 
     checkAllRowsButtonIsDisplayed() {
@@ -306,4 +308,29 @@ export class DataTableComponentPage {
         BrowserVisibility.waitUntilElementIsClickable(resultElement);
         resultElement.click();
     }
+
+    getCopyContentTooltip() {
+        BrowserVisibility.waitUntilElementIsVisible(this.copyColumnTooltip);
+        return this.copyColumnTooltip.getText();
+    }
+
+    copyContentTooltipIsNotDisplayed() {
+        BrowserVisibility.waitUntilElementIsNotPresent(this.copyColumnTooltip);
+        return this;
+    }
+
+    mouseOverColumn(columnName, columnValue) {
+        const column = this.getRowElement(columnName, columnValue);
+        BrowserVisibility.waitUntilElementIsVisible(column);
+        browser.actions().mouseMove(column).perform();
+        return this;
+    }
+
+    clickColumn(columnName, columnValue) {
+        const column = this.getRowElement(columnName, columnValue);
+        BrowserVisibility.waitUntilElementIsVisible(column);
+        BrowserVisibility.waitUntilElementIsClickable(column);
+        column.click();
+        return this;
+    }
 }