Enhance example and add e2e test for example

Author: ueler

external-scripts/example-script.js

@@ -0,0 +1,7 @@
+function TextChangerUtil(elementId) {
+  this.elementID = elementId;
+}
+
+TextChangerUtil.prototype.changeText = function(newText) {
+  document.getElementById(this.elementID).innerText = newText;
+};

external-scripts/text-changer-util.js

@@ -1,16 +1,25 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
+import {AppPage} from './app.po';
+import {browser, ExpectedConditions, logging} from 'protractor';
 
-describe('workspace-project App', () => {
+describe('example app', () => {
   let page: AppPage;
 
   beforeEach(() => {
     page = new AppPage();
   });
 
-  it('should display welcome message', () => {
+  it('should eventually change text', () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('ng-lazyload-script-example app is running!');
+
+    expect(page.getTextBox().getText()).toEqual('A new text should appear here...');
+
+    page.clickButton();
+
+    browser.wait(
+      ExpectedConditions.textToBePresentInElement(
+        page.getTextBox(),
+        'A new text (set by text changer util which was lazy loaded)'),
+      10000);
   });
 
   afterEach(async () => {

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

@@ -1,11 +1,15 @@
-import { browser, by, element } from 'protractor';
+import { browser, by, element, WebElementPromise } from 'protractor';
 
 export class AppPage {
   navigateTo() {
     return browser.get(browser.baseUrl) as Promise<any>;
   }
 
-  getTitleText() {
-    return element(by.css('app-root .content span')).getText() as Promise<string>;
+  getTextBox() {
+    return element(by.id('text-box'));
+  }
+
+  clickButton() {
+    return element(by.id('button')).click();
   }
 }

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

@@ -2,6 +2,20 @@ <h1>
   NgLazyScript Example Application
 </h1>
 
-<div id="red-box">
-  This box should eventually get a red background.
-</div>
+<h2>
+  Text box
+</h2>
+<p id="text-box">
+  A new text should appear here...
+</p>
+
+<h2>
+  Lazy load script button
+</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.
+</p>
+<button type="button" id="button" (click)="loadScript()">
+  Load script and change text
+</button>

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

@@ -0,0 +1,4 @@
+#text-box {
+  border: 1px solid black;
+  padding: 5px;
+}

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

@@ -15,17 +15,4 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   });
-
-  it(`should have as title 'ng-lazyload-script-example'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('ng-lazyload-script-example');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('ng-lazyload-script-example app is running!');
-  });
 });

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

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

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

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