[ACA-1259] automate remaining tests for sidebar (#977)

* automate remaining tests for sidebar

* formatting

e2e/components/header/header.ts

@@ -23,23 +23,29 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ElementFinder, by, browser } from 'protractor';
+import { ElementFinder, by, browser, until } from 'protractor';
 import { Component } from '../component';
 import { UserInfo } from './user-info';
 import { Menu } from '../menu/menu';
 import { Toolbar } from './../toolbar/toolbar';
 import { SearchInput } from '../search/search-input';
+import { BROWSER_WAIT_TIMEOUT } from '../../configs';
 
 export class Header extends Component {
   private static selectors = {
     root: 'app-header',
     logoLink: by.css('.app-menu__title'),
     userInfo: by.css('aca-current-user'),
-    moreActions: by.id('app.header.more')
+    moreActions: by.id('app.header.more'),
+
+    sidenavToggle: `[id='adf-sidebar-toggle-start']`,
+    expandedSidenav: by.css(`[data-automation-id='expanded']`),
+    collapsedSidenav: by.css(`[data-automation-id='collapsed']`)
   };
 
   logoLink: ElementFinder = this.component.element(Header.selectors.logoLink);
   moreActions: ElementFinder = browser.element(Header.selectors.moreActions);
+  sidenavToggle: ElementFinder = this.component.element(by.css(Header.selectors.sidenavToggle));
 
   userInfo: UserInfo = new UserInfo(this.component);
   menu: Menu = new Menu();
@@ -58,5 +64,30 @@ export class Header extends Component {
   async isSignOutDisplayed() {
     return await this.userInfo.menu.isMenuItemPresent('Sign out');
   }
+
+  async clickSidenavToggle() {
+    await this.sidenavToggle.click();
+  }
+
+  async isExpandedSidenav() {
+    return await browser.isElementPresent(Header.selectors.expandedSidenav);
+  }
+
+  async expandSideNav() {
+    const expanded = await this.isExpandedSidenav();
+    if ( !expanded ) {
+      await this.clickSidenavToggle();
+      await browser.wait(until.elementLocated(Header.selectors.expandedSidenav), BROWSER_WAIT_TIMEOUT, '--- timeout waiting for expanded sidenav' );
+    }
+  }
+
+  async collapseSideNav() {
+    const expanded = await this.isExpandedSidenav();
+    if ( expanded ) {
+      await this.clickSidenavToggle();
+      await browser.wait(until.elementLocated(Header.selectors.collapsedSidenav), BROWSER_WAIT_TIMEOUT, '--- timeout waiting for collapsed sidenav')
+    }
+  }
+
 }
 

e2e/components/sidenav/sidenav.ts

@@ -23,8 +23,8 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ElementFinder, ElementArrayFinder, by, element } from 'protractor';
+import { ElementFinder, ElementArrayFinder, by, element, browser } from 'protractor';
-import { SIDEBAR_LABELS } from '../../configs';
+import { SIDEBAR_LABELS, BROWSER_WAIT_TIMEOUT } from '../../configs';
 import { Menu } from '../menu/menu';
 import { Component } from '../component';
 import { Utils } from '../../utilities/utils';
