Donal Spring
2018-04-16 91b203c1aa6da0972b32cde398c1f5ea3239fff8
Merge pull request #140 from rht-labs/exercise3/tests-in-pipeline

Exercise3/tests in pipeline
11 files added
2 files modified
81 ■■■■■ changed files
exercises/2-attack-of-the-pipelines/README.md 2 ●●● patch | view | raw | blame | history
exercises/3-revenge-of-the-automated-testing/README.md 79 ●●●●● patch | view | raw | blame | history
exercises/images/exercise3/api-build-step.png patch | view | raw | blame | history
exercises/images/exercise3/api-fail-build.png patch | view | raw | blame | history
exercises/images/exercise3/api-post-build.png patch | view | raw | blame | history
exercises/images/exercise3/change-test-to-fail.png patch | view | raw | blame | history
exercises/images/exercise3/jenkins-build-step.png patch | view | raw | blame | history
exercises/images/exercise3/jenkins-configure-job.png patch | view | raw | blame | history
exercises/images/exercise3/jenkins-with-failing-build.png patch | view | raw | blame | history
exercises/images/exercise3/post-build-actions.png patch | view | raw | blame | history
exercises/images/exercise3/screenshot-scripts.png patch | view | raw | blame | history
exercises/images/exercise3/test-run-locally.png patch | view | raw | blame | history
exercises/images/exercise3/xunit-action.png patch | view | raw | blame | history
exercises/2-attack-of-the-pipelines/README.md
@@ -65,7 +65,7 @@
2. Git clone the `todolist-fe` project to somewhere sensible and checkout the `develop` branch.
```bash
$ git clone https://github.com/springdo/todolist-fe.git
$ git cd todolist-fe
$ cd todolist-fe
$ git checkout develop
```
exercises/3-revenge-of-the-automated-testing/README.md
@@ -47,27 +47,95 @@
- [ ] should display existing todos that are marked important with an red flag
## Step by Step Instructions
> This is a fairly structured guide with references to exact filenames and sections of text to be added.
### Part 1 - Tests in our Pipeline
> _In this exercise we will improve the pipeline created already by adding some unit tests for the frontend & backend along with some end to end tests (e2e) to validate the full solution_
#### Part 1a - Unit tests
> In this exercise we will execute our test for the frontend and backend locally. Once verified we will add them to Jenkins.
2.  TODO - show tests running locally etc (fe and api)
2. Before linking our automated testing to the pipeline we'll first ensure the tests run locally. Change to the `todolist-fe` directory and run `test`.
```bash
$ cd todolist-fe
$ npm run test
```
<p class="tip" >
`test` is an alias used that runs `vue-cli-service test` from the scripts object in `package.json`
</p>
![new-gitlab-proj](../images/exercise3/screenshot-scripts.png)
3.  TODO - add tests to jenkins with screenshots etc.
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.
![new-gitlab-proj](../images/exercise3/test-run-locally.png)
2. Repeat the same process for `todolist-api` and verify that all the tests run.
```bash
$ cd todolist-api
$ npm run test
```
2. Navigate to your instance of jenkins at `https://jenkins-<YOUR_NAME>-ci-cd.apps.s8.core.rht-labs.com/`.
Click on `dev-todolist-fe-build` and then click the `configure` button on the left-hand side.
![new-gitlab-proj](../images/exercise3/jenkins-configure-job.png)
2. Scroll to the `Build` part of the configuration page and add `scl enable rh-nodejs8 'npm run test'` below `scl enable rh-nodejs8 'npm install'`. Click `save` or `apply` at the bottom to save the changes.
![new-gitlab-proj](../images/exercise3/jenkins-build-step.png)
2. Scroll to the `Post-build Actions` section and click `Add post-build action`. Select `Publish xUnit test result report`.
![new-gitlab-proj](../images/exercise3/xunit-action.png)
2. Click the `Add` button under `Publish xUnit test result report` and select `JUnit`. In the pattern field enter `test-report.xml`. In the `Failed Tests Thresholds`  input box enter 0 under `Red Ball Total`. It should look a little something like this:
![new-gitlab-proj](../images/exercise3/post-build-actions.png)
2. Click `save` or `apply` at the bottom to save the changes. Rerun the `dev-todolist-fe-build` job and verify that this passes and the `build` and `bake` jobs are both triggered.
2. We're now going to deliberately fail a test to ensure that `bake` and `deploy` jobs aren't triggered if any tests fail. Go to `ListOfTodos.spec.js` in `/tests/unit/vue-components` and head to `line 38`. Add `not.` before `toHaveBeenCalled()`.
![new-gitlab-proj](../images/exercise3/change-test-to-fail.png)
2. Push this to Gitlab and rerun the build job.
```bash
$ git add .
$ git commit -m "Deliberately failed test to test the pipeline stops me deploying broken code"
$ git push
```
2. Rerun the `dev-todolist-fe-build` job. It should have failed and not run any other builds.
![new-gitlab-proj](../images/exercise3/jenkins-with-failing-build.png)
2. Undo the changes you made to the `ListOfTodos.spec.js` file, commit your code and rerun the build. This should trigger a full `build --> bake --> deploy` of `todolist-fe`.
2. We're now going to do the same for the api. Head to the `configure` panel of the `dev-todolist-api-build` job.
2. Add `scl enable rh-nodejs8 'npm run test:ci'` above `npm run build:ci`.
![new-gitlab-proj](../images/exercise3/api-build-step.png)
2. Scroll to the `Post-build Actions` section and click `Add post-build action`. Select `Publish xUnit test result report`.
2. Click the `Add` button under `Publish xUnit test result report` and select `JUnit`. In the pattern field enter `reports/server/mocha/test-results.xml`. In the `Failed Tests Thresholds`  input box enter 0 under `Red Ball Total`. It should look a little something like this:
![new-gitlab-proj](../images/exercise3/api-post-build.png)
2. We're now going to deliberately fail a test again to ensure that `bake` and `deploy` jobs aren't triggered if any tests fail. Go to `todo.spec.js` in `/server/api/todo` and head to `line 35`. Replace `false` with `true`.
![new-gitlab-proj](../images/exercise3/api-fail-build.png)
2. Push this to Gitlab and rerun the build job.
```bash
$ git add .
$ git commit -m "Deliberately failed test to test the pipeline stops me deploying broken code"
$ git push
```
2. If successful this will fail the build and not run the `bake` or `deploy` jobs. Don't forget to remove the changes that you made to your tests!
#### Part 1b - End to End tests (e2e)
> TODO - this section is not complete
2.  Add new part to the dev pipeline (`dev-todolist-fe-e2e`)
3.  Add tests and reports to Jenkins
2. Add e2e tests and reporting to Jenkins
### Part 2 - TodoList new feature
> _In this exercise we will introduce a new feature to create an important flag on the todos. In order to be able to build and test our feature we will use TDD_
*As a doer I want to mark todos as important so that I can keep track of and complete high prirority todos first*
@@ -83,7 +151,6 @@
- [ ] should display existing todos that are marked important with an red flag
#### Part 1a - Create todolist-api tests
> Using [Mocha](https://mochajs.org/) as our test runner; we will now write some tests for backend functionality to persist our important-flag. The changes required to the backend are minimal but we will use TDD to create our test first, then implement the functionality.
3.  Create a new branch in your `todolist-api` app for our feature and push it to the remote
exercises/images/exercise3/api-build-step.png
exercises/images/exercise3/api-fail-build.png
exercises/images/exercise3/api-post-build.png
exercises/images/exercise3/change-test-to-fail.png
exercises/images/exercise3/jenkins-build-step.png
exercises/images/exercise3/jenkins-configure-job.png
exercises/images/exercise3/jenkins-with-failing-build.png
exercises/images/exercise3/post-build-actions.png
exercises/images/exercise3/screenshot-scripts.png
exercises/images/exercise3/test-run-locally.png
exercises/images/exercise3/xunit-action.png