[ADF-3439] Update automated tests for Header component (#3673)

* [ADF-3439] Update automated tests for Header component

* small change

* removing unused import

e2e/core/header_component.e2e.ts

@@ -17,6 +17,7 @@
 import LoginPage = require('../pages/adf/loginPage');
 import NavigationBarPage = require('../pages/adf/navigationBarPage');
 import { HeaderPage } from '../pages/adf/core/headerPage';
+import SettingsPage = require('../pages/adf/settingsPage')
 
 import TestConfig = require('../test.config');
 
@@ -28,20 +29,22 @@ describe('Header Component', () => {
     let loginPage = new LoginPage();
     let navigationBarPage = new NavigationBarPage();
     let headerPage = new HeaderPage();
+    let settingsPage = new SettingsPage();
+
     let user, tenantId;
-    let title = {
-        default: 'ADF Demo Application',
-        custom: 'New Test App'
-    };
 
-    let urlPath = {
+    let names = {
-        default: './assets/images/logo.png',
+        app_title_default: 'ADF Demo Application',
-        custom: 'https://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg'
+        app_title_custom: 'New Test App',
-    };
+        urlPath_default: './assets/images/logo.png',
-
+        urlPath_custom: 'https://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg',
-    let color = {
+        urlPath_logo_link: '"/settings-layout"',
-        primary: 'primary',
+        color_primary: 'primary',
-        accent: 'accent'
+        color_accent: 'accent',
+        color_warn: 'warn',
+        color_custom: '#862B2B',
+        logo_title: 'ADF Demo Application',
+        logo_tooltip: 'test_tooltip'
     };
 
     beforeAll(async(done) => {
@@ -82,9 +85,11 @@ describe('Header Component', () => {
     it('[C280002] Should be able to view Header component', () => {
         headerPage.checkShowMenuCheckBoxIsDisplayed();
         headerPage.checkChooseHeaderColourIsDisplayed();
+        headerPage.checkHexColorInputIsDisplayed();
         headerPage.checkChangeTitleIsDisplayed();
         headerPage.checkChangeUrlPathIsDisplayed();
-
+        headerPage.checkLogoHyperlinkInputIsDisplayed();
+        headerPage.checkLogoTooltipInputIsDisplayed();
     });
 
     it('[C279996] Should be able to show/hide menu button', () => {
@@ -97,25 +102,50 @@ describe('Header Component', () => {
         navigationBarPage.checkMenuButtonIsDisplayed();
     });
 
-    it('[C279999]Should be able to change the colour between primary and accent', () => {
+    it('[C279999] Should be able to change the colour between primary, accent and warn', () => {
-        headerPage.changeHeaderColor(color.accent);
+        headerPage.changeHeaderColor(names.color_accent);
 
-        navigationBarPage.checkToolbarColor(color.accent);
+        navigationBarPage.checkToolbarColor(names.color_accent);
 
-        headerPage.changeHeaderColor(color.primary);
+        headerPage.changeHeaderColor(names.color_primary);
+
+        navigationBarPage.checkToolbarColor(names.color_primary);
+
+        headerPage.changeHeaderColor(names.color_warn);
+
+        navigationBarPage.checkToolbarColor(names.color_warn);
+    });
+
+    it('[C280552] Should be able to change the colour of the header by typing a hex code', () => {
+        headerPage.addHexCodeColor(names.color_custom);
+
+        navigationBarPage.checkToolbarColor(names.color_custom);
 
-        navigationBarPage.checkToolbarColor(color.primary);
     });
 
     it('[C279997] Should be able to change the title of the app', () => {
-        headerPage.checkAppTitle(title.default);
+        headerPage.checkAppTitle(names.app_title_default);
-        headerPage.addTitle(title.custom);
+        headerPage.addTitle(names.app_title_custom);
-        headerPage.checkAppTitle(title.custom);
+        headerPage.checkAppTitle(names.app_title_custom);
     });
 
     it('[C279998] Should be able to change the default logo of the app', () => {
-        headerPage.checkIconIsDisplayed(urlPath.default);
+        headerPage.checkIconIsDisplayed(names.urlPath_default);
-        headerPage.addIcon(urlPath.custom);
+        headerPage.addIcon(names.urlPath_custom);
-        headerPage.checkIconIsDisplayed(urlPath.custom);
+        headerPage.checkIconIsDisplayed(names.urlPath_custom);
+    });
+
+    it('[C280553] Should be able to set a hyperlink to the logo', () => {
+        headerPage.addLogoHyperlink(names.urlPath_logo_link);
+
+        navigationBarPage.clickAppLogo(names.logo_title);
+
+        settingsPage.checkProviderDropdownIsDisplayed();
+    });
+
+    it('[C280554] Should be able to customise the tooltip-text of the logo', () => {
+        headerPage.addLogoTooltip(names.logo_tooltip);
+
+        navigationBarPage.checkLogoTooltip(names.logo_tooltip);
     });
 });

e2e/pages/adf/core/headerPage.ts

@@ -25,6 +25,9 @@ export class HeaderPage {
     headerColor = element(by.css('option[value="primary"]'));
     titleInput = element(by.css('input[name="title"]'));
     iconInput = element(by.css('input[placeholder="URL path"]'));
+    hexColorInput = element(by.css('input[placeholder="hex color code"]'));
+    logoHyperlinkInput = element(by.css('input[placeholder="Redirect URL"]'));
+    logoTooltipInput =  element(by.css('input[placeholder="Tooltip text"]'));
 
     checkShowMenuCheckBoxIsDisplayed() {
         return Util.waitUntilElementIsVisible(this.checkBox);
@@ -76,4 +79,31 @@ export class HeaderPage {
         this.iconInput.sendKeys(url);
         this.iconInput.sendKeys(protractor.Key.ENTER);
     }
+
+    checkHexColorInputIsDisplayed() {
+        return Util.waitUntilElementIsVisible(this.hexColorInput);
+    }
+
+    checkLogoHyperlinkInputIsDisplayed() {
+        return Util.waitUntilElementIsVisible(this.logoHyperlinkInput);
+    }
+
+    checkLogoTooltipInputIsDisplayed() {
+        return Util.waitUntilElementIsVisible(this.logoTooltipInput);
+    }
+
+    addHexCodeColor(hexCode) {
+        Util.waitUntilElementIsVisible(this.hexColorInput);
+        return this.hexColorInput.click().sendKeys(hexCode).sendKeys(protractor.Key.ENTER);
+    }
+
+    addLogoHyperlink(hyperlink) {
+        Util.waitUntilElementIsVisible(this.logoHyperlinkInput);
+        return this.logoHyperlinkInput.click().sendKeys(hyperlink).sendKeys(protractor.Key.ENTER);
+    }
+
+    addLogoTooltip(tooltip) {
+        Util.waitUntilElementIsVisible(this.logoTooltipInput);
+        return this.logoTooltipInput.click().sendKeys(tooltip).sendKeys(protractor.Key.ENTER);
+    }
 }

e2e/pages/adf/navigationBarPage.js

@@ -146,8 +146,19 @@ var NavigationBarPage = function () {
     };
 
     this.checkToolbarColor = function (color) {
-        var toolbarColor = element(by.css(`mat-toolbar.mat-${color}`));
+        var toolbarColor = element(by.css(`mat-toolbar[class*="mat-${color}"]`));
         return Util.waitUntilElementIsVisible(toolbarColor);
+    };
+
+    this.clickAppLogo = function (logoTitle) {
+        var appLogo = element(by.css('a[title="'+ logoTitle +'"]'));
+        Util.waitUntilElementIsVisible(appLogo);
+        appLogo.click();
+    };
+
+    this.checkLogoTooltip = function (logoTooltip) {
+        var logoTooltip = element(by.css('a[title="'+ logoTooltip +'"]'));
+        Util.waitUntilElementIsVisible(logoTooltip);
     }
 };
 

e2e/pages/adf/settingsPage.js

@@ -127,5 +127,9 @@ var SettingsPage = function () {
         Util.waitUntilElementIsVisible(applyButton);
         applyButton.click();
     };
+
+    this.checkProviderDropdownIsDisplayed = function () {
+        Util.waitUntilElementIsVisible(providerDropdown);
+    };
 };
 module.exports = SettingsPage;