@@ -37,28 +37,29 @@ export class Sidenav extends Component {
     expansion_panel: ".mat-expansion-panel-header",
     expansion_panel_content: ".mat-expansion-panel-body",
     active: 'mat-accent',
-    activeLink: '.mat-accent',
+    activeClass: '.item--active',
     activeChild: 'item--active',
+
     newButton: '[data-automation-id="create-button"]',
 
-    personalFiles: `[id='app.navbar.personalFiles']`,
+    personalFiles: `[data-automation-id='app.navbar.personalFiles']`,
-    fileLibraries: `[id='app.navbar.libraries.menu']`,
+    fileLibraries: `[data-automation-id='app.navbar.libraries.menu']`,
-    myLibraries: `[id='app.navbar.libraries.files']`,
+    myLibraries: `[data-automation-id='app.navbar.libraries.files']`,
-    favoriteLibraries: `[id='app.navbar.libraries.favorite']`,
+    favoriteLibraries: `[data-automation-id='app.navbar.libraries.favorite']`,
-    shared: `[id='app.navbar.shared']`,
+    shared: `[data-automation-id='app.navbar.shared']`,
-    recentFiles: `[id='app.navbar.recentFiles']`,
+    recentFiles: `[data-automation-id='app.navbar.recentFiles']`,
-    favorites: `[id='app.navbar.favorites']`,
+    favorites: `[data-automation-id='app.navbar.favorites']`,
-    trash: `[id='app.navbar.trashcan']`
+    trash: `[data-automation-id='app.navbar.trashcan']`
   };
 
   links: ElementArrayFinder = this.component.all(by.css(Sidenav.selectors.link));
-  activeLink: ElementFinder = this.component.element(by.css(Sidenav.selectors.activeLink));
+  activeLink: ElementFinder = this.component.element(by.css(Sidenav.selectors.activeClass));
   newButton: ElementArrayFinder = this.component.all(by.css(Sidenav.selectors.newButton));
 
   personalFiles: ElementFinder = this.component.element(by.css(Sidenav.selectors.personalFiles));
   fileLibraries: ElementFinder = this.component.element(by.css(Sidenav.selectors.fileLibraries));
-  myLibraries: ElementFinder = this.component.element(by.css(Sidenav.selectors.myLibraries));
+  myLibraries: ElementFinder = browser.element(by.css(Sidenav.selectors.myLibraries));
-  favoriteLibraries: ElementFinder = this.component.element(by.css(Sidenav.selectors.favoriteLibraries));
+  favoriteLibraries: ElementFinder = browser.element(by.css(Sidenav.selectors.favoriteLibraries));
   shared: ElementFinder = this.component.element(by.css(Sidenav.selectors.shared));
   recentFiles: ElementFinder = this.component.element(by.css(Sidenav.selectors.recentFiles));
   favorites: ElementFinder = this.component.element(by.css(Sidenav.selectors.favorites));
