feat: add jest-support (#89)

Author: chihab

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
           node-version: 18
       - uses: pnpm/action-setup@v2
         with:
-          version: 7.27.1
+          version: 8.8.0
       - name: Install Packages
         run: |
           pnpm i
@@ -31,7 +31,7 @@ jobs:
           cd examples
           npx playwright install --with-deps
           cd apps/ng-app-cli
-          npx ng add ../../../packages/angular --skip-confirmation
+          # npx ng add ../../../packages/angular --skip-confirmation
           npx tsc --noEmit --project tsconfig.app.json
           cd -
           pnpm build:all

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm test

examples/apps/ng-app-cli/.env

@@ -1,4 +1,3 @@
-USER_HOME=/home/chihab
 NGX_VERSION=IGNORED_SINCE_SET_IN_ENV_LOCAL
-NGX_USER_HOME=$USER_HOME
+NGX_BRANCH=main
 

examples/apps/ng-app-cli/.env.test

@@ -0,0 +1,2 @@
+NGX_VERSION=12.0.0
+NGX_BRANCH=test

examples/apps/ng-app-cli/angular.json

@@ -36,7 +36,6 @@
             },
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.css"],
-            "scripts": [],
             "server": "src/main.server.ts",
             "prerender": true,
             "ssr": {
@@ -190,7 +189,8 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "ngxEnv": {
-              "prefix": "NGX_"
+              "prefix": "NGX_",
+              "unsecure": true
             },
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.css"],

examples/apps/ng-app-cli/jest.config.mjs

@@ -0,0 +1,21 @@
+const jestConfig = {
+  preset: "jest-preset-angular/presets/defaults-esm",
+  setupFilesAfterEnv: ["<rootDir>/setup-jest.ts"],
+  testMatch: ["<rootDir>/src/app/**/*.(spec|jest).ts"],
+  cache: false,
+  moduleNameMapper: {
+    "^rxjs(/operators$)?$":
+      "<rootDir>/node_modules/rxjs/dist/bundles/rxjs.umd.js",
+    tslib: "<rootDir>/node_modules/tslib/tslib.es6.mjs",
+  },
+  transform: {
+    "^.+\\.(ts)$": [
+      "@dotenv-run/jest-angular",
+      {
+        useESM: true,
+      },
+    ],
+  },
+};
+
+export default jestConfig;

examples/apps/ng-app-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-app-cli",
-  "version": "0.0.0",
+  "version": "10",
   "scripts": {
     "ng": "ng",
     "watch": "ng build --watch --configuration development",
@@ -11,7 +11,8 @@
     "build:esbuild-browser": "NODE_ENV=production ng run ng-app-cli:build-be",
     "build:browser": "NODE_ENV=production ng run ng-app-cli:build-browser",
     "pretest": "npx ng config projects.ng-app-cli.architect.test.options.ngxEnv.prefix 'NGX_'",
-    "test": "NODE_ENV=test NGX_BRANCH_NAME=main ng test --watch=false",
+    "test": "NODE_ENV=test NGX_BRANCH=test ng test --watch=false",
+    "test:jest": "NODE_OPTIONS=--experimental-vm-modules NODE_ENV=test npx jest",
     "e2e": "playwright test",
     "static": "serve dist/ng-app-cli/browser/fr -p 8081"
   },
@@ -47,6 +48,13 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.2.2"
+    "typescript": "~5.2.2",
+    "ts-jest": "^29.1.2",
+    "@jest/transform": "^29.7.0",
+    "esbuild": "0.20.0",
+    "jest": "^29.7.0",
+    "jest-preset-angular": "14.0.0",
+    "@dotenv-run/core": "*",
+    "@dotenv-run/jest-angular": "*"
   }
 }

examples/apps/ng-app-cli/setup-jest.ts

@@ -0,0 +1,10 @@
+import { env } from '@dotenv-run/core';
+env({ root: '../../..', files: ['.env', '.env.app'] });
+import 'jest-preset-angular/setup-jest.mjs';
+
+import '@angular/localize/init';
+import { TextEncoder } from 'util';
+Object.defineProperty(window, 'TextEncoder', {
+  writable: true,
+  value: TextEncoder,
+});

examples/apps/ng-app-cli/src/app/app.component.html

@@ -21,9 +21,9 @@ <h2>{{ title }}</h2>
       </td>
     </tr>
     <tr>
-      <td>USER_HOME</td>
+      <td>BRANCH</td>
       <td>
-        <span id="USER_HOME">{{ home }}</span>
+        <span id="VERSION"> {{ branch }} </span>
       </td>
     </tr>
   </tbody>

examples/apps/ng-app-cli/src/app/app.component.spec.ts

@@ -1,22 +1,25 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AppComponent],
     }).compileComponents();
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+  it('should create the app 2', () => {
+    expect(component).toBeTruthy();
   });
 
   it(`should have the 'Hello world' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('Hello world');
+    expect(component.title).toEqual('Hello world');
+    expect(component.branch).toEqual('test');
   });
 });