inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

* Add a new page in demo-shell.
Add copyContent automated tests.
This commit is contained in:
cristinaj 2019-04-17 13:10:36 +03:00 committed by Eugenio Romano
parent 550c0006c9
commit bcdfcee397
11 changed files with 421 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo-shell/src/app/app.routes.ts
View File

@ -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

3
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@ -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' },

23
demo-shell/src/app/components/datatable/copy-content/datatable.component.html Normal file
View File

@ -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>

125
demo-shell/src/app/components/datatable/copy-content/datatable.component.ts Normal file
View File

@ -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'}
]
);
}

41
demo-shell/src/app/components/datatable/copy-content/datatable.module.ts Normal file
View File

@ -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 {}

2
demo-shell/src/app/components/datatable/datatable.component.html
View File

@ -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"

140
e2e/core/datatable/data-table-component.e2e.ts
View File

@ -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,34 +47,127 @@ describe('Datatable component', () => {
loginPage.loginToContentServicesUsingUserModel(acsUser);
navigationBarPage.navigateToDatatable();
done();
});
it('[C91314] Should be possible add new row to the table', () => {
dataTableComponent.numberOfRows().then((result) => {
dataTablePage.addRow();
expect(dataTableComponent.numberOfRows()).toEqual(result + 1);
dataTablePage.addRow();
expect(dataTableComponent.numberOfRows()).toEqual(result + 2);
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();
expect(dataTableComponent.numberOfRows()).toEqual(result + 1);
dataTablePage.addRow();
expect(dataTableComponent.numberOfRows()).toEqual(result + 2);
});
});
it('[C260039] Should be possible replace rows', () => {
dataTablePage.replaceRows(1);
});
it('[C260041] Should be possible replace columns', () => {
dataTablePage.replaceColumns();
});
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);
});
});
it('[C260039] Should be possible replace rows', () => {
dataTablePage.replaceRows(1);
});
describe('Datatable component - copyContent', () => {
it('[C260041] Should be possible replace columns', () => {
dataTablePage.replaceColumns();
});
beforeAll(async (done) => {
navigationBarPage.navigateToCopyContentDatatable();
done();
});
it('[C277314] Should filter the table rows when the input filter is passed', () => {
expect(dataTableComponent.numberOfRows()).toEqual(4);
dataTablePage.insertFilter('Name');
expect(dataTableComponent.numberOfRows()).toEqual(3);
dataTablePage.insertFilter('I');
expect(dataTableComponent.numberOfRows()).toEqual(1);
});
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');
});
});
});

75
e2e/pages/adf/demo-shell/dataTablePage.ts
View File

@ -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');
}
}

8
e2e/pages/adf/navigationBarPage.ts
View File

@ -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();

4
lib/testing/src/lib/core/browser-visibility.ts
View File

@ -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());
}
}

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

@ -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;
}
}