Integration tests with Laika and PhantomJS - testing

Question

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!

Answer 1

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.