From 8cc121f55cc1a8c431a2366470b44b7dee4d49be Mon Sep 17 00:00:00 2001 From: Can Kattwinkel Date: Mon, 4 Mar 2019 13:43:08 +0100 Subject: [PATCH] test(e2e): adds test case for position:absolute containers --- e2e/src/posa.e2e-spec.ts | 27 +++++++++++++++++++ e2e/src/posa.po.ts | 25 +++++++++++++++++ src/app/app-routing.module.ts | 4 ++- src/app/app.module.ts | 4 ++- .../posa-container.component.html | 19 +++++++++++++ .../posa-container.component.scss | 18 +++++++++++++ .../posa-container.component.spec.ts | 25 +++++++++++++++++ .../posa-container.component.ts | 16 +++++++++++ 8 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 e2e/src/posa.e2e-spec.ts create mode 100644 e2e/src/posa.po.ts create mode 100644 src/app/test-cases/posa-container/posa-container.component.html create mode 100644 src/app/test-cases/posa-container/posa-container.component.scss create mode 100644 src/app/test-cases/posa-container/posa-container.component.spec.ts create mode 100644 src/app/test-cases/posa-container/posa-container.component.ts diff --git a/e2e/src/posa.e2e-spec.ts b/e2e/src/posa.e2e-spec.ts new file mode 100644 index 0000000..949f5d5 --- /dev/null +++ b/e2e/src/posa.e2e-spec.ts @@ -0,0 +1,27 @@ +import {browser} from 'protractor'; +import {PosaPage} from './posa.po'; + +describe('with position:absolute container', () => { + let page: PosaPage; + + beforeEach(() => { + page = new PosaPage(); + page.navigateToDev(); + }); + + + it('should recognize sticky ', async () => { + page.navigateToDev(); + await browser.executeScript('window.scrollTo(0,501);'); + const hasStickyClass = await hasClass(page.getStickyElement(), 'is-sticky'); + expect(hasStickyClass).toBe(true); + }); + + +}); + +// via https://stackoverflow.com/questions/20268128/how-to-test-if-an-element-has-class-using-protractor +async function hasClass(element, cls) { + const classes = await element.getAttribute('class'); + return classes.split(' ').indexOf(cls) !== -1; +} diff --git a/e2e/src/posa.po.ts b/e2e/src/posa.po.ts new file mode 100644 index 0000000..de3c10c --- /dev/null +++ b/e2e/src/posa.po.ts @@ -0,0 +1,25 @@ +import {browser, by, element} from 'protractor'; + +export class PosaPage { + + + constructor() { + const width = 1200; + const height = 900; + browser.driver.manage().window().setSize(width, height); + } + + navigateToDev() { + return browser.get('/posa'); + } + + + getStickyElement() { + return element(by.css('.some-thing-sticky')); + } + + getEnableButton() { + return element(by.css('#enable-btn')); + } +} + diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 23ca98b..e6b0f2b 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -3,10 +3,12 @@ import {RouterModule, Routes} from '@angular/router'; import {HomeComponent} from './home/home.component'; import {DevComponent} from './dev/dev.component'; +import {PosaContainerComponent} from './test-cases/posa-container/posa-container.component'; const routes: Routes = [ {path: '', component: HomeComponent}, - {path: 'dev', component: DevComponent} + {path: 'dev', component: DevComponent}, + {path: 'posa', component: PosaContainerComponent}, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4d9400b..9faf68b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,13 +7,15 @@ import {DevComponent} from './dev/dev.component'; import {HomeComponent} from './home/home.component'; import {AppRoutingModule} from './app-routing.module'; import {AngularStickyThingsModule} from '../../projects/angular-sticky-things/src/lib/angular-sticky-things.module'; +import {PosaContainerComponent} from './test-cases/posa-container/posa-container.component'; @NgModule({ declarations: [ AppComponent, InfoComponent, DevComponent, - HomeComponent + HomeComponent, + PosaContainerComponent ], imports: [ BrowserModule, diff --git a/src/app/test-cases/posa-container/posa-container.component.html b/src/app/test-cases/posa-container/posa-container.component.html new file mode 100644 index 0000000..3814168 --- /dev/null +++ b/src/app/test-cases/posa-container/posa-container.component.html @@ -0,0 +1,19 @@ +

+ I'm special, since the containing div scrolls and not the body. +

+ + +
+
+
+
+ Scroll by! +
+
+
+ + +





























+





























+





























+





























diff --git a/src/app/test-cases/posa-container/posa-container.component.scss b/src/app/test-cases/posa-container/posa-container.component.scss new file mode 100644 index 0000000..3980e11 --- /dev/null +++ b/src/app/test-cases/posa-container/posa-container.component.scss @@ -0,0 +1,18 @@ +:host { + display: block; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + height: 100%; + overflow: auto; + background-color: red; +} + + +.some-thing-sticky { + background-color: #fff; + padding: 15px; + color: #000; +} diff --git a/src/app/test-cases/posa-container/posa-container.component.spec.ts b/src/app/test-cases/posa-container/posa-container.component.spec.ts new file mode 100644 index 0000000..f17e48a --- /dev/null +++ b/src/app/test-cases/posa-container/posa-container.component.spec.ts @@ -0,0 +1,25 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {PosaContainerComponent} from './posa-container.component'; + +describe('PosaContainerComponent', () => { + let component: PosaContainerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [PosaContainerComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PosaContainerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/test-cases/posa-container/posa-container.component.ts b/src/app/test-cases/posa-container/posa-container.component.ts new file mode 100644 index 0000000..1cbbb9f --- /dev/null +++ b/src/app/test-cases/posa-container/posa-container.component.ts @@ -0,0 +1,16 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'demo-posa-container', + templateUrl: './posa-container.component.html', + styleUrls: ['./posa-container.component.scss'] +}) +export class PosaContainerComponent implements OnInit { + + constructor() { + } + + ngOnInit() { + } + +}