$30 off During Our Annual Pro Sale. View Details »

Testes em JavaScript: A Maneira Correta

Testes em JavaScript: A Maneira Correta

Talk apresentada no TDC Florianópolis 2017.

More Decks by Lucas Fernandes da Costa

Other Decks in Programming

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