| | |
|---|
| | | |
|---|
| | | The TDD cycle can be illustrated with the following diagram: |
|---|
| | | |
|---|
| | |  |
|---|
| | |  |
|---|
| | | |
|---|
| | | ### The TDD Cycle |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | 4. Repeat the same process for `todolist-api` and verify that all the tests run. If you have an ExpressJS server already running from previous exercise; you should kill it before running the tests. The `mocha` test suite will launch a dev server for running the tests. There are 2 API test files: `todolist-api/server/api/todo/todo.spec.js` & `todolist-api/server/mocks/mock-routes.spec.js` for our API and the Mocks server. Remember to start the `mongo` container before running the tests |
|---|
| | | ```bash |
|---|
| | | npm run mongo:start |
|---|
| | | cd todolist-api |
|---|
| | | ``` |
|---|
| | | ```bash |
|---|
| | | cd todolist-api |
|---|
| | | npm run mongo:start |
|---|
| | | ``` |
|---|
| | | ```bash |
|---|
| | | npm run test |
|---|
| | |
|---|
| | | // TODO - FILL THIS OUT IN THE EXERCISE |
|---|
| | | this.$store.dispatch("updateTodo", {id: this.todoItem._id, important: true}); |
|---|
| | | console.info("INFO - Mark todo as important ", this.todoItem.important); |
|---|
| | | }, |
|---|
| | | } |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 14. Let's connect the click button in the DOM to the Javascript function we've just created. In the template, add a click handler to the md-button to call the function `markImportant()` by adding ` @click="markImportant()"` to the `<md-button>` tag |
|---|
| | |
|---|
| | | </md-button> |
|---|
| | | ``` |
|---|
| | | |
|---|
| | | 15. Finally - we need to make it so that when a new todo item is created it will have an important property. Head to `store/actions.js` and add `important: false` below `completed: false` in the `addTodo(){}` action. |
|---|
| | | 15. Finally - we need to make it so that when a new todo item is created it will have an important property. Head to `src/store/actions.js` and add `important: false` below `completed: false` in the `addTodo(){}` action. |
|---|
| | | |
|---|
| | |  |
|---|
| | | |
|---|
| | |
|---|
| | |  |
|---|
| | | |
|---|
| | | 6. Write the following test code. The pauses allow for the body of the page to render the todo list before exercising the test code: |
|---|
| | | |
|---|
| | | ```javascript |
|---|
| | | module.exports = { |
|---|
| | | "Testing important flag setting": browser => { |
|---|
| | | browser |
|---|
| | | .url(process.env.VUE_DEV_SERVER_URL + '/#/todo') |
|---|
| | | .waitForElementVisible("body", 5000) |
|---|
| | | .pause(5000) |
|---|
| | | .click('#clear-all') |
|---|
| | | .pause(2000) |
|---|
| | | .setValue('input',['set a todo',browser.Keys.ENTER]) |
|---|
| | | .pause(2000) |
|---|
| | | .assert.elementPresent(".important-flag") |
|---|
| | | .assert.elementNotPresent(".red-flag") |
|---|
| | | .click('.important-flag') |
|---|
| | | .end(); |
|---|
| | | } |
|---|
| | | }; |
|---|
| | | ``` |
|---|
| | | <!--  --> |
|---|
| | | |
|---|
| | | <!--  --> |
|---|
| | | |
|---|
| | | 7. Your final E2E test should look like the following: |
|---|
| | | |
|---|
| | |  |
|---|
| | | |
|---|
| | | 7. At this point we should have a working e2e test. We can run this by using `npm run e2e`. When all tests pass, we can push up these changes. |
|---|
| | | 8. At this point we should have a working e2e test. We can run this by using `npm run e2e`. When all tests pass, we can push up these changes. |
|---|
| | | |
|---|
| | | ```bash |
|---|
| | | git add . |
|---|
