testingmeteorphantomjslaika

Integration tests with Laika and PhantomJS

I just started using Laika for doing some TDD on my Meteor app. Though, I would like to do some integration tests, as unit tests isn't that valuable to me.

Can I do some screen capturing using PhantomJS through Laika? E.g. I want to click html links and select elements by class/id.

I have a basic (unit) test in coffee:

# tests/players_test.coffee

assert = require 'assert'

suite 'Players', ->
  test 'in the server', (done, server) ->
    server.eval ->
      Players.insert title: 'hello there'
      players = Players.find().fetch()
      emit('players', players)

    server.once 'players', (players) ->
      assert.equal 1, players.length
      done()

I would like to convert this into a integration test by using an client (added next to (done, server) in the test function) and then manually selecting tags and clicking links, filling in name etc., clicking e.g. 'register', and then checking if that user is to be found in the database.

Thanks!

Solution

  • Yes you can do this.

    suite 'Players', ->
  test 'in the server', (done, server, client) ->
    client.eval ->
      // get access to a DOM element (can optionally use jQuery instead)
      player = document.querySelector("[data-test='player']")
      // now we can call functions on the element
      player.value = "Joe blogs"
      player.click()
      // if you know the element won't exist in the DOM yet use waitForDOM
      waitForDOM "[data-test='something-else']", ->
         // perform some logic now that the element exists in the DOM
      emit('players', players)

    server.once 'players', (players) ->
      assert.equal 1, players.length
      done()

    You might also want to check out evalSync here: http://arunoda.github.io/laika/syntax-sugar.html

    This lets you write your tests in a synchronous style. It's still being executed asynchronously but it means you don't have to wrap your head around all the different named triggers/subscriptions that the 'eval' tests have. Here are the basics of evalSync...

    suite 'evalSync', ->
    test 'evalSync for the win', (done, server, client) ->
        client.evalSync ->
            // perform some logic on the client
            emit("return")

        server.evalSync ->
            // perform some logic on the server
            emit("return")

        done() // notice this is outside the 'evalSync'

    As a side note, I recommend using "data-test" attributes on your elements (or some other custom data attribute). If you select by class or id in your tests and then later refactor your CSS/HTML you'll have to hunt down which classes/ids are being used by your CSS and which are being used by your tests. Using "data-test" makes it clear for you.