How to instrument Angular CLI to report coverage on all source files - code-coverage

When running ng test --code-coverage only coverage for source files that are undergoing tests are reported in the coverage report. How to configure instrumentation to include all source files (e.g. all .ts files in src/app folder)?
I have tried different things:
Following https://github.com/angular/angular-cli/issues/1735 I tried replacing the suggested context definition. This does not work at all in my case. Loads of errors are outputted and no tests are executed
Remove istanbul as dependency and rely solely on karma-coverage, where it is possible to configure includeAllSources: true - however Angular CLI cannot run without karma-coverage-istanbul-reporter
A combination of the above with karma-coverage-istanbul-reporter as a dependency - no difference from the original setup
There has to be some way to instrument Angular CLI to include all source files. Adding empty specs seems tedious and error-prone, since coverage will not show up at all if the class/source file is not undergoing test and you therefore manually have to check whether it's included in the coverage report or not.
Any suggestions appreciated!
Various information:
ng --version
#angular/cli: 1.4.8
node: 6.11.3
os: linux x64
#angular/animations: 4.4.6
#angular/common: 4.4.6
#angular/compiler: 4.4.6
#angular/core: 4.4.6
#angular/forms: 4.4.6
#angular/http: 4.4.6
#angular/platform-browser: 4.4.6
#angular/platform-browser-dynamic: 4.4.6
#angular/router: 4.4.6
#angular/cli: 1.4.8
#angular/compiler-cli: 4.4.6
#angular/language-service: 4.4.6
typescript: 2.3.4
package.json:
"devDependencies": {
"#angular/cli": "1.4.8",
"#angular/compiler-cli": "^4.2.4",
"#angular/language-service": "^4.2.4",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.2.0",
"jasmine-core": "~2.6.2",
"jasmine-jquery": "2.1.1",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^1.7.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage": "^1.1.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-htmlfile-reporter": "0.3.5",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-json-reporter": "1.2.1",
"karma-spec-reporter": "0.0.31",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.3.3"
}
karma.conf.js:
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '#angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('karma-spec-reporter'),
require('karma-htmlfile-reporter'),
require('karma-json-reporter'),
//require('karma-coverage-istanbul-reporter'),
require('#angular/cli/plugins/karma')
],
files: [
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
// coverageIstanbulReporter: {
// reports: [ 'html', 'text', 'text-summary', 'json' ],
// fixWebpackSourcePaths: true
// },
angularCli: {
environment: 'dev'
},
reporters: ['spec', 'kjhtml', 'html', 'json', 'coverage'],
preprocessors: {
'src/app/*.ts': ['coverage']
},
htmlReporter: {
outputFile: 'testresults/index.html',
pageTitle: 'CRS Frontend Unit-tests - test results'
},
jsonReporter: {
stdout: false,
outputFile: 'testresults/results.json' // defaults to none
},
coverageReporter: {
dir: 'coverage',
includeAllSources: true,
reporters: [
{ type: 'html', subdir: 'html' },
{ type: 'json', subdir: 'json' }
]
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: true,
failOnEmptyTestSuite: false
});
};

Please do the following changes if you using angular CLI 1.7.X
~/src/test.ts
const context = require.context('./', true, /\/app\/.*\.ts$/);
~/src/tsconfig.spec.json
"include": [
"**/*.ts",
"**/*.d.ts"
]

I've had good luck using the karma-sabarivka-reporter to pick up missed source files into coverage.

Related

Webpack Compile: Cannot find module '#babel/preset-env' when deploy production

