feat: add jest-support

.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');
   });
 });

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

@@ -14,6 +14,5 @@ export class AppComponent {
   title = $localize`Hello world`;
   env = import.meta.env['NODE_ENV'];
   version = environment.env.NGX_VERSION;
-  appHome = import.meta.env['NGX_USER_HOME'];
-  home = import.meta.env['NGX_USER_HOME'];
+  branch = import.meta.env['NGX_BRANCH'];
 }

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

@@ -0,0 +1 @@
+<p>hello works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HelloComponent } from './hello.component';
+
+describe('HelloComponent', () => {
+  let component: HelloComponent;
+  let fixture: ComponentFixture<HelloComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HelloComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HelloComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hello',
+  standalone: true,
+  imports: [],
+  templateUrl: './hello.component.html',
+  styleUrl: './hello.component.css'
+})
+export class HelloComponent {
+
+}

examples/apps/ng-app-cli/tests/app.spec.ts

@@ -2,6 +2,6 @@ import { test, expect } from '@playwright/test';
 
 test('has title', async ({ page }) => {
   await page.goto('/');
-  await expect(page).toHaveTitle('0.0.0');
+  await expect(page).toHaveTitle('10');
   await expect(page.locator('h1')).toHaveText('production');
 });

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

@@ -5,6 +5,11 @@
     "outDir": "./out-tsc/app",
     "types": ["node", "@angular/localize"]
   },
-  "files": ["src/main.ts", "src/polyfills", "src/main.server.ts", "server.ts"],
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts",
+    "src/main.server.ts",
+    "server.ts"
+  ],
   "include": ["src/**/*.d.ts"]
 }

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

@@ -17,12 +17,9 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022",
+    "module": "es2022",
     "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "lib": ["ES2022", "dom"]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

examples/apps/ng-app-cli/tsconfig.spec.json

@@ -1,9 +1,15 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": ["jasmine", "@angular/localize"]
+    "types": ["jasmine", "@angular/localize"],
+    "esModuleInterop": true,
+    "module": "es2022"
   },
-  "include": ["src/**/*.spec.ts", "src/polyfills.ts", "src/**/*.d.ts"]
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.jest.ts",
+    "src/polyfills.ts",
+    "src/**/*.d.ts"
+  ]
 }

package.json

@@ -6,14 +6,16 @@
     "dev": "turbo run dev --parallel --no-cache --filter='./packages/*'",
     "test": "turbo test --filter='./packages/*'",
     "build": "turbo build  --filter='./packages/*'",
-    "build:docs": "turbo build  --filter='./docs'"
+    "build:docs": "turbo build  --filter='./docs'",
+    "prepare": "husky install"
   },
   "license": "MIT",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "concurrently": "^8.2.2",
+    "husky": "^8.0.0",
     "turbo": "^1.12.4",
     "typescript": "^5.3.3",
     "vitest": "^0.33.0"
   }
-}
+}

packages/jest-angular/index.mjs

@@ -0,0 +1,17 @@
+import { NgJestTransformer } from "jest-preset-angular/build/ng-jest-transformer.js";
+export default {
+  createTransformer: (tsJestConfig) => {
+    const ngT = new NgJestTransformer(tsJestConfig);
+    return {
+      process: (src, filename, config, options) => {
+        if (/.ts$/.test(filename)) {
+          src = `
+                import.meta.env = process.env;
+                ${src}
+            `;
+        }
+        return ngT.process(src, filename, config, options);
+      },
+    };
+  },
+};

packages/jest-angular/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@dotenv-run/jest-angular",
+  "version": "0.1.0",
+  "description": "Run Jest with Angular CLI environment variables",
+  "homepage": "https://github.com/chihab/dotenv-run",
+  "sideEffects": true,
+  "files": [
+    "index.mjs",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.mjs"
+    }
+  },
+  "keywords": [
+    "dotenv",
+    "run",
+    "cli"
+  ],
+  "peerDependencies": {
+    "jest-preset-angular": "^14.0.0"
+  },
+  "devDependencies": {
+    "jest-preset-angular": "14.0.0"
+  },
+  "author": "Chihab Otmani <chihab@gmail.com>",
+  "license": "ISC"
+}

packages/jest/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@dotenv-run/jest",
+  "version": "0.1.0",
+  "description": "Run Jest with import.meta.env",
+  "homepage": "https://github.com/chihab/dotenv-run",
+  "main": "src/jest-env.mjs",
+  "module": "src/jest-env.mjs",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "dotenv",
+    "run"
+  ],
+  "author": "Chihab Otmani <chihab@gmail.com>",
+  "license": "ISC"
+}

packages/jest/src/jest-env.mjs

@@ -0,0 +1,15 @@
+export default {
+  createTransformer: () => {
+    return {
+      process: (src, filename) => {
+        if (/.ts$/.test(filename)) {
+          src = `
+                import.meta.env = process.env;
+                ${src}
+            `;
+        }
+        return { code: src };
+      },
+    };
+  },
+};

packages/load/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotenv-run/load",
   "version": "1.3.4",
-  "description": "Perload your scripts with dotenv variables",
+  "description": "Preload your scripts with dotenv variables",
   "homepage": "https://github.com/chihab/dotenv-run",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,4 +27,4 @@
   "devDependencies": {
     "@types/node": "^16.0.0"
   }
-}
+}