| | |
| | | </p> |
| | | ![screenshot-scripts](../images/exercise3/screenshot-scripts.png) |
| | | |
| | | 2. This command will run all `*spec.js` files. Our test files are stored in the following places. There are 12 Frontend test files stored in these directories: `todolist-fe/tests/unit/vue-components/*` & `todolist-fe/tests/unit/javascript/*` |
| | | 2. This command will run all `*spec.js` files. Our test files are stored in the following places. There are 12 front end test files stored in these directories: `todolist-fe/tests/unit/vue-components/*` & `todolist-fe/tests/unit/javascript/*` |
| | | |
| | | 2. You should see an output similar to the following. The above command has run a test suite for every `*.spec.js` file. The table generated in the terminal shows the code coverage. We're going to be focusing on the unit tests for now. |
| | | ![test-run-locally](../images/exercise3/test-run-locally.png) |
| | |
| | | - `res.body.should.be.instanceof(Array);` is the actual test call |
| | | - `done();` tells the test runner that `mocha` has finished execution. This is needed as the http calls are asynchronous. |
| | | |
| | | 3. With this knowledge; let's implement our test for the `important` flag. We expect the fronted to introduce a new property on each `todo` that gets passed to the backend called `important`. The API will need to handle this new property and pass it into the mongodb. Let's begin implementing this functionality by writing our test case. Navigate to the `PUT /api/todos` section of the `server/api/todo/todo.spec.js` test file (which should be at the bottom) |
| | | 3. With this knowledge; let's implement our test for the `important` flag. We expect the front end to introduce a new property on each `todo` that gets passed to the backend called `important`. The API will need to handle this new property and pass it into the mongodb. Let's begin implementing this functionality by writing our test case. Navigate to the `PUT /api/todos` section of the `server/api/todo/todo.spec.js` test file (which should be at the bottom) |
| | | ![todo-api-tests](../images/exercise3/todo-api-tests.png) |
| | | |
| | | 3. Before writing our test; let's first make sure all the existing tests are passing. |
| | |
| | | $ npm run start |
| | | ``` |
| | | |
| | | #### Part 2b - Create todolist-fe tests |
| | | #### 2b - Create todolist-fe tests |
| | | > Using [Jest](https://facebook.github.io/jest/) as our test runner and the `vue-test-utils` library for managing our vue components; we will now write some tests for frontend functionality to persist our important-flag. The changes required to the front end are quite large but we will use TDD to create our test first, then implement the functionality. |
| | | |
| | | Our TodoList App uses `vuex` to manage the state of the apps' todos and `axios` HTTP library to connect to the backend. `Vuex` is an opinionated framework for managing application state and has some key design features you will need to know to continue with the exercise. |