chore(example): update jest dependencies and configuration (#1680)

Closes #1674
ngrx · Apr 1, 2019 · 24711ca · 24711ca
1 parent 7f42917
commit 24711ca
Show file tree

Hide file tree

Showing 12 changed files with 1,433 additions and 724 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -97,7 +97,7 @@ jobs:
       - checkout
       - restore_cache:
           key: *cache_key
-      - run: yarn run example:test --watch=false
+      - run: yarn run example:test --watch=false --runInBand
 
   example-e2e-tests:
     <<: *run_in_browser

diff --git a/package.json b/package.json
@@ -111,7 +111,7 @@
     "@types/globby": "^8.0.0",
     "@types/jasmine": "2.5.45",
     "@types/jasminewd2": "^2.0.2",
-    "@types/jest": "^20.0.2",
+    "@types/jest": "^24.0.11",
     "@types/lodash": "^4.14.80",
     "@types/ncp": "^2.0.1",
     "@types/node": "^7.0.5",
@@ -134,9 +134,9 @@
     "jasmine-core": "~2.5.2",
     "jasmine-marbles": "^0.4.0",
     "jasmine-spec-reporter": "~3.2.0",
-    "jest": "^21.0.2",
-    "jest-preset-angular": "^3.0.1",
-    "jest-zone-patch": "^0.0.7",
+    "jest": "^24.5.0",
+    "jest-preset-angular": "^7.0.1",
+    "jest-zone-patch": "^0.0.10",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",

diff --git a/projects/example-app/jest.config.js b/projects/example-app/jest.config.js
@@ -1,24 +1,31 @@
 module.exports = {
   rootDir: '.',
-  setupTestFrameworkScriptFile: '<rootDir>/src/setup-jest.ts',
+  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
   globals: {
     'ts-jest': {
-      tsConfigFile: 'projects/example-app/tsconfig.spec.json',
+      tsConfig: 'projects/example-app/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.html?$',
+      astTransformers: [
+        require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer'),
+      ],
     },
-    __TRANSFORM_HTML__: true,
   },
   transform: {
-    '^.+\\.(ts|js|html)$':
-      '<rootDir>/../../node_modules/jest-preset-angular/preprocessor.js',
+    '^.+\\.(ts|js|html)$': 'ts-jest',
   },
   testMatch: ['<rootDir>/**/*.spec.ts'],
-  moduleFileExtensions: ['ts', 'js', 'html', 'json'],
-  mapCoverage: true,
+  testEnvironment: 'jest-environment-jsdom-thirteen',
+  moduleFileExtensions: ['html', 'js', 'json', 'ts'],
   coveragePathIgnorePatterns: ['/node_modules/', '/modules/*.*/'],
   moduleNameMapper: {
     '^@ngrx/(.*)': '<rootDir>/../../modules/$1',
     '^@example-app/(.*)': '<rootDir>/src/app/$1',
   },
   transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
   modulePathIgnorePatterns: ['dist'],
+  preset: 'jest-preset-angular',
+  snapshotSerializers: [
+    'jest-preset-angular/AngularSnapshotSerializer.js',
+    'jest-preset-angular/HTMLCommentSerializer.js',
+  ],
 };
diff --git a/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap b/projects/example-app/src/app/auth/components/__snapshots__/login-form.component.spec.ts.snap
@@ -5,31 +5,19 @@ exports[`Login Page should compile 1`] = `
   form={[Function FormGroup]}
   submitted={[Function EventEmitter]}
 >
-  <mat-card
-    _ngcontent-c0=""
-  >
-    <mat-card-title
-      _ngcontent-c0=""
-    >
+  <mat-card>
+    <mat-card-title>
       Login
     </mat-card-title>
-    <mat-card-content
-      _ngcontent-c0=""
-    >
+    <mat-card-content>
       <form
-        _ngcontent-c0=""
         class="ng-untouched ng-pristine ng-valid"
         ng-reflect-form="[object Object]"
         novalidate=""
       >
-        <p
-          _ngcontent-c0=""
-        >
-          <mat-form-field
-            _ngcontent-c0=""
-          >
+        <p>
+          <mat-form-field>
             <input
-              _ngcontent-c0=""
               class="ng-untouched ng-pristine ng-valid"
               formcontrolname="username"
               matinput=""
@@ -39,14 +27,9 @@ exports[`Login Page should compile 1`] = `
             />
           </mat-form-field>
         </p>
-        <p
-          _ngcontent-c0=""
-        >
-          <mat-form-field
-            _ngcontent-c0=""
-          >
+        <p>
+          <mat-form-field>
             <input
-              _ngcontent-c0=""
               class="ng-untouched ng-pristine ng-valid"
               formcontrolname="password"
               matinput=""
@@ -58,11 +41,9 @@ exports[`Login Page should compile 1`] = `
         </p>
         
         <p
-          _ngcontent-c0=""
           class="loginButtons"
         >
           <button
-            _ngcontent-c0=""
             mat-button=""
             type="submit"
           >
@@ -80,31 +61,19 @@ exports[`Login Page should disable the form if pending 1`] = `
   form={[Function FormGroup]}
   submitted={[Function EventEmitter]}
 >
-  <mat-card
-    _ngcontent-c1=""
-  >
-    <mat-card-title
-      _ngcontent-c1=""
-    >
+  <mat-card>
+    <mat-card-title>
       Login
     </mat-card-title>
-    <mat-card-content
-      _ngcontent-c1=""
-    >
+    <mat-card-content>
       <form
-        _ngcontent-c1=""
         class="ng-untouched ng-pristine"
         ng-reflect-form="[object Object]"
         novalidate=""
       >
-        <p
-          _ngcontent-c1=""
-        >
-          <mat-form-field
-            _ngcontent-c1=""
-          >
+        <p>
+          <mat-form-field>
             <input
-              _ngcontent-c1=""
               class="ng-untouched ng-pristine"
               disabled=""
               formcontrolname="username"
@@ -115,14 +84,9 @@ exports[`Login Page should disable the form if pending 1`] = `
             />
           </mat-form-field>
         </p>
-        <p
-          _ngcontent-c1=""
-        >
-          <mat-form-field
-            _ngcontent-c1=""
-          >
+        <p>
+          <mat-form-field>
             <input
-              _ngcontent-c1=""
               class="ng-untouched ng-pristine"
               disabled=""
               formcontrolname="password"
@@ -135,11 +99,9 @@ exports[`Login Page should disable the form if pending 1`] = `
         </p>
         
         <p
-          _ngcontent-c1=""
           class="loginButtons"
         >
           <button
-            _ngcontent-c1=""
             mat-button=""
             type="submit"
           >
@@ -158,31 +120,19 @@ exports[`Login Page should display an error message if provided 1`] = `
   form={[Function FormGroup]}
   submitted={[Function EventEmitter]}
 >
-  <mat-card
-    _ngcontent-c2=""
-  >
-    <mat-card-title
-      _ngcontent-c2=""
-    >
+  <mat-card>
+    <mat-card-title>
       Login
     </mat-card-title>
-    <mat-card-content
-      _ngcontent-c2=""
-    >
+    <mat-card-content>
       <form
-        _ngcontent-c2=""
         class="ng-untouched ng-pristine ng-valid"
         ng-reflect-form="[object Object]"
         novalidate=""
       >
-        <p
-          _ngcontent-c2=""
-        >
-          <mat-form-field
-            _ngcontent-c2=""
-          >
+        <p>
+          <mat-form-field>
             <input
-              _ngcontent-c2=""
               class="ng-untouched ng-pristine ng-valid"
               formcontrolname="username"
               matinput=""
@@ -192,14 +142,9 @@ exports[`Login Page should display an error message if provided 1`] = `
             />
           </mat-form-field>
         </p>
-        <p
-          _ngcontent-c2=""
-        >
-          <mat-form-field
-            _ngcontent-c2=""
-          >
+        <p>
+          <mat-form-field>
             <input
-              _ngcontent-c2=""
               class="ng-untouched ng-pristine ng-valid"
               formcontrolname="password"
               matinput=""
@@ -211,17 +156,14 @@ exports[`Login Page should display an error message if provided 1`] = `
         </p>
         
         <p
-          _ngcontent-c2=""
           class="loginError"
         >
            Invalid credentials 
         </p>
         <p
-          _ngcontent-c2=""
           class="loginButtons"
         >
           <button
-            _ngcontent-c2=""
             mat-button=""
             type="submit"
           >

diff --git a/...p/src/app/auth/components/__snapshots__/logout-confirmation-dialog.component.spec.ts.snap b/...p/src/app/auth/components/__snapshots__/logout-confirmation-dialog.component.spec.ts.snap
@@ -3,23 +3,19 @@
 exports[`Logout Confirmation Dialog should compile 1`] = `
 <ng-component>
   <h2
-    _ngcontent-c0=""
     class="mat-dialog-title"
     id="mat-dialog-title-0"
     mat-dialog-title=""
   >
     Logout
   </h2><mat-dialog-content
-    _ngcontent-c0=""
     class="mat-dialog-content"
   >
     Are you sure you want to logout?
   </mat-dialog-content><mat-dialog-actions
-    _ngcontent-c0=""
     class="mat-dialog-actions"
   >
     <button
-      _ngcontent-c0=""
       aria-label="Close dialog"
       class="mat-button"
       mat-button=""
@@ -43,7 +39,6 @@ exports[`Logout Confirmation Dialog should compile 1`] = `
       />
     </button>
     <button
-      _ngcontent-c0=""
       aria-label="Close dialog"
       class="mat-button"
       mat-button=""