Testes em JavaScript: A Maneira Correta

Talk apresentada no TDC Florianópolis 2017.

Transcript

1. View Slide

2. a maneira correta
   github
   lucasfcosta
   twitter
   lfernandescosta
   

   View Slide

3. Testes em
   Javascript
   A M A N E I R A C O R R E T A
   lucasfcosta lfernandescosta
   

   View Slide

4. lucasfcosta lfernandescosta
   quem
   sou eu?
   

   View Slide

5. "Automated crap is still crap"
   Why most unit testing is waste - James O. Coplien
   

   View Slide

6. the
   testing
   mindset
   

   View Slide

7. Martin Fowler
   Testes unitários não são tudo
   

   View Slide

8. Você não pode
   provar que seu
   código funciona
   

   View Slide

9. Você não pode
   provar que seu
   código funciona
   Você só pode
   provar que ele
   não funciona
   

   View Slide

10. Você não pode
    testar todos os
    inputs possíveis
    

    View Slide

11. Testes que nunca
    falham não
    produzem
    informação
    

    View Slide

12. Testes que nunca
    falham não
    produzem
    informação
    Testes de baixo
    risco possuem
    baixo valor
    

    View Slide

13. Green Bar Fever
    

    View Slide

14. Green Bar Fever
    

    View Slide

15. testes como

    especificações
    Testes ajudam a
    esclarecer
    especificações
    Testes servem
    como
    especificação
    Ajudam a entender a codebase
    

    View Slide

16. determinismo
    

    View Slide

17. determinismo
    

    View Slide

18. determinismo
    Input Output
    Unit
    Under
    Test
    

    View Slide

19. reproducible builds
    Input Unit
    Under
    Test
    initial state
    

    View Slide

20. reproducible builds
    Input Output
    Unit
    Under
    Test
    initial state
    

    View Slide

21. reproducible builds
    Input Output
    Unit
    Under
    Test
    final state
    

    View Slide

22. reproducible builds
    Input Output
    Unit
    Under
    Test
    final state
    entre testes: cleanup
    

    View Slide

23. reproducible builds
    Input Output
    Unit
    Under
    Test
    initial state
    entre testes: cleanup
    

    View Slide

24. Testes não
    deterministas
    são inúteis
    Impossível
    diferenciar bugs de
    não-determinismo
    

    View Slide

25. Program to an
    interface not an
    implementation
    menos
    acoplamento
    

    View Slide

26. “TDD REDUCES FEAR”
    Kent Beck
    

    View Slide

27. Confiança
    Tamanho
    dos passos
    

    View Slide

28. teste seu código
    filesystem calls
    databases
    crypto
    libraries de terceiros
    

    View Slide

29. teste seu código
    filesystem calls
    databases
    crypto
    libraries de terceiros
    responsabilidade
    de quem mantém
    essas ferramentas
    testes de integração/black box
    garantem o funcionamento delas
    

    View Slide

30. na prática
    

    View Slide

31. Ferramentas
    test
    runners
    assertion
    libraries
    code
    coverage
    mocks,
    stubs,
    spies
    multi-
    platform
    o pipeline de testes
    

    View Slide

32. test runners
    

    View Slide

33. tape
    test runners

    !==
    assertions
    

    View Slide

34. 4 elementos
    para bons
    test suites
    

    View Slide

35. isolamento
    um teste unitário
    testa apenas uma
    unidade (função)
    

    View Slide

36. isolamento
    + precisão para
    detectar erros
    

    View Slide

37. isolamento
    BDD
    GivenWhenThen
    

    View Slide

38. isolamento
    

    View Slide

39. foco
    o mínimo de
    verificações por teste
    

    View Slide

40. foco
    um teste
    =
    um objetivo
    

    View Slide

41. desacoplamento
    Unit
    Under
    Test
    Provê uma
    entrada
    Espera
    uma saída
    X Y
    Não importa
    como é feito
    

    View Slide

42. desacoplamento
    Você paga por testes
    em manutenção
    

    View Slide

43. independência
    function a(input) {

    return b(input, c(input))

    }
    

    View Slide

44. independência
    teste de “a” falha
    function a(input) {

    return b(input, c(input))

    }
    

    View Slide

45. independência
    teste de “a” falha
    o erro está em a, b, ou c?
    function a(input) {

    return b(input, c(input))

    }
    

    View Slide

46. independência
    prover resultados
    corretos de “b” e “c”
    

    View Slide

47. independência
    

    View Slide

48. 4 elementos
    para bons
    test suites ISOLAMENTO FOCO
    DESACOPLAMENTO INDEPENDÊNCIA
    

    View Slide

49. ISOLAMENTO FOCO
    DESACOPLAMENTO INDEPENDÊNCIA
    4 elementos
    para bons
    test suites
    

    View Slide

50. ISOLAMENTO FOCO
    DESACOPLAMENTO INDEPENDÊNCIA
    4 elementos
    para bons
    test suites
    

    View Slide

