[ADF-4298] Improve Info drawer e2e tests (#4532)

* [ADF-4298] Improve Info drawer e2e tests

* [ADF-4298] Add new tab with single icon and update e2e tests

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

@@ -250,11 +250,21 @@
 
                 <p class="toggle">
                     <mat-slide-toggle
-                        id="adf-show-tab-with-icon"
+                        id="adf-tab-with-icon"
                         [color]="'primary'"
-                        (change)="toggleShowInfoDrawerTabIcon()"
-                        [checked]="showInfoDrawerTabWithIcon">
-                        Show info drawer tab con
+                        (change)="toggleShowTabWithIcon()"
+                        [checked]="showTabWithIcon">
+                        Show tab with icon
+                    </mat-slide-toggle>
+                </p>
+
+                <p class="toggle">
+                    <mat-slide-toggle
+                        id="adf-icon-and-label-tab"
+                        [color]="'primary'"
+                        (change)="toggleShowTabWithIconAndLabel()"
+                        [checked]="showTabWithIconAndLabel">
+                        Show tab with icon and label
                     </mat-slide-toggle>
                 </p>
 
@@ -273,12 +283,18 @@
             </adf-info-drawer-tab>
 
             <adf-info-drawer-tab
-                *ngIf="showInfoDrawerTabWithIcon"
-                [label]="'Settings'"
-                [icon]="'comment'"
+                *ngIf="showTabWithIcon"
+                [label]=""
+                [icon]="'face'"
                 data-automation-id="adf-settings-tab">
             </adf-info-drawer-tab>
 
+            <adf-info-drawer-tab
+                *ngIf="showTabWithIconAndLabel"
+                [label]="'Comments'"
+                [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,7 +53,8 @@ export class FileViewComponent implements OnInit {
     showRightSidebar = false;
     customToolbar = false;
     isCommentEnabled = false;
-    showInfoDrawerTabWithIcon = false;
+    showTabWithIcon = false;
+    showTabWithIconAndLabel = false;
 
     constructor(private router: Router,
                 private route: ActivatedRoute,
@@ -146,8 +147,12 @@ export class FileViewComponent implements OnInit {
         this.allowLeftSidebar = !this.allowLeftSidebar;
     }
 
-    toggleShowInfoDrawerTabIcon() {
-        this.showInfoDrawerTabWithIcon = !this.showInfoDrawerTabWithIcon;
+    toggleShowTabWithIcon() {
+        this.showTabWithIcon = !this.showTabWithIcon;
+    }
+
+    toggleShowTabWithIconAndLabel() {
+        this.showTabWithIconAndLabel = !this.showTabWithIconAndLabel;
     }
 
     toggleCustomName() {

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

@@ -74,30 +74,36 @@ describe('Info Drawer', () => {
         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');
+    afterAll(async (done) => {
+        await this.alfrescoJsApi.login(acsUser.id, acsUser.password);
+        await uploadActions.deleteFilesOrFolder(this.alfrescoJsApi, pngFileUploaded.entry.id);
+        done();
     });
 
-    it('[C277252] Should display the label when the icon property is not defined', () => {
+    beforeEach(() => {
         loginPage.loginToContentServicesUsingUserModel(acsUser);
 
         navigationBarPage.goToSite(site);
         contentServicesPage.checkAcsContainer();
+    });
 
+    it('[C277251] Should display the icon when the icon property is defined', () => {
         viewerPage.viewFile(pngFileUploaded.entry.name);
         viewerPage.clickLeftSidebarButton();
         viewerPage.enableShowTabWithIcon();
+        viewerPage.enableShowTabWithIconAndLabel();
         viewerPage.checkTabHasNoIcon(0);
+        expect(viewerPage.getTabIconById(1)).toBe('face');
+        expect(viewerPage.getTabIconById(2)).toBe('comment');
+    });
+
+    it('[C277252] Should display the label when the label property is defined', () => {
+        viewerPage.viewFile(pngFileUploaded.entry.name);
+        viewerPage.clickLeftSidebarButton();
+        viewerPage.enableShowTabWithIcon();
+        viewerPage.enableShowTabWithIconAndLabel();
         expect(viewerPage.getTabLabelById(0)).toBe('SETTINGS');
+        viewerPage.checkTabHasNoLabel(1);
+        expect(viewerPage.getTabLabelById(2)).toBe('COMMENTS');
     });
 });

e2e/pages/adf/viewerPage.ts

@@ -98,7 +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'));
+    showTabWithIconSwitch = element(by.id('adf-tab-with-icon'));
+    showTabWithIconAndLabelSwitch = element(by.id('adf-icon-and-label-tab'));
 
     checkCodeViewerIsDisplayed() {
         return BrowserVisibility.waitUntilElementIsVisible(this.codeViewer);
@@ -513,6 +514,14 @@ export class ViewerPage {
         this.formControllersPage.enableToggle(this.showTabWithIconSwitch);
     }
 
+    disableShowTabWithIconAndLabel() {
+        this.formControllersPage.disableToggle(this.showTabWithIconAndLabelSwitch);
+    }
+
+    enableShowTabWithIconAndLabel() {
+        this.formControllersPage.enableToggle(this.showTabWithIconAndLabelSwitch);
+    }
+
     checkDownloadButtonDisplayed() {
         BrowserVisibility.waitUntilElementIsVisible(this.downloadButton);
         return this;
@@ -649,8 +658,14 @@ export class ViewerPage {
         return this;
     }
 
+    checkTabHasNoLabel(index: number) {
+        const tab = element(by.css(`div[id="mat-tab-label-1-${index}"] div[class="mat-tab-label-content"] span`));
+        BrowserVisibility.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"]`));
+        const tab = element(by.css(`div[id="mat-tab-label-1-${index}"] div[class="mat-tab-label-content"] span`));
         BrowserVisibility.waitUntilElementIsVisible(tab);
         return tab.getText();
     }

lib/core/datatable/components/datatable/datatable.component.scss

@@ -510,7 +510,7 @@
         }
 
         .adf-datatable-body {
-            margin-top: 56px;
+            margin-top: 57px;
         }
     }