testing

#2 Pencils Not Required

✏️

questions:
@zachfedor

who tests their code?

🙌

test

noun:

a procedure intended to establish the quality, performance, or reliability of something, especially before it is taken into widespread use.

who tests their code?

🙌

objective:

make testing approachable

why test?

  • make sure users can do what they need to do
  •  

why automate your tests?

scenario #1

  1. build a thing. be happy.

  2. see if it worked.

  3. it didn't.

  4. be confused...

this is repetitive and time consuming.
tests handle the repetition for you.

📝

why automate your tests?

scenario #2

  1. get a new project. be happy.

  2. build all the things.

  3. look back at your work.

  4. be confused...

code is complex.
tests help document it.

⚠️

why automate your tests?

scenario #3

  1. have a working site. client is happy.
  2. client wants a new thing. make a change.
  3. new stuff works. old stuff doesn't.
  4. be confused...
code grows over time.
tests help prevent growing pains.

🎛️

why automate your tests?

scenario #4

  1. make a new thing. it works.
  2. give it to the client. they're happy.
  3. users still find a way to break it.
  4. be confused...
even simple features have edge cases.
tests help cover all your bases.

🏗️

why automate your tests?

scenario #5

  1. get asked to make a new thing
  2. ...
  3. ...
  4. be confused...
manual tests make you build first.
tests help you design first.

Types Of Tests

Unit: make sure a small piece of code does it's one job well

Integration: make sure two pieces of code work together properly

Acceptance: make sure the user can do a task from start to finish

Examples

Unit

add(2, 3)
user.isLoggedIn()
$input.hasClass("error")

👌

👌

👌

5
true
false
Examples

Integration

form.submit()
$conn->query($sql)
<a onclick="myFunc(e)">

👌

👌

👌

http.response
true
MouseEvent
Examples

Acceptance

👌

👌

👌

A user can create an account

A user can filter a list of products

A user can submit their order

Unit

Integration

Acceptance

Touchpoints

Variables

Code

Resources

Time

Complexity

#

okay.

so what is a test?

// Every Unit Test Should...

Describe the thing you're testing {
    say(what it should do);

    define expected = result;
    // by knowing what it should do

    define actual = result;
    // by doing the thing
    
    compare(actual, expected);
}
// add.js

function add (x, y) {
  return x + y;
}


// add.test.js

describe('add()', () => {
  it('should take two numbers and return their sum', () => {
    const actual = add(2, 3);
    const expected = 5;

    expect(actual).toBe(5);
  );
});

test frameworks

  • jest
  • ava
  • mocha
  • jasmine
  • qunit
  • cucumber
  • tape

assertion libraries

  • assert.js
  • expect.js
  • should.js
  • chai

test utilities

  • sinon
  • enzyme
  • jsdom
  • phantom.js
  • selenium
  • nock
  • supertest

tips and advice

  • every test helps
  • the law of diminishing returns
  • replace console.logs with a test
  • if tests are hard to write, it could mean:
    • your code is hard to test
    • your goal isn't clearly defined
    • you don't fully understand your tools

questions

for new testers

  1. how many of you are thinking about starting to test your code now?
  2. what might be preventing you from starting?

questions

for old testers

  1. what other tips can you offer those who are just starting?
  2. what still trips you up about testing?

thanks!

Testing: #2 Pencils Not Required

By zach fedor

Testing: #2 Pencils Not Required

I'll explain the benefits of automated testing for your front-end code, cover some best practices and helpful tips, and show a demo or three to get you started.

  • 1,426