jeudi 28 juillet 2016

Testing socket.io with Zombie.js across two browsers

I'm building a real time chat app using node and socket.io. Having problems trying to feature test using Zombie. The app itself is working fine in browser but test is failing with the message

AssertionError: expected '' to include 'Hello'

During debugging it seems that when Zombie presses the send button it does not fire the 'chat message' event - though it does in development.

describe('chat feature', function() {

  beforeEach(function(done) {
    browser1 = new Browser({
      site: "http://localhost:3000"
    });
    browser2 = new Browser({
      site: "http://localhost:3000"
    });
    done();
  });

  beforeEach(function(done) {
    browser1.visit('/', done);
  });

  beforeEach(function(done) {
    browser2.visit('/', done);
  });

  describe("Chat page has been rendered", function() {
    beforeEach(function(done) {
      browser2.pressButton('Javascript testing');
      browser2.fill('.chatbox-input', 'Hello');
      browser2.pressButton('Send', done);
    });
    it('sends chat messages between browsers', function(done) {
      expect(browser1.text('li')).to.contain('Hello');
      done();
    });
  });
});

And the HTML (dynamically loading scripts into content div using jquery)

<html>

<head>
  <title>Global Code Network</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>

  <div class="main">
    <h1>Global Code Network</h1>
    <div id="content"></div>
  </div>

  <div class="bottom-bar">
    <h2>Current requests:</h2>
    <div id="join-rooms"></div>
  </div>

  <script id="chat-template" type="text/template">
    <ul id="messages"></ul>
    <form id="chatbox" action="">
      <input type="text" class="chatbox-input" id="m" name="chat-input" autocomplete="off" />
      <input type="submit" value="Send"></input>
    </form>
  </script>
  <script id="end-chat-template" type="text/template"></script>
  <script src="/http://ift.tt/1aeIZU4"></script>
  <script src="http://ift.tt/1pTZRh4"></script>
  <script src="/scripts/main.js"></script>
</body>
</html>

Client side JS

(function(exports) {

  var socket = io();
  
  socket.on('person joined', function(data) {
    $('.bottom-bar').remove();
    $('#content').html($('#chat-template').html());
    $('#chatbox').submit(function(e) {
      e.preventDefault();
      socket.emit('chat message', {
        roomID: data.roomID,
        message: $('#m').val()
      });
      $('#m').val('');
    });
    socket.on('chat message', function(data) {
      $('#messages').append($('<li>').text(data.message));
    });
  });

  exports.socket = socket;

})(this);

And server side JS

io.on('connection', function(socket) {
  socket.on('join room', function(data) {
    socket.join(data.roomID);
    io.to(data.roomID).emit('person joined', {
      roomID: data.roomID
    });

    socket.broadcast.emit('update available rooms', {
      rooms: rooms
    });
  });

  socket.on('chat message', function(data) {
    io.to(data.roomID).emit('chat message', data);
  });
});

Thanks

Aucun commentaire:

Enregistrer un commentaire