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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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(…);
   
   }
   

   View Slide

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’
    }
    

    View Slide

11. files
    

    View Slide

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

    View Slide

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

    View Slide

14. test target
    @main.js
    

    View Slide

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);
    });
    }
    

    View Slide

16. test data
    @main.js
    

    View Slide

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}
    };
    

    View Slide

18. test
    @main.js
    

    View Slide

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);
    });
    });
    

    View Slide

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

    View Slide

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

    View Slide

22. sw.js
    

    View Slide

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) {…}
    };
    

    View Slide

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;
    }
    };
    

    View Slide

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);
    }
    

    View Slide

26. Demo
    

    View Slide

27. View Slide

28. Service Worker is Fantastic !
    

    View Slide

29. @yoheiMune
    http://www.yoheim.net
    ϒϩά΍5XJUUFSͰ͸ɺϑϩϯτΤϯυωλΛத৺ʹൃ৴͍ͯ͠·͢ɻ

    ؾʹͳͬͨͧͱ͍͏ํ͸ͥͻͱ΋ϑΥϩʔΛ͓ئ͍͠·͢??
    Thank you
    

    View Slide