A session held for students at San Jose State University. A live pair-programming session and these slides were used before that session. For the code in the live exercise, follow instructions in the slides.

1. Test-Driven Development
with TypeScript+Jasmine
+AngularJS
1
#smartorgdev
Somik Raha Kai Wu
Github repo: https://github.com/behappyrightnow/anagram
Thilak Selvan

2. 2
A Brief History of Software
Engineering
ENIAC, 1946-55

3. 3
Programs were input with Punched Cards
Human labor was cheap. Computer time was expensive.
More value in getting program right the first time.

4. 4
IBM 360 Mainframes
Time-sharing computers
Late 1960s

5. Waterfall is a result of human
confusion
5
“Managing the Development of Large Software Systems”, Dr.
Winston W. Royce (Link) - 1970

6. 6
For some mysterious reason, people latched
on to Fig 2, and thought it looked like a
waterfall.
The name caught up and ushered in
“phased” mindset of development.

7. 7
But Dr. Royce had a Fig. 3

8. 8
And a Fig. 4! As far back as 1970, Royce
was describing the
beginnings of an agile
mindset, but the Waterfall
religion had already
started, based on a
misunderstanding!

9. Meanwhile, a community of philosophers in
software engineering started forming in the
90’s
9
Ward Cunningham
Founding of the WikiWikiWeb in 1994.
Ward’s wiki became the home for
conversations on Design Patterns.

10. 10
1995, caused a revolution in
Object-Oriented thinking
Book knows as the
“Gang of Four”

11. The false religion of Waterfall was then seriously
challenged in 2000
11

12. 12
Source: agileatlas.org
Barry Boehm’s Cost of Change Curve
We were initially justified in doing high-quality design when
computer time was more expensive than programmer time

13. 13
Aspirational Cost of Change curve
But now, programmer time is much more expensive, and we
would love to flatten the curve
time
costofchange
This is what Extreme Programming
was inviting us to consider

14. The XP Practices
14
The “Planning Game” had
strong influences from Scrum

15. What’s the difference?
Test-Driven Development
versus
Unit Testing
15

16. XP’s success led to a broader umbrella under a
more neutral-sounding “Agile Software
Development”
16
Core practices like TDD and Refactoring are no longer
controversial - they are a part of a programmer’s foundation.
Martin Fowler’s book is now a classic.
Most conventional IDEs support automated
refactoring.

17. 17
Erich Gamma
One of the Gang of Four, authored
JUnit with Kent Beck, while on a long flight together,
1997
Great Article by Alberto Savoia: Beautiful Tests
History of xUnit by Martin Fowler
“JUnit took off like a rocket - and was essential to supporting
the growing movement of Extreme Programming and Test
Driven Development. I've seen a huge change of attitude
towards testing in the last decade, and I think JUnit played a
big role in that. By being small and simple it encouraged
people to learn and use it. It also proved amenable to others
extending it integrating it into tools.” — Martin Fowler

18. Lots of JUnit ports, generally
referred to as xUnit
18
nUnit - C#
cppUnit - C++
pyunit- Python

19. Functional Programming/
Behavior-Driven Development
19
Jasmine: TDD with JS from Pivotal Labs
Lettuce: DSL for testing and beyond by Gabriel Falcao

20. Continuous Build Servers
20

21. 21

22. Let’s experience some TDD now
22

23. 23
Anagram Unjumbler
leppa
zizap
couisldei
Unjumble this

24. We will use TypeScript
24
Anders Hejlsberg
Creator of C# and
TypeScript
Superset of Javascript
Supports class-based OO concepts
Takes the tedium out of JS
Keeps you in JS paradigm
(as opposed to coffee script)

25. We will use Testem
25
Continuously runs our unit tests

26. Step 1. git clone https://github.com/behappyrightnow/anagram.git
Step 2. cd anagram
Step 3. git checkout step1
Step 4. Install NodeJS from http://nodejs.org/
Step 5. npm install testem
Let’s start with checking out a basic stub from
Github
26

27. Let’s start by writing tests
27
Come up with 5 English words, jumble them up
Find all other words you can create with those letters
List your tests.
e.g.
INPUT OUTPUT
leppa apple
rodo door, odor

28. Challenge for you
28
Make the following game using existing codebase to help
game show hosts construct a puzzle.
Given an input word, create clues by adding one extra letter.
INPUT OUTPUT
rose horse without “h”
sores without “s”
Game show host can now use this program to construct
their show saying:
Can you find flowers using this clue…
Your web-interface should provide this:

29. PASS 1: Write the code without any tests
PASS 2: Keep your code aside, write tests first and then write code
Reflection: Write an essay on what you learned by comparing Pass 1 and
Pass 2, and in general what you learned from this session
Crack this challenge in the following way:
29