[ADF-3399] Create automated tests to cover Header component (#3633)

e2e/core/header_component.e2e.ts

@@ -0,0 +1,122 @@
+/*!
+ * @license
+ * Copyright 2016 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 LoginPage = require('../pages/adf/loginPage');
+import NavigationBarPage = require('../pages/adf/navigationBarPage');
+import { HeaderPage } from '../pages/adf/core/headerPage';
+
+import TestConfig = require('../test.config');
+import Util = require('../util/util.js');
+
+import AlfrescoApi = require('alfresco-js-api-node');
+import { UsersActions } from '../actions/users.actions';
+
+describe('Header Component', () => {
+
+    let loginPage = new LoginPage();
+    let navigationBarPage = new NavigationBarPage();
+    let headerPage = new HeaderPage();
+    let user, tenantId;
+    let title = {
+        default: 'ADF Demo Application',
+        custom: 'New Test App'
+    };
+
+    let urlPath = {
+        default: './assets/images/logo.png',
+        custom: 'https://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg'
+    };
+
+    let color = {
+        primary: 'primary',
+        accent: 'accent'
+    };
+
+    beforeAll(async(done) => {
+        this.alfrescoJsApi = new AlfrescoApi({
+            provider: 'BPM',
+            hostBpm: TestConfig.adf.url
+        });
+
+        done();
+    });
+
+    beforeEach(async(done) =>{
+        let users = new UsersActions();
+
+        await this.alfrescoJsApi.login(TestConfig.adf.adminEmail, TestConfig.adf.adminPassword);
+
+        user = await users.createTenantAndUser(this.alfrescoJsApi);
+
+        tenantId = user.tenantId;
+
+        await this.alfrescoJsApi.login(user.email, user.password);
+
+        await loginPage.loginToProcessServicesUsingUserModel(user);
+
+        await navigationBarPage.clickHeaderDataButton();
+
+        done();
+    });
+
+    afterEach(async(done) => {
+        await this.alfrescoJsApi.login(TestConfig.adf.adminEmail, TestConfig.adf.adminPassword);
+
+        await this.alfrescoJsApi.activiti.adminTenantsApi.deleteTenant(tenantId);
+
+        done();
+    });
+
+    it('[C280002] Should be able to view Header component', () => {
+        headerPage.checkShowMenuCheckBoxIsDisplayed();
+        headerPage.checkChooseHeaderColourIsDisplayed();
+        headerPage.checkChangeTitleIsDisplayed(title.default);
+        headerPage.checkChangeUrlPathIsDisplayed(urlPath.default);
+
+    });
+
+    it('[C279996] Should be able to show/hide menu button', () => {
+        headerPage.clickShowMenuButton();
+
+        navigationBarPage.checkMenuButtonIsNotDisplayed();
+
+        headerPage.clickShowMenuButton();
+
+        navigationBarPage.checkMenuButtonIsDisplayed();
+    });
+
+    it('[C279999]Should be able to change the colour between primary and accent', () => {
+        headerPage.changeHeaderColor(color.accent);
+
+        navigationBarPage.checkToolbarColor(color.accent);
+
+        headerPage.changeHeaderColor(color.primary);
+
+        navigationBarPage.checkToolbarColor(color.primary);
+    });
+
+    it('[C279997] Should be able to change the title of the app', () => {
+        headerPage.checkAppTitle(title.default);
+        headerPage.addTitle(title.custom);
+        headerPage.checkAppTitle(title.custom);
+    });
+
+    it('[C279998] Should be able to change the default logo of the app', () => {
+        headerPage.checkIconIsDisplayed(urlPath.default);
+        headerPage.addIcon(urlPath.custom);
+        headerPage.checkIconIsDisplayed(urlPath.custom);
+    });
+});

e2e/pages/adf/core/headerPage.ts

@@ -0,0 +1,73 @@
+/*!
+ * @license
+ * Copyright 2016 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 Util = require('../../../util/util');
+import TestConfig = require('../../../test.config');
+
+export class HeaderPage {
+
+    checkBox = element(by.cssContainingText('.mat-checkbox-label', 'Show menu button'));
+    headerColor = element(by.css('option[value="primary"]'));
+    titleInput = element(by.css('input[name="title"]'));
+    iconInput = element(by.css('input[placeholder="URL path"]'));
+
+    checkShowMenuCheckBoxIsDisplayed() {
+        return Util.waitUntilElementIsVisible(this.checkBox);
+    }
+
+    checkChooseHeaderColourIsDisplayed() {
+        return Util.waitUntilElementIsVisible(this.headerColor);
+    }
+
+    checkChangeTitleIsDisplayed() {
+        return Util.waitUntilElementIsVisible(this.titleInput);
+    }
+
+    checkChangeUrlPathIsDisplayed() {
+        return Util.waitUntilElementIsVisible(this.iconInput);
+    }
+
+    clickShowMenuButton() {
+        let checkBox = element.all(by.css('mat-checkbox'));
+        Util.waitUntilElementIsVisible(checkBox);
+        return checkBox.get(0).click();
+    }
+
+    changeHeaderColor(color) {
+        let headerColor = element(by.css('option[value="'+color+'"]'));
+        return headerColor.click();
+    }
+
+    checkAppTitle(name) {
+        let title = element(by.cssContainingText('.adf-app-title', name));
+        return Util.waitUntilElementIsVisible(title);
+    }
+
+    addTitle(title) {
+        Util.waitUntilElementIsVisible(this.titleInput);
+        return this.titleInput.click().sendKeys(title).sendKeys(protractor.Key.ENTER);
+    }
+
+    checkIconIsDisplayed(url) {
+        let icon = element(by.css('img[src="'+ url +'"]'));
+        Util.waitUntilElementIsVisible(icon);
+    }
+
+    addIcon(url) {
+        Util.waitUntilElementIsVisible(this.iconInput);
+        return this.iconInput.click().sendKeys(url).sendKeys(protractor.Key.ENTER);
+    }
+}

e2e/pages/adf/navigationBarPage.js

@@ -32,6 +32,8 @@ var NavigationBarPage = function () {
     var cardViewButton = element(by.cssContainingText(".sidenav-menu-label", "CardView"));
     var languageMenuButton = element(by.css('button[data-automation-id="language-menu-button"]'));
     var appTitle = element(by.css('.adf-app-title'));
+    var headerDataButton = element(by.css("a[data-automation-id='Header data']"));
+    var menuButton = element(by.css('button[data-automation-id="adf-menu-icon"]'));
 
     /**
      * Click Content Services Button
@@ -129,6 +131,24 @@ var NavigationBarPage = function () {
         languageMenuButton.click();
         Util.waitUntilElementIsVisible(appTitle);
     };
+
+    this.clickHeaderDataButton = function () {
+        Util.waitUntilElementIsVisible(headerDataButton);
+        return headerDataButton.click();
+    };
+
+    this.checkMenuButtonIsDisplayed = function () {
+        return Util.waitUntilElementIsVisible(menuButton);
+    };
+
+    this.checkMenuButtonIsNotDisplayed = function () {
+        return Util.waitUntilElementIsNotVisible(menuButton);
+    };
+
+    this.checkToolbarColor = function (color) {
+        var toolbarColor = element(by.css(`mat-toolbar.mat-${color}`));
+        return Util.waitUntilElementIsVisible(toolbarColor);
+    }
 };
 
 module.exports = NavigationBarPage;

lib/core/layout/components/header/header.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar color="{{color}}">
-    <button *ngIf="showSidenavToggle" class="mat-icon-button adf-menu-icon" mat-icon-button (click)="toggleMenu()">
+    <button *ngIf="showSidenavToggle" data-automation-id="adf-menu-icon" class="mat-icon-button adf-menu-icon" mat-icon-button (click)="toggleMenu()">
         <mat-icon class="mat-icon material-icon" role="img" aria-hidden="true">menu</mat-icon>
     </button>