Feature/ci pipelines (#2)

* Fixed tests, added ci command, and added az pipeline for later

* Added gh actions

* Fix

* removed flag

* Added PR templates

* Added remotes

.azuredevops/pull_request_template.md

+# What this feature does
+
+<!---
+    NB: Overview of the feature
+--->
+
+## Steps to test the feature
+
+<!---
+    NB: Add multiple titles for multiple user flows, include steps with links etc
+--->
+
+## Checklist
+
+<!--
+    NB: Don't remove these checklist items from your PR. Use a ~~strike through~~ to indicate an item isn't applicable
+-->
+The PR author has:
+
+- [ ] Reviewed the file diff in the PR before assigning a reviewer
+- [ ] Checked the feature in the application locally and confirms the feature is functional and satisfies the Acceptance Criteria in the issue
+- [ ] Included unit tests in this PR
+- [ ] Assigned a code reviewer
+
+**Note**: When merging use `squash commit` and delete the feature branch
+
+## Further Notes & Commit Messages

.github/pull_request_template.md

+# What this feature does
+
+<!---
+    NB: Overview of the feature
+--->
+
+## Steps to test the feature
+
+<!---
+    NB: Add multiple titles for multiple user flows, include steps with links etc
+--->
+
+## Checklist
+
+<!--
+    NB: Don't remove these checklist items from your PR. Use a ~~strike through~~ to indicate an item isn't applicable
+-->
+The PR author has:
+
+- [ ] Reviewed the file diff in the PR before assigning a reviewer
+- [ ] Checked the feature in the application locally and confirms the feature is functional and satisfies the Acceptance Criteria in the issue
+- [ ] Included unit tests in this PR
+- [ ] Assigned a code reviewer
+
+**Note**: When merging use `squash commit` and delete the feature branch
+
+## Further Notes & Commit Messages

.github/workflows/github-actions.yml

+name: Hello World
+
+on:
+  push:
+    branches:
+      - main
+      - feature/*
+      - bugfix/*
+      - hotfix/*
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test-build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 14.x ]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run audit
+    - run: npm run lint
+    - run: npm run test-ci
+    - run: npm run build
\ No newline at end of file

.gitignore

@@ -3,4 +3,7 @@
 .parcel-cache/
 coverage
 dist
-node_modules
\ No newline at end of file
+node_modules
+cobertura-coverage.xml
+junit.xml
+test-report.html
\ No newline at end of file

README.md

@@ -6,6 +6,11 @@ A simple "[Hello World](https://hello.dholmes.co.uk)" application.
 
 ![hello-world](https://user-images.githubusercontent.com/1830123/137368817-6215896d-c379-4582-97f3-53aad8574986.png)
 
+Remotes:
+
+1. [Azure DevOps](https://dev.azure.com/codecupltd/DesHolmes/_git/dholmes.co.uk-blog-frontend-code-quality-example)
+2. [GitHub](https://github.com/desholmes/dholmes.co.uk-blog-frontend-code-quality-example)
+
 This project uses:
 
 1. [JavaScript](https://en.wikipedia.org/wiki/JavaScript)
@@ -37,4 +42,7 @@ This project uses:
 |`npm run prettier-lint-fix`|Runs `prettier-fix` and `lint-fix` NPM scripts|
 |`npm start`|Runs a local development server using the [Parcel Bundler](https://parceljs.org/)|
 |`npm test`|Runs the unit test cases using [Jest](https://jestjs.io/)|
+|`npm run test-cov-serve`|Runs `http-serve` to statically serve the unit test coverage reports|
+|`npm run test-reprot-serve`|Runs `http-serve` to statically serve the unit test report|
+|`npm run test-ci`|Runs the unit test cases using [Jest](https://jestjs.io/) and generates reports|
 |`npm run test-watch`|Runs [Jest](https://jestjs.io/) with the `--watchAll` argument|

azure-pipelines.yml

+name: hello-example-$(BuildID)
+
+trigger:
+  branches:
+    include:
+      - main
+      - feature/*
+      - bugfix/*
+      - hotfix/*
+
+pool:
+  vmImage: "ubuntu-18.04"
+
+steps:
+  - task: NodeTool@0
+    inputs:
+      versionSpec: "14.x"
+    displayName: "Install Node.js"
+
+  - script: |
+      npm audit --audit-level=high
+    displayName: "NPM: Audit dependencies (high)"
+    
+  - script: |
+      npm ci
+    displayName: "NPM: install deps"
+
+  - script: |
+      npm run lint
+    displayName: "Tests: Lint"
+
+  - script: |
+      npm run test-ci
+    displayName: "Tests: Jest"
+
+  - script: |
+      npm run build
+    displayName: "Prod build"
+
+  - task: PublishTestResults@1
+    condition: succeededOrFailed()
+    inputs:
+      testRunner: JUnit
+      testResultsFiles: '**/junit.xml'
+
+  - task: PublishCodeCoverageResults@1
+    condition: succeededOrFailed()
+    inputs:
+      codeCoverageTool: "Cobertura"
+      summaryFileLocation: "**/coverage/cobertura-coverage.xml"

package.json

@@ -4,6 +4,7 @@
   "description": "Example frontend development code quality repo for the blog post: https://dholmes.co.uk/blog/frontend-development-code-quality/",
   "repository": "https://github.com/desholmes/dholmes.co.uk-blog-frontend-code-quality-example",
   "scripts": {
+    "audit": "npm audit --audit-level=high",
     "clean": "rm -rf ./dist/*.css ./dist/*.map ./dist/*.html ./dist/*.js ./dist/*.jpg ./dist/*.png ./dist/*.ico",
     "build": "npm run clean && parcel build ./src/index.html",
     "build-serve": "http-server dist/",
@@ -13,7 +14,10 @@
     "prettier-fix": "./node_modules/.bin/prettier --write ./src/",
     "prettier-lint-fix": "npm run prettier-fix && npm run lint-fix",
     "start": "./node_modules/.bin/parcel ./src/index.html",
-    "test": "jest --coverage",
+    "test": "jest --coverage ./src/modules/**/*.test.js",
+    "test-ci": "jest --reporters=jest-junit --coverage=true  --coverageDirectory=./coverage --coverageReporters=cobertura html --testResultsProcessor=./node_modules/jest-html-reporter --bail=true",
+    "test-cov-serve": "http-server coverage/",
+    "test-report-serve": "http-server test-report.html",
     "test-watch": "jest --watchAll"
   },
   "author": "Des Holmes https://github.com/desholmes",
@@ -29,7 +33,14 @@
     "eslint-plugin-jest": "^25.0.6",
     "http-server": "^13.0.2",
     "jest": "27.2.5",
+    "jest-html-reporter": "^3.4.1",
+    "jest-junit": "^13.0.0",
     "parcel": "^2.0.0-rc.0",
     "prettier": "^2.1.2"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
+    }
   }
 }

src/__mocks__/styleMock.js

+module.exports = {};
\ No newline at end of file