[ADF-4298] Add e2e tests for info drawer (#4506)

* [ADF-4298] Add e2e tests for info drawer

* Update info-drawer.component.e2e.ts

* Update info-drawer.component.e2e.ts

demo-shell/src/app/components/file-view/file-view.component.html

@@ -105,7 +105,7 @@
     <ng-template let-node="node" #sidebarLeftTemplate>
         <adf-info-drawer [title]="'Viewer Options'">
 
-            <adf-info-drawer-tab [label]="">
+            <adf-info-drawer-tab [label]="'Settings'">
                 <p class="toggle">
                     <mat-slide-toggle
                         id="adf-switch-custoname"
@@ -248,6 +248,16 @@
                     </mat-slide-toggle>
                 </p>
 
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-show-tab-with-icon"
+                        [color]="'primary'"
+                        (change)="toggleShowInfoDrawerTabIcon()"
+                        [checked]="showInfoDrawerTabWithIcon">
+                        Show info drawer tab con
+                    </mat-slide-toggle>
+                </p>
+
                 <p class="toggle">
                     <button mat-raised-button id="adf-switch-showrightsidebar" (click)="toggleShowRightSidebar()" color="primary">
                       Toggle Right Sidebar
@@ -262,6 +272,13 @@
 
             </adf-info-drawer-tab>
 
+            <adf-info-drawer-tab  
+                *ngIf="showInfoDrawerTabWithIcon"
+                [label]="'Settings'"
+                [icon]="'comment'"
+                data-automation-id="adf-settings-tab">
+            </adf-info-drawer-tab>
+
         </adf-info-drawer>
     </ng-template>
 

demo-shell/src/app/components/file-view/file-view.component.ts

@@ -53,6 +53,7 @@ export class FileViewComponent implements OnInit {
     showRightSidebar = false;
     customToolbar = false;
     isCommentEnabled = false;
+    showInfoDrawerTabWithIcon = false;
 
     constructor(private router: Router,
                 private route: ActivatedRoute,
@@ -145,6 +146,10 @@ export class FileViewComponent implements OnInit {
         this.allowLeftSidebar = !this.allowLeftSidebar;
     }
 
+    toggleShowInfoDrawerTabIcon() {
+        this.showInfoDrawerTabWithIcon = !this.showInfoDrawerTabWithIcon;
+    }
+
     toggleCustomName() {
         this.customName = !this.customName;
 

e2e/core/viewer/info-drawer.component.e2e.ts

@@ -0,0 +1,103 @@
+/*!
+ * @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 TestConfig = require('../../test.config');
+
+import { LoginPage } from '../../pages/adf/loginPage';
+import { ViewerPage } from '../../pages/adf/viewerPage';
+import { NavigationBarPage } from '../../pages/adf/navigationBarPage';
+import { ContentServicesPage } from '../../pages/adf/contentServicesPage';
+
+import CONSTANTS = require('../../util/constants');
+import resources = require('../../util/resources');
+import { StringUtil } from '@alfresco/adf-testing';
+
+import { FileModel } from '../../models/ACS/fileModel';
+import { AcsUserModel } from '../../models/ACS/acsUserModel';
+
+import { AlfrescoApiCompatibility as AlfrescoApi } from '@alfresco/js-api';
+import { UploadActions } from '../../actions/ACS/upload.actions';
+
+describe('Info Drawer', () => {
+
+    let viewerPage = new ViewerPage();
+    let navigationBarPage = new NavigationBarPage();
+    let loginPage = new LoginPage();
+    let contentServicesPage = new ContentServicesPage();
+    let uploadActions = new UploadActions();
+    let site;
+    let acsUser = new AcsUserModel();
+    let pngFileUploaded;
+
+    let pngFileInfo = new FileModel({
+        'name': resources.Files.ADF_DOCUMENTS.PNG.file_name,
+        'location': resources.Files.ADF_DOCUMENTS.PNG.file_location
+    });
+
+    beforeAll(async (done) => {
+
+        this.alfrescoJsApi = new AlfrescoApi({
+            provider: 'ECM',
+            hostEcm: TestConfig.adf.url
+        });
+
+        await this.alfrescoJsApi.login(TestConfig.adf.adminEmail, TestConfig.adf.adminPassword);
+        await this.alfrescoJsApi.core.peopleApi.addPerson(acsUser);
+
+        site = await this.alfrescoJsApi.core.sitesApi.createSite({
+            title: StringUtil.generateRandomString(8),
+            visibility: 'PUBLIC'
+        });
+
+        await this.alfrescoJsApi.core.sitesApi.addSiteMember(site.entry.id, {
+            id: acsUser.id,
+            role: CONSTANTS.CS_USER_ROLES.MANAGER
+        });
+
+        await this.alfrescoJsApi.login(acsUser.id, acsUser.password);
+
+        pngFileUploaded = await uploadActions.uploadFile(this.alfrescoJsApi, pngFileInfo.location, pngFileInfo.name, site.entry.guid);
+        done();
+    });
+
+    it('[C277251] Should display only the icon when the icon property is defined', () => {
+        loginPage.loginToContentServicesUsingUserModel(acsUser);
+
+        navigationBarPage.goToSite(site);
+        contentServicesPage.checkAcsContainer();
+
+        viewerPage.viewFile(pngFileUploaded.entry.name);
+        viewerPage.clickLeftSidebarButton();
+        viewerPage.enableShowTabWithIcon();
+        viewerPage.checkTabHasIcon(1);
+        expect(viewerPage.getTabLabelById(1)).not.toBe('COMMENT');
+        expect(viewerPage.getTabIconById(1)).toBe('comment');
+    });
+
+    it('[C277252] Should display the label when the icon property is not defined', () => {
+        loginPage.loginToContentServicesUsingUserModel(acsUser);
+
+        navigationBarPage.goToSite(site);
+        contentServicesPage.checkAcsContainer();
+
+        viewerPage.viewFile(pngFileUploaded.entry.name);
+        viewerPage.clickLeftSidebarButton();
+        viewerPage.enableShowTabWithIcon();
+        viewerPage.checkTabHasNoIcon(0);
+        expect(viewerPage.getTabLabelById(0)).toBe('SETTINGS');
+    });
+});

e2e/pages/adf/viewerPage.ts

@@ -64,6 +64,7 @@ export class ViewerPage {
     lastButton = element.all(by.css('#adf-viewer-toolbar mat-toolbar > button[data-automation-id*="adf-toolbar-"]')).last();
     datatableHeader = element(by.css('div.adf-datatable-header'));
     goBackSwitch = element(by.id('adf-switch-goback'));
+    tabLabel = element(by.css('div[class="mat-tab-label-content"]'));
 
     openWithSwitch = element(by.id('adf-switch-openwith'));
     openWith = element(by.id('adf-viewer-openwith'));
@@ -97,6 +98,8 @@ export class ViewerPage {
     codeViewer = element(by.id('adf-monaco-file-editor'));
     moveRightChevron = element(by.css('.mat-tab-header-pagination-after .mat-tab-header-pagination-chevron'));
 
+    showTabWithIconSwitch = element(by.id('adf-show-tab-with-icon'));
+
     checkCodeViewerIsDisplayed() {
         return BrowserVisibility.waitUntilElementIsVisible(this.codeViewer);
     }
@@ -502,6 +505,14 @@ export class ViewerPage {
         this.formControllersPage.enableToggle(this.openWithSwitch);
     }
 
+    disableShowTabWithIcon() {
+        this.formControllersPage.disableToggle(this.showTabWithIconSwitch);
+    }
+
+    enableShowTabWithIcon() {
+        this.formControllersPage.enableToggle(this.showTabWithIconSwitch);
+    }
+
     checkDownloadButtonDisplayed() {
         BrowserVisibility.waitUntilElementIsVisible(this.downloadButton);
         return this;
@@ -625,4 +636,28 @@ export class ViewerPage {
         BrowserVisibility.waitUntilElementIsVisible(this.moveRightChevron);
         return this.moveRightChevron.click();
     }
+
+    checkTabHasIcon(index: number) {
+        const tab = element(by.css(`div[id="mat-tab-label-1-${index}"] div[class="mat-tab-label-content"] mat-icon`));
+        Util.waitUntilElementIsVisible(tab);
+        return this;
+    }
+
+    checkTabHasNoIcon(index: number) {
+        const tab = element(by.css(`div[id="mat-tab-label-1-${index}"] div[class="mat-tab-label-content"] mat-icon`));
+        Util.waitUntilElementIsNotVisible(tab);
+        return this;
+    }
+
+    getTabLabelById(index: number) {
+        const tab = element(by.css(`div[id="mat-tab-label-1-${index}"] div[class="mat-tab-label-content"]`));
+        Util.waitUntilElementIsVisible(tab);
+        return tab.getText();
+    }
+
+    getTabIconById(index: number) {
+        const tab = element(by.css(`div[id="mat-tab-label-1-${index}"] div[class="mat-tab-label-content"] mat-icon`));
+        Util.waitUntilElementIsVisible(tab);
+        return tab.getText();
+    }
 }