All tests are also written in ES6. Webpack is used 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
- Mocha
- Chai
To run tests, type npm test
in the terminal. Read more about testing below.
Tools needed to run this app:
node
andnpm
npm install
to install dependencies
Gulp is used to build and launch the development environment. After you have installed all dependencies, you may run the root. Running npm start
will bundle the app with webpack
, launch a development server, and watch all files. The port will be displayed in the terminal.
Here's a list of available tasks:
npm run build
- 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
npm run serve
- starts a dev server via
webpack-dev-server
, serving the client folder.
- starts a dev server via
npm run watch
- alias of
serve
- alias of
npm start
(which is the default task that runs when typinggulp
without providing an argument)- runs
serve
.
- runs
npm run component
- scaffolds a new Angular component. Read below for usage details.
To run the tests, run npm test
.
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.
Mocha
is the testing suite and Chai
is the assertion library. If you would like to change this, see karma.conf.js
.
Following a consistent directory structure between components offers us the certainty of predictability. We can take advantage of this certainty by creating a gulp task to automate the "instantiation" of our components. The component boilerplate task generates this:
⋅⋅⋅⋅⋅⋅componentName/
⋅⋅⋅⋅⋅⋅⋅⋅componentName.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅componentName.component.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.controller.js
⋅⋅⋅⋅⋅⋅⋅⋅componentName.html
⋅⋅⋅⋅⋅⋅⋅⋅componentName.scss // scoped to affect only its own template
⋅⋅⋅⋅⋅⋅⋅⋅componentName.spec.js // contains passing demonstration tests
You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious.
To generate a component, run npm run component -- --name componentName
.
The parameter following the --name
flag is the name of the component to be created. Ensure that it is unique or it will overwrite the preexisting identically-named component.
The component will be created, by default, inside client/app/components
. To change this, apply the --parent
flag, followed by a path relative to client/app/components/
.
For example, running npm run component -- --name signup --parent auth
will create a signup
component at client/app/components/auth/signup
.
Running npm run component -- --name footer --parent ../common
creates a footer
component at client/app/common/footer
.
Because the argument to --name
applies to the folder name and the actual component name, make sure to camelcase the component names.