remove spectator and replace with karma/jasmine

Author: QuantariusRay

.eslintrc.json

@@ -5,7 +5,7 @@
   ],
   "overrides": [
     {
-      "plugins": ["@typescript-eslint", "jest", "cypress"],
+      "plugins": ["@typescript-eslint", "cypress"],
       "parser": "@typescript-eslint/parser",
       "files": [
         "*.ts"
@@ -18,23 +18,18 @@
         "createDefaultProgram": true
       },
       "env": {
-        "cypress/globals": true,
-        "jest/globals": true
+        "cypress/globals": true
       },
       "extends": [
         "plugin:prettier/recommended",
         "plugin:@angular-eslint/ng-cli-compat",
         "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
         "plugin:@angular-eslint/template/process-inline-templates",
-        "plugin:cypress/recommended",
-        "plugin:jest/recommended",
-        "plugin:jest/style"
+        "plugin:cypress/recommended"
       ],
 
       "rules": {
         "max-len": ["error", { "code": 250 }],
-        "jest/no-large-snapshots": ["warn", { "maxSize": 12, "inlineMaxSize": 6 }],
-        "jest/no-jasmine-globals": "off",
         "quotes": [1, "single", { "allowTemplateLiterals": true }],
         "@angular-eslint/component-selector": [
           "error",

angular.json

@@ -106,15 +106,12 @@
           }
         },
         "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": ["src/polyfills.ts"],
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "scripts": []
+            "karmaConfig": "karma.conf.js"
           }
         },
         "lint": {

cypress/support/component.ts

@@ -14,26 +14,46 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/angular'
+import { mount, MountConfig } from 'cypress/angular';
+import chaiColors from 'chai-colors';
+import { Type } from '@angular/core';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+chai.use(chaiColors);
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
 // Alternatively, can be defined in cypress/support/component.d.ts
 // with a <reference path="./component" /> at the top of your spec.
 declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
-      mount: typeof mount
+      mount: typeof mount;
+      mountStandalone: typeof mount;
     }
   }
 }
 
-Cypress.Commands.add('mount', mount)
+const imports = [HttpClientTestingModule];
+
+// eslint-disable-next-line prefer-arrow/prefer-arrow-functions
+function customMount<T>(component: string | Type<T>, config?: MountConfig<T>) {
+  if (!config) {
+    config = { imports };
+  } else {
+    config.imports = [...(config?.imports || []), ...imports];
+  }
+  return mount<T>(component, config);
+}
+
+Cypress.Commands.add('mount', mount);
+Cypress.Commands.add('mountStandalone', customMount);
 
 // Example use:
-// cy.mount(MyComponent)
+// cy.mount(MyComponent)

cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

karma.conf.js

@@ -0,0 +1,86 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+// TFS Intergration
+// https://isaacmartinezblog.wordpress.com/2018/04/02/angular-code-coverage-in-sonar-qube-and-vsts/
+
+// ChromeHeadless from Puppeteer
+// https://github.com/karma-runner/karma-chrome-launcher
+
+// Set Env for ChromeHeadless from puppeteer
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    specReporter: {
+      maxLogLines: 5, // limit number of lines logged per test
+      suppressWarnSummary: true, // do not print warn summary
+      suppressErrorSummary: false, // do not print error summary
+      suppressFailed: false, // do not print information about failed tests
+      suppressPassed: true, // do not print information about passed tests
+      suppressSkipped: true, // do not print information about skipped tests
+      showSpecTiming: false // print the time elapsed for each spec
+    },
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-coverage'),
+      require('karma-junit-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+      require('puppeteer')
+    ],
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+      jasmine: {
+        random: false
+      }
+    },
+
+    files: [],
+    preprocessors: {},
+    mime: {
+      'text/x-typescript': ['ts', 'tsx']
+    },
+    junitReporter: {
+      outputDir: '../../coverage', // results will be saved as $outputDir/$browserName.xml
+      useBrowserName: false, // add browser name to report and classes names
+      outputFile: 'TEST-loads-ui-report.xml' // if included, results will be saved as $outputDir/$browserName/$outputFile
+    },
+    coverageReporter: {
+      dir: '../../coverage',
+      subdir: 'loads-ui',
+      fixWebpackSourcePaths: true,
+      reporters: [
+        { type: 'lcovonly', file: 'lcov.info' },
+        { type: 'lcov' }
+      ]
+    },
+    reporters: ['junit', 'coverage', 'progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome_without_security'],
+    // you can define custom flags
+    customLaunchers: {
+      Chrome_without_security: {
+        base: 'ChromeHeadless',
+        flags: [
+          '--disable-gpu',
+          '--no-sandbox',
+          '--disable-translate',
+          '--disable-extensions',
+        ],
+      }
+    },
+    singleRun: false,
+    restartOnFileChange: true,
+    captureTimeout: 2100000,
+    browserDisconnectTimeout: 210000,
+    browserDisconnectTolerance: 3,
+    browserNoActivityTimeout: 2100000,
+    reportSlowerThan: 100,
+    browserConsoleLogOptions: { level: 'debug', terminal: false }
+  });
+};

