feat(babel): alternative setup babel/TS (thymikee#311)

BREAKING CHANGE: add an alternative preset for babel and restructures
the whole repository to treat babel and ts-jest equally.

The jest config of users will have to be adjusted, see the CHANGELOG.md
for migration information.

.circleci/config.yml

@@ -58,7 +58,8 @@ jobs:
           name: Test Example
           command: |
             cd example
-            yarn test:ci
+            yarn test:ci:ts-jest
+            yarn test:ci:babel
             yarn test:coverage
 
 workflows:

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## Changelog (master)
 
+#### Features
+* (**BREAKING?**): Add preset `babel` as transpilation alternative to `ts-jest` ([#317](https://github.com/thymikee/jest-preset-angular/pull/317)). 
+
 ### v8.0.0
 
 #### Features

example/babel.config.js

@@ -0,0 +1,12 @@
+const { babelAngularConfig } = require('jest-preset-angular/build/babel/babel.config')
+module.exports = api => {
+  api.cache(false)
+  return {
+    presets: babelAngularConfig.presets,
+    plugins: [
+      ...babelAngularConfig.plugins,
+      // your plugins
+    ]
+  }
+}
+

example/get-test-mode.js

@@ -0,0 +1,11 @@
+const defaultTestMode = 'ts-jest';
+const envTestModeKey = 'JPA_TEST_MODE';
+
+module.exports = {
+  getTestMode() {
+    if (process.env && envTestModeKey in process.env && typeof process.env[envTestModeKey] === 'string') {
+      return process.env[envTestModeKey];
+    }
+    return defaultTestMode;
+  }
+}

example/jest.config.js

@@ -1,5 +1,7 @@
+const { getTestMode } = require('./get-test-mode');
+
 module.exports = {
-  preset: "jest-preset-angular",
+  preset: `jest-preset-angular/build/${getTestMode()}`,
   snapshotSerializers: [
     "jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js",
     "jest-preset-angular/build/AngularSnapshotSerializer.js",

example/package.json

@@ -8,8 +8,10 @@
     "build": "ng build",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:ci": "jest --runInBand",
-    "test:coverage": "jest --coverage"
+    "test:ci": "yarn test:ci:ts-jest && yarn test:ci:babel",
+    "test:ci:babel": "cross-env JPA_TEST_MODE=babel jest --runInBand",
+    "test:ci:ts-jest": "cross-env JPA_TEST_MODE=ts-jest jest --runInBand",
+    "test:coverage": "cross-env JPA_TEST_MODE=ts-jest jest --coverage"
   },
   "private": true,
   "dependencies": {
@@ -30,10 +32,20 @@
     "@angular/cli": "~8.3.4",
     "@angular/compiler-cli": "~8.2.5",
     "@angular/language-service": "~8.2.5",
+    "@babel/core": "^7.6.2",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.6.0",
+    "@babel/preset-env": "^7.6.2",
+    "@babel/preset-typescript": "^7.6.0",
     "@types/jest": "^24.0.0",
     "@types/node": "^11.0.0",
+    "babel-jest": "^24.9.0",
+    "babel-plugin-const-enum": "^0.0.2",
+    "babel-plugin-transform-typescript-metadata": "^0.2.2",
+    "cross-env": "^6.0.3",
     "jest": "^24.0.0",
     "jest-preset-angular": "file:../",
+    "ts-jest": "^24.1.0",
     "ts-node": "^8.0.3",
     "typescript": "~3.5.3"
   }

example/src/app/hero-category/hero-category.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from "@angular/core";
+import { HeroCategory, HeroColor } from "./hero-properties";
+
+@Injectable({
+  providedIn: "root"
+})
+export class HeroCategoryService {
+  getCategoryForHero(heroName: string): HeroCategory {
+    switch (heroName) {
+      case "Joker":
+        return HeroCategory.Evil;
+      case "Batman":
+        return HeroCategory.Good;
+      default:
+        return HeroCategory.Neutral;
+    }
+  }
+
+  getColorForHero(heroName: string): HeroColor {
+    switch (heroName) {
+      case "Joker":
+        return HeroColor.Purple;
+      case "Batman":
+        return HeroColor.Black;
+      case "Catwoman":
+        return HeroColor.Black;
+      default:
+        return HeroColor.Transparent;
+    }
+  }
+}

example/src/app/hero-category/hero-category.spec.ts

@@ -0,0 +1,27 @@
+import { async } from "@angular/core/testing";
+
+import { HeroCategoryService } from "./hero-category.service";
+import { HeroCategory, HeroColor } from './hero-properties';
+
+describe("HeroCategoryService", () => {
+  let service: HeroCategoryService;
+
+  beforeEach(() => (service = new HeroCategoryService()));
+
+  it("should create", () => {
+    expect(service).toBeTruthy();
+  });
+
+  it("should return the right category for heroes", () => {
+    expect(service.getCategoryForHero("Batman")).toEqual(HeroCategory.Good);
+    expect(service.getCategoryForHero("Joker")).toEqual(HeroCategory.Evil);
+    expect(service.getCategoryForHero("Catwoman")).toEqual(HeroCategory.Neutral);
+  });
+
+  it("should return the right color for heroes", () => {
+    expect(service.getColorForHero("Batman")).toEqual(HeroColor.Black);
+    expect(service.getColorForHero("Joker")).toEqual(HeroColor.Purple);
+    expect(service.getColorForHero("The Penguin")).toEqual(HeroColor.Transparent);
+  });
+
+});

example/src/app/hero-category/hero-properties.ts

@@ -0,0 +1,12 @@
+
+export enum HeroCategory {
+  Evil,
+  Good,
+  Neutral
+}
+
+export const enum HeroColor {
+  Black = "#000000",
+  Purple = "#551A8B",
+  Transparent = "#00000000"
+}