search

alferov / generator-universal-module

A Yeoman generator for creating universal JavaScript modules that work everywhere using ES2015, Babel, Webpack, Mocha, Chai, Karma, Sinon, Isparta, ESLint
20 stars 1 forks source link

mocha tests in browser? #2

Open himalayafan opened 9 years ago

himalayafan commented 9 years ago

Hey. Any plans, or is there any option to run mocha unit tests in the browser? E.g. mocha!. in front of the file name, and then open example port 8080 and see the tests? A test runner thing.

alferov commented 9 years ago

The easiest way to run Mocha tests in a browser is to use karma & commonjs loader like webpack or browserify. It's preconfigured in this boilerplate already. npm run test-browser does the trick, but according the previously opened issue it doesn't work on Windows. Could you provide more information, for example the content of npm-debug.log?

himalayafan commented 9 years ago

Regarding this, where is the .html file located? If I run this in browser, I expect an html file, and what port to open?

himalayafan commented 9 years ago

Hi. I investigated this now, and found out there are typos etc in the package.json that windows don't like. For the browsers test, I get it running if I do this karma start --single-run in the cli.

Regarding what I mentioned in the other ticket about isparta. This one has to be installed global to get it to work in the cli, but it will throw this: Unable to resolve file [_mocha]

However. I used this boilerplate a lot before https://github.com/babel/generator-babel-boilerplate. But I didn't like the fact I was forced to use gulp, so I decided to switch to yours. Anyway. Take a look at this file: https://github.com/babel/generator-babel-boilerplate/tree/master/app/templates/test

This boilerplate let you run the tests in the browser. And they are using livereload for it. You don't have that as I understand? Browser unit tests with webpack, not livereload.

Maybe webpack server?

This is an old dependency, but you get the idea what I'm thinking about: https://github.com/webpack/mocha-loader

alferov commented 9 years ago

There is no need in html files for karma. It uses its own loaders: karma-chrome-launcher, karma-firefox-launcher, karma-ie-launcher. Using that approach, it pre-processes files specified in the settings on the fly, and runs the result in the launcher. You can go even further and use CI tools like karma-sauce-launcher, which provides integration with travis & sause labs. It allows us to test the code in whole range of different browsers and operation systems automatically. Just take a look in angularjs karma configuration file.

Currently the generator uses karma-phantomjs-launcher that runs browser tests headlessly.

And they are using livereload for it. You don't have that as I understand? Browser unit tests with webpack, not livereload.

I do. karma start --no-single-run launches karma in the "watch" mode rerunning tests after changes. It's preconfigured in npm run tdd-browser script.