Testable, a gamified tool to teach unit tests in javascript - MadridJs

Testing has always been a subject of attention. Nowadays modern libraries come with their own test suite, usually a unit test suite. Therefore, enterprise developers and students might have the perception that testing is a boring task.

Testable, is a web-based application built with reactjs to teach unit test teaching for professional developers and students that uses gamification as a teaching strategy approach.

In this scenario, the talk presents the challenges faced during the development phase such as:

- Why javascript in the first place?
- Understanding javascript code with AST
- Front end patterns used
- Tracking system and animations

As well as the gamification part of it:

- Should we use gamification an alternative strategy?

This talk was hosted by MadridJs:

- Access the meetup event

This research is public available:

- Towards a Gamified Tool to Improve Unit Test Teaching
- EVALUATION OF TESTABLE, A GAMIFIED TOOL TO IMPROVE UNIT TEST TEACHING
- Source code on GitHub

Transcript

1. Testable, a gamified tool to teach unit tests in javascript
2. HELLO! I am Matheus Marabesi You can find me at @MatheusMarabesi 2
3. AGENDA ▪ Motivation: developers usually don't write tests. 3
4. AGENDA ▪ Motivation: developers usually don't write tests. ▪ Gamification: Is an alternative approach of teaching. 4
5. AGENDA ▪ Motivation: developers usually don't write tests. ▪ Gamification: Is an alternative approach of teaching. ▪ Javascript: as a main programming language to teach and develop unit tests. 5
6. NO TEST Developers usually don’t test. 6
9. Subject Unit testing has less attention compared to other compared to others subjects TEACHING STRATEGY 9
10. Subject Unit testing has less attention compared to other compared to others subjects TEACHING STRATEGY Strategy Students (and professional developers) tend to perceive testing as a boring task 10
11. GAMIFICATION The approach to use game elements, in a context that is not a game. (For The Win - How Game Thinking Can Revolutionize Your Business. 1. ed. ) 11
12. https://flexboxfroggy.com/
13. https://serviceworkies.com/
14. https://mastery.games/p/flexbox-zombies
15. GAME ELEMENTS Leader boards Level based ranking to show user progress. 15
16. GAME ELEMENTS Leader boards Level based ranking to show user progress. Narrative A history to conduct the main history. 16
17. GAME ELEMENTS Leader boards Level based ranking to show user progress. Narrative A history to conduct the main history. Experience points Collect experience to achieve higher objectives. 17
20. Testable history, buggy + alien
21. Testable history, buggy + alien
22. Testable history, buggy + alien
24. INTRO FORGOT PASSWORD SIGNUP INITIAL SCREEN LOGIN SCREEN LEVEL 1 LEVEL 2 LEVEL 3 N N N Y Y PASS PASS PASS
26. INTRO FORGOT PASSWORD SIGNUP INITIAL SCREEN LOGIN SCREEN LEVEL 1 LEVEL 2 LEVEL 3 N N N Y Y PASS PASS PASS
28. INTRO FORGOT PASSWORD SIGNUP INITIAL SCREEN LOGIN SCREEN LEVEL 1 LEVEL 2 LEVEL 3 N N N Y Y PASS PASS PASS
30. Let's talk tech programming languages and tools used.
31. TECH LIST ▪ ReactJs + Redux ▪ Firebase
32. TECH LIST ▪ ReactJs + Redux ▪ Firebase ▪ Jest + enzyme
33. TECH LIST ▪ ReactJs + Redux ▪ Firebase ▪ Jest + enzyme ▪ Github + travis / gitlab CI ▪ Now.sh
34. TECH LIST ▪ ReactJs + Redux ▪ Firebase ▪ Jest + enzyme ▪ Github + travis / gitlab CI ▪ Now.sh ▪ Esprima ▪ Docz
35. JS CODE How to validate raw code? 35
40. PREDEFINED TESTS
41. LEMMING.JS Safely executing javascript code
42. Code execution with lemming.js
43. ReactJs patterns
44. FRAGMENTS Fragment instead of divs 44
45. JEST Run all timers 45
46. Container Container components 46
47. HoC Higher Order Components 47
48. Code splitting Route-based code splitting 48
49. THANKS! Any questions? You can find me at: @MatheusMarabesi marabesi.com 49