diff --git a/e2e/components/header/header.ts b/e2e/components/header/header.ts index 38cc412f4..dbb8d70f0 100755 --- a/e2e/components/header/header.ts +++ b/e2e/components/header/header.ts @@ -23,23 +23,29 @@ * along with Alfresco. If not, see . */ -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') + } + } + } diff --git a/e2e/components/sidenav/sidenav.ts b/e2e/components/sidenav/sidenav.ts index c363c47fb..f8b2a9d8c 100755 --- a/e2e/components/sidenav/sidenav.ts +++ b/e2e/components/sidenav/sidenav.ts @@ -23,8 +23,8 @@ * along with Alfresco. If not, see . */ -import { ElementFinder, ElementArrayFinder, by, element } from 'protractor'; -import { SIDEBAR_LABELS } from '../../configs'; +import { ElementFinder, ElementArrayFinder, by, element, browser } from 'protractor'; +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']`, - fileLibraries: `[id='app.navbar.libraries.menu']`, - myLibraries: `[id='app.navbar.libraries.files']`, - favoriteLibraries: `[id='app.navbar.libraries.favorite']`, - shared: `[id='app.navbar.shared']`, - recentFiles: `[id='app.navbar.recentFiles']`, - favorites: `[id='app.navbar.favorites']`, - trash: `[id='app.navbar.trashcan']` + personalFiles: `[data-automation-id='app.navbar.personalFiles']`, + fileLibraries: `[data-automation-id='app.navbar.libraries.menu']`, + myLibraries: `[data-automation-id='app.navbar.libraries.files']`, + favoriteLibraries: `[data-automation-id='app.navbar.libraries.favorite']`, + shared: `[data-automation-id='app.navbar.shared']`, + recentFiles: `[data-automation-id='app.navbar.recentFiles']`, + favorites: `[data-automation-id='app.navbar.favorites']`, + 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)); - favoriteLibraries: ElementFinder = this.component.element(by.css(Sidenav.selectors.favoriteLibraries)); + myLibraries: ElementFinder = browser.element(by.css(Sidenav.selectors.myLibraries)); + 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 className.includes(Sidenav.selectors.active); + return await this.getLinkLabel(name).isElementPresent(by.css(Sidenav.selectors.activeClass)); } 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) { diff --git a/e2e/suites/navigation/sidebar.test.ts b/e2e/suites/navigation/sidebar.test.ts index bbc585fa6..65384a45c 100755 --- a/e2e/suites/navigation/sidebar.test.ts +++ b/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'); }); }); diff --git a/src/app/components/layout/app-layout/app-layout.component.html b/src/app/components/layout/app-layout/app-layout.component.html index 2988e1ecb..6348de370 100644 --- a/src/app/components/layout/app-layout/app-layout.component.html +++ b/src/app/components/layout/app-layout/app-layout.component.html @@ -22,13 +22,18 @@ - + + + diff --git a/src/app/components/sidenav/sidenav.component.html b/src/app/components/sidenav/sidenav.component.html index 04cd19d84..a86acb877 100644 --- a/src/app/components/sidenav/sidenav.component.html +++ b/src/app/components/sidenav/sidenav.component.html @@ -12,7 +12,11 @@ > -