@@ -105,8 +106,7 @@ export class Sidenav extends Component {
   }
 
   async isActive(name: string) {
-    const className = await this.getLinkLabel(name).getAttribute('class');
+    return await this.getLinkLabel(name).isElementPresent(by.css(Sidenav.selectors.activeClass));
-    return className.includes(Sidenav.selectors.active);
   }
 
   async childIsActive(name: string) {
@@ -137,7 +137,15 @@ export class Sidenav extends Component {
   }
 
   async getLinkTooltip(name: string) {
-    return await this.getLink(name).getAttribute('title');
+    const link = this.getLinkLabel(name);
+
+    const condition = () => link.getAttribute('title').then(value => value && value.length > 0);
+
+    await browser.actions().mouseMove(link).perform();
+
+    await browser.wait(condition, BROWSER_WAIT_TIMEOUT);
+
+    return await link.getAttribute('title');
   }
 
   async clickLink(name: string) {

e2e/suites/navigation/sidebar.test.ts

@@ -24,20 +24,28 @@
  */
 
 import { browser } from 'protractor';
-
 import { APP_ROUTES, SIDEBAR_LABELS } from '../../configs';
-import { LoginPage, BrowsingPage } from '../../pages/pages';
+import { LoginPage, BrowsingPage, SearchResultsPage } from '../../pages/pages';
+import { Utils } from '../../utilities/utils';
 
 describe('Sidebar', () => {
   const loginPage = new LoginPage();
   const page = new BrowsingPage();
-  const { sidenav } = page;
+  const { sidenav, header } = page;
+  const searchResultsPage = new SearchResultsPage();
+  const { searchInput } = searchResultsPage.header;
 
   beforeAll(async (done) => {
     await loginPage.loginWithAdmin();
     done();
   });
 
+  beforeEach(async (done) => {
+    await Utils.pressEscape();
+    await header.expandSideNav();
+    done();
+  });
+
   it('has "Personal Files" as default - [C217149]', async () => {
     expect(await browser.getCurrentUrl()).toContain(APP_ROUTES.PERSONAL_FILES);
     expect(await sidenav.isActive(SIDEBAR_LABELS.PERSONAL_FILES)).toBe(true, 'Default active link');
@@ -51,7 +59,7 @@ describe('Sidebar', () => {
   });
 
   it('My Libraries is automatically selected on expanding File Libraries - [C289900]', async () => {
-    await page.clickFileLibraries();
+    await sidenav.expandFileLibraries();
     expect(await browser.getCurrentUrl()).toContain(APP_ROUTES.MY_LIBRARIES);
     expect(await sidenav.isActive(SIDEBAR_LABELS.FILE_LIBRARIES)).toBe(false, 'File Libraries link is active');
     expect(await sidenav.childIsActive(SIDEBAR_LABELS.MY_LIBRARIES)).toBe(true, 'My Libraries link not active');
@@ -71,12 +79,6 @@ describe('Sidebar', () => {
     expect(await sidenav.childIsActive(SIDEBAR_LABELS.MY_LIBRARIES)).toBe(true, 'My Libraries link not active');
   });
 
-  it('navigates to "Personal Files" - [C280409]', async () => {
-    await page.clickPersonalFiles();
-    expect(await browser.getCurrentUrl()).toContain(APP_ROUTES.PERSONAL_FILES);
-    expect(await sidenav.isActive(SIDEBAR_LABELS.PERSONAL_FILES)).toBe(true, 'Personal Files link not active');
-  });
-
   it('navigates to "Shared Files" - [C213110]', async () => {
     await page.clickSharedFiles();
     expect(await browser.getCurrentUrl()).toContain(APP_ROUTES.SHARED_FILES);
@@ -101,51 +103,135 @@ describe('Sidebar', () => {
     expect(await sidenav.isActive(SIDEBAR_LABELS.TRASH)).toBe(true, 'Trash link not active');
   });
 
-  // TODO: incomplete test
+  it('navigates to "Personal Files" - [C280409]', async () => {
+    await page.clickPersonalFiles();
+    expect(await browser.getCurrentUrl()).toContain(APP_ROUTES.PERSONAL_FILES);
+    expect(await sidenav.isActive(SIDEBAR_LABELS.PERSONAL_FILES)).toBe(true, 'Personal Files link not active');
+  });
+
   it('Personal Files tooltip - [C217151]', async () => {
     await page.clickPersonalFiles();
     expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.PERSONAL_FILES)).toContain('View your Personal Files');
+
+    await header.collapseSideNav();
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.PERSONAL_FILES)).toContain('View your Personal Files');
   });
 
-  // TODO: incomplete test
-  it('File Libraries tooltip - [C217152]', async () => {
-    await page.clickFileLibraries();
-    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.FILE_LIBRARIES)).toContain('File Libraries');
-  });
-
-  // TODO: incomplete test
-  it('My Libraries tooltip - [C289916]', async () => {
-    await page.goToMyLibraries();
-    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.MY_LIBRARIES)).toContain('Access my libraries');
-  });
-
-  // TODO: incomplete test
-  it('Favorite Libraries tooltip - [C289917]', async () => {
-    await page.goToFavoriteLibraries();
-    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.FAVORITE_LIBRARIES)).toContain('Access my favorite libraries');
-  });
-
-  // TODO: incomplete test
   it('Shared Files tooltip - [C213111]', async () => {
     await page.clickSharedFiles();
     expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.SHARED_FILES)).toContain('View files that have been shared');
+
+    await header.collapseSideNav();
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.SHARED_FILES)).toContain('View files that have been shared');
   });
 
