Treinamento de testes em JavaScript :: Parte 2

Transcript

1. PASS ./treinamento.test.js Scenarios ✓ Basics (6ms) ✓ jQuery component (4ms) ✎ todo Vue component + external dependencies ✎ todo Complex Vue component + Vuex Encontros: 2 todo, 2 passed, 4 total Realização: Guilda da front Apoio: Marcelo Fraga & Danilo Vaz Autor: Eduardo Matos Ran all test suites.
2. Vamos criar um modal com jQuery
3. Inicialização 1. npm init -y 2. npm install jest 3. “test”: “jest” no package.json
4. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo
5. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo 2. Permite conteúdo HTML
6. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo 2. Permite conteúdo HTML 3. Tem botão de fechar
7. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo 2. Permite conteúdo HTML 3. Tem botão de fechar 4. Destrói modal ao clicar no botão fechar
8. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo 2. Permite conteúdo HTML 3. Tem botão de fechar 4. Destrói modal ao clicar no botão fechar 5. Chama callback ao fechar modal
9. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo 2. Permite conteúdo HTML 3. Tem botão de fechar 4. Destrói modal ao clicar no botão fechar 5. Chama callback ao fechar modal 6. Permite adição de classes (CSS) customizadas
10. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo 2. Permite conteúdo HTML 3. Tem botão de fechar 4. Destrói modal ao clicar no botão fechar 5. Chama callback ao fechar modal 6. Permite adição de classes (CSS) customizadas 7. Exibe botões de confirmar/cancelar
11. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo 2. Permite conteúdo HTML 3. Tem botão de fechar 4. Destrói modal ao clicar no botão fechar 5. Chama callback ao fechar modal 6. Permite adição de classes (CSS) customizadas 7. Exibe botões de confirmar/cancelar 8. Chama callback ao cancelar
12. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo 2. Permite conteúdo HTML 3. Tem botão de fechar 4. Destrói modal ao clicar no botão fechar 5. Chama callback ao fechar modal 6. Permite adição de classes (CSS) customizadas 7. Exibe botões de confirmar/cancelar 8. Chama callback ao cancelar 9. Chama callback ao confirmar
13. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo 2. Permite conteúdo HTML 3. Tem botão de fechar 4. Destrói modal ao clicar no botão fechar 5. Chama callback ao fechar modal 6. Permite adição de classes (CSS) customizadas 7. Exibe botões de confirmar/cancelar 8. Chama callback ao cancelar 9. Chama callback ao confirmar 10. Destrói modal ao cancelar
14. Cenários 1. Adiciona modal (.m-modal) à página com conteúdo 2. Permite conteúdo HTML 3. Tem botão de fechar 4. Destrói modal ao clicar no botão fechar 5. Chama callback ao fechar modal 6. Permite adição de classes (CSS) customizadas 7. Exibe botões de confirmar/cancelar 8. Chama callback ao cancelar 9. Chama callback ao confirmar 10. Destrói modal ao cancelar 11. Destrói modal ao confirmar
15. Código github.com/eduardo-matos/jquery-modal