Skip to content
Permalink
Browse files
  • Loading branch information
aa7401 committed Nov 11, 2019
2 parents 0c90bcf + d1b3862 commit 1587bf5
Show file tree
Hide file tree
Showing 32 changed files with 777 additions and 7 deletions.
@@ -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

This file was deleted.

@@ -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.
@@ -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

@@ -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()
@@ -3,6 +3,10 @@ body {
font-family: Arial, Helvetica, sans-serif;
}

h1 {
font-size: 18pt
}

.msg {
border: 1px solid red;
font-weight: bold;
@@ -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"

@@ -0,0 +1,8 @@

path:
- "/."
languages:
- javascript
exclude:
- "**/node_modules/**"
reporter: json
@@ -0,0 +1,2 @@
node_modules/
docs/
@@ -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
}
}
@@ -0,0 +1,3 @@
.DS_Store
node_modules/
docs/
@@ -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
@@ -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]
@@ -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
```
@@ -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)
})
@@ -0,0 +1,6 @@

{
"spec_files": [
"acceptance/api-spec.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()

0 comments on commit 1587bf5

Please sign in to comment.