-  // TODO: incomplete test
   it('Recent Files tooltip - [C213167]', async () => {
     await page.clickRecentFiles();
     expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.RECENT_FILES)).toContain('View files you recently edited');
+
+    await header.collapseSideNav();
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.RECENT_FILES)).toContain('View files you recently edited');
   });
 
-  // TODO: incomplete test
   it('Favorites tooltip - [C217153]', async () => {
     await page.clickFavorites();
     expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.FAVORITES)).toContain('View your favorite files and folders');
+
+    await header.collapseSideNav();
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.FAVORITES)).toContain('View your favorite files and folders');
   });
 
-  // TODO: incomplete test
   it('Trash tooltip - [C217154]', async () => {
     await page.clickTrash();
     expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.TRASH)).toContain('View deleted files in the trash');
+
+    await header.collapseSideNav();
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.TRASH)).toContain('View deleted files in the trash');
+  });
+
+  it('File Libraries tooltip - [C217152]', async () => {
+    await page.clickFileLibraries();
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.FILE_LIBRARIES)).toContain('File Libraries');
+
+    await header.collapseSideNav();
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.FILE_LIBRARIES)).toContain('File Libraries');
+  });
+
+  it('My Libraries tooltip - [C289916]', async () => {
+    await page.goToMyLibraries();
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.MY_LIBRARIES)).toContain('Access my libraries');
+
+    await header.collapseSideNav();
+    await sidenav.clickLink(SIDEBAR_LABELS.FILE_LIBRARIES);
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.MY_LIBRARIES)).toContain('Access my libraries');
+  });
+
+  it('Favorite Libraries tooltip - [C289917]', async () => {
+    await page.goToFavoriteLibraries();
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.FAVORITE_LIBRARIES)).toContain('Access my favorite libraries');
+
+    await header.collapseSideNav();
+    await sidenav.clickLink(SIDEBAR_LABELS.FILE_LIBRARIES);
+    expect(await sidenav.getLinkTooltip(SIDEBAR_LABELS.FAVORITE_LIBRARIES)).toContain('Access my favorite libraries');
+  });
+
+  it('default state is expanded - [C269095]', async () => {
+    expect(await header.isExpandedSidenav()).toBe(true, 'Sidebar not expanded');
+  });
+
+  it('sidebar toggle - [C269096]', async () => {
+    await header.collapseSideNav();
+    expect(await header.isExpandedSidenav()).toBe(false, 'Sidebar not collapsed');
+
+    await header.expandSideNav();
+    expect(await header.isExpandedSidenav()).toBe(true, 'Sidebar not expanded');
+  });
+
+  it('sidebar state is preserved on page refresh - [C269100]', async () => {
+    expect(await header.isExpandedSidenav()).toBe(true, 'Sidebar not expanded');
+    await page.refresh();
+    expect(await header.isExpandedSidenav()).toBe(true, 'Sidebar not expanded');
+
+    await header.collapseSideNav();
+    expect(await header.isExpandedSidenav()).toBe(false, 'Sidebar not collapsed');
+    await page.refresh();
+    expect(await header.isExpandedSidenav()).toBe(false, 'Sidebar not collapsed');
+  });
+
+  it('sidebar state is preserved after logout / login - [C269102]', async () => {
+    await header.collapseSideNav();
+    await page.signOut();
+    await loginPage.loginWithAdmin();
+
+    expect(await header.isExpandedSidenav()).toBe(false, 'Sidebar not collapsed');
+  });
+
+  it('sidebar is collapsed automatically when Search Results opens - [C277223]', async () => {
+    await searchInput.clickSearchButton();
+    /* cspell:disable-next-line */
+    await searchInput.searchForTextAndCloseSearchOptions('qwertyuiop');
+    await searchResultsPage.waitForResults();
+
+    expect(await header.isExpandedSidenav()).toBe(false, 'Sidebar not collapsed');
+  });
+
+  it('sidenav returns to the default state when navigating away from the Search Results page - [C277224]', async () => {
+    await searchInput.clickSearchButton();
+    /* cspell:disable-next-line */
+    await searchInput.searchForTextAndCloseSearchOptions('qwertyuiop');
+    await searchResultsPage.waitForResults();
+    await page.clickFavorites();
+
+    expect(await header.isExpandedSidenav()).toBe(true, 'Sidebar not expanded');
+  });
+
+  it('sidenav can be expanded when search results page is displayed - [C277230]', async () => {
+    await searchInput.clickSearchButton();
+    /* cspell:disable-next-line */
+    await searchInput.searchForTextAndCloseSearchOptions('qwertyuiop');
+    await searchResultsPage.waitForResults();
+    await header.expandSideNav();
+
+    expect(await header.isExpandedSidenav()).toBe(true, 'Sidebar not expanded');
   });
 });

