Update workflows

.editorconfig

@@ -11,3 +11,6 @@ trim_trailing_whitespace = true
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false
+
+[*.yml]
+indent_size = 2

.github/workflows/build.yml

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

.github/workflows/release.yml

@@ -5,7 +5,7 @@ on:
     branches: [main]
 
 env:
-  NODE_VERSION: 16.x
+  NODE_VERSION: 18.x
 
 jobs:
   bump-version:
@@ -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
 
@@ -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 }}
 
@@ -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:
@@ -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

.gitignore

@@ -33,6 +33,8 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+/cypress/downloads
+/cypress/videos
 
 # System Files
 .DS_Store

.vscode/settings.json

@@ -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/**"
+}

angular.json

@@ -97,7 +97,8 @@
           "options": {
             "tsConfig": [
               "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "src/tsconfig.spec.json",
+              "cypress/tsconfig.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -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",
@@ -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": {
@@ -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/**"
@@ -176,6 +151,6 @@
   },
   "defaultProject": "ngx-sherlock-dev",
   "cli": {
-    "packagemanager": "npm"
+    "packageManager": "npm"
   }
 }

cypress.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:4200',
+    supportFile: false
+  },
+})

cypress/e2e/spec.cy.ts

@@ -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();
+};

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+    "name": "Using fixtures to represent data",
+    "email": "[email protected]"
+}
+

cypress/support/commands.ts

@@ -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) => { ... })

cypress/support/e2e.ts

@@ -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';

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    "sourceMap": false,
+    "types": ["cypress"]
+  }
+}