Testing Javascript applications Irina Dumitrascu ruby & - - PowerPoint PPT Presentation

▶
testing javascript applications
SMART_READER_LITE
LIVE PREVIEW

Testing Javascript applications Irina Dumitrascu ruby & - - PowerPoint PPT Presentation

Jul 13, 2023 136 likes •595 views

Testing Javascript applications Irina Dumitrascu ruby & cofeescript | dira.ro , @dira_geek_girl 23 August 2012 Why? Well And Every time you hit refresh & click to test And Every time you hit refresh & click to

slide-1
SLIDE 1

Testing Javascript applications

Irina Dumitrascu

ruby & cofeescript | dira.ro , @dira_geek_girl 23 August 2012

slide-2
SLIDE 2

Why?

slide-3
SLIDE 3

Well…

slide-4
SLIDE 4

And…

Every time you hit refresh & click to test…

slide-5
SLIDE 5

And…

Every time you hit refresh & click to test… God kills a kitten.

slide-6
SLIDE 6

And…

Every time you hit refresh & click to test… God kills a kitten. (image not available)

slide-7
SLIDE 7

Without refresh...

slide-8
SLIDE 8

Without refresh...

We're at the mercy of the machines.

slide-9
SLIDE 9

Show me the code!

slide-10
SLIDE 10

Show me the code!

no code to show :(

slide-11
SLIDE 11

Show me the code!

no code to show :( let's make a new app! :)

slide-12
SLIDE 12

Show me the code!

no code to show :( let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!

slide-13
SLIDE 13

Show me the code!

no code to show :( let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!

Are you crazy?

slide-14
SLIDE 14

Show me the code!

no code to show :( let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!

Are you crazy?

  • r

Do you hate sleeping?

slide-15
SLIDE 15

How it works

the presentation is written in a Markdown file the Markdown is parsed into HTML

h1 is the start of a new slide hr is the start of my notes (hidden)

and enhanced with next and previous

slide-16
SLIDE 16

The fascinating part

I wrote all this functionality test-first.

slide-17
SLIDE 17

The fascinating part

I wrote all this functionality test-first. Without seeing it in the browser until it was done.

slide-18
SLIDE 18

The fascinating part

I wrote all this functionality test-first. Without seeing it in the browser until it was done. And it worked.

slide-19
SLIDE 19

The fascinating part

I wrote all this functionality test-first. Without seeing it in the browser until it was done. And it worked. (Because it was tested.)

slide-20
SLIDE 20

The fascinating part

The result is the presentation that you see right now.

slide-21
SLIDE 21

So let's talk about testing

slide-22
SLIDE 22

Kinds of testing

Unit testing

Does this function behave properly?

Integration testing

Does the application behave properly?

slide-23
SLIDE 23

Unit testing

tests independent functions fast and focused makes sure independent pieces work

slide-24
SLIDE 24

How to do it

  • 1. think about what you must implement
  • 2. break it in small functions
slide-25
SLIDE 25

How to do it

  • 1. think about what you must implement
  • 2. break it in small functions
  • 3. choose a function and write a test for it. watch it fail.
slide-26
SLIDE 26

How to do it

  • 1. think about what you must implement
  • 2. break it in small functions
  • 3. choose a function and write a test for it. watch it fail.
  • 4. write the code that fixes the test
slide-27
SLIDE 27

How to do it

  • 1. think about what you must implement
  • 2. break it in small functions
  • 3. choose a function and write a test for it. watch it fail.
  • 4. write the code that fixes the test

check for refactoring opportunities

slide-28
SLIDE 28

How does it look like?

Let's see a simple test.

slide-29
SLIDE 29

Unit testing

You need to: separate your JS from the DOM (no inline JS) structure the code (classes, modules) separate the definition and the running step (document.ready … ) the smaller the thing to test, the better

slide-30
SLIDE 30

Unit testing - don'ts

do not test for the same thing in multiple tests do not test for texts appearing in the DOM (test for classes and ids)

slide-31
SLIDE 31

Unit testing - do's

test the public interface of each object test for classes and ids (not strings) in the UI mock out dependecies (HTTP requests & HTML in the page, but also collaborators) maintain the tests as you do with the code

slide-32
SLIDE 32

Many tools

Frameworks

jasmine, mocha, buster.js

Separate assertion libraries

chai

Tools

to run the tests from the command line, to integrate with CI

slide-33
SLIDE 33

Added benefits

better structured code

slide-34
SLIDE 34

And…

slide-35
SLIDE 35

But…

the individual pieces work there's no guarantee that they work well together!

slide-36
SLIDE 36

Integration testing

is the application as a whole working as expected? also called acceptance testing

slide-37
SLIDE 37

Integration testing

create scenarios and test that they work have to setup the whole application stack to a known state

slide-38
SLIDE 38

Integration testing

slow do not know about the implementation of individual pieces

slide-39
SLIDE 39

Conclusion

test your code! unit tests and integration tests complement each other

slide-40
SLIDE 40

Conclusion

test your code! unit tests and integration tests complement each other think of the kittens!

slide-41
SLIDE 41

Starring

Tests mocha as Test framework chai as Assertive guy sinon as Mocking and spying specialist Code jQuery Rainbow as Code stylist markdown css as Text stylist

slide-42
SLIDE 42

Presentation http://www.flickr.com/photos/kaibara/4068996309/ as Test Ninja Cat

slide-43
SLIDE 43

Check out the code

https://github.com/dira/js-testing-presentation

slide-44
SLIDE 44

Thank you! Questions?

slide-45
SLIDE 45