Skip to content

Commit

Permalink
Update workflows (#213)
Browse files Browse the repository at this point in the history
* Update build workflow

* Update release workflow

* Fix typo in caching

* Rewrite Protractor test to Cypress tests

* Ude default cypress directory

* Use GitHub action to run Cypress tests

* Use correct indentation

* Update indentation of settings file

* Use different way to execute Cypress tests

* No need to build lib as it is already built

* Fix bug

* Use separately installed wait-on

* Combine starting app and wait-on

* Cleanup the scripts in package.json

* Remove e2e testing from angular.json

* Also cache path to Cypress binary
  • Loading branch information
guidoderooij committed Apr 2, 2024
1 parent 3fcb4dd commit 0ad50c1
Show file tree
Hide file tree
Showing 19 changed files with 2,591 additions and 241 deletions.
3 changes: 3 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,6 @@ trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false

[*.yml]
indent_size = 2
23 changes: 15 additions & 8 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,27 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x, 16.x, 18.x]
node-version: [18.x, 20.x]

steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4

- name: Use node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}

- name: Cache node_modules
id: cache-modules
uses: actions/cache@v3
uses: actions/cache@v4
with:
path: node_modules
path: |
node_modules
~/.cache
key: ${{ matrix.node-version }}-${{ runner.OS }}-build-${{ hashFiles('package.json') }}

- name: Install
if: steps.cache-modules.output.cache-hit != 'true'
if: ${{ steps.cache-modules.outputs.cache-hit != 'true' }}
run: npm install

- name: Test
Expand All @@ -40,7 +42,12 @@ jobs:
run: npm run lint

- name: Build
run: npm run build:build
run: npm run build:prod

- name: Start Application
run: |
npm install -g wait-on
npm run start:app & wait-on http://localhost:4200
- name: E2E
run: npm run e2e
run: npm run cypress:run
26 changes: 13 additions & 13 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ on:
branches: [main]

env:
NODE_VERSION: 16.x
NODE_VERSION: 18.x

jobs:
bump-version:
Expand All @@ -16,25 +16,25 @@ jobs:
tag-name: ${{ steps.lib-bump.outputs.newTag }}

steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
with:
# This is a public_repo Github personal access token.
token: ${{ secrets.WORKFLOW_GITHUB_TOKEN }}

- name: Bump dev-app version
id: dev-bump
uses: phips28/gh-action-bump-version@v9.1.0
uses: phips28/gh-action-bump-version@v11.0.4
with:
tag-prefix: 'v'
tag-prefix: "v"
skip-tag: true
commit-message: '[CI/CD]: bump dev-app to {{version}}'
commit-message: "[CI/CD]: bump dev-app to {{version}}"

- name: Bump lib version
id: lib-bump
uses: phips28/gh-action-bump-version@v9.1.0
uses: phips28/gh-action-bump-version@v11.0.4
with:
tag-prefix: 'v'
commit-message: '[CI/CD]: bump lib to {{version}}'
tag-prefix: "v"
commit-message: "[CI/CD]: bump lib to {{version}}"
env:
PACKAGEJSON_DIR: projects/politie/ngx-sherlock

Expand All @@ -50,7 +50,7 @@ jobs:
ref: ${{ needs.bump-version.outputs.tag-name }}

- name: Release
uses: softprops/action-gh-release@v1
uses: softprops/action-gh-release@v2
with:
tag_name: ${{ needs.bump-version.outputs.tag-name }}

Expand All @@ -61,20 +61,20 @@ jobs:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v3
- uses: actions/checkout@v4
with:
ref: ${{ needs.bump-version.outputs.tag-name }}

- name: Use node.js ${{ env.NODE_VERSION }}
uses: actions/setup-node@v3
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}

- name: Install
run: npm ci

- name: Build
run: npm run build:ci
run: npm run build:prod

- name: Add token to .npmrc
env:
Expand All @@ -83,6 +83,6 @@ jobs:
# for the four sherlock packages only.
npmToken: ${{ secrets.WORKFLOW_NPM_TOKEN }}
run: echo "//registry.npmjs.org/:_authToken=$npmToken" >> .npmrc

- name: Release
run: npm publish ./dist/politie/ngx-sherlock
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ npm-debug.log
yarn-error.log
testem.log
/typings
/cypress/downloads
/cypress/videos

