Add e2e tests

Author: ueler

external-scripts/text-appender-util.js

@@ -0,0 +1,7 @@
+function TextAppenderUtil(elementId) {
+  this.elementID = elementId;
+}
+
+TextAppenderUtil.prototype.appendText = function(textToAppend) {
+  document.getElementById(this.elementID).innerText += textToAppend;
+};

package-lock.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~8.2.8",
     "@angular/platform-browser-dynamic": "~8.2.8",
     "@angular/router": "~8.2.8",
+    "lodash": "^4.17.15",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"
@@ -29,9 +30,10 @@
     "@angular/cli": "~8.3.6",
     "@angular/compiler-cli": "~8.2.8",
     "@angular/language-service": "~8.2.8",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/lodash": "^4.14.149",
+    "@types/node": "~8.9.4",
     "codelyzer": "^5.0.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",

package.json

@@ -1,5 +1,6 @@
 import {AppPage} from './app.po';
 import {browser, ExpectedConditions, logging} from 'protractor';
+import { uniq } from 'lodash';
 
 describe('example app', () => {
   let page: AppPage;
@@ -8,21 +9,87 @@ describe('example app', () => {
     page = new AppPage();
   });
 
-  it('should eventually change text', () => {
+  it('should eventually change text (one click)', () => {
     page.navigateTo();
 
-    expect(page.getTextBox().getText()).toEqual('A new text should appear here...');
+    expect(page.getChangerTextBox().getText()).toEqual('A new text should appear here...');
 
-    page.clickButton();
+    page.clickTextChangerButton();
 
     browser.wait(
       ExpectedConditions.textToBePresentInElement(
-        page.getTextBox(),
+        page.getChangerTextBox(),
         'A new text (set by text changer util which was lazy loaded)'),
       10000);
   });
 
+  it('should eventually append text twice (two immediate clicks)', () => {
+    page.navigateTo();
+
+    expect(page.getAppenderTextBox().getText()).toEqual('Text should be appended here...');
+
+    page.clickTextAppenderButton();
+    page.clickTextAppenderButton();
+
+    browser.wait(
+      ExpectedConditions.textToBePresentInElement(
+        page.getAppenderTextBox(),
+        'Text should be appended here...appended textappended text'),
+      10000);
+  });
+
+  it('should eventually append text twice (two clicks with wait between)', () => {
+    page.navigateTo();
+
+    expect(page.getAppenderTextBox().getText()).toEqual('Text should be appended here...');
+
+    page.clickTextAppenderButton();
+
+    browser.wait(
+      ExpectedConditions.textToBePresentInElement(
+        page.getAppenderTextBox(),
+        'Text should be appended here...appended text'),
+      10000);
+
+    page.clickTextAppenderButton();
+
+    browser.wait(
+      ExpectedConditions.textToBePresentInElement(
+        page.getAppenderTextBox(),
+        'Text should be appended here...appended textappended text'),
+      10000);
+  });
+
+  it('should eventually change text and eventually append text', () => {
+    page.navigateTo();
+
+    expect(page.getAppenderTextBox().getText()).toEqual('Text should be appended here...');
+
+    page.clickTextAppenderButton();
+    page.clickTextChangerButton();
+
+    browser.wait(
+      ExpectedConditions.textToBePresentInElement(
+        page.getChangerTextBox(),
+        'A new text (set by text changer util which was lazy loaded)'),
+      10000);
+
+    browser.wait(
+      ExpectedConditions.textToBePresentInElement(
+        page.getAppenderTextBox(),
+        'Text should be appended here...appended text'),
+      10000);
+  });
+
   afterEach(async () => {
+    // Check that there are no duplicate script tags
+    const allScriptTags = page.getAllScriptTags();
+
+    const allScriptSources = await allScriptTags.getAttribute('src');
+    const uniqueScriptSources = uniq(allScriptSources);
+
+    expect(allScriptSources.length).toBe(uniqueScriptSources.length);
+
     // Assert that there are no errors emitted from the browser
     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
     expect(logs).not.toContain(jasmine.objectContaining({

projects/ng-lazyload-script-example/e2e/src/app.e2e-spec.ts

@@ -1,15 +1,27 @@
-import { browser, by, element, WebElementPromise } from 'protractor';
+import {browser, by, element} from 'protractor';
 
 export class AppPage {
   navigateTo() {
     return browser.get(browser.baseUrl) as Promise<any>;
   }
 
-  getTextBox() {
-    return element(by.id('text-box'));
+  getChangerTextBox() {
+    return element(by.id('text-box-text-changer'));
   }
 
-  clickButton() {
-    return element(by.id('button')).click();
+  getAppenderTextBox() {
+    return element(by.id('text-box-text-appender'));
+  }
+
+  clickTextChangerButton() {
+    return element(by.id('textChangerButton')).click();
+  }
+
+  clickTextAppenderButton() {
+    return element(by.id('textAppenderButton')).click();
+  }
+
+  getAllScriptTags() {
+    return element.all(by.tagName('script'));
   }
 }

projects/ng-lazyload-script-example/e2e/src/app.po.ts

@@ -3,19 +3,34 @@ <h1>
 </h1>
 
 <h2>
-  Text box
+  Lazy loaded text changer script
 </h2>
-<p id="text-box">
+<p>
+  As soon as this button is clicked, an external script is loaded on the fly and the loaded
+  library is used to change the text of the green text box.
+</p>
+
+<p id="text-box-text-changer" class="text-box green">
   A new text should appear here...
 </p>
 
+<button type="button" id="textChangerButton" (click)="loadTextChangerAndChangeText()">
+  Load script and change text
+</button>
+
 <h2>
-  Lazy load script button
+  Lazy loaded text appender script
 </h2>
 <p>
   As soon as this button is clicked, an external script is loaded on the fly and the loaded
-  library is used to change the text of the text box.
+  library is used to append text to the blue text box.
 </p>
-<button type="button" id="button" (click)="loadScript()">
-  Load script and change text
+
+<p id="text-box-text-appender" class="text-box blue">
+  Text should be appended here...
+</p>
+
+
+<button type="button" id="textAppenderButton" (click)="loadTextAppenderAndChangeText()">
+  Load script and append text
 </button>

projects/ng-lazyload-script-example/src/app/app.component.html

@@ -1,4 +1,12 @@
-#text-box {
-  border: 1px solid black;
+.text-box {
+  border: 2px solid black;
   padding: 5px;
 }
+
+.green {
+  border-color: green;
+}
+
+.blue {
+  border-color: blue;
+}

projects/ng-lazyload-script-example/src/app/app.component.scss

@@ -14,12 +14,20 @@ export class AppComponent implements OnInit {
   ngOnInit() {
   }
 
-  loadScript() {
+  loadTextChangerAndChangeText() {
     // Load the external script on the fly
     this.ngLazyScriptService.loadScript('http://ng-lazy-script.uapps.ch/text-changer-util.js').subscribe(() => {
-      const textChangerUtil = new TextChangerUtil('text-box');
+      const textChangerUtil = new TextChangerUtil('text-box-text-changer');
       textChangerUtil.changeText('A new text (set by text changer util which was lazy loaded)');
     });
   }
+
+  loadTextAppenderAndChangeText() {
+    // Load the external script on the fly
+    this.ngLazyScriptService.loadScript('http://ng-lazy-script.uapps.ch/text-appender-util.js').subscribe(() => {
+      const textChangerUtil = new TextAppenderUtil('text-box-text-appender');
+      textChangerUtil.appendText('appended text');
+    });
+  }
 }
 

projects/ng-lazyload-script-example/src/app/app.component.ts

@@ -0,0 +1,5 @@
+declare class TextAppenderUtil {
+  constructor(elementId: string);
+
+  appendText(newText: string);
+}