From e5f13cc4142057a9114e8ebd172c2644786d036c Mon Sep 17 00:00:00 2001 From: Donal Spring <donalspring@gmail.com> Date: Tue, 03 Jul 2018 15:44:06 +0200 Subject: [PATCH] Merge pull request #238 from Tompage1994/master --- 3-revenge-of-the-automated-testing/README.md | 35 ++++++++++++++++++++++++++++++++++- 1 files changed, 34 insertions(+), 1 deletions(-) diff --git a/3-revenge-of-the-automated-testing/README.md b/3-revenge-of-the-automated-testing/README.md index 91af32c..a1315d4 100644 --- a/3-revenge-of-the-automated-testing/README.md +++ b/3-revenge-of-the-automated-testing/README.md @@ -566,7 +566,40 @@ #### 2c - Create todolist e2e tests -3. TODO !! +> Using [Nightwatch.js](http://nightwatchjs.org/) We will write a reasonably simple e2e test to test the functionality of the feature we just implemented. + +3. Firstly we need to create an e2e spec test file in the correct place. + +```bash +touch tests/e2e/specs/importantFlag.js +``` + +3. Open this new file in your code editor and set out the initial blank template for an e2e test as below: + ![if-e2e-step1](../images/exercise3/if-e2e-step1.png) + +3. Now get the test to access the todos page and wait for it to load. The url can be taken from `process.env.VUE_DEV_SERVER_URL` + ![if-e2e-step2](../images/exercise3/if-e2e-step2.png) + +3. Now click the clear all button and then enter a value in the textbox to create a new item. We clear all first to ensure we start with a fresh list. We now do our first assertion: that a 'important flag' exists (the button to set important), and also that a red flag does not exist. You will quickly find there is no way to reference the clear all button. We will therefore have to go to `src/components/XofYItems.vue` and add `id="clear-all"` to the clear all button. + ![if-e2e-step3](../images/exercise3/if-e2e-step3.png) + ![if-e2e-step3a](../images/exercise3/if-e2e-step3a.png) + +3. We should now get nightwatch to click the flag and check whether the flag has turned red. + ![if-e2e-step4](../images/exercise3/if-e2e-step4.png) + +3. At this point we should have a working e2e test. We can run this by using `npm run e2e`. When satisfied we can push up these changes. + +```bash +git add . +``` + +```bash +git commit -m "Implementing e2e tests" +``` + +```bash +git push +``` --- -- Gitblit v1.9.3