i use capistrano to deploy my rails project( Rails 6.0.0, Ruby 2.6.0)
i get bellow log when start `bundle exec cap production deploy
ERROR in ./app/javascript/packs/application.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '#babel/preset-env'
and
ERROR in ./app/javascript/packs/server_rendering.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '#babel/preset-env'
But when i test in local RAILS_ENV=production bundle exec rails assets:precompile . It built successful
my package.json
{
"name": "my_app_name",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.0.0",
"#rails/actiontext": "^6.0.0",
"#rails/webpacker": "^4.0.2",
"axios": "^0.19.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"core-js": "2",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react_ujs": "^2.6.0",
"trix": "^1.0.0",
"webpack-dev-server": "^3.3.1"
},
"devDependencies": {
"#babel/preset-env": "^7.7.6",
"babel-preset-env": "^1.7.0",
"webpack-dev-server": "^3.3.1"
}
}
my app/javascript/packs/application.js
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);
my app/javascript/packs/server_rendering.js
// By default, this pack is loaded for server-side rendering.
// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);
any solution? Thank You
Anything you want available when compiling in production mode needs to be in dependencies. Move #babel/preset-env out of devDependencies into dependencies in package.json. You can also delete babel-preset-env since that is redundant.

`babel-loader` dependency error when `rake assets:precompile` in production

I've inherited a Rails application and I'm trying to get it to build manually in production
The application uses
webpacker-3.5.5 ruby gem to manage JavaScript assets
webpack v3.12.0
sprockets gem to manage traditional CSS / Image assets
As part of the webpacker gem config, it uses babel-loader on JSX/React assets particularly. I'm not quite sure what this does, but I'm guessing it's some sort of pre-processor?
module.exports = {
test: /\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
cacheDirectory: true,
// Use .babelrc - not webpack config JS - to define all options
babelrc: true
}
}]
}
When I try to run rake assets:precompile on the production server, it errors on the step where it tries to build assets with webpack
> rake assets:precompile
yarn install v1.17.3
warning package.json: No license field
warning delly#1.0.0: No license field
[1/4] Resolving packages...
success Already up-to-date.
Done in 1.18s.
Webpacker is installed 🎉 🍰
Using /app/config/webpacker.yml file for setting up webpack paths
Compiling…
Compilation failed:
Hash: 27785324c8b2ba6004dd
Version: webpack 3.12.0
Time: 119ms
Asset Size Chunks Chunk Names
manifest.json 2 bytes [emitted]
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/app'
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in '/app'
This does not happen in development locally, only production.
Any idea why this would be erroring? Is babel-loader required in production or can I remove it from production entirely?
Here is my package.json that defines installation of the package:
{
"name": "delly",
"version": "1.0.0",
"scripts": {
"test": "node_modules/.bin/jest --no-cache --config spec/javascript/jest.config.js",
"test:debug": "node --inspect-brk node_modules/.bin/jest --no-cache --config spec/javascript/jest.config.js --colors --verbose"
},
"devDependencies": {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/plugin-proposal-object-rest-spread": "^7.4.4",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-modules-commonjs": "^7.4.4",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.6",
"babel-plugin-module-resolver": "^3.2.0",
"eslint": "^4.6.1",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.6.1",
"i18n-js": "^3.2.2",
"jest": "^24.8.0",
"jest-dom": "^3.4.0",
"js-yaml": "^3.13.1",
"react-testing-library": "^7.0.1",
"stylelint": "^9.3.0",
"stylelint-config-rational-order": "^0.0.2",
"webpack-dev-server": "2.11.2"
},
"dependencies": {
"#rails/webpacker": "^3.5.5",
"axios": "^0.19.0",
"core-js": "3",
"html-react-parser": "^0.4.6",
"jquery": "^3.3.1",
"jquery-ujs": "^1.2.2",
"prop-types": "^15.6.1",
"rails-erb-loader": "^5.4.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-on-rails": "^11.3.0",
"react-toggle-switch": "^3.0.4",
"react-transition-group": "1.x",
"react_ujs": "^2.4.4"
}
}
a
When you run rake assets:precompile in production mode, it also runs webpack using production mode, in this case, only packages set in dependencies are loaded, if you review packages.json, babel-loader is set in devDependencies.\
The solution? move babel-loader to dependencies

electron builder app size is too large

I find that the MyApp.exe file generated using electron-builder is nearly about 500M. I am not sure what I did because previously, just for ia32 or x64, it would be around 196M. I also looked at this link and it mentions only about 55MB-60MB. So the question is, why am I getting such large sizes for my exe files? My app itself is very small and if electron is only around 33MB, what's all that extra space there?
Here are my package.json entries:
"build": {
"appId": "com.electron.myApp",
"publish": [
{
"provider": "generic",
"url": "https://myAppServer"
}
],
"win": {
"target": [
{
"target": "nsis",
"arch": [
"ia32"
]
}
]
},
"asar": false,
"nsis": {
"oneClick": true,
"perMachine": false,
"artifactName": "${productName}-Setup-${version}.${ext}"
}
"devDependencies": {
"electron": "^1.7.9",
"electron-installer-windows": "^0.2.0",
"electron-builder": "^19.45.5",
"electron-packager": "^8.5.2",
"electron-winstaller": "^2.5.2",
"grunt-electron-installer": "^2.1.0"
},
"dependencies": {
"auto-launch": "^5.0.1",
"cron": "^1.2.1",
"electron-config": "^0.2.1",
"electron-positioner": "^3.0.0",
"electron-squirrel-startup": "^1.0.0",
"electron-window": "^0.8.1",
"electron-updater": "^2.16.1",
"fs": "^0.0.1",
"homedir": "^0.6.0",
"https": "^1.0.0",
"https-proxy-agent": "^1.0.0",
"line-by-line": "^0.1.5",
"pac-proxy-agent": "^1.0.0",
"url": "^0.11.0",
"winreg": "^1.2.3",
"xml2js": "^0.4.17"
}
}
Is this the expected size of an electron app? Any way to make this smaller?
Regards,
Arun
You can try npm prune --production but even the most minimal Electron application is going to be around 100MB.
I'm going to turn Arun's comment into an answer because I nearly missed it, and it was what solved the issue for me:
I figured out what the issue was. I had an Output directory within my electron root directory where I was storing my final MSI files. It was packaging that directory as well as a result of which the size kept growing.
Thanks, Arun!

Code coverage on JSX tests with Istanbul

I am trying to instrument my code to get some coverage up and running, but something is slipping through my fingers.
I launch istanbul with:
node_modules/.bin/istanbul cover ./node_modules/mocha/bin/_mocha -- -u exports -R spec
And my mocha.opts looks like this:
app/assets/javascripts/components/**/*-mocha.jsx
--compilers jsx:mocha/compiler.js
Everything seems to run fine (the tests run, at least), but the only coverage that I get is on the files used to compile the JSX to JavaScript (used in compiler.js
compiler.js 100%
jsx-stub-transform.js 65%
Terribly useful...
Any ideas?
I use gulp-jsx-coverage.
Here is my config as an example:
var jsxCoverage = require('gulp-jsx-coverage');
gulp.task('test', ['lint', 'env:test'], jsxCoverage.createTask({
src: ['src/**/*_test.js', 'src/**/*_test.jsx'], // will pass to gulp.src as mocha tests
istanbul: { // will pass to istanbul
coverageVariable: '__MY_TEST_COVERAGE__',
exclude: /node_modules|tests|._test/ // do not instrument these files
},
transpile: { // this is default whitelist/blacklist for transpilers
babel: {
include: /\.jsx?$/,
exclude: /node_modules/
}
},
coverage: {
reporters: ['text', 'lcov', 'cobertura'], // list of istanbul reporters
directory: 'coverage' // will pass to istanbul reporters
},
mocha: { // will pass to mocha
reporter: 'spec'
},
babel: { // will pass to babel
sourceMap: 'inline', // get hints in HTML coverage reports
plugins: []
}
}));
* UPDATE *
Over time I decided to stop using gulp-jsx-coverage. My tests use the babel-rewire-plugin, and gulp-jsx-coverage was not instrumenting my files correctly, resulting in a coverage report that included a bunch of untested generated code. No bueno.
See my 2nd answer for my current set up.
I am using mocha and isparta directly with Babel 6 as follows:
npm test command
BABEL_ENV=test babel-node node_modules/isparta/bin/isparta cover _mocha
.babelrc
{
"plugins": [
"add-module-exports",
"transform-decorators-legacy",
"transform-runtime"
],
"presets": [
"es2015",
"react",
"stage-0"
],
"env": {
"test": {
"plugins": [
"rewire"
]
}
}
}
test/mocha.opts
--compilers js:babel-core/register
--require test/init.js
src/**/*_test.js*
test.init.js
'use strict';
require('mock-require')('clappr');
require('testdom')('<html><body></body></html>', {
React: 'react',
localStorage: 'localStorage'
});
.istanbul.yml
instrumentation:
root: src
excludes: ['*_test.js']
select dependencies from package.json
"babel-cli": "^6.7.5",
"babel-core": "^6.7.2",
"babel-eslint": "^5.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-rewire": "^1.0.0-rc-2",
"babel-plugin-runtime": "^1.0.7",
"babel-plugin-syntax-jsx": "^6.5.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.7.2",
"babel-runtime": "^5.8.34",
"babel-template": "^6.7.0",
"babel-types": "^6.7.2",
"isparta": "^4.0.0",
"mocha": "^2.4.5",
A note on .JSX files
I renamed all of my .JSX files to .JS, and here's why:
I use codecov for hosted coverage reporting. This exposed the fact that while coverage/lcov-report/index.html showed the correct coverages, something in the JSON coverage files is missing for .JSX files. I was never able to figure it out. As far as I can tell, it's a bug in isparta or istanbul. I also tried istanbul#1.0.0-alpha.2 and found it had the same issue.
React used to recommend naming files .JSX for the benefit of transform utilites and editors. This is no longer a recommendation. As far as I can tell, it just doesn't matter anymore.
Since switching to .JS, I haven't seen any issues with tools including Atom and IntelliJ.
If you don't want to rename your files, you can add the following to my examples from above:
In the script, after isparta cover, add --include \"src/**/*_test.jsx\".
To .istanbul.yml, add
extensions:
- .js
- .jsx

Bower is not updating in Visual Studio 2015 CTP 6

I have just installed React using Bower inside Visual Studio 2015 CTP6.
In Dependencies -> Bower -> React (0.13.0)
I do have React package.(js files are also in bower_components/react folder on disk)
When I try to add script <script src="~/lib/ I do not have React in my list of scripts.
Intelligence not working and JavaScript is not loaded.
in this sample I added a simple rule to copy all the .js files:
{
"name": "WebApplication",
"private": true,
"dependencies": {
"bootstrap": "3.0.0",
"jquery": "1.10.2",
"jquery-validation": "1.11.1",
"jquery-validation-unobtrusive": "3.2.2",
"hammer.js": "2.0.4",
"bootstrap-touch-carousel": "0.8.0",
"react": "~0.13.1"
},
"exportsOverride": {
"bootstrap": {
"js": "dist/js/*.*",
"css": "dist/css/*.*",
"fonts": "dist/fonts/*.*"
},
"bootstrap-touch-carousel": {
"js": "dist/js/*.*",
"css": "dist/css/*.*"
},
"hammer": {
"": "hammer.{js,min.js}"
},
"react": {
"": "*.js"
}
}
}
the result is that when you run install bower task you'll find inside the wwwroot/lib a directory named react with just the ,js files.
I think you have configure the exportsOverride section in the bower.json

Resources