How to generate a coverage report with vscode extension tests - testing

I'm implementing a VSCode extension. I set up the project following this link.
It generates a starter project with a src/test/runTest.ts file:
import * as path from 'path';
import { runTests } from '#vscode/test-electron';
async function main() {
try {
// The folder containing the Extension Manifest package.json
// Passed to `--extensionDevelopmentPath`
const extensionDevelopmentPath = path.resolve(__dirname, '../../');
// The path to test runner
// Passed to --extensionTestsPath
const extensionTestsPath = path.resolve(__dirname, './suite/index');
// Download VS Code, unzip it and run the integration test
await runTests({ extensionDevelopmentPath, extensionTestsPath });
} catch (err) {
console.error('Failed to run tests');
process.exit(1);
}
}
main();
And a command in the package.json:
{
"compile": "tsc -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
}
Is there a way to generate a coverage report with it?

VSCode extension unittesting uses Mocha under the hood. You can generate coverage reports like in any other Typescript/Javascript project using one of the many available frameworks, e.g. c8, jest, istanbul, etc.
Install the framework of your choice, here I use c8
npm i --save-dev c8
and add to scripts
"scripts": {
"compile": "tsc -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js",
"coverage": "c8 --check-coverage npm run test"
}
Depending on your extension you might need to create a configuration file with the files you want to check for coverage. Here we are checking the compiled .js files placed under the out/ dir and we also excluding the files responsible for unittesting i.e. out/test/ (usually).
.c8rc
{
"all": true,
"include": ["out/**"],
"exclude": ["**/node_modules/**", "out/test/"],
"reporter": ["html", "text"]
}
Run the coverage script and you should get an output of your coverage
npm run coverage

Related

Minify script in package.json never finishes executing

I want to minify/uglify a javascript file but after I run the script it never finishes executing. These are the scripts and dependencies I added to it.
"scripts": {
"minify": "uglifyjs -i src/*.js -o build/scripts.min.js",
"uglify": "npm run minify",
},
"devDependencies": {
"uglify-js": "^2.8.29"
}
This is the link to the package.json in my repo. What am I doing wrong? 🤔 Thanks

How can I run an npm script installed in the root of a learn repo, from a child package?

For instance, I want to run jest tests for one of my packages.
I set up the test script in the child package.json:
"test" : "jest"
However when I got to the package directory and run:
npm test
I get:
sh: jest: command not found
This makes sense because I've only installed jest in the root package since it is a dev dependency.
What do I need to do to make the npm package jest available in the child packages?
We're using an npm package called env-cmd https://www.npmjs.com/package/env-cmd to run scripts from root level in packages.
our root package.json looks something like this:
{
"name": "#myAwesomeApp/root",
"private": true,
"devDependencies": {
"env-cmd": "^10.1.0",
"lerna": "^5.0.0"
},
"dependencies": {
[...]
},
"workspaces": [
"packages/*"
],
"scripts": {
"internal:warning": "echo \"\n\t\\\\033[32m! ANY NOTIFICATION !\n\"",
"jest": "npm run internal:warning && env-cmd --silent lerna run test"
}
}

lint-staged generates new .eslintcache file on commit

I'm creating a new Vue project via npm init vue#latest and select everything (Eslint with Prettier)
I'm using the following setup
OS: Win11
node: v17.4
npm: v8.4
I setup lint-staged via npx mrm#2 lint-staged. For testing purposes I add a new file inside the src directory
// calc.js
function
add
(numOne,
numTwo) {
return numOne +
numTwo;
}
When committing the new file the linter fixes the code style as expected. But after that I manually have to delete a generated .eslintcache file.
Older posts say I should add
*.eslintcache
to the .gitignore file. But I compared the generated .gitignore file with the generated one from the Vue CLI and both don't have this line. When using the Vue CLI the cache file doesn't appear.
So are there any other solutions or is there something I missed?
The .eslintcache file is created from ESLint's --cache flag, which is included in the default linter command of lint-staged:
// package.json
{
"lint-staged": { 👇
"*.{vue,js,jsx,cjs,mjs}": "eslint --cache --fix",
"*.{js,css,md}": "prettier --write"
}
}
You can either remove the --cache flag:
// package.json
{
"lint-staged": {
"*.{vue,js,jsx,cjs,mjs}": "eslint --fix",
"*.{js,css,md}": "prettier --write"
}
}
...or set the cache file location with the --cache-location flag (e.g., specify node_modules/.cache):
// package.json
{
"lint-staged": { 👇
"*.{vue,js,jsx,cjs,mjs}": "eslint --cache --fix --cache-location ./node_modules/.cache/.eslintcache",
"*.{js,css,md}": "prettier --write"
}
}

Different vue.config.js for npm run serve and npm run build

