test: (e2e) dynamic page layouts (SAP#4605)

* test(e2e): dynamic page e2e tests

* test(e2e): addres review comments

e2e/wdio/platform/fixtures/appData/dynamic-page-layout-contents.ts

@@ -0,0 +1 @@
+export const main_button_title = 'Click to open full screen';

e2e/wdio/platform/pages/dynamic-page-layout.po.ts

@@ -0,0 +1,34 @@
+import { BaseComponentPo } from './base-component.po';
+import { waitForElDisplayed } from '../../driver/wdio';
+
+export class DynamicPageLayoutPo extends BaseComponentPo {
+    private url = '/dynamic-page';
+    basicExampleButton = 'fdp-platform-dynamic-page-example button';
+    snapsExampleButton = 'fdp-platform-dynamic-page-snap-scroll-example button';
+    tabbesExampleButton = 'fdp-platform-dynamic-page-tabbed-example button';
+    responsiveExampleButton = 'fdp-platform-dynamic-page-responsive-padding-example button';
+    disableHeaderCollapseExampleButton = 'fdp-platform-dynamic-page-non-collapsible-example button';
+    flexibleColumnExampleButton = 'fdp-platform-dynamic-page-flexible-column-example button';
+
+    dynamicPage = 'fdp-dynamic-page';
+    dynamicPageCollapseIcon = '.fd-dynamic-page__collapse-button';
+    dynamicPageContentStart = 'fdp-dynamic-page-content br';
+    dynamicPageContentEnd = 'fdp-dynamic-page-content .footer-spacer';
+    dynamicPageTitle = '.fd-dynamic-page__title-container';
+    dynamicPageToolBar = '.fd-dynamic-page__toolbar';
+    dynamicPageTabs = '.fd-dynamic-page__tabs--overflow .fd-tabs__item';
+    dynamicPageTabsContent = 'fdp-dynamic-page-tabbed-content';
+    dynamicPageToolBarAccept = this.dynamicPageToolBar + ' .fd-button--positive';
+    dynamicPageToolBarReject = this.dynamicPageToolBar + ' .fd-button--negative';
+    dynamicPageCollapsibleHeader = this.dynamicPage + ' .fd-dynamic-page__collapsible-header-container [role="region"]';
+
+    columnSection = 'section';
+    openColumnButton = '.docs-fcl-example-section button';
+    columnSectionHeader = 'section header';
+    columnSectionExpandIcon = '.fd-flexible-column-layout__button';
+
+    open(): void {
+        super.open(this.url);
+        waitForElDisplayed(this.title);
+    }
+}

e2e/wdio/platform/tests/dynamic-page-layout.e2e-spec.ts

@@ -0,0 +1,218 @@
+import {
+    click,
+    doesItExist,
+    elementDisplayed,
+    getAttributeByName,
+    getCSSPropertyByName,
+    getText,
+    refreshPage,
+    scrollIntoView,
+    waitForClickable,
+    waitForElDisplayed,
+    waitForPresent
+} from '../../driver/wdio';
+import { DynamicPageLayoutPo } from '../pages/dynamic-page-layout.po';
+import { main_button_title } from '../fixtures/appData/dynamic-page-layout-contents';
+
+describe('Dynamic Page Layout test suite:', function() {
+    const dynamicPageLayoutPage = new DynamicPageLayoutPo();
+    const {
+        basicExampleButton,
+        dynamicPage,
+        dynamicPageCollapsibleHeader,
+        dynamicPageCollapseIcon,
+        dynamicPageTitle,
+        dynamicPageToolBarAccept,
+        dynamicPageToolBarReject,
+        snapsExampleButton,
+        tabbesExampleButton,
+        responsiveExampleButton,
+        flexibleColumnExampleButton,
+        dynamicPageTabs,
+        dynamicPageTabsContent,
+        disableHeaderCollapseExampleButton,
+        dynamicPageContentEnd,
+        dynamicPageContentStart,
+        openColumnButton,
+        columnSectionHeader,
+        columnSectionExpandIcon,
+        columnSection
+    } = dynamicPageLayoutPage;
+
+    beforeAll(() => {
+        dynamicPageLayoutPage.open();
+    }, 1);
+
+    afterEach(() => {
+        refreshPage();
+        waitForPresent(dynamicPageLayoutPage.title);
+    }, 1);
+
+    it('should check buttons titles', () => {
+        expect(getText(basicExampleButton)).toBe(main_button_title);
+        expect(getText(snapsExampleButton)).toBe(main_button_title);
+        expect(getText(tabbesExampleButton)).toBe(main_button_title);
+        expect(getText(responsiveExampleButton)).toBe(main_button_title);
+        expect(getText(flexibleColumnExampleButton)).toBe(main_button_title);
+    });
+
+    describe('Basic', function() {
+        it('should verify dynamic page header is collapsible by click on collapse icon', () => {
+            click(basicExampleButton);
+            waitForElDisplayed(dynamicPage);
+            waitForElDisplayed(dynamicPageCollapsibleHeader);
+            click(dynamicPageCollapseIcon);
+            expect(elementDisplayed(dynamicPageCollapsibleHeader)).toBe(false);
+        });
+
+        it('should verify dynamic page is collapsible by click on header', () => {
+            click(basicExampleButton);
+            waitForElDisplayed(dynamicPage);
+            waitForElDisplayed(dynamicPageCollapsibleHeader);
+            click(dynamicPageTitle);
+            expect(elementDisplayed(dynamicPageCollapsibleHeader)).toBe(false);
+        });
+
+        it('should verify dynamic page closed on Accept button click', () => {
+            click(basicExampleButton);
+            waitForElDisplayed(dynamicPage);
+            waitForElDisplayed(dynamicPageCollapsibleHeader);
+            click(dynamicPageToolBarAccept);
+            expect(doesItExist(dynamicPage)).toBe(false);
+        });
+
+        it('should verify dynamic page closed on Reject button click', () => {
+            click(basicExampleButton);
+            waitForElDisplayed(dynamicPage);
+            waitForElDisplayed(dynamicPageCollapsibleHeader);
+            click(dynamicPageToolBarReject);
+            expect(doesItExist(dynamicPage)).toBe(false);
+        });
+    });
+
+    // TODO: Needs to be implemented
+    xdescribe('Dynamic Page that snaps on scrolling', function() {
+        it('is snaps on scrolling', () => {
+            click(snapsExampleButton);
+            waitForElDisplayed(dynamicPage);
+            waitForElDisplayed(dynamicPageCollapsibleHeader);
+
+            expect(elementDisplayed(dynamicPageCollapsibleHeader)).toBe(false);
+            scrollIntoView(dynamicPageContentStart);
+            expect(elementDisplayed(dynamicPageCollapsibleHeader)).toBe(true);
+            waitForPresent(dynamicPageContentEnd);
+            scrollIntoView(dynamicPageContentEnd);
+            expect(elementDisplayed(dynamicPageCollapsibleHeader)).toBe(false);
+        });
+    });
+
+    describe('Tabbed', function() {
+        it('should verify dynamic page is collapsible by click on header', () => {
+            click(basicExampleButton);
+            waitForElDisplayed(dynamicPage);
+            waitForElDisplayed(dynamicPageCollapsibleHeader);
+            click(dynamicPageTitle);
+            expect(elementDisplayed(dynamicPageCollapsibleHeader)).toBe(false);
+        });
+
+        it('should verify dynamic page header is collapsible by click on collapse icon', () => {
+            click(tabbesExampleButton);
+            waitForElDisplayed(dynamicPage);
+            waitForElDisplayed(dynamicPageCollapsibleHeader);
+            click(dynamicPageCollapseIcon);
+            expect(elementDisplayed(dynamicPageCollapsibleHeader)).toBe(false);
+        });
+
+        it('should have tab 1 active by default', () => {
+            click(tabbesExampleButton);
+            waitForElDisplayed(dynamicPage);
+            waitForElDisplayed(dynamicPageTabs);
+            const firstTabSelected = getAttributeByName(dynamicPageTabs, 'aria-selected');
+            const secondTabSelected = getAttributeByName(dynamicPageTabs, 'aria-selected', 1);
+            expect(firstTabSelected).toBe('true');
+            expect(secondTabSelected).toBe('false');
+            expect(getText(dynamicPageTabsContent)).toContain('tab1');
+        });
+
+        it('should switch tab on tab click', () => {
+            click(tabbesExampleButton);
+            waitForElDisplayed(dynamicPage);
+            waitForElDisplayed(dynamicPageTabs);
+            click(dynamicPageTabs, 1);
+            const firstTabSelected = getAttributeByName(dynamicPageTabs, 'aria-selected');
+            const secondTabSelected = getAttributeByName(dynamicPageTabs, 'aria-selected', 1);
+
+            expect(firstTabSelected).toBe('false');
+            expect(secondTabSelected).toBe('true');
+            expect(getText(dynamicPageTabsContent)).toContain('tabs 2');
+        });
+    });
+
+    describe('Disabled header', function() {
+        it('should have no collapse icon present', () => {
+            click(disableHeaderCollapseExampleButton);
+            waitForElDisplayed(dynamicPage);
+
+            expect(doesItExist(dynamicPageCollapseIcon)).toBe(false);
+        });
+
+        it('should verify dynamic page is not collapsible by click on header', () => {
+            click(disableHeaderCollapseExampleButton);
+            waitForElDisplayed(dynamicPage);
+            waitForElDisplayed(dynamicPageCollapsibleHeader);
+            click(dynamicPageTitle);
+
+            expect(elementDisplayed(dynamicPageCollapsibleHeader)).toBe(true);
+        });
+
+    });
+
+    describe('Flexible Column Layout', function() {
+        it('should be able to open the column section', () => {
+            click(flexibleColumnExampleButton);
+            waitForElDisplayed(openColumnButton);
+            click(openColumnButton);
+            waitForElDisplayed(columnSectionHeader);
+        });
+
+        it('should verify dynamic page header is collapsible by click on collapse icon', () => {
+            click(flexibleColumnExampleButton);
+            waitForElDisplayed(openColumnButton);
+            click(openColumnButton);
+            waitForElDisplayed(columnSectionHeader);
+            click(dynamicPageCollapseIcon);
+            expect(elementDisplayed(dynamicPageCollapsibleHeader)).toBe(false);
+        });
+
+        it('should verify dynamic page is collapsible by click on header', () => {
+            click(flexibleColumnExampleButton);
+            waitForElDisplayed(openColumnButton);
+            click(openColumnButton);
+            waitForElDisplayed(columnSectionHeader);
+            waitForElDisplayed(dynamicPageTitle);
+            waitForClickable(dynamicPageTitle);
+            waitForElDisplayed(dynamicPageCollapsibleHeader);
+            click(dynamicPageTitle);
+            expect(elementDisplayed(dynamicPageCollapsibleHeader)).toBe(false);
+        });
+
+        it('should verify section is expand on expand icon clicks', () => {
+            click(flexibleColumnExampleButton);
+            waitForElDisplayed(openColumnButton);
+            click(openColumnButton);
+            waitForElDisplayed(columnSection);
+            const sectionWidthBefore = getCSSPropertyByName(columnSection, 'width');
+            waitForElDisplayed(columnSectionExpandIcon);
+            waitForClickable(columnSectionExpandIcon);
+            click(columnSectionExpandIcon);
+            const sectionWidthAfter = getCSSPropertyByName(columnSection, 'width');
+            expect(sectionWidthBefore > sectionWidthAfter).toBe(false);
+        });
+    });
+
+    describe('Orientation check:', function() {
+        it('should check RTL and LTR orientation', () => {
+            dynamicPageLayoutPage.checkRtlSwitch();
+        });
+    });
+});