51. ISOLAMENTO FOCO
    DESACOPLAMENTO INDEPENDÊNCIA
    4 elementos
    para bons
    test suites
    

    View Slide

52. assertions
    

    View Slide

53. Verificações
    expect(result).to.be.equal(10)
    assert.true(isBlue)
    assert.equals(result, 10)
    

    View Slide

54. assertions
    should.js
    must.js
    

    View Slide

55. erros
    comuns ao
    fazer
    verificações
    

    View Slide

56. expect(result).to.not.be.equal(10)
    expect(arr).to.not.contain(1, 2, 3)
    negações
    

    View Slide

57. + ∞
    - ∞ 0
    Resultados de f(x)
    negações
    

    View Slide

58. + ∞
    - ∞ 0
    Resultados de f(x)
    expect(result).to.not.be.equal(1)
    negações
    

    View Slide

59. + ∞
    - ∞ 0 1
    expect(result).to.not.be.equal(1)
    negações
    

    View Slide

60. negações
    + ∞
    - ∞ 0 1
    expect(result).to.not.be.equal(1)
    Total de saídas que passam = ∞ - 1
    

    View Slide

61. asserções
    frouxas
    expect(result).to.be.a.number
    

    View Slide

62. asserções
    frouxas
    Desde 5e-324 até
    1.7976931348623157e+308
    expect(result).to.be.a.number
    

    View Slide

63. expect(result).to.be.a.number
    expect(arr).to.contain(1)
    asserções
    frouxas
    

    View Slide

64. múltiplos
    outputs
    

    View Slide

65. function mult(a, b) {
    let result = 0
    for (let i = 0; i < b; i++) {

    result = sum(result + a)

    }
    return result
    }
    detalhes de
    implementação
    

    View Slide

66. mult(3, 2)

    expect(sum).to.be.calledTwice
    function mult(a, b) {
    return a * b;
    }
    refactor quebra
    detalhes de
    implementação
    

    View Slide

67. asserções
    circulares
    catFactory -> Cria objetos gato
    createBlueCat -> Cria um gato
    azul (chama catFactory)
    

    View Slide

68. asserções
    circulares
    expect(createBlueCat())
    .to.be

    .equal(catFactory.create(‘blue’))
    

    View Slide

69. asserções
    circulares
    expect(createBlueCat())
    .to.be

    .equal(catFactory.create(‘blue’))
    teste tautológico
    

    View Slide

70. asserções
    circulares
    implementação

    vs.

    implementação
    

    View Slide

71. erros
    comuns ao
    fazer
    verificações
    ASSERÇÕES FROUXAS
    MÚLTIPLOS OUTPUTS
    DETALHES DE IMPLEMENTAÇÃO
    ASSERÇÕES CIRCULARES
    NEGAÇÕES
    

    View Slide

72. erros
    comuns ao
    fazer
    verificações
    ASSERÇÕES FROUXAS
    MÚLTIPLOS OUTPUTS
    DETALHES DE IMPLEMENTAÇÃO
    ASSERÇÕES CIRCULARES
    NEGAÇÕES
    

    View Slide

73. erros
    comuns ao
    fazer
    verificações
    ASSERÇÕES FROUXAS
    MÚLTIPLOS OUTPUTS
    DETALHES DE IMPLEMENTAÇÃO
    ASSERÇÕES CIRCULARES
    NEGAÇÕES
    

    View Slide

74. erros
    comuns ao
    fazer
    verificações
    ASSERÇÕES FROUXAS
    MÚLTIPLOS OUTPUTS
    DETALHES DE IMPLEMENTAÇÃO
    ASSERÇÕES CIRCULARES
    NEGAÇÕES
    

    View Slide

75. erros
    comuns ao
    fazer
    verificações
    ASSERÇÕES FROUXAS
    MÚLTIPLOS OUTPUTS
    DETALHES DE IMPLEMENTAÇÃO
    ASSERÇÕES CIRCULARES
    NEGAÇÕES
    

    View Slide

76. mocks,
    stubs,
    spies
    

    View Slide

77. spies
    guardam
    dados sobre a
    utilização de
    funções
    • quantas vezes foi chamada

    • com quais argumentos foi
    chamada

    • qual era o valor de this
    podemos fazer verificações
    sobre esses dados
    

    View Slide

78. stubs
    guardam dados sobre
    a utilização de funções
    sobrescrevem
    comportamentos
    +
    

    View Slide

79. stubs
    Eliminam não-determinismo
    

    View Slide

80. stubs
    Eliminam não-determinismo
    Eliminam side-effects
    

    View Slide

81. stubs
    Ajudam à fazer isolamento
    Eliminam não-determinismo
    Eliminam side-effects
    

    View Slide

82. stubs
    Ajudam à fazer isolamento
    Eliminam não-determinismo
    Eliminam side-effects
    

    View Slide

83. mocks
    expectativas
    pré-programadas
    stubs + verificações
    

    View Slide