I'm overriding webpack config using vue.config.js:
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
publicPath: 'http://0.0.0.0:8080',
outputDir: './dist/',
chainWebpack: config => {
config.optimization
.splitChunks(false)
config
.plugin('BundleTracker')
.use(BundleTracker, [{ filename: './webpack-stats.json' }])
config.resolve.alias
.set('__STATIC__', 'static')
config.devServer
.public('http://0.0.0.0:8080')
.host('0.0.0.0')
.port(8080)
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.headers({ "Access-Control-Allow-Origin": ["*"] })
}
};
The webpack-bundle-tracker plugin generates a file called webpack-stats.json:
{
"status": "done",
"publicPath": "http://0.0.0.0:8080/",
"chunks": {
"app": [
{
"name": "app.js",
"publicPath": "http://0.0.0.0:8080/app.js",
"path": "/Users/me/dev/vue-app/dist/app.js"
}
]
}
}
My problem is that depending on whether I am in development or in production, I want the path to the file to be different.
When I run npm run serve: the generated path should be http://0.0.0.0:8080/app.js (so that the file is served by npm and I can have hot reload etc.)
When I run npm run build: the generated path should be http://0.0.0.0:8000/static/app.js (so that django can serve the file. please note the port number 8000, not 8080)
So I'm wondering if there's a way for vue.config.js to have 2 versions, one that would be used by serve the other one by build.
I know this question is like two years old.
Use the absolute path for the environment variable VUE_CLI_SERVICE_CONFIG_PATH.
You could use $PWD to instead current absolute path.
// package.json
"scripts": {
"serve": "vue-cli-service serve",
"serve:test": "env VUE_CLI_SERVICE_CONFIG_PATH=\"/var/www/html/your_project/vue.config_serve_test.js\" vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
npm run serve:test will use vue.config_serve_test.js
npm run build will use vue.config.js

GULP: gulp is not defined

As shown in the screen shot below I am not able to run gulp to concat the JavaScript files. Its saying that gulp is not defined.
I have tried the following commands:
npm install -g gulp
npm install gulp
npm install gulp --save-dev
I have also set the environment variables as following:
C:\Users\<user>\AppData\Roaming\npm;C:\Python27;C:\Users\<user>\AppData\Roaming\npm\node_modules;C:\Users\<user>\AppData\Roaming\npm\node_modules\gulp;
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
//script paths
var jsFiles = 'scripts/*.js',
jsDest = 'dist/scripts';
gulp.task('scripts', function() {
return gulp.src(jsFiles)
.pipe(concat('scripts.js'))
.pipe(gulp.dest(jsDest));
});
you just need to install and require gulp locally, you probably only installed it globally
At the command line
cd <project-root> && npm install --save-dev gulp
In your gulpfile.js
var gulp = require('gulp');
this is a different dependency than the command line dependency (that you installed globally). More specifically, it is the same NPM package, but the command line program will execute code usually from a different entry point in the NPM package then what require('X') will return.
If we go to the package.json file in the Gulp project on Github, it will tell the whole story:
{
"name": "gulp",
"description": "The streaming build system",
"version": "3.9.1",
"homepage": "http://gulpjs.com",
"repository": "gulpjs/gulp",
"author": "Fractal <contact#wearefractal.com> (http://wearefractal.com/)",
"tags": [ ],
"files": [
// ...
],
"bin": {
"gulp": "./bin/gulp.js"
},
"man": "gulp.1",
"dependencies": {
// ...
},
"devDependencies": {
// ...
},
"scripts": {
"prepublish": "marked-man --name gulp docs/CLI.md > gulp.1",
"lint": "eslint . && jscs *.js bin/ lib/ test/",
"pretest": "npm run lint",
},
"engines": {
"node": ">= 0.9"
},
"license": "MIT"
}
so at the command line:
$ gulp default
will execute this:
"bin": {
"gulp": "./bin/gulp.js"
},
on the other hand, require('gulp') in your code will return the value of this:
https://github.com/gulpjs/gulp/blob/master/index.js
normally we see this in a package.json file as:
"main": "index.js"
but since this is the default, they just omitted it (which is dumb IMO, better to be explicit, but they aren't the first project I have seen take the lame shorthand route.).
Its occurs on Windows and usually one of the following fixes it:
If you didn't, run npm install gulp on the project folder, even if
you have gulp installed globally.
Normally, It isn't a problem on Windows, but it could be a issue with
the PATH. The package will try to get the PATH from the environment,
but you can override it by adding exec_args to your gulp settings.
For example, on Ubuntu:
"exec_args": {
"path": "/bin:/usr/bin:/usr/local/bin"
}
Hope It will be OK.
Source: https://github.com/NicoSantangelo/sublime-gulp/issues/12