feat: app e2e (#190)

* feat: app e2e

* feat: github actions

* feat: github actions auto comments

* feat: github actions auto comments

* feat: github actions auto comments

* fix: ci

* fix: ci

.github/pull_request_template.md

@@ -6,6 +6,6 @@
 
 Please check if your PR fulfils the following requirements:
 
-- [x] The commit message follows [the guidelines](./contributing.md#commit)
 - [ ] Tests for the changes have been added (for bug fixes/features)
 - [ ] Docs have been added/updated (for bug fixes/features)
+- [x] The commit message follows [the guidelines](./contributing.md#commit)

.github/semantic.yml

@@ -1,12 +1,11 @@
 # https://github.com/zeke/semantic-pull-requests#configuration
 titleOnly: true
 scopes:
-  - breadcrumb-demo
-  - demo
-  - app-demo
-  - simple-demo
-  - xng-breadcrumb
   - lib
+  - e2e
+  - docs
+  - demo-app
+
 types:
   - feat
   - fix

.github/workflows/auto-comment.yml

@@ -4,7 +4,7 @@ jobs:
   run:
     runs-on: ubuntu-latest
     steps:
-      - uses: bubkoo/auto-comment@v1.0.7
+      - uses: wow-actions/auto-comment@v1
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           issuesOpenedReactions: 'eyes, +1'
@@ -20,5 +20,5 @@ jobs:
           pullRequestOpenedComment: >
             Hello 👋 @{{ author }}
             <br>
-            Thank you for raising your pull request.
-            Please make sure you have followed our [contributing guidelines](https://github.com/udayvunnam/xng-breadcrumb/blob/main/.github/contributing.md). We will review it as soon as possible.
+            Thank you for raising your pull request 😄. We will review 👀 it as soon as possible.
+            Please make sure you have followed our [contributing guidelines](https://github.com/udayvunnam/xng-breadcrumb/blob/main/.github/contributing.md).

.github/workflows/ci.yml

@@ -22,13 +22,39 @@ jobs:
       # The "--stop-agents-after" is optional, but allows idle agents to shut down once the "e2e-ci" targets have been requested
       # - run: npx nx-cloud start-ci-run --distribute-on="5 linux-medium-js" --stop-agents-after="e2e-ci"
 
-      # Cache node_modules
-      - uses: actions/setup-node@v3
+      # # Cache node_modules
+      # - uses: actions/setup-node@v3
+      #   with:
+      #     node-version: 20
+      #     cache: 'npm'
+      # - run: npm ci
+
+      # Setup pnpm
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Restore cached npm dependencies
+        uses: actions/cache/restore@v3
+        with:
+          path: |
+            node_modules
+            ~/.cache/Cypress # needed for the Cypress binary
+          key: npm-dependencies-${{ hashFiles('pnpm-lock.yaml') }}
+      - run: pnpm install --frozen-lockfile
+      - name: Cache npm dependencies
+        uses: actions/cache/save@v3
         with:
-          node-version: 20
-          cache: 'npm'
-      - run: npm ci
+          path: |
+            node_modules
+            ~/.cache/Cypress # needed for the Cypress binary
+          key: npm-dependencies-${{ hashFiles('pnpm-lock.yaml') }}
+
       - uses: nrwl/nx-set-shas@v4
+      # This line is needed for nx affected to work when CI is running on a PR
+      - run: git branch --track main origin/main
+
+      - run: pnpm nx affected -t lint build --parallel=3  # add test
 
-      - run: npx nx-cloud record -- nx format:check
-      - run: npx nx affected -t lint test build e2e-ci
+      - name: Install playwright browsers
+        run: npx playwright install --with-deps
+      - run: pnpm nx affected -t e2e-ci --parallel=1

README.md

@@ -4,15 +4,17 @@
 
 > A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. <https://www.npmjs.com/package/xng-breadcrumb>
 
-[![CircleCI](https://dl.circleci.com/status-badge/img/gh/udayvunnam/xng-breadcrumb/tree/main.svg?style=shield)](https://dl.circleci.com/status-badge/redirect/gh/udayvunnam/xng-breadcrumb/tree/main)
+[![CI](https://github.com/udayvunnam/xng-breadcrumb/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/udayvunnam/xng-breadcrumb/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb)
 ![bundle size](https://img.shields.io/bundlephobia/minzip/xng-breadcrumb)
 [![license](https://img.shields.io/npm/l/xng-breadcrumb.svg)](https://github.com/udayvunnam/xng-breadcrumb/blob/main/LICENSE)
 
 ![npm downloads](https://img.shields.io/npm/dt/xng-breadcrumb?style=social)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 ![Twitter follow](https://img.shields.io/twitter/follow/udayvunnam_?style=social)

apps/got-e2e/src/base.spec.ts

@@ -4,7 +4,7 @@ test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
-test('defualt breadcrumbs for books', async ({ page }) => {
+test('default breadcrumbs for books', async ({ page }) => {
   await page.getByText('Books').click();
 
   const breadcrumb = page.locator('xng-breadcrumb');

apps/got/src/test-setup.ts

@@ -1,4 +1,3 @@
-// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
 globalThis.ngJest = {
   testEnvironmentOptions: {
     errorOnUnknownElements: true,

apps/minimal/src/test-setup.ts

@@ -1,4 +1,3 @@
-// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
 globalThis.ngJest = {
   testEnvironmentOptions: {
     errorOnUnknownElements: true,

docs/README.md

@@ -4,7 +4,7 @@
 
 > A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. <https://www.npmjs.com/package/xng-breadcrumb>
 
-[![CircleCI](https://dl.circleci.com/status-badge/img/gh/udayvunnam/xng-breadcrumb/tree/main.svg?style=shield)](https://dl.circleci.com/status-badge/redirect/gh/udayvunnam/xng-breadcrumb/tree/main)
+[![CI](https://github.com/udayvunnam/xng-breadcrumb/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/udayvunnam/xng-breadcrumb/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb)
 ![bundle size](https://img.shields.io/bundlephobia/minzip/xng-breadcrumb)
 [![license](https://img.shields.io/npm/l/xng-breadcrumb.svg)](https://github.com/udayvunnam/xng-breadcrumb/blob/main/LICENSE)

docs/local-development-guide.md

@@ -12,7 +12,7 @@ If you wish to contribute to this repository, below are the steps for local deve
 
 Run `pnpm build` to build the library and demo app together. The build artifacts will be stored in the `dist/` directory.
 
-This step is used by CircleCI to build both the library and the demo app.
+This step is used by CI to build both the library and the demo app.
 After a successful build, the demo apps are deployed to Vercel.
 
 ## Publish to npm
@@ -26,7 +26,7 @@ This ingternally uses standard-version to
 - commit bump files and changelog
 - create a new tag with the new version number
 
-CircleCI gets notified on every new tag push and publishes the library if build and tests are success
+GitHub Actions CI gets notified on every new tag push and publishes the library if build and tests are success
 
 ## Tests
 

nx.json

@@ -12,7 +12,7 @@
       "!{projectRoot}/src/test-setup.[jt]s",
       "!{projectRoot}/test-setup.[jt]s"
     ],
-    "sharedGlobals": []
+    "sharedGlobals": ["{workspaceRoot}/.github/workflows/ci.yml"]
   },
   "targetDefaults": {
     "@angular-devkit/build-angular:application": {

package.json

@@ -13,65 +13,65 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~17.2.0",
-    "@angular/cdk": "^17.3.0",
-    "@angular/common": "~17.2.0",
-    "@angular/compiler": "~17.2.0",
-    "@angular/core": "~17.2.0",
-    "@angular/forms": "~17.2.0",
-    "@angular/material": "^17.3.0",
-    "@angular/platform-browser": "~17.2.0",
-    "@angular/platform-browser-dynamic": "~17.2.0",
-    "@angular/router": "~17.2.0",
+    "@angular/animations": "~17.2.4",
+    "@angular/cdk": "^17.3.2",
+    "@angular/common": "~17.2.4",
+    "@angular/compiler": "~17.2.4",
+    "@angular/core": "~17.2.4",
+    "@angular/forms": "~17.2.4",
+    "@angular/material": "^17.3.2",
+    "@angular/platform-browser": "~17.2.4",
+    "@angular/platform-browser-dynamic": "~17.2.4",
+    "@angular/router": "~17.2.4",
     "@ngneat/falso": "^7.2.0",
     "@nx/angular": "18.1.1",
     "angular-in-memory-web-api": "^0.17.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.2",
+    "zone.js": "~0.14.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~17.2.0",
-    "@angular-devkit/core": "~17.2.0",
-    "@angular-devkit/schematics": "~17.2.0",
-    "@angular-eslint/eslint-plugin": "~17.0.0",
-    "@angular-eslint/eslint-plugin-template": "~17.0.0",
-    "@angular-eslint/template-parser": "~17.0.0",
-    "@angular/cli": "~17.2.0",
-    "@angular/compiler-cli": "~17.2.0",
-    "@angular/language-service": "~17.2.0",
+    "@angular-devkit/build-angular": "~17.2.3",
+    "@angular-devkit/core": "~17.2.3",
+    "@angular-devkit/schematics": "~17.2.3",
+    "@angular-eslint/eslint-plugin": "~17.0.1",
+    "@angular-eslint/eslint-plugin-template": "~17.0.1",
+    "@angular-eslint/template-parser": "~17.0.1",
+    "@angular/cli": "~17.2.3",
+    "@angular/compiler-cli": "~17.2.4",
+    "@angular/language-service": "~17.2.4",
     "@nx/devkit": "18.1.1",
     "@nx/eslint": "18.1.1",
     "@nx/eslint-plugin": "18.1.1",
     "@nx/jest": "18.1.1",
     "@nx/js": "18.1.1",
     "@nx/playwright": "18.1.1",
     "@nx/workspace": "18.1.1",
-    "@playwright/test": "^1.36.0",
-    "@schematics/angular": "~17.2.0",
+    "@playwright/test": "^1.42.1",
+    "@schematics/angular": "~17.2.3",
     "@swc-node/register": "~1.8.0",
-    "@swc/core": "~1.3.85",
-    "@swc/helpers": "~0.5.2",
-    "@types/jest": "^29.4.0",
+    "@swc/core": "~1.3.107",
+    "@swc/helpers": "~0.5.8",
+    "@types/jest": "^29.5.12",
     "@types/node": "18.16.9",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "all-contributors-cli": "^6.26.1",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "~8.48.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-playwright": "^0.15.3",
-    "jest": "^29.4.1",
-    "jest-environment-jsdom": "^29.4.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-preset-angular": "~14.0.3",
-    "jsonc-eslint-parser": "^2.1.0",
-    "ng-packagr": "~17.2.0",
+    "jsonc-eslint-parser": "^2.4.0",
+    "ng-packagr": "~17.2.1",
     "nx": "18.1.1",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.38",
     "postcss-url": "~10.1.3",
-    "prettier": "^2.6.2",
-    "ts-jest": "^29.1.0",
+    "prettier": "^2.8.8",
+    "ts-jest": "^29.1.2",
     "ts-node": "10.9.1",
-    "typescript": "~5.3.2"
+    "typescript": "~5.3.3"
   }
 }