Yohei Munesada @Frontrend Conference Final 2015.02 

About Me Yohei Munesada http://www.yoheim.net 

Today’s LT Test × Service Worker (requires HTTP) 

front-end Ajax on HTTP Architecture back-end PageJS jQuery Ajax 

Traditional Test Methodology front-end PageJS jQuery Ajax back-end Local Proxy Local Files 

Cool Test Methodology front-end PageJS jQuery Ajax back-end Service Worker × 

Technologies ✦Service Worker ✦Jasmine ✦Message Channel ✦Promise ✦Chrome ✦jQuery 

Technologies ✦Service Worker ✦Jasmine ✦Message Channel ✦Promise ✦Chrome ✦jQuery 

Service Worker ✦ a kind of Web Worker, proxies HTTP Requests. /* Register @main.js */ navigator.serviceWorker.register('./sw.js') /* Fetch Event @sw.js */ self.onfetch = function(event) { return event.respondWith(…); } 

Message Channel ✦ messaging between a window and a worker. /* @main.js */ var messageChannel = new MessageChannel(); navigator.serviceWorker.controller .postMessage(‘hello’, [messageChannel.port1]); /* @sw.js */ self.onmessage = function (event) { console.log(event.data); // ‘hello’ } 

files 

✦ index.html ✦ jQuery.js ✦ main.js ✦ jasmine.css ✦ jasmine.js ✦ jasmine-html.js ✦ boot.js ✦ sw.js Files 

✦ index.html ✦ jQuery.js ✦ main.js ✦ jasmine.css ✦ jasmine.js ✦ jasmine-html.js ✦ boot.js ✦ sw.js Files 

test target @main.js 

✦ get fullName through Promise Test Target function getFullName (id) { return new Promise(function (done, fail) { $.getJSON('/api/users/' + id).then(function (user) { done(user.firstName + ‘ ’ + user.lastName); }).fail(fail); }); } 

test data @main.js 

Test Data var testData = { '/api/users/1': { firstName: ‘Yohei', lastName: ‘Munesada’ }, '/api/users/2': {firstName: 'Tomoko', lastName: null}, '/api/users/3': {firstName: null, lastName: 'Yamada'}, '/api/users/4': {firstName: null, lastName: null} }; 

test @main.js 

✦ Regist ServiceWorker, Set mock data BeforeEach - main.js beforeEach(function (done) { navigator.serviceWorker.register('./sw.js').then(function () { var mc = new MessageChannel(); mc.port2.onmessage =done; var str = JSON.stringify(testData); navigator.serviceWorker.controller .postMessage(str, [messageChannel.port1]); })catch(function () { done(false); }); }); 

Test - main.js it(‘test-001', function (done) { getFullName(1).then(function (fullName) { expect('Yohei Munesada').toBe(fullName); done(); }); }); 

✦ Unregist Service Worker AfterEach - main.js afterEach(function (done) { navigator.serviceWorker .getRegistration().then(function (reg) { reg.unregister().then(done); }); }); 

sw.js 

✦ Receive message, Setup mock data, and Replay. Setup Mock Data - sw.js self.onmessage = function (event) { // Mockσʔλड͚औΓͱԠ౴ var mockObject = JSON.parse(event.data); if (event.ports) { event.ports[0].postMessage('Mock Data Recived'); } // Mockڍಈͷఆٛ self.onfetch = function(event) {…} }; 

✦ HTTP Jack onfetch - sw.js self.onfetch = function(event) { var path = (new URL(event.request.url)).pathname; // MockΛฦ٫͢Δ if (mockObject && mockObject[path]) { var response = _createResponse(path); return event.respondWith(response); // ϦΫΤετΛεϧʔ͢Δ } else { return; } }; 

✦ Create mock response createResponse - sw.js function _createResponse (path) { var mock = mockObject[path]; var body = JSON.stringify(mock); var head = { status: 200, statusText: 'OK', headers: { 'Content-Type': 'application/json' } }; return new Response(body, head); } 

Demo 

No content

Service Worker is Fantastic ! 

@yoheiMune http://www.yoheim.net ϒϩά΍5XJUUFSͰ͸ɺϑϩϯτΤϯυωλΛத৺ʹൃ৴͍ͯ͠·͢ɻ
 ؾʹͳͬͨͧͱ͍͏ํ͸ͥͻͱ΋ϑΥϩʔΛ͓ئ͍͠·͢
?? Thank you