src/app/components/layout/app-layout/app-layout.component.html

@@ -22,13 +22,18 @@
       <ng-template let-isMenuMinimized="isMenuMinimized">
         <app-sidenav
           [showLabel]="!isMenuMinimized()"
+          [attr.data-automation-id]="
+            isMenuMinimized() ? 'collapsed' : 'expanded'
+          "
           (swipeleft)="hideMenu($event)"
         ></app-sidenav>
       </ng-template>
     </adf-sidenav-layout-navigation>
 
     <adf-sidenav-layout-content>
-      <ng-template> <router-outlet></router-outlet> </ng-template>
+      <ng-template>
+        <router-outlet></router-outlet>
+      </ng-template>
     </adf-sidenav-layout-content>
   </adf-sidenav-layout>
 

src/app/components/sidenav/sidenav.component.html

@@ -12,7 +12,11 @@
       >
         <ng-container *ngIf="showLabel">
           <ng-container *ngIf="!item.children">
-            <div class="menu__item" [attr.title]="item.description | translate">
+            <div
+              class="menu__item"
+              [attr.title]="item.description | translate"
+              [attr.data-automation-id]="item.id"
+            >
               <button
                 [id]="item.id"
                 mat-icon-button
@@ -57,7 +61,10 @@
                 expandedHeight="48px"
                 collapsedHeight="48px"
               >
-                <mat-panel-title [attr.title]="item.description | translate">
+                <mat-panel-title
+                  [attr.title]="item.description | translate"
+                  [attr.data-automation-id]="item.id"
+                >
                   <adf-icon
                     [color]="
                       routerLink.isActive && !expansionPanel.expanded
@@ -85,6 +92,7 @@
                 routerLinkActive
                 #childRouteActive="routerLinkActive"
                 [attr.title]="child.description | translate"
+                [attr.data-automation-id]="child.id"
               >
                 <ng-container *ngIf="child.icon">
                   <button
@@ -147,6 +155,7 @@
                 [color]="routerLink.isActive ? 'accent' : 'primary'"
                 [attr.aria-label]="item.title | translate"
                 [attr.title]="item.description | translate"
+                [attr.data-automation-id]="item.id"
               >
                 <adf-icon
                   [color]="routerLink.isActive ? 'accent' : 'primary'"
@@ -157,7 +166,11 @@
           </ng-container>
 
           <ng-container *ngIf="item.children && item.children.length">
-            <div class="menu__item" [attr.title]="item.description | translate">
+            <div
+              class="menu__item"
+              [attr.title]="item.description | translate"
+              [attr.data-automation-id]="item.id"
+            >
               <button
                 [id]="item.id"
                 color="accent"
@@ -185,6 +198,7 @@
                 [routerLink]="child.url"
                 [attr.title]="child.description | translate"
                 [id]="child.id"
+                [attr.data-automation-id]="child.id"
               >
                 <span
                   class="mat-button"