# System Files
.DS_Store
Expand Down
7 changes: 4 additions & 3 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll": "explicit"
},
"html.format.wrapAttributes": "aligned-multiple",
"html.format.wrapLineLength": 150,
"typescript.tsdk": "node_modules/typescript/lib"
}
"typescript.tsdk": "node_modules/typescript/lib",
"npm.exclude": "**/dist/**"
}
41 changes: 8 additions & 33 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,8 @@
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
"src/tsconfig.spec.json",
"cypress/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
Expand All @@ -106,33 +107,6 @@
}
}
},
"ngx-sherlock-dev-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ngx-sherlock-dev:serve"
},
"configurations": {
"production": {
"devServerTarget": "ngx-sherlock-dev:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"@politie/ngx-sherlock": {
"root": "projects/politie/ngx-sherlock",
"sourceRoot": "projects/politie/ngx-sherlock/src",
Expand All @@ -144,13 +118,13 @@
"options": {
"tsConfig": "projects/politie/ngx-sherlock/tsconfig.lib.json",
"project": "projects/politie/ngx-sherlock/ng-package.json"
}
, "configurations": {
},
"configurations": {
"production": {
"tsConfig": "projects/politie/ngx-sherlock/tsconfig.lib.prod.json"
}
}
},
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
Expand All @@ -164,7 +138,8 @@
"options": {
"tsConfig": [
"projects/politie/ngx-sherlock/tsconfig.lib.json",
"projects/politie/ngx-sherlock/tsconfig.spec.json"
"projects/politie/ngx-sherlock/tsconfig.spec.json",
"cypress/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
Expand All @@ -176,6 +151,6 @@
},
"defaultProject": "ngx-sherlock-dev",
"cli": {
"packagemanager": "npm"
"packageManager": "npm"
}
}
8 changes: 8 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { defineConfig } from 'cypress'

export default defineConfig({
e2e: {
baseUrl: 'http://localhost:4200',
supportFile: false
},
})
51 changes: 51 additions & 0 deletions cypress/e2e/spec.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
// Disable Cypress retry mechanism as it will retry a couple of times, each with a pause of a second.
// For the tests we want to check that after one second the value has changed so it is better not to
// rely on the framework to do the waiting, instead we use cy.wait(1100).
const noRetries = {
runMode: 0,
openMode: 0,
};

describe('workspace-project App', () => {
it('Visits the initial project page', () => {
cy.visit('/');
cy.get('app-root h1').contains('Welcome to the demo of @politie/ngx-sherlock');
});

it('should update the auto changedetection every second', { retries: noRetries }, done => {
cy.visit('/');
checkTime(getAutoCDClock, done);
});

it('should update the value pipe every second', { retries: noRetries }, done => {
cy.visit('/');
checkTime(getPipeClock, done);
});

it('should update the value proxy pipe every second', { retries: noRetries }, done => {
cy.visit('/');
checkTime(getProxyPipeClock, done);
});
});

const checkTime = (func: () => Cypress.Chainable<JQuery<HTMLElement>>, done: Mocha.Done) => {
func().invoke('text').then((timeFirst) => {
cy.wait(1100);
func().invoke('text').then((timeSecond) => {
expect(timeSecond).not.to.equal(timeFirst);
done();
});
});
};

const getAutoCDClock = () => {
return cy.get('app-auto-change-detection-service time').first();
};

const getPipeClock = () => {
return cy.get('app-value-pipe time.base-clock').first();
};

const getProxyPipeClock = () => {
return cy.get('app-value-pipe time.base-clock').last();
};
5 changes: 5 additions & 0 deletions cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "[email protected]"
}

43 changes: 43 additions & 0 deletions cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
// ***********************************************
// This example namespace declaration will help
// with Intellisense and code completion in your
// IDE or Text Editor.
// ***********************************************
// declare namespace Cypress {
// interface Chainable<Subject = any> {
// customCommand(param: any): typeof customCommand;
// }
// }
//
// function customCommand(param: any): void {
// console.warn(param);
// }
//
// NOTE: You can use it like so:
// Cypress.Commands.add('customCommand', customCommand);
//
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
17 changes: 17 additions & 0 deletions cypress/support/e2e.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// ***********************************************************
// This example support/e2e.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// When a command from ./commands is ready to use, import with `import './commands'` syntax
// import './commands';
8 changes: 8 additions & 0 deletions cypress/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"extends": "../tsconfig.json",
"include": ["**/*.ts"],
"compilerOptions": {
"sourceMap": false,
"types": ["cypress"]
}
}
Loading

0 comments on commit 0ad50c1

Please sign in to comment.