import { browser , by , element , ElementFinder , Key , protractor } from 'protractor' ; const ANNOUNCER_WAIT_TIMEOUT = 200 ; export class DashboardPage { container = element ( by . id ( 'dashboardWidgetContainer' ) ) ; dashboard = element ( by . className ( 'customizable-dashboard' ) ) ; announcer = element ( by . className ( 'cdk-live-announcer-element' ) ) ; topFocusTarget = element ( by . id ( 'top-focus' ) ) ; bottomFocusTarget = element ( by . id ( 'bottom-focus' ) ) ; changeOptions = element ( by . id ( 'change-dashboard-options' ) ) ; layoutOutput = element ( by . id ( 'layout-output' ) ) ; async getPage ( ) { await browser . get ( '#/dashboard' ) ; } async getNumberOfWidgets ( ) { return await this . container . $ ( 'div.dashboard-container' ) . $$ ( 'ux-dashboard-widget' ) . count ( ) ; } async getWidget ( index ) { return await this . container . $ ( 'div.dashboard-container' ) . $$ ( 'ux-dashboard-widget' ) . get ( index ) ; } async getWidgetAttribute ( widget , attribute ) { return await widget . getAttribute ( attribute ) ; } async getLayoutOutput ( ) { return await this . layoutOutput . getAttribute ( 'innerText' ) ; } async enableGrabMode ( ) { const handle = await this . getGrabHandle ( ) ; await handle . click ( ) ; await handle . sendKeys ( Key . SPACE ) ; } async disableGrabMode ( ) { const handle = await this . getGrabHandle ( ) ; await handle . sendKeys ( Key . SPACE ) ; } async cancelGrabMode ( ) { const handle = await this . getGrabHandle ( ) ; await handle . sendKeys ( Key . ESCAPE ) ; } async moveWidget ( direction ) { switch ( direction ) { case Direction . Down : return await browser . actions ( ) . sendKeys ( Key . ARROW_DOWN ) . perform ( ) ; case Direction . Right : return await browser . actions ( ) . sendKeys ( Key . ARROW_RIGHT ) . perform ( ) ; case Direction . Up : return await browser . actions ( ) . sendKeys ( Key . ARROW_UP ) . perform ( ) ; case Direction . Left : return await browser . actions ( ) . sendKeys ( Key . ARROW_LEFT ) . perform ( ) ; } } async resizeWidget ( widgetIndex , directionKey ) { await browser . actions ( ) . sendKeys ( Key . TAB , ... Array ( widgetIndex + 1 ) . fill ( Key . TAB ) , Key . SPACE ) . perform ( ) ; await browser . actions ( ) . keyDown ( Key . CONTROL ) . sendKeys ( directionKey ) . perform ( ) ; await browser . actions ( ) . sendKeys ( Key . SPACE ) . perform ( ) ; } async getGrabHandle ( widgetId = 'analytics-1-widget' ) { return await this . container . $ ( `#${ widgetId } button.widget-grab-handle` ) ; } async getAnnouncerText ( ) { return this . announcer . getText ( ) ; } async checkAnnouncerText ( expected ) { return await browser . wait ( protractor . ExpectedConditions . textToBePresentInElement ( this . announcer , expected ) , ANNOUNCER_WAIT_TIMEOUT ) ; } async getWidgetLocationValue ( widget , soughtValue ) { const styleValue = await this . getWidgetAttribute ( widget , 'style' ) ; const pattern = '.*' + soughtValue + ':\\s*(\\d+)px;' ; const regexp = new RegExp ( pattern , 'i' ) ; const match = regexp . exec ( styleValue ) ; return Number ( match [ 1 ] ) ; } async hasFocus ( elem ) { return await elem . getId ( ) === await browser . driver . switchTo ( ) . activeElement ( ) . getId ( ) ; } async toggleWidget ( ) { await element ( by . id ( 'widget-1-checkbox' ) ) . click ( ) ; } async refreshLayout ( ) { return await element ( by . id ( 'refresh-layout-btn' ) ) . click ( ) ; } } export enum Direction { Up , Down , Left , Right }