Testable,
a gamified tool to
teach unit tests
in javascript
Slide 2
Slide 2 text
HELLO!
I am Matheus Marabesi
You can find me at
@MatheusMarabesi
2
Slide 3
Slide 3 text
AGENDA
▪ Motivation: developers usually don't write tests.
3
Slide 4
Slide 4 text
AGENDA
▪ Motivation: developers usually don't write tests.
▪ Gamification: Is an alternative approach of
teaching.
4
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
NO TEST
Developers usually don’t test.
6
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
8
Slide 9
Slide 9 text
Subject
Unit testing has less attention
compared to other compared to
others subjects
TEACHING STRATEGY
9
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
https://flexboxfroggy.com/
Slide 13
Slide 13 text
https://serviceworkies.com/
Slide 14
Slide 14 text
https://mastery.games/p/flexbox-zombies
Slide 15
Slide 15 text
GAME ELEMENTS
Leader boards
Level based ranking to show
user progress.
15
Slide 16
Slide 16 text
GAME ELEMENTS
Leader boards
Level based ranking to show
user progress.
Narrative
A history to conduct the main
history.
16
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Testable history, buggy + alien
Slide 21
Slide 21 text
Testable history, buggy + alien
Slide 22
Slide 22 text
Testable history, buggy + alien
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
INTRO
FORGOT
PASSWORD
SIGNUP
INITIAL
SCREEN
LOGIN
SCREEN
LEVEL 1 LEVEL 2 LEVEL 3
N N N
Y Y
PASS PASS PASS
Slide 25
Slide 25 text
25
Slide 26
Slide 26 text
INTRO
FORGOT
PASSWORD
SIGNUP
INITIAL
SCREEN
LOGIN
SCREEN
LEVEL 1 LEVEL 2 LEVEL 3
N N N
Y Y
PASS PASS PASS
Slide 27
Slide 27 text
27
Slide 28
Slide 28 text
INTRO
FORGOT
PASSWORD
SIGNUP
INITIAL
SCREEN
LOGIN
SCREEN
LEVEL 1 LEVEL 2 LEVEL 3
N N N
Y Y
PASS PASS PASS
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Let's talk tech
programming
languages and
tools used.
Slide 31
Slide 31 text
TECH LIST
▪ ReactJs + Redux
▪ Firebase
Slide 32
Slide 32 text
TECH LIST
▪ ReactJs + Redux
▪ Firebase
▪ Jest + enzyme
Slide 33
Slide 33 text
TECH LIST
▪ ReactJs + Redux
▪ Firebase
▪ Jest + enzyme
▪ Github + travis / gitlab CI
▪ Now.sh
Slide 34
Slide 34 text
TECH LIST
▪ ReactJs + Redux
▪ Firebase
▪ Jest + enzyme
▪ Github + travis / gitlab CI
▪ Now.sh
▪ Esprima
▪ Docz
Slide 35
Slide 35 text
JS CODE
How to validate raw code?
35
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
38
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
PREDEFINED
TESTS
Slide 41
Slide 41 text
LEMMING.JS
Safely executing javascript code
Slide 42
Slide 42 text
Code execution with lemming.js
Slide 43
Slide 43 text
ReactJs patterns
Slide 44
Slide 44 text
FRAGMENTS
Fragment instead of divs
44
Slide 45
Slide 45 text
JEST
Run all timers
45
Slide 46
Slide 46 text
Container
Container components
46
Slide 47
Slide 47 text
HoC
Higher Order Components
47
Slide 48
Slide 48 text
Code splitting
Route-based code splitting
48
Slide 49
Slide 49 text
THANKS!
Any questions?
You can find me at:
@MatheusMarabesi
marabesi.com
49