Unit Testing Hybrid Angular Js and Angular 8 Application - angularjs

Question

I'm working on a angular js and angular 8 hybrid application. The new components created in angular are downgraded to be used in angular js. Code snippet of module is shown below:
#NgModule({
// Declaration and Imports
providers:[
ServiceName,
// Other Services
],
entryComponents: [
ComponentName,
// Other components to be used in angular js
]
})
export class FeatureModule{
}
declare var angular: angular.IAngularStatic
angular.module('app')
.directive('cmpName', downgradeComponent({component: ComponentName }) as angular.IDirectiveFactory)
.factory('serviceName', downgradeInjectable(ServiceName));
In app.module.ts file, there is following code.
// Usual Stuff
export class AppModule {
constructor(
private upgrade: UpgradeModule,
) {
}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['app'], { strictDi: true });
}
}
Nothing has been updated in component spec file generated by angular cli.
In tsconfig.spec.json,
{
"extends": "../tsconfig.json",
"compilerOptions": {
"baseUrl": "./",
"outDir": "../out-tsc/spec",
"types": ["jasmine", "node", "angular"]
},
"files": ["test.ts", "polyfills.ts"],
"include": ["**/*.spec.ts", "**/*.d.ts"]
}
karma.conf.js looks like below.
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage/ProjectFolder'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};
Now, if I run npm run test or ng test command to run test suite, I'm getting following error.
An error was thrown in afterAll Uncaught ReferenceError: angular is not defined ReferenceError: angular is not defined at Module../..path-to-module-file/feature.module.ts.
How can I resolve this issue? Do I have to mock angular variable declared in the module file. Any help is appreciated?

Answer 1

I don't know too much of the nitty gritty details, but I run a hybrid application with Webpack and Karma. I downgrade all my components so they can be used in AngularJS, just like you.
The difference is that I have a file called vendor.ts that contains AngularJS. I bet you do too, since you only talk about the tests failing, not the product being broken. I have an entry in my Karma config file:
files: [
{ pattern: "node_modules/babel-polyfill/dist/polyfill.js", watched: false },
{ pattern: "node_modules/intl/locale-data/jsonp/en-GB.js", watched: false },
{ pattern: "node_modules/intl/locale-data/jsonp/fr-FR.js", watched: false },
{ pattern: "static/polyfills.ts", watched: false },
{ pattern: "static/vendor.ts", watched: false },
{ pattern: "node_modules/zone.js/dist/long-stack-trace-zone.js", watched: false },
{ pattern: "node_modules/zone.js/dist/proxy.js", watched: false },
{ pattern: "node_modules/zone.js/dist/sync-test.js", watched: false },
{ pattern: "node_modules/zone.js/dist/jasmine-patch.js", watched: false },
{ pattern: "node_modules/zone.js/dist/async-test.js", watched: false },
{ pattern: "node_modules/zone.js/dist/fake-async-test.js", watched: false },
{ pattern: "node_modules/angular-mocks/angular-mocks.js", watched: false },
{ pattern: "static/main.ts", watched: false },
{ pattern: "static/main.test.ts", watched: false },
],
This tells Karma which files to watch and serve in the browser. I think that means that after Webpack compiled these files, Karma-Webpack can find the compiled files and serve them.