This document provides instructions for a test-driven development (TDD) coding assignment using JavaScript. It outlines how to set up the development environment, run tests, and iterate through solving tests one by one while committing changes. It also includes an introduction to JavaScript basics like types, functions, classes, and interfaces to provide context for completing the assignment. Students are instructed to work individually on solving commented tests in a GitHub classroom repository by running tests and committing after each solved test.

1. P3 TDD Calculator
Enginyeria del Software 3
1
@drpicox — 2020

2. Assignment
• Individual in Javascript
• https://classroom.github.com/a/-SxHairB
• You have to resolve all commented tests in order
• do 1 commit for each solved test
2

3. How to Start JS
• https://code.visualstudio.com/
• https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
• https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Be sure that you enable prettier as "Default Formatter" and "Format On Save"
• https://nodejs.org/en/ v12
• https://yarnpkg.com/
• Execute: "yarn" and then "yarn test" in the command shell
3

4. First steps example
4

5. Before everything: read the README.md
5

6. Before everything: read the README.md
6

7. Before everything: read the README.md
7

8. Setup: run the command "yarn"
8

9. Start: run "yarn test"
9

10. Solving test table line 1: looking the required sequence
10

11. Solving test table line 1: read the error
11

12. Solving test table line 1: understand the error
12

13. Solving test table line 1: error fixed
13

14. Solving test table line 1: commit
14

15. Solving test table line 1: commit
15

16. Solving test table line 2: move next line from comment
16

17. Solving test table line 2: move next line from comment
17

18. Solving test table line 2: read the error
18

19. Solving test table line 2: fix the error
19

20. Solving test table line 2: iterate until all errors are fixed
20

21. Solving test table line 2: iterate until all errors are fixed
21

22. Solving test table line 2: commit
22

23. Solving test table line 2: commit
23

24. Iterate and commit solved line by solved line until finish
24

25. Iterate and commit solved line by solved line until finish
25

26. Sequences
• They are strings in which each character is a key down:
ex: "2+4=[6]"
26
input(number)
plus()
equal()
times()
getDisplay(): number
factorial()

27. Sequences
"56[56]"
c.input(5)
c.input(6)
expect(c.getDisplay()).toBe(56)
"4![24]"
c.input(4)
c.factorial()
expect(c.getDisplay()).toBe(24)
27

28. Sequences
"3+4=[7]"
c.input(3)
c.plus()
c.input(4)
c.equal()
expect(c.getDisplay()).toBe(7)
"12+[12]"
c.input(1)
c.input(2)
c.plus()
expect(c.getDisplay()).toBe(12)
28

29. Javascript 🗑 Course
• Syntaxis similar to Java
• You should be able to learn basics in one weekend
• Here I explain here minimal basics for this assignment
29
https://www.slideshare.net/DavidRdenasPic/introduction-to-web-programming-for-java-and-c-programmers-by-drpicox
https://github.com/drpicox/learn-javascript-bytesting-jest

30. Types
// Javascript basic types are:
const number = 3
const string = "hello"
const boolean = true
const array = [1, 2, 3]
const object = { name: "David" }
const addFunction = (a, b) => a + b
30

31. Types
// Javascript is typed in runtime:
let variable
expect(typeof variable).toBe("undefined")
variable = 3
expect(typeof variable).toBe("number")
variable = "hello"
expect(typeof variable).toBe("string")
variable = { name: "David" }
expect(typeof variable).toBe("object")
31

32. Functions
// Functions are objects
function add(a, b) {
return a + b
}
const inc = (x) => add(x, 1)
expect(typeof add).toBe("function")
expect(typeof inc).toBe("function")
// Execute a function with parenthesis
expect(add(2, 3)).toBe(5)
expect(inc(6)).toBe(7)
// Assign without parenthesis (like a pointer/reference)
const plus = add;
expect(typeof plus).toBe("function")
expect(plus(2, 3)).toBe(5)
32

33. Classes
// Classes are objects, and constructors functions
class Circle {}
const circle = new Circle()
expect(typeof circle).toBe("object")
expect(typeof Circle).toBe("function")
33

34. Classes
// Classes members are always public
class Circle {
radius = 1
}
const circle = new Circle()
expect(typeof circle.radius).toBe("number")
expect(circle.radius).toBe(1)
circle.radius = 3
expect(circle.radius).toBe(3)
34

35. Classes
// Classes methods access with this
class Circle {
radius = 1
setRadius(newRadius) {
this.radius = newRadius
}
getRadius() {
return this.radius
}
}
const circle = new Circle()
expect(typeof circle.setRadius).toBe("function")
expect(typeof circle.getRadius).toBe("function")
circle.setRadius(5)
expect(circle.getRadius()).toBe(5)
expect(typeof circle.getRadius()).toBe("number")
35

36. Classes
// Classes methods use this to access other methods
class Circle {
radius = 1
getRadius() {
return this.radius
}
draw() {
const radius = this.getRadius();
console.log(`circle of ${radius}`)
}
}
36

37. Classes
// Classes members are dynamic
class Circle {
setRadius(newRadius) {
this.radius = newRadius
}
}
const circle = new Circle()
expect(typeof circle.radius).toBe("undefined")
expect(typeof circle.color).toBe("undefined")
circle.setRadius(7)
circle.color = "red"
expect(circle.radius).toBe(7)
expect(circle.color).toBe("red")
37

38. Classes
// Classes members can be accidentally overwritten
class Circle {
setRadius(newRadius) {
this.radius = newRadius
}
radius() {
return this.radius
}
}
const circle = new Circle()
expect(typeof circle.radius).toBe("function")
circle.setRadius(3)
expect(typeof circle.radius).toBe("number")
38

39. Interfaces
// There are no interfaces in javascript, use convention
// ex: interface Shape { draw(size:number); }
class Box {
draw(size) {
// ... draw a box
}
}
class Circle {
draw(size) {
// ... draw a circle
}
}
const shapes = [new Box(), new Circle()]
shapes.forEach((shape) => shape.draw(10))
39

40. Related Videos
TDD Live Example for a Multiplication Algorithm
(aka: do not use eval to solve this assignment)
https://www.youtube.com/watch?v=VW4hHaid3PE
Not a TDD for Multiplication Algorithm
https://www.youtube.com/watch?v=SMNqmO-bfRY
Also not a TDD for Multiplication Algorithm
https://www.youtube.com/watch?v=2fxsgEOUQmU
40

41. 41