Add livereload capability for html reporters like karma-jasmine-html-reporter
sprilukin opened this issue · comments
- 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 ismain
- run
yarn install
ornpm install
- run
yarn run test
ornpm 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
ornpm install
- run
yarn run test
ornpm 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
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