Add livereload capability for html reporters like karma-jasmine-html-reporter

[Sergey Prilukin]

• Operating System: all
• Node Version: any
• NPM Version: any
• webpack Version: any
• karma-webpack Version: 5.0.0

Feature Proposal

Add live reload capability for reporters which run inside a browser like karma-jasmine-html-reporter.
See attached gif to understood how I expect it to work:

Feature Use Case

If I'm running unit tests in a browser with some kind of an HTML reporter I want the ability to automatically refresh the browser page once source code or test code is chanage to immediately see results in the browser.

Currently, i have to manually refresh the page a couple of times until changes are picked up by the browser.

Sample

I've prepared a sample repo. It demonstrates current behavior and expected behavior.

To check current behavior:

• clone https://github.com/sprilukin/karma-webpack-livereload-sample - default branch is main
• run yarn install or npm install
• run yarn run test or npm run test
• open http://localhost:9876 in your favorite browser - you will see success test result
• try to edit karma-webpack-livereload-sample/src/moduleToTest.tests.js and do simple change:

  //expect(moduleToTest(1, 1)).toBe(2);   // <--- original code
  expect(moduleToTest(1, 2)).toBe(2);   // <--- modified code

• ensure that nothing happened in the browser - test result is still successful

To check expected behavior:

• clone https://github.com/sprilukin/karma-webpack-livereload-sample (skip this step if you already cloned the repo)
• checkout livereload branch:

  git checkout -t origin/livereload

• run yarn install or npm install
• run yarn run test or npm run test
• open http://localhost:9876 in your favorite browser - you will see success test result
• try to edit karma-webpack-livereload-sample/src/moduleToTest.tests.js and do simple change:

  //expect(moduleToTest(1, 1)).toBe(2);   // <--- original code
  expect(moduleToTest(1, 2)).toBe(2);   // <--- modified code

• ensure that the browser page refreshed and shows failed test result

Here i used modified version of the karma-webpack library to support livereload
Modified karma-webpack repo could be found here: https://github.com/sprilukin/karma-webpack
Also i created PR #500 which could be used as a base for this feature

[Sergey Prilukin]

For those who are eager to test this feature - i've created karma plugin based on karma-webpack: https://github.com/sprilukin/karma-webpack-livereload