API Test with Service Worker

LT on Frontrend Conference Final at Feb. 2015.
Service Worker is not only for Offline, but for many use-cases.
Whether you can go on front-end, it depends on your creativities.

Transcript

1. Yohei Munesada @Frontrend Conference Final 2015.02
2. About Me Yohei Munesada http://www.yoheim.net
3. Today’s LT Test × Service Worker (requires HTTP)
4. front-end Ajax on HTTP Architecture back-end PageJS jQuery Ajax
5. Traditional Test Methodology front-end PageJS jQuery Ajax back-end Local Proxy Local Files
6. Cool Test Methodology front-end PageJS jQuery Ajax back-end Service Worker ×
7. Technologies ✦Service Worker ✦Jasmine ✦Message Channel ✦Promise ✦Chrome ✦jQuery
8. Technologies ✦Service Worker ✦Jasmine ✦Message Channel ✦Promise ✦Chrome ✦jQuery
9. 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(…); }
10. 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’ }
11. files
12. ✦ index.html ✦ jQuery.js ✦ main.js ✦ jasmine.css ✦ jasmine.js ✦ jasmine-html.js ✦ boot.js ✦ sw.js Files
13. ✦ index.html ✦ jQuery.js ✦ main.js ✦ jasmine.css ✦ jasmine.js ✦ jasmine-html.js ✦ boot.js ✦ sw.js Files
14. test target @main.js
15. ✦ 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); }); }
16. test data @main.js
17. 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} };
18. test @main.js
19. ✦ 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); }); });
20. Test - main.js it(‘test-001', function (done) { getFullName(1).then(function (fullName) { expect('Yohei Munesada').toBe(fullName); done(); }); });
21. ✦ Unregist Service Worker AfterEach - main.js afterEach(function (done) { navigator.serviceWorker .getRegistration().then(function (reg) { reg.unregister().then(done); }); });
22. sw.js
23. ✦ 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) {…} };
24. ✦ 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; } };
25. ✦ 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); }
26. Demo
28. Service Worker is Fantastic !
29. @yoheiMune http://www.yoheim.net ϒϩά΍5XJUUFSͰ͸ɺϑϩϯτΤϯυωλΛத৺ʹൃ৴͍ͯ͠·͢ɻ
 ؾʹͳͬͨͧͱ͍͏ํ͸ͥͻͱ΋ϑΥϩʔΛ͓ئ͍͠·͢
    ?? Thank you