Merge branch 'master' of https://github.coventry.ac.uk/web/dynamic-we…

…bsites

03 Acceptance Testing.md

@@ -94,11 +94,25 @@ You have seen how to use Puppeteer to write a test to see that we can add a sing
 
 ### 1.2 Snapshots
 
-As you develop your interface you will be designing specific page layouts and need to make sure that you don't break these as you add more features. Snapshots are part of the development process.
+The acceptance tests in the previous section interact with the [Document Model Object](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), they have no way to understand the appearance of the page as this is influenced by the [Cascading Stylesheets](https://developer.mozilla.org/en-US/docs/Web/CSS) that are being applied to the page. Clearly it is important that our acceptance tests should also check that the page renders as it should and [Snapshot Testing](https://jestjs.io/docs/en/snapshot-testing) enables us to achieve this.
+
+In essence we identify the important screens in the app (the ones we wish to monitor), get the layout the way we expect it to be and capture a screenshot of the page which is stored in a `__image_snapshots_/` directory then used as a reference whenever the test suite is subsequently run. Since you have already triggered an inital test run you should be able to locate this directory and examine the image file it contains.
+
+The snapshot is captured using the following two lines of code:
+
+```javascript
+const image = await page.screenshot()
+expect(image).toMatchImageSnapshot()
+```
+
+Sometimes you will need to modify the page layout however this will cause the snapshot test to fail since there will no longer be a match. The solution is to run the test suite but add a `-u` flag. This will update the snapshot files.
 
 #### 1.2.1 Test Your Understanding
 
-xxx
+1. Modify the stylesheet and make the top level heading larger (perhaps `28pt`).
+2. Now re-run the acceptance test suite, this will fail because the layout is now different.
+3. Edit the `test.sh` script, adding the `-u` flag, save this change and rerun the test suite.
+4. Remove the `-u` flag and rerun the tests to check these are still passing.
 
 ## 2 Profiling
 
@@ -131,7 +145,9 @@ There are many more settings you can experiment with to help understand the perf
 
 ### 2.1 Test Your Understanding
 
-xxx
+1. Look at the graphs and figures that are produced for the todo code profiling and identify the different stages and different time taken for each.  Are there any stages where you feel the timing is significantly long.
+2. Run the todo code three times and compare the time taken for each of stages involved.  Do they different? Is there any reason why this might be the case?
+3. Using the har analyzer how long does it take for the server to respond.  
 
 ### 2.2 Flame Graphs
 
@@ -176,7 +192,8 @@ Hovering over a box will reveal more information.
 
 ### 2.2.1 Test Your Understanding
 
-xxx
+1. Looking at the flame graph which process is consuming the most CPU cycles?  Is it possible to optimise this process to reduce the cycles?
+2. Looking at the flame graph which process what is the hot path for the code.
 
 ## 3 Cucumber
 

04 DevOps.md

@@ -0,0 +1,28 @@
+
+# DevOps
+
+In this lab you will learn how to deploy your app to a cloud server and how to set up a complete devops build chain. For this tutorial you will need to have an account on the [GitLab](https://gitlab.com) server as we will be learning how to use the GitLab CI continuous integration tools. (Note that GitHub has recently introduced a rival service called [GitHub Actions](https://github.com/features/actions) however at the time of writing this was still in Beta).
+
+Create an account using your University email address and log in. Create an empty private repository called devops and make a note of the git clone URL.
+
+You should now clone the `template-dynamic-website` repository (the original template, not the one you have been using for your assignment) into a temporary location on your computer.
+
+```shell
+git clone https://github.coventry.ac.uk/web/template-dynamic-websites.git temp
+```
+
+Once cloned you need to _mirror push_ to the empty gitlab repository.
+
+```shell
+cd temp/ && git push --mirror xxx
+```
+
+## Deploying to the Cloud
+
+Using Heroku
+
+## Running a CI Workflow
+
+Introduction to CI and gitlab Ci
+
+Committing and pushing to trigger the workflow.

exercises/03_acceptance/cucumber/cucumberTest.sh

@@ -1,5 +1,8 @@
 #!/usr/bin/env bash
 
+# force the script to exit on first fail
+set -e
+
 # create any directories needed by the test script
 mkdir -p screenshots
 

exercises/03_acceptance/todo/acceptance tests/ui.test.js

@@ -87,7 +87,7 @@ describe('todo list', () => {
 		const image = await page.screenshot()
 		// compare to the screenshot from the previous test run
 		expect(image).toMatchImageSnapshot()
-		// stop logging to the trace file
+		// stop logging to the trace files
 		await page.tracing.stop()
 		await har.stop()
 		done()

exercises/03_acceptance/todo/public/style.css

@@ -3,6 +3,10 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+h1 {
+  font-size: 18pt
+}
+
 .msg {
   border: 1px solid red;
   font-weight: bold;

exercises/03_acceptance/todo/test.sh

@@ -1,5 +1,13 @@
 #!/usr/bin/env bash
 
+set -e
+echo hello
+mkdir -p screenshots
+mkdir -p trace
+rm -rf *.db
+# [ ! -d "node_modules" ] && echo "INSTALLING MODULES" && npm install
 node index.js&
 node_modules/.bin/jest --runInBand --detectOpenHandles acceptance\ tests/*
 kill %1
+read -p "Press enter to continue"
+

exercises/04_devops/.cpd.yml

@@ -0,0 +1,8 @@
+
+path:
+  - "/."
+languages:
+  - javascript
+exclude:
+  - "**/node_modules/**"
+reporter: json

exercises/04_devops/.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+docs/

exercises/04_devops/.eslintrc.json

@@ -0,0 +1,57 @@
+
+{
+	"env": {
+		"es6": true,
+		"jasmine": true,
+		"node": true
+	},
+	"parserOptions": {
+    "ecmaVersion": 8
+	},
+	"rules": {
+		"arrow-body-style": 2,
+		"arrow-spacing": [1, { "before": true, "after": true }],
+		"brace-style": 2,
+    "camelcase": [2, {"properties": "never"}],
+    "complexity": [2, {"max": 3}],
+		"eol-last": 1,
+		"eqeqeq": 2,
+		"global-require": 2,
+		"handle-callback-err": 2,
+		"indent": [1, "tab", { "SwitchCase": 1 }],
+		"key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
+    "linebreak-style": [1, "unix"],
+    "max-depth": ["error", {"max": 4}],
+    "max-len": ["error", { "code": 80 }],
+    "max-nested-callbacks": ["error", {"max": 3}],
+    "max-params": ["error", {"max": 3}],
+    "max-statements": ["error", {"max": 10}],
+		"no-cond-assign": 2,
+		"no-dupe-args": 2,
+		"no-dupe-keys": 2,
+		"no-duplicate-case": 2,
+		"no-empty": 1,
+		"no-empty-function": 1,
+		"no-multiple-empty-lines": 1,
+		"no-extra-parens": 2,
+		"no-func-assign": 2,
+		"no-irregular-whitespace": 1,
+		"no-magic-numbers": [1, { "ignore": [-1, 0, 1, 2] }],
+		"no-multi-spaces": 1,
+		"no-multi-str": 1,
+		"no-unexpected-multiline": 2,
+		"no-unreachable": 2,
+		"no-self-assign": 2,
+		"no-trailing-spaces": 1,
+		"no-undef": 2,
+		"no-unused-vars": 1,
+		"no-var": 2,
+		"prefer-arrow-callback": 1,
+		"prefer-const": 2,
+		"quotes": [1, "single"],
+		"semi": [1, "never"],
+		"space-before-function-paren": [1, "never"],
+		"strict": [2, "global"],
+		"yoda": 2
+	}
+}

exercises/04_devops/.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+node_modules/
+docs/

exercises/04_devops/.gitlab-ci.yml

@@ -0,0 +1,80 @@
+image: node:latest
+
+stages:
+  - code-testing
+  - staging-server
+  - acceptance-testing
+
+linting:
+  stage: code-testing
+  script:
+    - npm install
+    - npm run linter
+
+dependency-checks:
+  stage: code-testing
+  script:
+    - npm install
+    - npm run dependency
+
+code-duplication:
+  stage: code-testing
+  script:
+    - npm install
+    - npm run duplication
+
+unit-testing:
+  stage: code-testing
+  script:
+  - npm install
+  - npm test
+
+code-coverage:
+  stage: code-testing
+  script:
+    - npm install
+    - npm run coverage
+    - npm run check-coverage
+
+coverage-report:
+  stage: staging-server
+  script:
+    - npm install
+    - npm run coverage
+    #- mv ./docs/coverage/ public/
+  artifacts:
+    paths:
+      - docs
+    expire_in: 30 days
+  only:
+    - master
+
+deploy-staging-server:
+  stage: staging-server
+  script:
+  - apt-get update -qy
+  - apt-get install -y ruby ruby-dev rubygems-integration
+  - gem install dpl
+  - dpl --provider=heroku --app=notes-api-test --api-key=95023c27-5a9d-4250-a3fd-d2e19e0dac02
+  only:
+  - master
+
+acceptance-tests:
+  stage: acceptance-testing
+  script:
+    - npm install --only=dev
+    - npm run acceptance
+  only:
+    - master
+
+# https://docs.gitlab.com/ce/ci/examples/test-and-deploy-python-application-to-heroku.html
+
+# production:
+#   type: deploy
+#   script:
+#   - apt-get update -qy
+#   - apt-get install -y ruby-dev
+#   - gem install dpl
+#   - dpl --provider=heroku --app=gitlab-ci-python-test-prod --api-key=$HEROKU_PRODUCTION_API_KEY
+#   only:
+#   - tags

exercises/04_devops/.istanbul.yml

@@ -0,0 +1,10 @@
+
+instrumentation:
+    excludes: ['*-spec.js', 'spec/*', 'integration/*']
+reporting:
+    dir: ./docs/coverage/
+    watermarks:
+        statements: [50, 80]
+        lines:      [50, 80]
+        functions:  [50, 80]
+        branches:   [50, 80]

exercises/04_devops/README.md

@@ -0,0 +1,11 @@
+
+# Notes
+
+This code is designed to demonstrate the use of Continuous Integration.
+
+## Dependencies
+```
+npm install
+npm install --only=dev
+npm install --only=production
+```

exercises/04_devops/acceptance/api-spec.js

@@ -0,0 +1,21 @@
+
+'use strict'
+
+const frisby = require('frisby')
+const status = require('../status-codes.json')
+const url = 'https://notes-api-test.herokuapp.com'
+console.log(url)
+console.log(status.ok)
+
+it('should be a teapot', done => {
+	frisby.get('http://httpbin.org/status/200')
+		.expect('status', status.ok)
+		.done(done)
+});
+
+it ('should return a status of 200', done => {
+	frisby
+		.get(`${url}/notes`)
+		.expect('status', status.ok)
+		.done(done)
+})

exercises/04_devops/acceptance/jasmine.json

@@ -0,0 +1,6 @@
+
+{
+	"spec_files": [
+    "acceptance/api-spec.js"
+	]
+}

exercises/04_devops/acceptance/testRunner.js

@@ -0,0 +1,20 @@
+
+'use strict'
+
+const Jasmine = require('jasmine')
+const jasmine = new Jasmine()
+
+jasmine.loadConfigFile('acceptance/jasmine.json')
+
+const JasmineConsoleReporter = require('jasmine-console-reporter')
+const reporter = new JasmineConsoleReporter({
+	colors: true,
+	cleanStack: true,
+	verbosity: 3,
+	listStyle: 'indent',
+	activity: true
+})
+
+jasmine.addReporter(reporter)
+
+jasmine.execute()