84. sinon.js
    

    View Slide

85. utilizando
    mocks, stubs
    & spies com
    sabedoria
    

    View Slide

86. utilizando
    mocks, stubs
    & spies com
    sabedoria
    Voltaire, 1793
    une grande
    responsabilité est la
    suite inséparable d’un
    grand pouvoir.
    

    View Slide

87. utilizando
    mocks, stubs
    & spies com
    sabedoria
    TIO BEN

    RIP
    

    View Slide

88. stubs, spies ou mocks?
    spies
    stubs
    mocks
    quando quero manter o
    comportamento e checar
    chamadas
    quando quero substituir
    comportamentos e checar
    chamadas
    quando quero dizer como
    uma determinada peça deve
    ser usada (conjunto de regras)
    

    View Slide

89. sandboxes
    facilitam setup e teardown
    facilitam eliminar
    dependências entre testes
    mais facilidade de resetar
    dados
    

    View Slide

90. fake timers
    implementação síncrona de
    relógio
    + determinismo (datas)
    testes mais rápidos (não
    dependem de tempo)
    

    View Slide

91. STUBS, SPIES OU
    MOCKS?
    utilizando
    mocks, stubs
    & spies com
    sabedoria
    

    View Slide

92. DETERMINISMO

    E SIDE-EFFECTS
    STUBS, SPIES OU
    MOCKS?
    utilizando
    mocks, stubs
    & spies com
    sabedoria
    

    View Slide

93. SANDBOXES
    DETERMINISMO

    E SIDE-EFFECTS
    STUBS, SPIES OU
    MOCKS?
    utilizando
    mocks, stubs
    & spies com
    sabedoria
    

    View Slide

94. SANDBOXES
    DETERMINISMO

    E SIDE-EFFECTS
    STUBS, SPIES OU
    MOCKS?
    FAKE TIMERS
    utilizando
    mocks, stubs
    & spies com
    sabedoria
    

    View Slide

95. multiple
    platforms
    

    View Slide

96. diferentes features
    diferentes implementações
    

    View Slide

97. View Slide

98. setup
    

    View Slide

99. setup web
    server
    

    View Slide

100. setup web
     server
     inicia
     browser
     

     View Slide

101. setup web
     server
     inicia
     browser
     browser
     conecta
     

     View Slide

102. testes headless
     • velocidade
     • acesso às APIs do browser
     • múltiplos environments (CI)
     

     View Slide

103. testes headless
     phantomjs
     

     View Slide

104. packaging
     

     View Slide

105. code
     coverage
     

     View Slide

106. code coverage é uma
     medida interessante,
     porém imprecisa
     

     View Slide

107. é impossível
     testar todos os
     inputs existentes
     

     View Slide

108. testes sem
     verificações não
     significam nada
     

     View Slide

109. medindo code coverage
     

     View Slide

110. testes
     geração de relatórios
     .lcov
     medindo code coverage
     instrumentação
     

     View Slide

111. o pipeline
     de testes
     

     View Slide

112. continuous
     integration
     

     View Slide

113. git hooks
     

     View Slide

114. o pipeline
     de testes
     TASK
     RUNNER
     NPM (recomendado)

     Gulp
     Grunt
     INSTRUMENTAÇÃO
     Istanbul
     TESTING
     Mocha
     Chai
     Tape
     Jest
     Jasmine
     

     View Slide

115. BROWSER

     TESTING
     Karma
     COVERAGE

     REPORTS
     Istanbul
     PACKAGING
     Browserify
     Webpack
     

     View Slide

116. Coveralls
     COMBINAÇÃO

     DE RELATÓRIOS
     lcov-result-merger
     COVERAGE
     TRACKING
     

     View Slide

117. Ferramentas
     test
     runners
     assertion
     libraries
     code
     coverage
     mocks,
     stubs,
     spies
     multi-
     platform
     o pipeline de testes
     

     View Slide

118. Ferramentas
     test
     runners
     assertion
     libraries
     code
     coverage
     mocks,
     stubs,
     spies
     multi-
     platform
     o pipeline de testes
     

     View Slide

119. Ferramentas
     test
     runners
     assertion
     libraries
     code
     coverage
     mocks,
     stubs,
     spies
     multi-
     platform
     o pipeline de testes
     

     View Slide

120. Ferramentas
     test
     runners
     assertion
     libraries
     code
     coverage
     mocks,
     stubs,
     spies
     multi-
     platform
     o pipeline de testes
     

     View Slide

121. Ferramentas
     test
     runners
     assertion
     libraries
     code
     coverage
     mocks,
     stubs,
     spies
     multi-
     platform
     o pipeline de testes
     

     View Slide

122. Ferramentas
     test
     runners
     assertion
     libraries
     code
     coverage
     mocks,
     stubs,
     spies
     multi-
     platform
     o pipeline de testes
     

     View Slide

123. obrigado!
     lucasfcosta lfernandescosta
     lucasfcosta.com
     

     View Slide