Adds some e2e tests

e2e/app.e2e-spec.ts

 import { FrontendPage } from './app.po';
 
-describe('frontend App', () => {
+describe('Home: Basics', () => {
   let page: FrontendPage;
 
   beforeEach(() => {
     page = new FrontendPage();
   });
 
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!!');
+  afterEach(() => {
+    page.clearLocalStorage();
+    page.clearSessionStorage();
+  });
+
+  it('should display the arsnova.click slogan', () => {
+    page.navigateToBaseUrl();
+    expect(page.getArsnovaClickSlogan()).toEqual('a r s n o v a . c l i c k');
+  });
+
+  describe('Home: Create Quiz', () => {
+
+    beforeEach(() => {
+      page = new FrontendPage();
+    });
+
+    afterEach(() => {
+      page.clearLocalStorage();
+      page.clearSessionStorage();
+    });
+
+    it('should be able to create a new demo quiz and be redirected to the quiz lobby', () => {
+      page.navigateToBaseUrl();
+      page.fillInDemoQuiz();
+      expect(page.getUrl()).toEqual(`${page.getHost()}/quiz/flow/lobby`);
+    });
+
+    it('should be able to create a new abcd quiz and be redirected to the quiz lobby', () => {
+      page.navigateToBaseUrl();
+      page.fillInAbcdQuiz();
+      expect(page.getUrl()).toEqual(`${page.getHost()}/quiz/flow/lobby`);
+    });
+
+    it('should be able to create a new quiz and be redirected to the quiz manager', () => {
+      page.navigateToBaseUrl();
+      page.fillInDefaultQuiz();
+      expect(page.getUrl()).toEqual(`${page.getHost()}/quiz/manager/overview`);
+    });
   });
 });

e2e/app.po.ts

-import { browser, by, element } from 'protractor';
+import { browser, by, element, ElementFinder } from 'protractor';
 import { promise } from 'selenium-webdriver';
 
 export class FrontendPage {
-  public navigateTo(): promise.Promise<any> {
+  public navigateToBaseUrl(): promise.Promise<any> {
     return browser.get('/');
   }
 
-  public getParagraphText(): promise.Promise<string> {
+  public getUrl(): promise.Promise<string> {
+    return browser.getCurrentUrl();
+  }
+
+  public getHost(): string {
+    return 'http://localhost:4201';
+  }
+
+  public getArsnovaClickSlogan(): promise.Promise<string> {
     return element(by.css('app-root h1')).getText();
   }
+
+  public fillInDemoQuiz(): promise.Promise<any[]> {
+    return promise.all([
+      this.getQuiznameInputElement().sendKeys('Demo Quiz'), this.getPasswordInputElement().sendKeys('abc'), this.getAddDemoQuizButton().click(),
+    ]);
+  }
+
+  public fillInAbcdQuiz(): promise.Promise<any[]> {
+    return promise.all([
+      this.getQuiznameInputElement().sendKeys('ABCD'), this.getPasswordInputElement().sendKeys('abc'), this.getAddAbcdQuizButton().click(),
+    ]);
+  }
+
+  public fillInDefaultQuiz(): promise.Promise<any[]> {
+    return promise.all([
+      this.getQuiznameInputElement().sendKeys('testquiz'), this.getPasswordInputElement().sendKeys('abc'), this.getAddSessionButton().click(),
+    ]);
+  }
+
+  public getAvailableQuizzesDialogCloseButton(): ElementFinder {
+    return element(by.css('.close.pointer'));
+  }
+
+  public clearLocalStorage(): void {
+    browser.executeScript('window.localStorage.clear();');
+  }
+
+  public clearSessionStorage(): void {
+    browser.executeScript('window.sessionStorage.clear();');
+  }
+
+  private getQuiznameInputElement(): ElementFinder {
+    return element(by.css('#hashtag-input-field'));
+  }
+
+  private getPasswordInputElement(): ElementFinder {
+    return element(by.css('#server-password-input-field'));
+  }
+
+  private getAddSessionButton(): ElementFinder {
+    return element(by.css('#addSession'));
+  }
+
+  private getAddDemoQuizButton(): ElementFinder {
+    return element(by.css('#runDemoQuizSession'));
+  }
+
+  private getAddAbcdQuizButton(): ElementFinder {
+    return element(by.css('#runABCDQuizSession'));
+  }
 }

package.json

@@ -22,8 +22,7 @@
     "test:DEV": "ng test --browsers=Chrome --karma-config=src/karma.conf.dev.js --source-map=false",
     "test:DEV:HEADLESS": "ng test --browsers=ChromeHeadless --karma-config=src/karma.conf.dev.js --source-map=false",
     "lint": "ng lint",
-    "pree2e": "webdriver-manager update --standalone false --gecko false",
-    "e2e": "ng e2e --no-webdriver-update",
+    "e2e": "ng e2e --port 4201",
     "purify": "node purifycss.js",
     "compress": "gzip dist/browser/** -r",
     "http-startup": "http-server dist/browser/ -p 4711 --gzip",

protractor.conf.js

 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter } = require('jasmine-spec-reporter');
+const {SpecReporter} = require('jasmine-spec-reporter');
 
 exports.config = {
   allScriptsTimeout: 11000,
@@ -11,8 +11,9 @@ exports.config = {
   capabilities: {
     'browserName': 'chrome',
     chromeOptions: {
-      args: [ "--headless", "--disable-gpu", "--window-size=800x600", '--no-sandbox' ]
-    }
+      binary: process.env.CHROME_BIN,
+      args: ["--disable-gpu", "--window-size=800x600", '--no-sandbox']
+    },
   },
   directConnect: false,
   baseUrl: 'http://localhost:49153/',
@@ -20,14 +21,15 @@ exports.config = {
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,
-    print: function() {}
+    print: function () {
+    }
   },
-  beforeLaunch: function() {
+  beforeLaunch: function () {
     require('ts-node').register({
       project: 'e2e/tsconfig.e2e.json'
     });
   },
   onPrepare() {
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
   }
 };

src/app/root/home/home.component.html

@@ -3,12 +3,12 @@
   <div class="col-12 text-center my-5 my-sm-5"
        id="arsnova-click-description"
        *ngIf="!isShowingQuiznameDatalist">
-    <div class="text-center header-label text-bold">
+    <h1 class="text-center header-label text-bold my-0">
       <span class="color-changing-ars logo-header-chars">a r s </span>
       <span class="color-changing-nova logo-header-chars">n o v a </span>
       <span class="color-changing-dot logo-header-dot">. </span>
       <span class="color-changing-click logo-header-chars logo-header-margin-for-dot">c l i c k</span>
-    </div>
+    </h1>
   </div>
   <div class="col-md-10 col-lg-8 mx-auto"
        [class.mt-sm-5]="!isShowingQuiznameDatalist">