feat(testing): End-to-end testing configuration for the Service Worker, including a basic sanity test which verifies that the worker installs correctly.

Author: alxhub

service-worker/worker/.vscode/settings.json

@@ -1,4 +1,6 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.insertSpaces": true,
+  "editor.tabSize": 2
 }

service-worker/worker/gulpfile.ts

@@ -18,7 +18,7 @@ var commonCompilerConfig = JSON.parse(fs.readFileSync('./tsconfig.cjs.json')).co
 commonCompilerConfig.typescript = require('typescript');
 systemCompilerConfig.typescript = require('typescript');
 
-gulp.task('default', ['build']);
+gulp.task('default', ['prepublish']);
 
 gulp.task('clean', (done) => {
   rimraf('./dist', done);
@@ -69,6 +69,76 @@ gulp.task('build:generator', () => gulp
   .pipe(ts(commonCompilerConfig))
   .pipe(gulp.dest('dist/src/generator')));
 
+gulp.task('build:test_harness', done => runSequence(
+  'clean',
+  [
+    '!build:test_harness:client',
+    '!build:test_harness:tests'
+  ],
+  done));
+  
+gulp.task('!build:test_harness:client', done => runSequence(
+  [
+    '!bundle',
+    '!build:test_harness:client:compile',
+    'copy:test_harness:client:local',
+    'copy:test_harness:client:modules'
+  ],
+  'copy:test_harness:client:worker',
+  done
+));
+
+gulp.task('!build:test_harness:client:compile', () => gulp
+  .src([
+    'typings/globals/**/*.d.ts',
+    'src/testing/harness/client/**/*.ts'
+  ])
+  .pipe(ts(systemCompilerConfig))
+  .pipe(gulp.dest('dist/harness/client')));
+
+gulp.task('copy:test_harness:client:local', () => gulp
+  .src([
+    'src/testing/harness/client/index.html'
+  ], {base: 'src/testing/harness/client'})
+  .pipe(gulp.dest('dist/harness/client')));
+
+gulp.task('copy:test_harness:client:modules', () => gulp
+  .src([
+    'node_modules/@angular/**/*.js',
+    'node_modules/systemjs/dist/system.js',
+    'node_modules/reflect-metadata/Reflect.js',
+    'node_modules/zone.js/dist/zone.js',
+    'node_modules/rxjs/**/*.js'
+  ], {base: '.'})
+  .pipe(gulp.dest('dist/harness/client')))
+  
+gulp.task('copy:test_harness:client:worker', () => gulp
+  .src([
+    'dist/worker.js'
+  ])
+  .pipe(gulp.dest('dist/harness/client')));
+  
+gulp.task('!build:test_harness:tests', [
+  '!copy:test_harness:tests:protractor',
+  '!build:test_harness:tests:compile'
+]);
+  
+gulp.task('!build:test_harness:tests:compile', () => gulp
+  .src([
+    'typings/globals/**/*.d.ts',
+    'src/typings/*.d.ts',
+    'src/e2e/**/*.ts',
+    'src/testing/harness/server/**/*.ts',
+  ], {base: '.'})
+  .pipe(ts(commonCompilerConfig))
+  .pipe(gulp.dest('dist/e2e')));
+
+gulp.task('!copy:test_harness:tests:protractor', () => gulp
+  .src([
+    'src/e2e/**/protractor.config.js'
+  ], {base: '.'})
+  .pipe(gulp.dest('dist/e2e')));
+
 gulp.task('copy:generator', ['build:generator'], () => gulp
   .src([
     'dist/src/generator/**/*.js'

service-worker/worker/package.json

@@ -20,7 +20,12 @@
   },
   "homepage": "https://github.com/angular/progressive#readme",
   "devDependencies": {
+    "@angular/common": "^2.0.0-rc.1",
+    "@angular/compiler": "^2.0.0-rc.1",
+    "@angular/platform-browser": "^2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
     "es6-shim": "^0.33.13",
+    "express": "^4.13.4",
     "gulp": "^3.9.0",
     "gulp-clean": "^0.3.1",
     "gulp-concat": "^2.6.0",

service-worker/worker/src/e2e/page-object.ts

@@ -0,0 +1,61 @@
+declare var browser;
+declare var element;
+declare var by;
+
+export class HarnessPageObject {
+  
+  sendKeysSlow(el, keys) {
+    keys.split('').forEach(char => el.sendKeys(char));
+  }
+  
+  selectAction(action: string) {
+    this.sendKeysSlow(element(by.css('#actionInput')).clear(), action);
+    element(by.css('#actionExec'))
+      .click();
+  }
+  
+  setTextOn(id: string, text: string) {
+    this.sendKeysSlow(element(by.css(`#${id}`)).clear(), text);
+  }
+  
+  clickButton(id: string) {
+    element(by.css(`#${id}`))
+      .click();
+  }
+  
+  get result(): Promise<string> {
+    return element(by.css('#result')).getText();
+  }
+  
+  request(url: string): Promise<string> {
+    this.selectAction('MAKE_REQUEST');
+    this.setTextOn('requestUrl', url);
+    this.clickButton('requestAction');
+    return this.result;
+  }
+  
+  installServiceWorker(url: string): void {
+    this.selectAction('SW_INSTALL');
+    this.setTextOn('workerUrl', url);
+    this.clickButton('installAction');
+  }
+  
+  hasActiveWorker(): Promise<boolean> {
+    this.selectAction('SW_CHECK');
+    return this
+      .result
+      .then(JSON.parse)
+      .then(res => res.some(worker => worker.active));
+  }
+  
+  hasServiceWorker(): Promise<boolean> {
+    this.selectAction('SW_CHECK');
+    browser.waitForAngular();
+    return this
+      .result
+      .then(value => {
+        return value;
+      })
+      .then(value => value !== '[]');
+  }
+}

service-worker/worker/src/e2e/simple/protractor.config.js

@@ -0,0 +1,27 @@
+exports.config = {
+    baseUrl: 'http://localhost:8080/dev/src/',
+    specs: ['*.e2e.js'],
+    directConnect: true,
+    exclude: [],
+    multiCapabilities: [{
+        browserName: 'chrome'
+    }],
+    allScriptsTimeout: 110000,
+    getPageTimeout: 100000,
+    framework: 'jasmine2',
+    jasmineNodeOpts: {
+        isVerbose: false,
+        showColors: true,
+        includeStackTrace: false,
+        defaultTimeoutInterval: 400000
+    },
+    
+    /**
+     * ng2 related configuration
+     *
+     * useAllAngular2AppRoots: tells Protractor to wait for any angular2 apps on the page instead of just the one matching
+     * `rootEl`
+     *
+     */
+     useAllAngular2AppRoots: true
+};

service-worker/worker/src/e2e/simple/sanity.e2e.ts

@@ -0,0 +1,98 @@
+import {create, Server} from '../../testing/harness/server/server';
+import {HarnessPageObject} from '../page-object';
+declare var browser;
+declare var element;
+declare var by;
+
+
+let server: Server;
+let po: HarnessPageObject;
+
+const SIMPLE_MANIFEST = {
+  group: {
+    default: {
+      version: 'test',
+      url: {
+        '/hello.txt': {}
+      }
+    }
+  }
+};
+
+beforeAll(done => {
+  create(8080, 'dist/harness/client').then(s => {
+    server = s;
+    done();
+  });
+});
+
+beforeEach(() => {
+  server.clearResponses();
+  po = new HarnessPageObject();
+});
+
+function expectNoServiceWorker(): Promise<void> {
+  return po
+    .hasServiceWorker()
+    .then(workerPresent => {
+      expect(workerPresent).toBeFalsy();
+      console.log('expectation', workerPresent);
+    });
+}
+
+describe('world sanity', () => {
+  it('starts without a service worker', done => {
+    browser.get('/index.html');
+    po
+      .hasActiveWorker()
+      .then(hasWorker => {
+        expect(hasWorker).toBeFalsy();
+      })
+      .then(done);
+  });
+  it('able to mock a request', done => {
+    server.addResponse('/hello.txt', 'Hello world!');
+    po
+      .request('/hello.txt')
+      .then(result => {
+        expect(result).toBe('Hello world!');
+      })
+      .then(done);
+  });
+  it('can install a service worker', done => {
+    server.addResponse('/ngsw-manifest.json.js', '/* mocked */');
+    server.addResponse('/ngsw-manifest.json', JSON.stringify(SIMPLE_MANIFEST));
+    server.addResponse('/hello.txt', 'Hello world!');
+    po.installServiceWorker('/worker.js');
+    po
+      .hasActiveWorker()
+      .then(hasWorker => {
+        expect(hasWorker).toBeTruthy();
+      })
+      .then(done);
+  });
+  it('worker is not yet controlling the page', done => {
+    server.addResponse('/hello.txt', 'Still from the server');
+    po
+      .request('/hello.txt')
+      .then(response => {
+        expect(response).toBe('Still from the server');
+      })
+      .then(done);
+  });
+  it('after reload, worker serves cached /hello.txt', done => {
+    browser.get('/index.html');
+    server.addResponse('/hello.txt', 'Goodbye world?');
+    po
+      .request('/hello.txt')
+      .then(result => {
+        expect(result).toBe('Hello world!');
+      })
+      .then(done);
+  });
+});
+
+afterAll(done => {
+  server.shutdown();
+  done();
+});