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

Testando componentes mais rápido que miojo

Avatar for Gustavo Guimarães Gustavo Guimarães
August 11, 2018
Programming
1
53

Testando componentes mais rápido que miojo

Lightning Talk realizada no Front In Vale 2018

Avatar for Gustavo Guimarães

Gustavo Guimarães

August 11, 2018
Tweet

More Decks by Gustavo Guimarães

See All by Gustavo Guimarães
Construindo SPA's consistentes com Vue Router
Avatar for Gustavo Guimarães gustavogf
1
67

Other Decks in Programming

See All in Programming
中級グラフィックス入門～効率的なメッシュレット描画～
Avatar for Pocol projectasura
2
1.2k
生成AI時代のコンポーネントライブラリの作り方
Avatar for touyou touyou
1
300
Rails Frontend Evolution: It Was a Setup All Along
Avatar for Svyatoslav Kryukov skryukov
0
320
CDK引数設計道場100本ノック
Avatar for kazuho cryer-shinozuka badmintoncryer
2
560
AI Ramen Fight
Avatar for Yusuke Wada yusukebe
0
110
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
Avatar for yakenji yakenji
0
740
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）
Avatar for RisaTube risatube
PRO
3
530
TypeScriptでDXを上げろ！ Hono編
Avatar for Yusuke Wada yusukebe
3
860
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
Avatar for Aki Nakahara akinko_0915
0
160
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
Avatar for uzulla uzulla
1
260
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
Avatar for Munetoshi Ishikawa munetoshi
1
220
Claude Code で Astro blog を Pages から Workers へ移行してみた
Avatar for Kei Kamikawa codehex
0
150

Featured

See All Featured
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.2k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
990
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
850

Transcript

  1. Testando componentes mais rápido que miojo

  2. Gustavo Guimarães Desenvolvedor front end na Quero Educação gustavogmrs gustavoguimrs

    gustavogf

  3. Por que testar?

  4. Garantir que a sua aplicação está funcionando

  5. Jest

  6. None

  7. Teste de Snapshot

  8. Qualquer framework JS

  9. None

  10. <mcs-list :query="search" />

  11. <input type="text" v-model="search">

  12. $ yarn add jest

  13. { "scripts": { "test": "jest" } } package.json

  14. McsList.spec.js

  15. McsList.spec.js

  16. McsList.spec.js

  17. McsList.spec.js

  18. McsList.spec.js

  19. McsList.spec.js

  20. McsList.spec.js

  21. McsList.spec.js

  22. McsList.spec.js

  23. McsList.spec.js

  24. McsList.spec.js

  25. $ yarn test

  26. None

  27. Inicia teste Tem snapshot? Compara snapshots Cria novo snapshot Teste

    passa Teste passa Teste falha Sim Não != =

  28. Inicia teste Tem snapshot? Cria novo snapshot Teste passa Não

  29. McsList.spec.js.snap

  30. McsList.spec.js.snap

  31. McsList.spec.js.snap

  32. None
  33. None

  34. McsList.spec.js.snap

  35. None
  36. None

  37. $ yarn test

  38. None
  39. None

  40. Inicia teste Tem snapshot? Compara snapshots Cria novo snapshot Teste

    passa Teste passa Teste falha Sim Não != =

  41. Inicia teste Tem snapshot? Compara snapshots Teste passa Teste falha

    Sim != =
  42. None
  43. None

  44. $ yarn test

  45. None
  46. None