[AAE-2021] Unit tests for about components (#5496)

* * Added unit tests to the about-github-link component.
* Removed unused css

* * Added unit tests to the about module and prodcut-version components

* * After rebase

lib/core/about/about-application-modules/about-application-modules.component.html

@@ -1,5 +1,5 @@
-<div class="adf-about-container">
+<div class="adf-about-modules-container">
-    <h3>{{ 'ABOUT.PACKAGES.TITLE' | translate }}</h3>
+    <h3 data-automation-id="adf-about-modules-title">{{ 'ABOUT.PACKAGES.TITLE' | translate }}</h3>
     <small>{{ 'ABOUT.PACKAGES.DESCRIPTION' | translate }}</small>
     <adf-datatable [data]="dependencyEntries"></adf-datatable>
 

lib/core/about/about-application-modules/about-application-modules.component.scss

@@ -1,10 +1,3 @@
-.adf-about-container {
+.adf-about-modules-container {
     padding: 10px;
 }
-
-.adf-table-version {
-    width: 60%;
-    border: 0;
-    border-spacing: 0;
-    text-align: center;
-}

lib/core/about/about-application-modules/about-application-modules.component.spec.ts

@@ -0,0 +1,106 @@
+/*!
+ * @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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreTestingModule } from '../../testing/core.testing.module';
+import { setupTestBed } from '../../testing/setup-test-bed';
+import { AboutApplicationModulesComponent } from './about-application-modules.component';
+import { MatTableModule } from '@angular/material/table';
+import { DataColumnModule } from '../../data-column/data-column.module';
+import { DataTableModule } from '../../datatable/datatable.module';
+import { mockDependencies, mockPlugins } from '../about.mock';
+
+describe('AboutApplicationModulesComponent', () => {
+    let fixture: ComponentFixture<AboutApplicationModulesComponent>;
+    let component: AboutApplicationModulesComponent;
+
+    setupTestBed({
+        imports: [CoreTestingModule, MatTableModule, DataColumnModule, DataTableModule]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AboutApplicationModulesComponent);
+        component = fixture.componentInstance;
+        component.dependencies = mockDependencies;
+        fixture.detectChanges();
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('Should display title', () => {
+        const titleElement = fixture.nativeElement.querySelector('[data-automation-id="adf-about-modules-title"]');
+        expect(titleElement.innerText).toEqual('ABOUT.PACKAGES.TITLE');
+    });
+
+    it('should display dependencies', async() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const dataTable =  fixture.nativeElement.querySelector('.adf-datatable');
+
+        const depOne =  fixture.nativeElement.querySelector('[data-automation-id="text_@alfresco/mock-core"]');
+        const depTwo =  fixture.nativeElement.querySelector('[data-automation-id="text_@alfresco/mock-services"]');
+        const depVersionOne =  fixture.nativeElement.querySelector('[data-automation-id="text_3.7.0"]');
+        const depVersionTwo =  fixture.nativeElement.querySelector('[data-automation-id="text_2.0.0"]');
+
+        expect(dataTable).not.toBeNull();
+
+        expect(depOne.innerText).toEqual('@alfresco/mock-core');
+        expect(depTwo.innerText).toEqual('@alfresco/mock-services');
+
+        expect(depVersionOne.innerText).toEqual('3.7.0');
+        expect(depVersionTwo.innerText).toEqual('2.0.0');
+    });
+
+    it('should display extensions', async() => {
+        component.extensions = mockPlugins;
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const dataTable =  fixture.nativeElement.querySelector('.mat-table');
+        const nameColumn =  fixture.nativeElement.querySelector('.mat-column--name');
+        const versionColumn =  fixture.nativeElement.querySelector('.mat-column--version');
+        const licenseColumn =  fixture.nativeElement.querySelector('.mat-column--license');
+        const nameRows =  fixture.nativeElement.querySelector('.mat-row .mat-column--name');
+        const versionRows =  fixture.nativeElement.querySelector('.mat-row .mat-column--version');
+        const licenseRows =  fixture.nativeElement.querySelector('.mat-row .mat-column--license');
+
+        expect(dataTable).not.toBeNull();
+
+        expect(versionColumn.innerText).toEqual('ABOUT.EXTENSIONS.TABLE_HEADERS.VERSION');
+        expect(nameColumn.innerText).toEqual('ABOUT.EXTENSIONS.TABLE_HEADERS.NAME');
+        expect(licenseColumn.innerText).toEqual('ABOUT.EXTENSIONS.TABLE_HEADERS.LICENSE');
+
+        expect(nameRows.innerText).toEqual('plugin1');
+        expect(versionRows.innerText).toEqual('1.0.0');
+        expect(licenseRows.innerText).toEqual('MockLicense-2.0');
+    });
+
+    it('should not display extensions if showExtensions set to false ', async() => {
+        component.extensions = mockPlugins;
+        component.showExtensions = false;
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const dataTable =  fixture.nativeElement.querySelector('.mat-table');
+        const nameColumn =  fixture.nativeElement.querySelector('.mat-column--name');
+        const nameRows =  fixture.nativeElement.querySelector('.mat-row .mat-column--name');
+
+        expect(dataTable).toBeNull();
+        expect(nameColumn).toBeNull();
+        expect(nameRows).toBeNull();
+    });
+});

lib/core/about/about-github-link/about-github-link.component.html

@@ -1,27 +1,27 @@
-<div class="adf-about-container">
+<div class="adf-github-link-container">
-    <h1>{{ application }}</h1>
+    <h1 data-automation-id="adf-github-app-title">{{ application }}</h1>
 
     <div>
-        <h3>{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}</h3>
+        <h3 data-automation-id="adf-github-source-code-title">{{ 'ABOUT.SOURCE_CODE.TITLE' | translate }}</h3>
         <mat-card>
-            <p *ngIf="version">{{ 'ABOUT.VERSION' | translate }}: {{ version }}</p>
+            <p *ngIf="version" data-automation-id="adf-github-version">{{ 'ABOUT.VERSION' | translate }}: {{ version }}</p>
 
             <div *ngIf="url">
                 <small>{{ 'ABOUT.SOURCE_CODE.DESCRIPTION' | translate }}</small>
-                <div>
+                <div data-automation-id="adf-github-url">
                     <a [href]="url" target="_blank">{{url}}</a>
                 </div>
             </div>
         </mat-card>
     </div>
 
-    <h3>{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</h3>
+    <h3 data-automation-id="adf-about-setting-title">{{ 'ABOUT.SERVER_SETTINGS.TITLE' | translate }}</h3>
     <small>{{ 'ABOUT.SERVER_SETTINGS.DESCRIPTION' | translate }}</small>
     <mat-card>
-        <p>
+        <p data-automation-id="adf-process-service-host">
             {{ 'ABOUT.SERVER_SETTINGS.PROCESS_SERVICE_HOST' | translate: {value: bpmHost} }}
         </p>
-        <p>
+        <p data-automation-id="adf-content-service-host">
             {{ 'ABOUT.SERVER_SETTINGS.CONTENT_SERVICE_HOST' | translate: {value: ecmHost} }}
         </p>
     </mat-card>

lib/core/about/about-github-link/about-github-link.component.scss

@@ -1,10 +1,3 @@
-.adf-about-container {
+.adf-github-link-container {
     padding: 10px;
 }
-
-.adf-table-version {
-    width: 60%;
-    border: 0;
-    border-spacing: 0;
-    text-align: center;
-}

lib/core/about/about-github-link/about-github-link.component.spec.ts

@@ -0,0 +1,87 @@
+/*!
+ * @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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreTestingModule } from '../../testing/core.testing.module';
+import { setupTestBed } from '../../testing/setup-test-bed';
+import { AboutGithubLinkComponent } from './about-github-link.component';
+import { AppConfigService } from '../../app-config/app-config.service';
+import { aboutGithubDetails } from '../about.mock';
+
+describe('AboutGithubLinkComponent', () => {
+    let fixture: ComponentFixture<AboutGithubLinkComponent>;
+    let component: AboutGithubLinkComponent;
+    let appConfigService: AppConfigService;
+
+    setupTestBed({
+        imports: [CoreTestingModule]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AboutGithubLinkComponent);
+        component = fixture.componentInstance;
+        appConfigService = TestBed.get(AppConfigService);
+        appConfigService.config = Object.assign(appConfigService.config, {
+            'ecmHost': aboutGithubDetails.ecmHost,
+            'bpmHost': aboutGithubDetails.bpmHost,
+            'application': {
+                'name': aboutGithubDetails.appName
+            }
+        });
+        fixture.detectChanges();
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('Should fetch appName for app.config and display as title', () => {
+        const titleElement = fixture.nativeElement.querySelector('[data-automation-id="adf-github-app-title"]');
+        expect(titleElement === null).toBeFalsy();
+        expect(titleElement.innerText).toEqual('mock-application-name');
+    });
+
+    it('should display version', async() => {
+        component.version = aboutGithubDetails.version;
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const version = fixture.nativeElement.querySelector('[data-automation-id="adf-github-version"]');
+        expect(version.innerText).toEqual('ABOUT.VERSION: 0.0.7');
+    });
+
+    it('should display adf github link as default if url is not specified', async() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const githubUrl = fixture.nativeElement.querySelector('[data-automation-id="adf-github-url"]');
+        expect(githubUrl.innerText).toEqual(aboutGithubDetails.defualrUrl);
+    });
+
+    it('should display the github link', async() => {
+        component.url = aboutGithubDetails.url;
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const githubUrl = fixture.nativeElement.querySelector('[data-automation-id="adf-github-url"]');
+        expect(githubUrl.innerText).toEqual(aboutGithubDetails.url);
+    });
+
+    it('should fetch process and content hosts from the app.config.json file', async() => {
+        await fixture.whenStable();
+        expect(component.application).toEqual(aboutGithubDetails.appName);
+        expect(component.bpmHost).toEqual(aboutGithubDetails.bpmHost);
+        expect(component.ecmHost).toEqual(aboutGithubDetails.ecmHost);
+    });
+});

lib/core/about/about-product-version/about-product-version.component.html

@@ -1,24 +1,24 @@
-<div class="adf-about-container" *ngIf="bpmVersion || ecmVersion">
+<div class="adf-about-product-version-container" *ngIf="bpmVersion || ecmVersion">
-    <h3>{{ 'ABOUT.VERSIONS.TITLE' | translate }}</h3>
+    <h3 data-automation-id="adf-about-product-version-title">{{ 'ABOUT.VERSIONS.TITLE' | translate }}</h3>
     <div *ngIf="bpmVersion">
         <mat-card>
-            <div *ngIf="bpmVersion">
+            <div *ngIf="bpmVersion" data-automation-id="adf-about-bpm-service">
                 <h3>{{ 'ABOUT.VERSIONS.PROCESS_SERVICE' | translate }}</h3>
-                <p>
+                <p data-automation-id="adf-about-bpm-edition">
                     {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ bpmVersion.edition }}
                 </p>
-                <p>
+                <p data-automation-id="adf-about-bpm-version">
                     {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ bpmVersion.majorVersion }}.{{
                     bpmVersion.minorVersion }}.{{ bpmVersion.revisionVersion }}
                 </p>
             </div>
 
-            <div *ngIf="ecmVersion">
+            <div *ngIf="ecmVersion" data-automation-id="adf-about-ecm-service">
                 <h3>{{ 'ABOUT.VERSIONS.CONTENT_SERVICE' | translate }}</h3>
-                <p>
+                <p data-automation-id="adf-about-ecm-edition">
                     {{ 'ABOUT.VERSIONS.LABELS.EDITION' | translate }}: {{ ecmVersion.edition }}
                 </p>
-                <p>
+                <p data-automation-id="adf-about-ecm-version">
                     {{ 'ABOUT.VERSIONS.LABELS.VERSION' | translate }}: {{ ecmVersion.version.display }}
                 </p>
 
@@ -26,7 +26,7 @@
         </mat-card>
     </div>
 
-    <div *ngIf="ecmVersion">
+    <div *ngIf="ecmVersion" data-automation-id="adf-about-ecm">
         <h3>{{ 'ABOUT.VERSIONS.LABELS.LICENSE' | translate }}</h3>
         <adf-datatable [data]="license"></adf-datatable>
 

lib/core/about/about-product-version/about-product-version.component.scss

@@ -1,10 +1,3 @@
-.adf-about-container {
+.adf-about-product-version-container {
     padding: 10px;
 }
-
-.adf-table-version {
-    width: 60%;
-    border: 0;
-    border-spacing: 0;
-    text-align: center;
-}

lib/core/about/about-product-version/about-product-version.component.spec.ts

@@ -0,0 +1,115 @@
+/*!
+ * @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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreTestingModule } from '../../testing/core.testing.module';
+import { setupTestBed } from '../../testing/setup-test-bed';
+import { AboutProductVersionComponent } from './about-product-version.component';
+import { DiscoveryApiService } from '../../services/discovery-api.service';
+import { AuthenticationService } from '../../services/authentication.service';
+import { of } from 'rxjs';
+import { DataColumnModule } from '../../data-column/data-column.module';
+import { DataTableModule } from '../../datatable/datatable.module';
+import { MatCardModule } from '@angular/material';
+import { aboutAPSMockDetails, mockModules } from '../about.mock';
+
+describe('AboutProductVersionComponent', () => {
+    let fixture: ComponentFixture<AboutProductVersionComponent>;
+    let authenticationService: AuthenticationService;
+    let discoveryApiService:  DiscoveryApiService;
+
+    setupTestBed({
+        imports: [CoreTestingModule, DataColumnModule, DataTableModule, MatCardModule]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(AboutProductVersionComponent);
+        authenticationService = TestBed.get(AuthenticationService);
+        discoveryApiService = TestBed.get(DiscoveryApiService);
+        spyOn(discoveryApiService, 'getEcmProductInfo').and.returnValue(of(mockModules));
+        spyOn(authenticationService, 'isBpmLoggedIn').and.returnValue(true);
+        spyOn(authenticationService, 'isEcmLoggedIn').and.returnValue(true);
+        spyOn(discoveryApiService, 'getBpmProductInfo').and.returnValue(of(aboutAPSMockDetails));
+        fixture.detectChanges();
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('Should display title', () => {
+        const titleElement = fixture.nativeElement.querySelector('[data-automation-id="adf-about-product-version-title"]');
+        expect(titleElement === null).toBeFalsy();
+        expect(titleElement.innerText).toBe('ABOUT.VERSIONS.TITLE');
+    });
+
+    it('should display bpm details', async() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const version = fixture.nativeElement.querySelector('[data-automation-id="adf-about-bpm-version"]');
+        expect(version.innerText).toEqual('ABOUT.VERSIONS.LABELS.VERSION: 1.10.0');
+    });
+
+    it('should display ecm details', async() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const version = fixture.nativeElement.querySelector('[data-automation-id="adf-about-ecm-version"]');
+        expect(version.innerText).toEqual('ABOUT.VERSIONS.LABELS.VERSION: 6.2.0.0');
+    });
+
+    it('should display both bpm & ecm details', async() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const bpmVersion = fixture.nativeElement.querySelector('[data-automation-id="adf-about-bpm-version"]');
+        const ecmVersion = fixture.nativeElement.querySelector('[data-automation-id="adf-about-ecm-version"]');
+        expect(bpmVersion.innerText).toEqual('ABOUT.VERSIONS.LABELS.VERSION: 1.10.0');
+        expect(ecmVersion.innerText).toEqual('ABOUT.VERSIONS.LABELS.VERSION: 6.2.0.0');
+    });
+
+    it('should display license details', async() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const dataTable =  fixture.nativeElement.querySelector('.adf-datatable');
+        const issueAt =  fixture.nativeElement.querySelector('[data-automation-id="text_2018-12-20T12:07:31.276+0000"]');
+        const expiresAt =  fixture.nativeElement.querySelector('[data-automation-id="text_2019-05-31T23:00:00.000+0000"]');
+        expect(dataTable).not.toBeNull();
+        expect(issueAt.innerText).toEqual('2018-12-20T12:07:31.276+0000');
+        expect(expiresAt.innerText).toEqual('2019-05-31T23:00:00.000+0000');
+    });
+
+    it('should display status details', async() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const dataTable =  fixture.nativeElement.querySelector('.adf-datatable');
+        const readOnly =  fixture.nativeElement.querySelector('[data-automation-id="text_false"]');
+        const isAuditEnabled =  fixture.nativeElement.querySelector('[data-automation-id="text_true"]');
+        expect(dataTable).not.toBeNull();
+        expect(readOnly.innerText).toEqual('false');
+        expect(isAuditEnabled.innerText).toEqual('true');
+    });
+
+    it('should display module details', async() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const dataTable =  fixture.nativeElement.querySelector('.adf-datatable');
+        const moduleTitle =  fixture.nativeElement.querySelector('[data-automation-id="text_ABC Repo"]');
+        const moduleTitleTwo =  fixture.nativeElement.querySelector('[data-automation-id="text_AOFS Module"]');
+        expect(dataTable).not.toBeNull();
+        expect(moduleTitle.innerText).toEqual('ABC Repo');
+        expect(moduleTitleTwo.innerText).toEqual('AOFS Module');
+    });
+});

lib/core/about/about.mock.ts

@@ -0,0 +1,120 @@
+/*!
+ * @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.
+ */
+
+export const mockDependencies = {
+    '@alfresco/mock-core': '3.7.0',
+    '@alfresco/mock-services': '2.0.0',
+    '@angular/mock-core': '8.0.0',
+    '@angular/mock-services': '8.0.0'
+};
+
+export const mockPlugins = <any> [
+    {
+        $name: 'plugin1',
+        $version: '1.0.0',
+        $vendor: 'mockVender-1',
+        $license: 'MockLicense-2.0',
+        $runtime: '2.7.0',
+        $description: 'example plugin'
+    },
+    {
+        $name: 'plugin2',
+        $version: '1.0.0',
+        $vendor: 'mockVender-2',
+        $license: 'MockLicense-3.0',
+        $runtime: '2.7.0',
+        $description: 'example plugin 2'
+    }
+];
+
+export const aboutGithubDetails = {
+    url: 'https://github.com/componany/repository/commits/',
+    defualrUrl: 'https://github.com/Alfresco/alfresco-ng2-components/commits/',
+    version: '0.0.7',
+    ecmHost: 'https://mock.ecmhost.com',
+    bpmHost: 'https://mock.bpmhost.com',
+    appName: 'mock-application-name'
+};
+
+export const aboutAPSMockDetails = {
+    revisionVersion: '0',
+    edition: 'APS',
+    type: 'bpmSuite',
+    majorVersion: '1',
+    minorVersion: '10'
+ };
+
+export const mockModules = {
+       edition: 'Enterprise',
+       version: {
+          major: '6',
+          minor: '2',
+          patch: '0',
+          hotfix: '0',
+          schema: 13001,
+          label: 'ra498a911-b5',
+          display: '6.2.0.0'
+       },
+       license: {
+          issuedAt: '2018-12-20T12:07:31.276+0000',
+          expiresAt: '2019-05-31T23:00:00.000+0000',
+          remainingDays: 100,
+          holder: 'CompanyQA',
+          mode: 'ENTERPRISE',
+          entitlements: {
+             isClusterEnabled: true,
+             isCryptodocEnabled: true
+          }
+       },
+       status: {
+          isReadOnly: false,
+          isAuditEnabled: true,
+          isQuickShareEnabled: true,
+          isThumbnailGenerationEnabled: true
+       },
+       modules: [
+          {
+             id: 'mock-id',
+             title: 'ABC Repo',
+             description: 'ABC Repository Extension',
+             version: '3.2.0',
+             installState: 'UNKNOWN',
+             versionMin: '6.1',
+             versionMax: '999'
+          },
+          {
+             id: 'aos-module-id',
+             title: 'AOFS Module',
+             description: 'Allows applications that can talk to a SharePoint server to talk to your Alfresco installation',
+             version: '1.3.0',
+             installDate: '2019-02-07T12:26:13.271+0000',
+             installState: 'INSTALLED',
+             versionMin: '6.0',
+             versionMax: '999'
+          },
+          {
+             id: 'mock-saml-repo',
+             title: 'SAML Repository Module',
+             description: 'The Repository piece of the Alfresco SAML Module',
+             version: '1.1.1',
+             installDate: '2019-02-07T12:26:12.565+0000',
+             installState: 'INSTALLED',
+             versionMin: '6.0',
+             versionMax: '6.99'
+          }
+       ]
+};

lib/testing/src/lib/core/pages/about.page.ts

@@ -0,0 +1,131 @@
+/*!
+ * @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 { element, by, protractor, browser, ElementFinder } from 'protractor';
+import { BrowserVisibility } from '../utils/browser-visibility';
+import { BrowserActions } from '../utils/browser-actions';
+
+export class AboutPage {
+
+    checkBox: ElementFinder = element(by.cssContainingText('.mat-checkbox-label', 'Show menu button'));
+    headerColor: ElementFinder = element(by.css('option[value="primary"]'));
+    titleInput: ElementFinder = element(by.css('input[name="title"]'));
+    iconInput: ElementFinder = element(by.css('input[placeholder="URL path"]'));
+    hexColorInput: ElementFinder = element(by.css('input[placeholder="hex color code"]'));
+    logoHyperlinkInput: ElementFinder = element(by.css('input[placeholder="Redirect URL"]'));
+    logoTooltipInput: ElementFinder = element(by.css('input[placeholder="Tooltip text"]'));
+    positionStart: ElementFinder = element.all(by.css('mat-radio-button[value="start"]')).first();
+    positionEnd: ElementFinder = element.all(by.css('mat-radio-button[value="end"]')).first();
+    sideBarPositionRight: ElementFinder = element(by.css('mat-sidenav.mat-drawer.mat-sidenav.mat-drawer-end'));
+    sideBarPositionLeft: ElementFinder = element(by.css('mat-sidenav.mat-drawer.mat-sidenav'));
+
+    async checkShowMenuCheckBoxIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.checkBox);
+    }
+
+    async checkChooseHeaderColourIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.headerColor);
+    }
+
+    async checkChangeTitleIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.titleInput);
+    }
+
+    async checkChangeUrlPathIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.iconInput);
+    }
+
+    async clickShowMenuButton(): Promise<void> {
+        const checkBox = element.all(by.css('mat-checkbox')).first();
+        await BrowserActions.click(checkBox);
+    }
+
+    async changeHeaderColor(color): Promise<void> {
+        const headerColor = element(by.css('option[value="' + color + '"]'));
+        await BrowserActions.click(headerColor);
+    }
+
+    async checkAppTitle(name): Promise<void> {
+        const title = element(by.cssContainingText('.adf-app-title', name));
+        await BrowserVisibility.waitUntilElementIsVisible(title);
+    }
+
+    async addTitle(title): Promise<void> {
+        await BrowserActions.click(this.titleInput);
+        await BrowserActions.clearSendKeys(this.titleInput, title);
+        await this.titleInput.sendKeys(protractor.Key.ENTER);
+    }
+
+    async checkIconIsDisplayed(url): Promise<void> {
+        const icon = element(by.css('img[src="' + url + '"]'));
+        await BrowserVisibility.waitUntilElementIsVisible(icon);
+    }
+
+    async addIcon(url): Promise<void> {
+        await BrowserActions.click(this.iconInput);
+        await BrowserActions.clearSendKeys(this.iconInput, url);
+        await this.iconInput.sendKeys(protractor.Key.ENTER);
+    }
+
+    async checkHexColorInputIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.hexColorInput);
+    }
+
+    async checkLogoHyperlinkInputIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.logoHyperlinkInput);
+    }
+
+    async checkLogoTooltipInputIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.logoTooltipInput);
+    }
+
+    async addHexCodeColor(hexCode): Promise<void> {
+        await BrowserActions.click(this.hexColorInput);
+        await BrowserActions.clearSendKeys(this.hexColorInput, hexCode);
+        await this.hexColorInput.sendKeys(protractor.Key.ENTER);
+    }
+
+    async addLogoHyperlink(hyperlink): Promise<void> {
+        await BrowserActions.click(this.logoHyperlinkInput);
+        await BrowserActions.clearSendKeys(this.logoHyperlinkInput, hyperlink);
+        await this.logoHyperlinkInput.sendKeys(protractor.Key.ENTER);
+    }
+
+    async addLogoTooltip(tooltip): Promise<void> {
+        await BrowserActions.click(this.logoTooltipInput);
+        await BrowserActions.clearSendKeys(this.logoTooltipInput, tooltip);
+        await this.logoTooltipInput.sendKeys(protractor.Key.ENTER);
+    }
+
+    async sideBarPositionStart(): Promise<void> {
+        await BrowserActions.click(this.positionStart);
+    }
+
+    async sideBarPositionEnd(): Promise<void> {
+        await browser.executeScript('arguments[0].scrollIntoView()', this.positionEnd);
+        await BrowserActions.click(this.positionEnd);
+    }
+
+    async checkSidebarPositionStart(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.sideBarPositionLeft);
+    }
+
+    async checkSidebarPositionEnd(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.sideBarPositionRight);
+    }
+
+}