Error: [$injector:modulerr] Failed to instantiate module ngIdle due to:
Error: [$injector:nomod] Module 'ngIdle' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
What is it that I am missing? If I don't include ngIdle module and remove the code for it's implementation then all my karma/jasmine tests are passing but with ngIdle included all of my 100+ testcases are failing and giving the above error. I have included ngIdle in karma.conf.js in this order
files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-touch/angular-touch.js',
'app/bower_components/angular-animate/angular-animate.js',
'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/revolunet-angular-carousel/lib/angular-mobile.js',
'app/bower_components/revolunet-angular-carousel/src/angular-carousel.js',
'app/bower_components/jquery/dist/jquery.js',
'app/bower_components/angular-cookies/angular-cookies.min.js',
'app/bower_components/ng-idle/angular-idle.min.js',
'app/bower_components/ng-grid/ng-grid-2.0.11.min.js',
'app/js//*.js',
'test/spec//*.js'
],
Below is my bower.json so you get idea about the versions I am using if that is related
{
"name": "combo",
"version": "0.5.1",
"dependencies": {
"angular": "~1.3",
"angular-route": "~1.3",
"angular-touch": "~1.3",
"angular-animate": "~1.3",
"angular-resource": "~1.3",
"angular-cookies": "~1.3",
"angular-bootstrap": "~0.11.0",
"revolunet-angular-carousel": "~0.2.2",
"ng-grid": "~2.0.7",
"ng-idle": "latest",
"video.js": "~4",
"highcharts": "~3.0.7",
"jquery": "~2",
"jquery-ui": "~1.10.4",
"jqueryui-touch-punch": "git://github.com/furf/jquery-ui-touch-punch.git",
"angular-snap": "~1.4.1",
"snapjs": "latest"
},
"devDependencies": {
"angular-mocks": "~1.3",
"angular-scenario": "~1.3"
},
"resolutions": {
"angular": "~1.2.10",
"angular-touch": "~1.2.10",
"jquery": "^1.8.0"
}
}
You have to add angular-idle.min.js to your karma.conf.js.
files: [
//Configs
'config.js',
'lib/angular/angular.min.js',
'lib/angular-mocks/angular-mocks.js',
'lib/moment/moment.js',
'lib/ng-idle/angular-idle.min.js',
'lib/angular-moment/angular-moment.js',
// ... another libraries
],
Related
In my .eslintrc.json file(which inherits from a root .eslintrc.json file), I have this configuration
"extends": ["<root>/.eslintrc"],
"ignorePatterns": ["!**/*"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"parserOptions": {
"project": ["<path>/tsconfig.*?.json"]
},
"settings": {
"disable/plugins": ["jest"]
}
},
]
}
The root .eslintrc.json file has
"plugins": ["#nrwl/nx", "jest", "jasmine"],
"extends": ["plugin:jest/recommended", "plugin:jasmine/recommended"],
For my project I only need to use jasmine and not jest. While the test runs successfully, I get a lint error of
error Illegal usage of global `spyOn`, prefer `jest.spyOn` jest/no-jasmine-globals
On adding rules: {"jest/no-jasmine-globals": "off"} and "env": { "jasmine-globals": true } I get another lint error that says jasmine-globals could not be identified
I need to suppress the jest plugins and allow jasmine alone. What are the modifications that I need to do?
After upgrading Angular from v.11 to v.12 I am getting the following Error
home.Component.ts
imgname= require("../assets/images/imgname.png");
./src/assets/images/imgname.png:1:0 - Error: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
"devDependencies": {
"#angular-devkit/build-angular": "^12.0.1",
"#angular/cli": "~12.0.1",
"#angular/compiler-cli": "~12.0.1",
"#angular/language-service": "~12.0.1",
"#types/jasmine": "~3.7.4",
"#types/jasminewd2": "~2.0.9",
"#types/node": "^15.6.1",
"css-loader": "5.2.6",
"html-webpack-plugin": "^5.3.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.6.0",
"mini-css-extract-plugin": "~1.6.0",
"protractor": "~7.0.0",
"ts-loader": "9.2.2",
"ts-node": "~10.0.0",
"tslint": "~6.1.0",
"typescript": "~4.2.4"
"webpack": "~5.37.1",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.7.0"
}
angular.json
"assets": [
"src/favicon.ico",
"src/assets",
]
Unfortunately I cannot answer but may have some more information. I seem to be having a similar issue though on upgrading to Angular v12. I believe in my case it relates to executing the following in my Angular.json. In my case the lines are trying to copy assets for the use of Leaflet within angular and its is no longer able to copy the .png assets.
...
"assets": [
{
"glob": "**/*",
"input": "./node_modules/leaflet/dist/images",
"output": "/assets/leaflet/"
}
],
...
Thanks
I was able to solve this issue by adding file-loader! prefix before the path:
imgname = require("file-loader!../assets/images/imgname.png");
Also, you can try another approach described in this answer https://stackoverflow.com/a/67932447/8171860
Should be able to use any Chai plugin with unit testing with Karma/Mocha and Chai, or does it need to be converted into a special karma compatible plugin?
I'd like to use chai-date-string to do something like expect(requestBody.time).to.be.a.dateString();, but didn't have any luck just installing them as an NPM module and requiring them in my test file.
Then I came across karma-chai-plugins, which I thought was designed to use other chai plugins (even beyond the few that it comes bundled with), but adding that as an NPM module, and then adding the Chai plugin name to the frameworks list, but this didn't work.
My karma.conf.js:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha', 'chai', 'chai-date-string', 'sinon-chai', 'browserify'],
client: { chai: { includeStack: true } },
files: [ 'playmob.js', 'test/**/*_test.js' ],
preprocessors: {
'test/**/*.js': [ 'browserify' ]
},
browserify: {
debug: true,
},
exclude: [ ],
reporters: ['mocha', 'beep'],
mochaReporter: { ignoreSkipped: true },
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['ChromeHeadless'],
singleRun: false,
concurrency: Infinity
})
}
Versions in package.json (I had to explicitly install a newer version of chai-as-promised to get around a dependency problem):
"devDependencies": {
"browserify": "^14.4.0",
"chai": "^4.1.2",
"chai-as-promised": "^7.1.1",
"chai-date-string": "^0.1.0",
"karma": "^1.7.1",
"karma-beep-reporter": "^0.1.4",
"karma-browserify": "^5.1.1",
"karma-chai-plugins": "^0.9.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-mocha": "^1.3.0",
"karma-mocha-reporter": "^2.2.4",
"karma-sinon-chai": "^1.3.2",
"mocha": "^3.5.3",
"sinon": "^2.4.1",
"sinon-chai": "^2.14.0",
"uglifyjs": "^2.4.11",
"url": "^0.11.0",
"watchify": "^3.9.0"
}
Results in the following error:
> playmobjs#0.2.0 test /Users/jschuur/Code/Playmob/js_api_lib
> karma start
/Users/jschuur/Code/Playmob/js_api_lib/node_modules/di/lib/injector.js:9
throw error('No provider for "' + name + '"!');
^
Error: No provider for "framework:chai-date-string"! (Resolving: framework:chai-date-string)
at error (/Users/jschuur/Code/Playmob/js_api_lib/node_modules/di/lib/injector.js:22:12)
When I look at the code of karma-chai-plugins I see a series of hardcoded plugin names. It seems to me that karma-chai-plugins recognizes only those Chai plugins that are hardcoded in its source. So I don't think you can use it for chai-date-string.
Moreover, chai-date-string is not distributed in a format that is readily loadable in a browser. You could use Browserify or Webpack to convert it to a file that exports something like chaiDateString into the global space. Then you'd have to:
Include in files your converted chai-date-string script.
Add another script in files that invokes chai.use(chaiDateString). The example code shown in the repo omits the call to chai.use, but it cannot be omitted.
I have a project with the following chutzpah.json:
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"EnableTestFileBatching": true,
"References": [
{ "Path": "node_modules/es6-shim/es6-shim.min.js" },
{ "Path": "node_modules/zone.js/dist/zone.min.js" },
{ "Path": "node_modules/reflect-metadata/Reflect.js" },
{ "Path": "node_modules/systemjs/dist/system.js" },
{ "Path": "system-config.js" }
],
"CodeCoverageExcludes": ["node_modules/*"],
"Tests": [
{ "Path": "app", "Includes": [ "*.spec.ts" ] }
]
}
and the following tests files
Test explorer just shows tests stored in the first file
If I try to run the the command of the VSTest I get the same result:
If I call the command setting the name of the file (e.g. "C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TestWindow\vstest.console.exe" app\InspectionDataView.spec.ts /UseVsixExtensions:true ), the tests in the file run.
Extra point:
I tried to run the test directly with Chutzpah.console.exe, this is what I got:
What am I missing here ?
Note: Using VS 2015 Update 3
Chutzpah does not run TypeScript. It "supports" it, but you have to add this support in the chutzpah.json.
Why the first test suite succeeds? Perhaps it is written in pure ES5 (Without ES6/TS classes, interfaces, etc).
I did set up chutzpah support for typescript from this repo https://github.com/mmanela/chutzpah/tree/master/Samples/Compilation/TypeScript
Basically, in short:
create a compile.bat that transpiles TS to ES5. Normally - tsc.exe with or without tsconfig.json
add "Compile" section as seen in https://github.com/mmanela/chutzpah/blob/master/Samples/Compilation/TypeScript/chutzpah.json
this shall transpile TS to ES5 every time you run chutzpah.console.exe
I'm trying to run the most basic of TypeScript tests using Jasmine and Chutzpah and I just can't get it to work. Here is the source file:
class Simple {
public easyTest() {
return 5;
}
}
Here is the spec:
/// <reference path="../../../scripts/typings/jasmine/jasmine.d.ts" />
/// <reference path="../../../src/typescript/classSimple.ts" />
describe("Simple Calculations", () => {
it("should return true", () => {
var simpl = new Simple();
expect(simpl.easyTest()).toBe(5);
});
});
Here is my chutzpah.json file:
{
"RootReferencePathMode": "SettingsFileDirectory",
"Framework": "jasmine",
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ]
},
"References": [
{ "Path": "../../../src/typescript/classSimple.ts" }
],
"Tests": [
{ "Path": "simpleSpec.ts" }
],
"EnableTracing": true
}
Here is the folder structure
TestProject.sln
-src
--typescript
---classSimple.ts
-tests
--jasmine
---typescript
----chutzpah.json
----simpleSpec.ts
This VS.NET project is set to compile TypeScript upon save and I'm physically looking at the transpiled JavaScript output: classSimple.js in the exact same directory next to classSimple.ts. Yet when I run the spec using Chutzpah I get the following:
Message:Chutzpah run started in mode Execution with parallelism set to
4 Message:Building test context for
C:\dev\TestProject\tests\jasmine\typescript\simpleSpec.ts
Message:Building test context for
'C:\dev\TestProject\tests\jasmine\typescript\simpleSpec.ts'
Message:Test file
c:\dev\TestProject\tests\jasmine\typescript\simplespec.ts matched test
file path from settings file Message:Investigating reference file path
'../../../src/typescript/classSimple.ts' Message:Added file
'C:\dev\TestProject\src\typescript\classSimple.ts' to referenced
files. Local: True, IncludeInTestHarness: True Message:Processing
referenced file 'C:\dev\TestProject\src\typescript\classSimple.ts' for
expanded references Message:Added framework dependency
'C:\Users\myself\AppData\Local\Microsoft\VisualStudio\14.0\Extensions\mfv4e3ra.luv\TestFiles\jasmine\v2\jasmine_favicon.png' to referenced files Message:Added framework dependency
'C:\Users\myself\AppData\Local\Microsoft\VisualStudio\14.0\Extensions\mfv4e3ra.luv\TestFiles\jasmine\v2\boot.js'
to referenced files Message:Added framework dependency
'C:\Users\myself\AppData\Local\Microsoft\VisualStudio\14.0\Extensions\mfv4e3ra.luv\TestFiles\jasmine\v2\jasmine-html.js'
to referenced files Message:Added framework dependency
'C:\Users\myself\AppData\Local\Microsoft\VisualStudio\14.0\Extensions\mfv4e3ra.luv\TestFiles\jasmine\v2\jasmine.js'
to referenced files Message:Added framework dependency
'C:\Users\myself\AppData\Local\Microsoft\VisualStudio\14.0\Extensions\mfv4e3ra.luv\TestFiles\jasmine\v2\jasmine.css'
to referenced files Message:Added framework dependency
'C:\Users\myself\AppData\Local\Microsoft\VisualStudio\14.0\Extensions\mfv4e3ra.luv\TestFiles\chutzpah_boot.js'
to referenced files Message:Finished building test context for
C:\dev\TestProject\tests\jasmine\typescript\simpleSpec.ts Error: 0 :
Time:22:47:48.6888513; Thread:23; Message:Can't find location for
generated path on C:\dev\TestProject\src\typescript\classSimple.ts
Warning: 0 : Time:22:47:48.6978503; Thread:23; Message:Chutzpah
determined generated .js files are missing but the compile mode is
External so Chutzpah can't compile them. Test results may be wrong.
Information: 0 : Time:22:47:48.7038522; Thread:23; Message:Found
generated path for
C:\dev\TestProject\tests\jasmine\typescript\simpleSpec.ts at
c:\dev\TestProject\tests\jasmine\typescript\simpleSpec.js Error: 0 :
Time:22:47:48.7088508; Thread:23; Message:Couldn't find generated path
for C:\dev\TestProject\src\typescript\classSimple.ts at
And that's it - it just cuts off on the end and nothing happens. The thing is, I see the .js files exactly in the location stated within the trace above, but Chutzpah is claiming Couldn't find generated path for...
This is as simple as it gets for unit testing. I know the tests work independently of the .ts files because if I run just the .js files the tests pass.
What am I doing incorrectly?
Thanks for posting the very detailed repro. You are hitting an issue I have seen a couple times. Since your chutzpah.json is nested in your test folder you need to specify the folder path mapping that chutzpah should use for determining how to map from source to output folder. To do this just change your chutzpah.json to:
{
"RootReferencePathMode": "SettingsFileDirectory",
"Framework": "jasmine",
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ],
"Paths": [
{ "SourcePath": "../../../", "OutputPath": "../../../"}
]
},
"References": [
{ "Path": "../../../src/typescript/classSimple.ts" }
],
"Tests": [
{ "Path": "simpleSpec.ts" }
],
"EnableTracing": true,
"TraceFilePath": "trace.txt"
}
The other workaround would be to just place the chutzpah.json at the root of your project.
I need to look into making Chutzpah better to avoid this. I think I will look at letting chutzpah in this situation just assume the file is co-located to avoid this common pitfall.
Google led me here for a similar issue:
Some new tests in my Chutzpah project are written in TypeScript and compiled into a single outfile:
tsconfig.json
"compilerOptions": {
"noImplicitAny": true,
"target": "es5",
"module": "none",
"outFile": "./Tests/mytests-ts.js",
"sourceMap": true
}
Chutzpah couldn't find the *.ts files
Chutzpah Error: System.IO.FileNotFoundException: Couldn't find generated path for D:\Code\ChutzpahProject\Scripts\DateServiceMock.ts
until I used the Paths option:
chutzpah.json
"Compile": {
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ],
"Executable": "build-ts.cmd",
"Paths": [
{ "OutputPath": "Tests/mytests-tests-ts.js" }
]
},
This feels like it could have been a comment to #matthew-manela's answer...I think.