Support live reloading

[geekyme]

Hello,

I see a nice jasmine suite UI with the status for my test cases on http://localhost:9876/debug.html?

However, when I edit my spec or code, I realized that I need to manually refresh the debug page in order to see the new results.

Is there a way to make the debug page auto refresh when i change my code? Thanks!

[taras42]

Hi, have you tried this one https://github.com/computmaxer/karma-jasmine-html-reporter-livereload ?

[tomitrescak]

Yup, does not work :/

[jonnyreeves]

So I have a basic proof of concept working by creating a new connection to the local socket.io server and triggering a window.location.reload when the connect message is recieved - esentially I am just adding the following to to lib/adapter.js:

document.write('<script src="/socket.io/socket.io.js"></script>');
document.write('<script>(function () { ' + 
    '    var socket = io(window.location.host, { path: "/socket.io" }); ' + 
    '    socket.on("execute", function () { window.location.reload(); }); ' + 
    '}());</script>');

It's ugly as sin, but it appears to work...

[taras42]

Hi, great that it's works. I can't add it right now, busy. But if you want, you can examine how index.js injects scripts into page. There you can add socket.io, biside other scripts. And this code:

 var socket = io(window.location.host, { path: "/socket.io" });
 socket.on("execute", function () { window.location.reload(); });

Can be moved then to reporter itself (separate function) which can be called somewhere during initialization.

[jonnyreeves]

@taras42, sure, so I can modify index.js to have the following:

var initReporter = function(config,  baseReporterDecorator) {
  var host = config.hostname + ':' + config.port;

  config.files.unshift(createPattern('http://' + host + '/socket.io/socket.io.js'));
  config.files.unshift(createPattern(__dirname + '/lib/adapter.js'));
  config.files.unshift(createPattern(__dirname + '/lib/html.jasmine.reporter.js'));
  config.files.unshift(createPattern(__dirname + '/css/jasmine.css'));
};

However the problem is that there is no guaruntee when the io object (exported to the global by socket.io.js) will be present (as the scripts are loaded async). Perhaps there is a karma event I can listen to / a neat hack I can use to determine when the socket connection can be established (setInternval, lol!)?

[taras42]

The proper way would be probably to add socket.io (client) as a dependency in package.json, and then load it into index.js, just like other files.

But maybe there is some karma event, it would be nice. Need to investigate.

[jonnyreeves]

Heh, ok getting closer, so need to to load (and connect to) socket.io, instead we can inject the emitter into index.js and bind to the file_list_modified event, ie:

var initReporter = function(config,  baseReporterDecorator, emitter) {
 /* ... */
  emitter.on('file_list_modified', function (files) {
    console.log('reload!');
  })
};

initReporter.$inject = ['config',  'baseReporterDecorator', 'emitter' ];

The problem I now have is I'm unsure how to pass this even through to lib/adapter.js; I could use callback on the global; but that feels pretty icky, any other suggestions?

Sorry for all the questions; this is my first stint at hacking on Jasmine and the docs for this kind of thing feel a little light (mainly just looking at other reporters and trying to hack things together ;)

Also, on a side note I have added another button to the UI to toggle auto-refresh; so this should be a fairly complete feature if we can get it to land :D

[frederikschubert]

Is this still being worked on? It would be a great improvement for the TDD workflow.

[jonnyreeves]

Not by myself, switched to mocha and sinon I'm afraid. Good luck

[yuqianma]

If you are using requirejs, revise @taras42 's code and put it at the end of test-main.js like that:

require(['/socket.io/socket.io.js'], function (io) {
  var socket = io(window.location.host, { path: "/socket.io" });
  socket.on("execute", function () {
    window.location.reload();
  });
})

seems work! Thanks @taras42 ~

[mrfishball]

put the refresh-debug.js in the project root:

(function (window) {
  if (window.location.pathname === '/context.html') {
    window.open('/debug.html', 'debugTab')
  }
})(window)

then, in your karma.conf.js:

files: [
      './refresh-debug.js',
      ...
      ]

[sprilukin]

If you are using karma-webpack along with karma-jasmine-html-reporter it's now easy to achieve livereload with the help of this karma plugin: [https://www.npmjs.com/package/karma-webpack-livereload]()