| | |
| | | Starting with another new test, the cycle is then repeated to push forward the functionality. The size of the steps should always be small, with as few as 1 to 10 edits between each test run. If new code does not rapidly satisfy a new test, or other tests fail unexpectedly, the programmer should undo or revert in preference to excessive debugging. |
| | | |
| | | ### Testing Bananalogy |
| | | Explanation of Mocha and js test syntax through Bananalogy! Imagine for a moment; we're not building software but creating a bowl of fruit. To create a `Bunch of Bananas` component for our fruit bowl we could start with our tests as shown below. |
| | | Explanation of Mocha and JS test syntax through Bananalogy! Imagine for a moment; we're not building software but creating a bowl of fruit. To create a `Bunch of Bananas` component for our fruit bowl we could start with our tests as shown below. |
| | | ![bdd-bananas](../images/exercise3/bdd-bananas.png) |
| | | * `describe` is used to group tests together. The string `"a bunch of ripe bananas"` is for human reading and allows you to identify tests. |
| | | * `it` is a statement that contains a test. It should contain an assertion such as `expect` or `should`. It follows the syntax of `describe` where the string passed in identifies the statement. |
| | |
| | | |
| | | > The goal of this exercise is to add a new component to the application using TDD to create and validate it's behaviour. The User story we have been given is as follows: |
| | | |
| | | *As a doer I want to mark todos as important so that I can keep track of and complete high prirority todos first* |
| | | *As a doer I want to mark todos as important so that I can keep track of and complete high priority todos first* |
| | | |
| | | _Acceptance Criteria_ |
| | | - [ ] should be doable with a single click |
| | |
| | | 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) |
| | | |
| | | 2. 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. |
| | | 2. 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. |
| | | ```bash |
| | | cd todolist-api |
| | | ``` |
| | |
| | | npm run test |
| | | ``` |
| | | |
| | | 2. Navigate to your instance of jenkins at `https://jenkins-<YOUR_NAME>-ci-cd.apps.lader.rht-labs.com/`. |
| | | 2. Navigate to your instance of Jenkins at `https://jenkins-<YOUR_NAME>-ci-cd.apps.lader.rht-labs.com/`. |
| | | Click on `dev-todolist-fe-build` and then click the `configure` button on the left-hand side. |
| | | ![jenkins-configure-job](../images/exercise3/jenkins-configure-job.png) |
| | | |
| | |
| | | }); |
| | | ``` |
| | | |
| | | 3. Next we need to update the `server/config/seed.js` file so that the pre-generated todos have an important propety. Add `important: true` below `completed: *` for each object. Don't forget to add a comma at the end of the `completed: *` line. |
| | | 3. Next we need to update the `server/config/seed.js` file so that the pre-generated todos have an important property. Add `important: true` below `completed: *` for each object. Don't forget to add a comma at the end of the `completed: *` line. |
| | | ![api-add-seed-important](../images/exercise3/api-add-seed-important.png) |
| | | |
| | | 3. With your changes to the Database schema updated; re-run your tests. |
| | |
| | | git push -u origin feature/important-flag |
| | | ``` |
| | | |
| | | 3. Let's get our tests running by executing a `--watch` on our tests. This will keep re-running our tests everytime there is a file change. It is hany to have this running in a new terminal session. |
| | | 3. Let's get our tests running by executing a `--watch` on our tests. This will keep re-running our tests everytime there is a file change. It is handy to have this running in a new terminal session. |
| | | ```bash |
| | | npm run test -- --watch |
| | | ``` |
| | |
| | | }); |
| | | ``` |
| | | |
| | | 3. Finally, we want to make the flag clickable and for it to call a function to update the state. The final test in the `TodoItem.spec.js` we want to create should simulate this behaviour. Implement the `it("call makImportant when clicked", () ` test by first simulating the click of our important-flag and asserting the function `markImportant()` to write is executed. |
| | | 3. Finally, we want to make the flag clickable and for it to call a function to update the state. The final test in the `TodoItem.spec.js` we want to create should simulate this behaviour. Implement the `it("call markImportant when clicked", () ` test by first simulating the click of our important-flag and asserting the function `markImportant()` to write is executed. |
| | | ```javascript |
| | | it("call makImportant when clicked", () => { |
| | | it("call markImportant when clicked", () => { |
| | | const wrapper = mount(TodoItem, { |
| | | methods, |
| | | propsData: { todoItem: importantTodo } |