Merge pull request #29 from xmpp-grid-broker/XGB-155-e2e-overview

[#XGB-155] e2e overview

.travis.yml

@@ -12,7 +12,6 @@ node_js:
   - "8"
 script:
   - bash build.bash
-  - npm run e2e
 
 before_deploy:
   - cp -a dist $RELEASE_NAME

build.bash

@@ -1,5 +1,7 @@
 #!/usr/bin/env bash
-set -exu
+set -e
+set -x
+set -u
 
 npm install
 npm run ng -- lint

docker-compose.e2e.yml

@@ -3,10 +3,10 @@
 version: '2.2'
 services:
   openfire:
-    image: xmpp-grid-broker/openfire
+    image: xmpp-grid-broker/openfire-e2e
     build:
-      context: ./stack/
-      dockerfile: Dockerfile
+      context: ./e2e/stack/
+      dockerfile: Dockerfile-openfire
     networks:
       - backend
   nginx:

docker-compose.openfire-admin.yml

@@ -2,4 +2,4 @@ version: '2.2'
 services:
   openfire:
     volumes:
-      - ./stack/openfire:/var/lib/openfire:rw
+      - ./stack/openfire:/var/lib/openfire:Z

e2e/page-elements/list.ts

@@ -0,0 +1,21 @@
+import {by, ElementArrayFinder} from 'protractor';
+
+export class List {
+  private get listElements(): ElementArrayFinder {
+    const listElement = this.parentElement.element(by.tagName('xgb-list'));
+    return listElement.all(by.tagName('xgb-list-item'));
+  }
+
+  async listContent(): Promise<string[]> {
+    const elements = await this.listElements;
+    return Promise.all(elements.map(listElement => listElement.getText()));
+  }
+
+  async length(): Promise<number> {
+    const list = await this.listElements;
+    return list.length;
+  }
+
+  constructor(readonly parentElement) {
+  }
+}

e2e/helpers.ts → e2e/page-elements/spinner.ts

@@ -1,17 +1,17 @@
-import {$, browser, element, protractor} from 'protractor';
+import {$, browser, protractor} from 'protractor';
 
-export class Helpers {
+export class Spinner {
   /**
    * Returns promise that resolves as soon as no `xgb-spinner`-tags are visible.
    */
-  static noSpinners(retryMs?: number = 20000): Promise<void> {
+  static waitOnNone(retryMs: number = 20000): Promise<void> {
     const EC = protractor.ExpectedConditions;
     return new Promise(resolve => {
       setTimeout(() => {
         const spinner = $('xgb-spinner');
         browser.wait(EC.not(EC.presenceOf(spinner)), retryMs)
           .then(() => resolve());
-      }, 5000); // wait a second to give the spinner time to initialise
+      }, 200); // wait a moment to give the spinner time to initialise
     });
   }
 }

e2e/page-elements/tab.ts

@@ -0,0 +1,19 @@
+import {UrlAddressableComponent} from './urlAddressableComponent';
+import {by, element, ElementFinder} from 'protractor';
+
+export abstract class Tab extends UrlAddressableComponent {
+
+  abstract get linkText(): string;
+
+  get tabElement(): ElementFinder {
+    return this.parentElement.element(by.tagName('xgb-tabs'));
+  }
+
+  get linkElement(): ElementFinder {
+    return this.tabElement.element(by.linkText(this.linkText));
+  }
+
+  protected constructor(public parentElement = element(by.tagName('body'))) {
+    super();
+  }
+}

e2e/page-elements/urlAddressableComponent.ts

@@ -0,0 +1,21 @@
+import {browser} from 'protractor';
+import {Spinner} from './spinner';
+
+export abstract class UrlAddressableComponent {
+
+  abstract get landingUrl();
+
+  get fullUrl() {
+    return browser.baseUrl + this.landingUrl;
+  }
+
+  /**
+   * Navigate to {@member fullUrl} and wait until
+   * the page loads and there are no waiting spinners.
+   */
+  async navigateTo() {
+    browser.waitForAngularEnabled(false);
+    await browser.get(this.landingUrl);
+    await Spinner.waitOnNone();
+  }
+}

e2e/page-objects/app.po.ts

@@ -1,11 +1,7 @@
-import { browser, by, element } from 'protractor';
+import {UrlAddressableComponent} from '../page-elements/urlAddressableComponent';
 
-export class AppPage {
-  navigateTo() {
-    return browser.get('/');
-  }
-
-  getParagraphText() {
-    return element(by.css('xgb-root h1')).getText();
+export class AppPage extends UrlAddressableComponent {
+  get landingUrl(): string {
+    return '/';
   }
 }

e2e/page-objects/create-collection.po.ts

@@ -0,0 +1,7 @@
+import {UrlAddressableComponent} from '../page-elements/urlAddressableComponent';
+
+export class CreateCollectionPage extends UrlAddressableComponent {
+  get landingUrl(): string {
+    return '/topics/new/collection';
+  }
+}

e2e/page-objects/create-topic.po.ts

@@ -0,0 +1,7 @@
+import {UrlAddressableComponent} from '../page-elements/urlAddressableComponent';
+
+export class CreateTopicPage extends UrlAddressableComponent {
+  get landingUrl(): string {
+    return '/topics/new/topic';
+  }
+}

e2e/page-objects/topics-overview.po.ts

@@ -1,9 +1,118 @@
-import {browser} from 'protractor';
+import {by, element, ElementFinder} from 'protractor';
+import {UrlAddressableComponent} from '../page-elements/urlAddressableComponent';
+import {Tab} from '../page-elements/tab';
+import {CreateTopicPage} from './create-topic.po';
+import {Spinner} from '../page-elements/spinner';
+import {CreateCollectionPage} from './create-collection.po';
+import {List} from '../page-elements/list';
 
-export class TopicsOverviewPage {
-  landingUrl = '/topics/root';
+type TopicsOverviewTab = TopicOverviewRootCollectionsTab | TopicOverviewAllTopicsTab | TopicOverviewAllCollectionsTab;
 
-  navigateTo() {
-    return browser.get(this.landingUrl);
+export class TopicOverviewRootCollectionsTab extends Tab {
+  get list(): List {
+    return new List(element(by.tagName('xgb-topics')));
   }
+
+  get landingUrl(): string {
+    return '/topics/root';
+  }
+
+  get linkText(): string {
+    return 'Root Collections';
+  }
+
+  constructor(parentElement?: ElementFinder) {
+    super(parentElement);
+  }
+
+}
+
+export class TopicOverviewAllTopicsTab extends Tab {
+  get list(): List {
+    return new List(element(by.tagName('xgb-topics')));
+  }
+
+  get landingUrl(): string {
+    return '/topics/all';
+  }
+
+  get linkText(): string {
+    return 'All Topics';
+  }
+
+  constructor(parentElement?: ElementFinder) {
+    super(parentElement);
+  }
+}
+
+export class TopicOverviewAllCollectionsTab extends Tab {
+  get list(): List {
+    return new List(element(by.tagName('xgb-topics')));
+  }
+
+  get landingUrl(): string {
+    return '/topics/collections';
+  }
+
+  get linkText(): string {
+    return 'All Collections';
+  }
+
+  constructor(parentElement?: ElementFinder) {
+    super(parentElement);
+  }
+}
+
+export class TopicsOverviewPage extends UrlAddressableComponent {
+  get landingUrl(): string {
+    return '/topics';
+  }
+
+  private get elementLocator(): ElementFinder {
+    return element(by.tagName('xgb-topic-overview'));
+  }
+
+  private _tab: TopicsOverviewTab = undefined;
+
+  get tab(): TopicsOverviewTab {
+    if (this._tab === undefined) {
+      // create default tab on first call, as the parent element might not be rendered earlier
+      this._tab = new TopicOverviewRootCollectionsTab(this.elementLocator);
+    }
+    return this._tab;
+  }
+
+  set tab(tab: TopicsOverviewTab) {
+    tab.parentElement = this.elementLocator;
+    this._tab = tab;
+  }
+
+  async navigateToTab(tab: TopicsOverviewTab): Promise<void> {
+    this.tab = tab;
+    await tab.linkElement.click();
+    return Spinner.waitOnNone();
+  }
+
+  async clickNewTopic(): Promise<CreateTopicPage> {
+    await this.newTopicButton.click();
+    await Spinner.waitOnNone();
+
+    return new CreateTopicPage();
+  }
+
+  async clickNewCollection(): Promise<CreateCollectionPage> {
+    await this.newCollectionButton.click();
+    await Spinner.waitOnNone();
+
+    return new CreateCollectionPage();
+  }
+
+  private get newTopicButton(): ElementFinder {
+    return element(by.cssContainingText('button', 'New Topic'));
+  }
+
+  private get newCollectionButton(): ElementFinder {
+    return element(by.cssContainingText('button', 'New Collection'));
+  }
+
 }

e2e/routes.e2e-spec.ts

@@ -1,20 +1,14 @@
 import {browser} from 'protractor';
-import {TopicsOverviewPage} from './page-objects/topics-overview.po';
-import {Helpers} from './helpers';
+import {TopicOverviewRootCollectionsTab} from './page-objects/topics-overview.po';
+import {AppPage} from './page-objects/app.po';
 
-browser.waitForAngularEnabled(false);
 
 describe('Routes', () => {
-  let topicsOverview: TopicsOverviewPage;
+  it('root should redirect to topics overview', async() => {
+    const appPage = new AppPage();
+    await appPage.navigateTo();
 
-  beforeEach(() => {
-    topicsOverview = new TopicsOverviewPage();
-  });
-
-  it('root should redirect to topics overview', async () => {
-    await browser.get('/');
-    await Helpers.noSpinners();
-
-    expect(browser.getCurrentUrl()).toEqual(browser.baseUrl + topicsOverview.landingUrl);
+    const destination = new TopicOverviewRootCollectionsTab();
+    expect(browser.getCurrentUrl()).toEqual(browser.baseUrl + destination.landingUrl);
   });
 });

e2e/stack/Dockerfile-openfire

@@ -0,0 +1,4 @@
+FROM gizmotronic/openfire:4.2.3
+
+ADD openfire /var/lib/openfire
+

e2e/stack/openfire/.oracle_jre_usage/9e360713136aba0a.timestamp

@@ -0,0 +1,2 @@
+/usr/lib/jvm/java-8-oracle/jre
+1525714705223

e2e/stack/openfire/VERSION

@@ -0,0 +1 @@
+4.2.3