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

Testando componentes mais rápido que miojo

Gustavo Guimarães
August 11, 2018
Programming
1
50

Testando componentes mais rápido que miojo

Lightning Talk realizada no Front In Vale 2018

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
gustavogf
1
61

Other Decks in Programming

See All in Programming
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.2k
Honoとフロントエンドの 型安全性について
yodaka
5
330
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
240
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…？
maroon1st
1
180
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Rails アプリ地図考 Flush Cut
makicamel
1
110
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
320
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
820
動作確認やテストで漏れがちな観点3選
starfish719
6
1k

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Making Projects Easy
brettharned
116
6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7.1k
BBQ
matthewcrist
86
9.5k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k

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