Test like a boss with TypeScript

Paris TypeScript meetup #8 presentation

Transcript

1. Test like a boss with
   typescript
   @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
   #typescriptertalk @S_A_N_T_E_C_H
   

   View 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 / paul.souche@gmail.com
   #typescriptertalk @S_A_N_T_E_C_H
   

   View 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 / paul.souche@gmail.com
   #typescriptertalk @S_A_N_T_E_C_H
   

   View Slide

4. What are we not going to talk about ?
   mocha / karma / jasmine … internals
   @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
   #typescriptertalk @S_A_N_T_E_C_H
   

   View Slide

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

   View Slide

6. Backend : Stack
   Supertest NYC
   @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
   #typescriptertalk @S_A_N_T_E_C_H
   

   View Slide

7. Backend : Everything starts with
   @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
   #typescriptertalk @S_A_N_T_E_C_H
   

   View Slide

8. Backend : Config
   ts-node
   tsconfig.json
   @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
   #typescriptertalk @S_A_N_T_E_C_H
   

   View Slide

9. Backend : Config
   NYC
   Package.json
   More here
   @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
   #typescriptertalk @S_A_N_T_E_C_H
   

   View Slide

10. Backend : First spec
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

11. @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    Demo ?
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

12. Backend : Yeah but… What if ?
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    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 Slide

13. Frontend : Stack
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    Please insert your favourite build engine
    ...
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

14. Frontend : OK karma what is a preprocessor ?
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

15. Frontend : Did you say bundle ?
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

16. @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    Demo ?
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

17. Frontend : Yeah but… It’s slow right ?
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

18. Frontend : Alternatives
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    #typescriptertalk @S_A_N_T_E_C_H
    Webpack dll
    Faster dependencies
    bundling
    

    View Slide

19. Frontend : Alternatives
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    #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 Slide

20. @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    Demo ?
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

21. Frontend : Stack
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    PRO
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

22. Frontend : Config
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

23. @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    Demo ?
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

24. @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    That’s all folks
    Never forget
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

25. @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide

26. Questions ?
    @paulsouche / https://github.com/paulsouche / paul.souche@gmail.com
    #typescriptertalk @S_A_N_T_E_C_H
    

    View Slide