feat(testing): update jest-preset-angular to v8.0.0 part 2

Closed issues: nrwl#1979, nrwl#2165 Co-authored-by: Joshua D. Mentzer <mentzerj@trinity-health.org>
FrozenPandaz · Jan 29, 2020 · 4068368 · 4068368
1 parent 990e5e8
commit 4068368
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 91 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -80,7 +80,7 @@ While developing you may want to try out the changes you have made. The easier w
 yarn create-playground
 ```
 
-You can then go to `tmp/nx` (this is set up to use Nx CLI) or `tmp/angular` (this is set up to use Angular CLI), where you will find an empty workspace with your changes in it, something this that:
+You can then go to `tmp/nx` (this is set up to use Nx CLI) or `tmp/angular` (this is set up to use Angular CLI), where you will find an empty workspace with your changes in it.:
 
 ```bash
 yarn create-playground

diff --git a/packages/angular/src/schematics/application/application.spec.ts b/packages/angular/src/schematics/application/application.spec.ts
@@ -361,54 +361,75 @@ describe('app', () => {
     });
   });
 
-  describe('--unit-test-runner karma', () => {
-    it('should generate a karma config', async () => {
-      const tree = await runSchematic(
-        'app',
-        { name: 'myApp', unitTestRunner: 'karma' },
-        appTree
-      );
+  describe('--unit-test-runner', () => {
+    describe('default (jest)', () => {
+      it('should generate jest.config.js with serializers', async () => {
+        const tree = await runSchematic('app', { name: 'myApp' }, appTree);
 
-      expect(tree.exists('apps/my-app/tsconfig.spec.json')).toBeTruthy();
-      expect(tree.exists('apps/my-app/karma.conf.js')).toBeTruthy();
-      const workspaceJson = readJsonInTree(tree, 'workspace.json');
-      expect(workspaceJson.projects['my-app'].architect.test.builder).toEqual(
-        '@angular-devkit/build-angular:karma'
-      );
-      expect(
-        workspaceJson.projects['my-app'].architect.lint.options.tsConfig
-      ).toEqual([
-        'apps/my-app/tsconfig.app.json',
-        'apps/my-app/tsconfig.spec.json'
-      ]);
-      const tsconfigAppJson = readJsonInTree(
-        tree,
-        'apps/my-app/tsconfig.app.json'
-      );
-      expect(tsconfigAppJson.exclude).toEqual(['src/test.ts', '**/*.spec.ts']);
-      expect(tsconfigAppJson.compilerOptions.outDir).toEqual(
-        '../../dist/out-tsc'
-      );
+        expect(tree.readContent('apps/my-app/jest.config.js')).toContain(
+          `'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js'`
+        );
+        expect(tree.readContent('apps/my-app/jest.config.js')).toContain(
+          `'jest-preset-angular/build/AngularSnapshotSerializer.js'`
+        );
+        expect(tree.readContent('apps/my-app/jest.config.js')).toContain(
+          `'jest-preset-angular/build/HTMLCommentSerializer.js'`
+        );
+      });
     });
-  });
 
-  describe('--unit-test-runner none', () => {
-    it('should not generate test configuration', async () => {
-      const tree = await runSchematic(
-        'app',
-        { name: 'myApp', unitTestRunner: 'none' },
-        appTree
-      );
-      expect(tree.exists('apps/my-app/src/test-setup.ts')).toBeFalsy();
-      expect(tree.exists('apps/my-app/src/test.ts')).toBeFalsy();
-      expect(tree.exists('apps/my-app/tsconfig.spec.json')).toBeFalsy();
-      expect(tree.exists('apps/my-app/jest.config.js')).toBeFalsy();
-      expect(tree.exists('apps/my-app/karma.config.js')).toBeFalsy();
-      const workspaceJson = readJsonInTree(tree, 'workspace.json');
-      expect(workspaceJson.projects['my-app'].architect.test).toBeUndefined();
-      expect(
-        workspaceJson.projects['my-app'].architect.lint.options.tsConfig
-      ).toEqual(['apps/my-app/tsconfig.app.json']);
+    describe('karma', () => {
+      it('should generate a karma config', async () => {
+        const tree = await runSchematic(
+          'app',
+          { name: 'myApp', unitTestRunner: 'karma' },
+          appTree
+        );
+
+        expect(tree.exists('apps/my-app/tsconfig.spec.json')).toBeTruthy();
+        expect(tree.exists('apps/my-app/karma.conf.js')).toBeTruthy();
+        const workspaceJson = readJsonInTree(tree, 'workspace.json');
+        expect(workspaceJson.projects['my-app'].architect.test.builder).toEqual(
+          '@angular-devkit/build-angular:karma'
+        );
+        expect(
+          workspaceJson.projects['my-app'].architect.lint.options.tsConfig
+        ).toEqual([
+          'apps/my-app/tsconfig.app.json',
+          'apps/my-app/tsconfig.spec.json'
+        ]);
+        const tsconfigAppJson = readJsonInTree(
+          tree,
+          'apps/my-app/tsconfig.app.json'
+        );
+        expect(tsconfigAppJson.exclude).toEqual([
+          'src/test.ts',
+          '**/*.spec.ts'
+        ]);
+        expect(tsconfigAppJson.compilerOptions.outDir).toEqual(
+          '../../dist/out-tsc'
+        );
+      });
+    });
+
+    describe('none', () => {
+      it('should not generate test configuration', async () => {
+        const tree = await runSchematic(
+          'app',
+          { name: 'myApp', unitTestRunner: 'none' },
+          appTree
+        );
+        expect(tree.exists('apps/my-app/src/test-setup.ts')).toBeFalsy();
+        expect(tree.exists('apps/my-app/src/test.ts')).toBeFalsy();
+        expect(tree.exists('apps/my-app/tsconfig.spec.json')).toBeFalsy();
+        expect(tree.exists('apps/my-app/jest.config.js')).toBeFalsy();
+        expect(tree.exists('apps/my-app/karma.config.js')).toBeFalsy();
+        const workspaceJson = readJsonInTree(tree, 'workspace.json');
+        expect(workspaceJson.projects['my-app'].architect.test).toBeUndefined();
+        expect(
+          workspaceJson.projects['my-app'].architect.lint.options.tsConfig
+        ).toEqual(['apps/my-app/tsconfig.app.json']);
+      });
     });
   });
 

diff --git a/packages/jest/migrations.json b/packages/jest/migrations.json
@@ -10,10 +10,21 @@
       "description": "Update Jest testPathPattern option",
       "factory": "./src/migrations/update-8-7-0/update-8-7-0"
     },
-    "update-8.8.0": {
-      "version": "8.8.0",
+    "update-8.10.0": {
+      "version": "8.10.0",
       "description": "Upgrades jest-preset-angular and runs migrations for breaking changes",
-      "factory": "./src/migrations/update-8-8-0/update-8-8-0"
+      "factory": "./src/migrations/update-8-10-0/update-8-10-0"
+    }
+  },
+  "packageJsonUpdates": {
+    "8.10.0": {
+      "version": "8.10.0-beta.1",
+      "packages": {
+        "jest-preset-angular": {
+          "version": "8.0.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }
diff --git a/...rations/update-8-8-0/update-8-8-0.spec.ts → ...tions/update-8-10-0/update-8-10-0.spec.ts b/...rations/update-8-8-0/update-8-8-0.spec.ts → ...tions/update-8-10-0/update-8-10-0.spec.ts
@@ -5,7 +5,7 @@ import * as path from 'path';
 import { createEmptyWorkspace } from '@nrwl/workspace/testing';
 import { serializeJson } from '@nrwl/workspace';
 
-describe.only('Update 8.8.0', () => {
+describe('Update 8.10.0', () => {
   let initialTree: Tree;
   let schematicRunner: SchematicTestRunner;
 
@@ -105,7 +105,7 @@ describe.only('Update 8.8.0', () => {
 
   it('should update jest-preset-angular to 8.0.0', async () => {
     const result = await schematicRunner
-      .runSchematicAsync('update-8.8.0', {}, initialTree)
+      .runSchematicAsync('update-8.10.0', {}, initialTree)
       .toPromise();
 
     const { devDependencies } = readJsonInTree(result, 'package.json');
@@ -114,7 +114,7 @@ describe.only('Update 8.8.0', () => {
 
   it(`it should add '/build' into jest-preset-angular snapshotSerializers in any jest.config.js where it exists`, async () => {
     const result = await schematicRunner
-      .runSchematicAsync('update-8.8.0', {}, initialTree)
+      .runSchematicAsync('update-8.10.0', {}, initialTree)
       .toPromise();
 
     const updateJestAngularOne = result.readContent(
@@ -139,17 +139,35 @@ describe.only('Update 8.8.0', () => {
     expect(updateJestAngularTwo).not.toContain(
       'jest-preset-angular/HTMLCommentSerializer.js'
     );
+
+    expect(updateJestAngularOne).toContain(
+      'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js'
+    );
     expect(updateJestAngularOne).toContain(
       'jest-preset-angular/build/AngularSnapshotSerializer.js'
     );
     expect(updateJestAngularOne).toContain(
       'jest-preset-angular/build/HTMLCommentSerializer.js'
     );
+
+    expect(updateJestAngularTwo).toContain(
+      'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js'
+    );
     expect(updateJestAngularTwo).toContain(
       'jest-preset-angular/build/AngularSnapshotSerializer.js'
     );
     expect(updateJestAngularTwo).toContain(
       'jest-preset-angular/build/HTMLCommentSerializer.js'
     );
+
+    expect(updateJestNonAngularOne).not.toContain(
+      'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js'
+    );
+    expect(updateJestNonAngularOne).not.toContain(
+      'jest-preset-angular/build/AngularSnapshotSerializer.js'
+    );
+    expect(updateJestNonAngularOne).not.toContain(
+      'jest-preset-angular/build/HTMLCommentSerializer.js'
+    );
   });
 });
diff --git a/...c/migrations/update-8-8-0/update-8-8-0.ts → ...migrations/update-8-10-0/update-8-10-0.ts b/...c/migrations/update-8-8-0/update-8-8-0.ts → ...migrations/update-8-10-0/update-8-10-0.ts
@@ -1,23 +1,33 @@
 import {
-  Tree,
-  Rule,
   chain,
-  SchematicContext
+  Rule,
+  SchematicContext,
+  Tree
 } from '@angular-devkit/schematics';
-import { readWorkspace, insert, formatFiles } from '@nrwl/workspace';
+import {
+  formatFiles,
+  insert,
+  readWorkspace,
+  updatePackagesInPackageJson
+} from '@nrwl/workspace';
 import * as ts from 'typescript';
+import * as path from 'path';
 import {
-  ReplaceChange,
-  updateJsonInTree,
+  Change,
+  getSourceNodes,
+  InsertChange,
   readJsonInTree,
-  getSourceNodes
+  ReplaceChange
 } from '@nrwl/workspace/src/utils/ast-utils';
 import { stripIndents } from '@angular-devkit/core/src/utils/literals';
 
 export default function update(): Rule {
   return chain([
     displayInformation,
-    updateDependencies,
+    updatePackagesInPackageJson(
+      path.join(__dirname, '../../../', 'migrations.json'),
+      '8.10.0'
+    ),
     updateJestConfigs,
     formatFiles()
   ]);
@@ -37,16 +47,6 @@ function displayInformation(host: Tree, context: SchematicContext) {
   }
 }
 
-const updateDependencies = updateJsonInTree('package.json', json => {
-  json.devDependencies = json.devDependencies || {};
-
-  if (json.devDependencies['jest-preset-angular']) {
-    json.devDependencies['jest-preset-angular'] = '8.0.0';
-  }
-
-  return json;
-});
-
 function updateJestConfigs(host: Tree) {
   const config = readJsonInTree(host, 'package.json');
 
@@ -77,14 +77,24 @@ function updateJestConfigs(host: Tree) {
           ts.ScriptTarget.Latest
         );
 
-        const changes: ReplaceChange[] = [];
+        const changes: Change[] = [];
 
         getSourceNodes(sourceFile).forEach(node => {
           if (node && ts.isStringLiteral(node)) {
             const nodeText = node.text;
+
             if (
               nodeText === 'jest-preset-angular/AngularSnapshotSerializer.js'
             ) {
+              // add new serializer from v8 of jest-preset-angular
+              changes.push(
+                new InsertChange(
+                  configPath,
+                  node.getStart(sourceFile),
+                  `'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js'\n`
+                )
+              );
+
               changes.push(
                 new ReplaceChange(
                   configPath,

diff --git a/packages/jest/src/schematics/jest-project/files/jest.config.js__tmpl__ b/packages/jest/src/schematics/jest-project/files/jest.config.js__tmpl__
@@ -7,6 +7,7 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],<% } %>
   coverageDirectory: '<%= offsetFromRoot %>coverage/<%= projectRoot %>'<% if(!skipSerializers) { %>,
   snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
     'jest-preset-angular/build/AngularSnapshotSerializer.js',
     'jest-preset-angular/build/HTMLCommentSerializer.js'
   ]<% } %>

diff --git a/packages/jest/src/schematics/jest-project/jest-project.spec.ts b/packages/jest/src/schematics/jest-project/jest-project.spec.ts
@@ -89,6 +89,7 @@ describe('jestProject', () => {
   preset: '../../jest.config.js',
   coverageDirectory: '../../coverage/libs/lib1',
   snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
     'jest-preset-angular/build/AngularSnapshotSerializer.js',
     'jest-preset-angular/build/HTMLCommentSerializer.js'
   ]
@@ -234,6 +235,7 @@ describe('jestProject', () => {
       const jestConfig = resultTree.readContent('libs/lib1/jest.config.js');
       expect(jestConfig).not.toContain(`
   snapshotSerializers: [
+    'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js,
     'jest-preset-angular/build/AngularSnapshotSerializer.js',
     'jest-preset-angular/build/HTMLCommentSerializer.js'
   ]