Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Test like a boss with TypeScript

paul souche
February 23, 2017

Test like a boss with TypeScript

Paris TypeScript meetup #8 presentation

paul souche

February 23, 2017
Tweet

More Decks by paul souche

Other Decks in Programming

Transcript

  1. Test like a boss with
    typescript
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  2. Me myself and I
    - Front end developer @S_A_N_T_E_C_H
    - In love with unit tests since 2013
    - In love with TypeScript since 2014
    - Paris TypeScript co Organizer
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  3. What are we going to talk about ?
    How to test your assets
    Back end with mocha / supertest
    Front end with karma / jasmine
    Front end with protractor
    Everything in TypeScript
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  4. What are we not going to talk about ?
    mocha / karma / jasmine … internals
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  5. What are we not going to talk about ?
    TDD / BDD / DDD
    Unit tests / integration tests / e2e tests
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  6. Backend : Stack
    Supertest NYC
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  7. Backend : Everything starts with
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  8. Backend : Config
    ts-node
    tsconfig.json
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  9. Backend : Config
    NYC
    Package.json
    More here
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  10. Backend : First spec
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  11. @paulsouche / https://github.com/paulsouche / [email protected]
    Demo ?
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  12. Backend : Yeah but… What if ?
    @paulsouche / https://github.com/paulsouche / [email protected]
    I need to stub some methods ?
    I’ve real repositories ?
    I’m using HAPI ?
    Use sinon.js
    Use proxyquire
    supertest compatible but
    other solutions exist
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  13. Frontend : Stack
    @paulsouche / https://github.com/paulsouche / [email protected]
    Please insert your favourite build engine
    ...
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  14. Frontend : OK karma what is a preprocessor ?
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  15. Frontend : Did you say bundle ?
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  16. @paulsouche / https://github.com/paulsouche / [email protected]
    Demo ?
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  17. Frontend : Yeah but… It’s slow right ?
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  18. Frontend : Alternatives
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H
    Webpack dll
    Faster dependencies
    bundling

    View full-size slide

  19. Frontend : Alternatives
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H
    Make test run in jsdom
    Faster because no browser
    Faster because no bundle
    Hard to polyfill

    View full-size slide

  20. @paulsouche / https://github.com/paulsouche / [email protected]
    Demo ?
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  21. Frontend : Stack
    @paulsouche / https://github.com/paulsouche / [email protected]
    PRO
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  22. Frontend : Config
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  23. @paulsouche / https://github.com/paulsouche / [email protected]
    Demo ?
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  24. @paulsouche / https://github.com/paulsouche / [email protected]
    That’s all folks
    Never forget
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  25. @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide

  26. Questions ?
    @paulsouche / https://github.com/paulsouche / [email protected]
    #typescriptertalk @S_A_N_T_E_C_H

    View full-size slide