This is Range Slider Component I created using AngularJS 1.5.6 + ES6
Tools needed to run this app:
node
andnpm
Once you have these, install the following as globals:npm install -g gulp karma karma-cli webpack
fork
this repoclone
your forknpm install -g gulp karma karma-cli webpack
install global cli dependenciesnpm install
to install dependencies
All tests are also written in ES6. We use Webpack to take care of the logistics of getting those files to run in the various browsers, just like with our client files. This is our testing stack:
- Karma
- Webpack + Babel
- Jasmine
To run tests, type npm test
or karma start
in the terminal.
Here's a list of available tasks:
webpack
- runs Webpack, which will transpile, concatenate, and compress (collectively, "bundle") all assets and modules into
dist/bundle.js
. It also preparesindex.html
to be used as application entry point, links assets and created dist version of our application.
- runs Webpack, which will transpile, concatenate, and compress (collectively, "bundle") all assets and modules into
serve
- starts a dev server via
webpack-dev-server
, serving the client folder.
- starts a dev server via
watch
- alias of
serve
- alias of
default
(which is the default task that runs when typinggulp
without providing an argument)- runs
serve
.
- runs
To run the tests, run npm test
or karma start
.
Karma
combined with Webpack runs all files matching *.spec.js
inside the app
folder. This allows us to keep test files local to the component--which keeps us in good faith with continuing to build our app modularly. The file spec.bundle.js
is the bundle file for all our spec files that Karma will run.
Be sure to define your *.spec.js
files within their corresponding component directory. You must name the spec file like so, [name].spec.js
. If you don't want to use the .spec.js
suffix, you must change the regex
in spec.bundle.js
to look for whatever file(s) you want.