package-lock.json

@@ -8,7 +8,6 @@
     "test": "jest --collectCoverage",
     "test:update": "jest -u",
     "test:uc": "jest --collectCoverage -u",
-    "test:watch": "jest --watch",
     "lint": "ng lint --fix && yarn js-beautify src/**/*.css && yarn js-beautify src/**/*.html",
     "cypress:open": "cypress open --config-file cypress/config/local.config.ts",
     "cypress:open-dev": "cypress open --config-file cypress/config/dev.config.ts",
@@ -38,7 +37,6 @@
     "zone.js": "0.11.8"
   },
   "devDependencies": {
-    "@angular-builders/jest": "14.0.1",
     "@angular-devkit/build-angular": "14.2.5",
     "@angular-eslint/builder": "14.1.2",
     "@angular-eslint/eslint-plugin": "14.1.2",
@@ -50,30 +48,35 @@
     "@angular/language-service": "14.2.5",
     "@bahmutov/cypress-extends": "1.1.0",
     "@cypress/code-coverage": "3.10.0",
-    "@ngneat/spectator": "^11.3.0",
-    "@types/jest": "^29.2.0",
+    "@types/jasmine": "^4.3.0",
+    "@types/jasminewd2": "^2.0.10",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "@typescript-eslint/parser": "^5.39.0",
+    "chai-colors": "^1.0.1",
     "check-code-coverage": "^1.10.0",
     "cypress": "^10.10.0",
     "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.3",
     "eslint-plugin-jsdoc": "^39.3.20",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.1",
-    "jest": "^29.2.1",
-    "jest-canvas-mock": "^2.4.0",
-    "jest-chain": "^1.1.6",
-    "jest-preset-angular": "^12.2.2",
+    "jasmine-core": "^4.5.0",
+    "jasmine-spec-reporter": "^7.0.0",
+    "karma": "^6.4.1",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-cli": "^2.0.0",
+    "karma-coverage": "^2.2.0",
+    "karma-jasmine": "^5.1.0",
+    "karma-junit-reporter": "^2.0.1",
     "js-beautify": "^1.13.13",
     "ng-mocks": "^14.2.3",
     "ngx-build-plus": "14.0.0",
     "prettier": "^2.2.1",
+    "puppeteer": "^19.2.1",
     "start-server-and-test": "^1.12.1",
     "stylelint": "^13.13.0",
     "stylelint-config-standard": "^22.0.0",
@@ -95,34 +98,6 @@
     "not dead",
     "not IE 9-11"
   ],
-  "jest": {
-    "preset": "jest-preset-angular",
-    "coverageDirectory": "coverage",
-    "collectCoverageFrom": [
-      "src/app/**/*.ts",
-      "src/app/*.ts",
-      "!src/app/**/*.module.ts",
-      "!src/app/**/*-comparison.ts"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/setup-jest.ts",
-      "jest-chain"
-    ],
-    "testPathIgnorePatterns": [
-      "<rootDir>/node_modules/",
-      "<rootDir>/dist/",
-      "<rootDir>/cypress/"
-    ],
-    "globals": {
-      "ts-jest": {
-        "tsconfig": "<rootDir>/tsconfig.spec.json",
-        "stringifyContentPathRegex": "\\.html$"
-      }
-    },
-    "moduleNameMapper": {
-      "@core/(.*)": "<rootDir>/src/app/core/$1"
-    }
-  },
   "nyc": {
     "report-dir": "coverage-e2e",
     "extension": [

package.json

@@ -1,18 +1,34 @@
 import { AboutComponent } from './about.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TwainService } from '../twain/twain.service';
+import { Observable, of } from 'rxjs';
+import { QuoteServiceModel } from '../twain/quote.service.model';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+class MockTwainService implements QuoteServiceModel {
+  getQuote(): Observable<string> {
+    return of('Be Inspired!');
+  }
+}
 
 describe('About Component', () => {
   // Mount the component before the start of the test
   beforeEach(() => {
-    cy.mount(AboutComponent, {
-      imports: [HttpClientTestingModule]
+    cy.mountStandalone(AboutComponent, {
+      providers: [{ provide: TwainService, useClass: MockTwainService }]
     });
   });
 
   it('Loads with a title and highlight', () => {
     cy.get('[data-cy=page-title]')
       .should('have.text', 'About')
       .should('have.css', 'background-color')
-      .and('eq', 'rgb(135, 206, 235)');
+      .and('be.colored', 'skyblue');
+  });
+
+  it('should have an h3 element that reads "Quote of the day:"', () => {
+    cy.get('h3')
+      .should('have.text', 'Quote of the day:');
   });
+
 });