Client side testing

About myself

• Jolt's CTO (www.jolt.us)
• Former software engineer at Wix.com
• Client side & server side developer
• Love Javascript, Java and Scala

This talk is NOT about

• TDD
• Angular / React / Any specific framework
• QA
• Everything about testing

What this talk is about

• Better architecture
• Good testing = better night sleep
• Easier to work together as a group
• Faster context switching
• Self documenting code
• Shorter feedback loop - faster detection of code smells

Domain

Application

Framework

Adapters

How

to
test?

Unit tests

Integration

tests

End-to-end

test

Domain

Application

Framework

Adapters

End 2 end

tests

automating
​user stories

browser
  .signup({email, password})
  .logout()
  .assert.visible('.login')
  .login({email, password:'wrong pass'})
  .waitForElementVisible('.error', 5000)
  .assert.containsText('.error', 'Wrong password')
  .login({email, password})
  .waitForUrlChange({timeout: 5000})
  .assert.urlContains('/dashboard')
  .assert.visible('.logout')
  .end();

Tools

Selenium

Phantom Js

Nightwatch

docker

About E2E tests

• S-l-o-w...
• Breaks easily
• Should only test common user stories
• Test a complete interaction
• Requires to setup a whole system to test against

Unit

tests

describe("camel case",()=>{
  it("convert 'camel case' to 'camelCase'", ()=>{
    /* given */
    var caser = new Caser();

    /* when */
    var answer = caser.toCamelCase('hello world');

    /* then */
    assertThat(answer, equalTo('helloWorld'))
  })
})

describe("camel case",()=>{
  it("convert `camel case` to `camelCase`", ...)
  it("convert `Camel Case` to `camelCase`", ...)
  it("convert `CamelCase`  to `camelCase`", ...)
  it("convert `camel-case` to `camelCase`", ...)
  it("convert `camel_case` to `camelCase`", ...)
})

  /* returns `undefined` */
  messageSender.sendMessage("foo bar");

Dependents

Data providers

Action dispatchers

Mocks

Stubs

fakes a response from a dependent instance

tests if an expected call was made to a dependent instance

describe("MessagesSender",()=>{
  it("should send a message", ()=>{
    var server = Mock(ServerApi);
    /* given */
    var ms = new MessagesSender(server);

    /* when */
    ms.sendMessage("foo bar");

    /* then */
    assertThat(server.postMsg, wasCalledWith("foo%20bar"))
  })
})

describe("MessagesSender",()=>{
  it("should fail if server returns 404", ()=>{
    var server = Stub(ServerApi);

    /* given */
    whenCalled(server.get).returns({statusCode:404});
    var ms = new MessagesSender(server);

    /* when */
    var res = ms.sendMessage("foo bar");

    /* then */
    assertThat(res, hasProperty('error',"404 NOT FOUND"))
  })
})

Data providers?

Action dispatchers

Stub

Mock

testing

YOUR

application

it("should render todo items", () => {
  
  /* given */
  var provider = Stub(TodoListProvider);
  provider.getTodos.returns(Promise.resolve([t1,t2,t3])

  /* when */
  var instance = shallow(
    <TodoList provider={provider} />
  );

  /* then */
  assertThat(instance.find(TodoItem), hasSize(3));
});

About unit tests

• Test one unit a time
• Run super fast
• Most of the tests should be unit tests
• Tests functionality and code branching
• Uses mocks and stubs

Tools

Mocha

Sinon

Hamjest

Chai

Integration

tests

  var messagesStore = 
    new MessagesStore("http://localhost:8080");

  // how to test this?!
  messagesStore.postMessage("hello world")

Adapters

My

system

Not my

system

making sure the contract is intact

Integration with the server

Integration with the DOM

3rd party components

other libraries

it("should save messages", () => {
  
  // given
  var messagesStore = 
      new MessagesStore("http://localhost:8080");

  // when
  return messagesStore.postMessage("hello world")
    .then(()=> messagesStore.getMessage())
    .then(messages=> {
      assertThat(messages, hasSize(1));
      assertThat(messages[0], equalsTo("hello world");
    })
});

About integration tests

• Testing integration with an outside system
• test against a real system
• Can be slow
• May break when your dependencies changes
• Will find bugs between difference products

Tools

Karma

Request

JQuery

enzyme

Jasmine

RECAP

Unit tests

Integration

E2E

Q's?
A's!