how to use multiple mochacov reporters in single Gruntfile and get the coverage report - gruntjs

Currently am switching between html-cov and json-cov in my gruntfile and running the command
grunt mochacov:all > coverage.html
(or)
grunt mochacov:all > coverage.json
Here is the json portion of config from my Gruntfile.js :
mochacov : {
options : {
reporter : 'json-cov',
//reporter : 'travis-cov',
require : ['should'],
timeout: 250000,
//quiet : true,
output : 'coverage.json',
},
all: ['test/test-*.js']
},
Is there anyway using which i can get both coverage.html and coverage.json in the output by default by specifying both html-cov and json-cov somehow?

Sadly, looks like by default grunt-mocha-cov doesn't support this, as the reporter only accepts a 'string' (per the docs).
Theoretically this should be possible with a grunt multitask.

I have found out the answer for the same :-
This is what we need to have in our Gruntfile.js
mochacov: {
jsoncoverage: {
options: {
reporter: 'json-cov',
//reporter : 'travis-cov',
require: ['should'],
timeout: 250000,
//quiet : true,
output: 'reports/coverage.json'
},
all: ['test/test-*.js']
},
htmlcoverage: {
options: {
reporter: 'html-cov',
//reporter : 'travis-cov',
require: ['should'],
timeout: 250000,
//quiet : true,
output: 'reports/coverage.html'
},
all: ['test/test-*.js']
}
}
//and then the following line needs to be there :
grunt.registerTask('mochacoverage', ['mochacov:jsoncoverage', 'mochacov:htmlcoverage']);
Then we can run it using grunt mochacoverage and it will do both html and json

Related

Is there any way to use #next/env in codegen.yaml?

I was wondering if there was a way to use #next/env to replace variables in codegen.yaml when i run yarn codegen:
graphql-codegen -r dotenv/config --config codegen.yml - this is codegen example to load dot env
graphql-codegen -r #next/env --config codegen.yml - this is what i want to achieve
When i call it, i get
${SERVER_API_URL}/graphql goes as undefined/graphql
My usecase is:
# .env
HOST=https
API_DOMAIN=example.com
SERVER_API_URL=$HOST://$API_DOMAIN
# codegen.yaml
schema: ${SERVER_API_URL}/graphql
Why use #next/env? it replaces variables in .env, i'm attaching documentation sample from next.js documentation:
Note: Next.js will automatically expand variables ($VAR) inside of
your .env* files. This allows you to reference other secrets, like so:
# .env
HOSTNAME=localhost
PORT=8080
HOST=http://$HOSTNAME:$PORT
If you are trying to use a variable with a $ in the actual value, it needs to be escaped like so: \$.
For example:
# .env
A=abc
# becomes "preabc"
WRONG=pre$A
# becomes "pre$A"
CORRECT=pre\$A
source: https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables
You can't use #next/env directly via -r flag. However you still have couple of alternatives. For example, you can address the required .env file directly:
DOTENV_CONFIG_PATH=./.env.local graphql-codegen --config codegen.yml -r dotenv/config
If you still want to use #next/env, you can convert your codegen.yml to codegen.js and import #next/env. For example, my original YML:
overwrite: true
schema:
- https://graphql.fauna.com/graphql:
headers:
Authorization: 'Bearer ${FAUNA_ADMIN_KEY}'
documents: null
generates:
src/generated/graphql.ts:
plugins:
- typescript
- typescript-operations
- typescript-graphql-request
./graphql.schema.json:
plugins:
- 'introspection'
I re-wrote it as JS:
const { loadEnvConfig } = require('#next/env')
loadEnvConfig(process.cwd())
module.exports = {
overwrite: true,
schema: {
'https://graphql.fauna.com/graphql': {
headers: {
Authorization: `Bearer ${process.env.FAUNA_ADMIN_KEY}`,
},
},
},
documents: null,
generates: {
'src/generated/graphql.ts': {
plugins: [
'typescript',
'typescript-operations',
'typescript-graphql-request',
],
},
'./graphql.schema.json': { plugins: ['introspection'] },
},
}
and then generated the code using graphql-codegen --config codegen.js.
Here is an issue on Github that helped me.

how to exclude files with postcss 8

I am using tailwindcss with postcss8 (it comes with tailwind) and there is a problem trying to parse a css from a node_modules package.
is there a way to exclude these css files from being processed by postcss?
this is the error I get:
ERROR in ./node_modules/#fullcalendar/common/main.css (./node_modules/#nuxt/postcss8/node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--3-oneOf-1-2!./node_modules/#fullcalendar/common/main.css)
Module build failed (from ./node_modules/#nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 45
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#fullcalendar/common/main.css:633:3
at Parser.error (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:127:11)
at Parser.operator (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:162:20)
at Parser.parseTokens (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:245:14)
at Parser.loop (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:132:12)
at Parser.parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-values-parser/lib/parser.js:51:17)
at parse (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:47:30)
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:333:24
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:72:18
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:55:18
at Rule.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Rule.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at /Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:60:24
at Root.each (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:41:16)
at Root.walk (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:52:17)
at Root.walkDecls (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/#nuxt/postcss8/node_modules/postcss/lib/container.js:70:19)
at transformProperties (/Users/ctw/Sites/github/escience/WoSSS/website/node_modules/postcss-custom-properties/index.cjs.js:330:8)
# ./node_modules/#fullcalendar/common/main.css 4:14-191
# ./node_modules/#fullcalendar/common/main.js
# ./node_modules/#fullcalendar/timegrid/main.js
# ./node_modules/babel-loader/lib??ref--2-0!./node_modules/#nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./components/global/Schedule.vue?vue&type=script&lang=js&
# ./components/global/Schedule.vue?vue&type=script&lang=js&
# ./components/global/Schedule.vue
# ./node_modules/.cache/nuxt/components/index.js
# ./node_modules/.cache/nuxt/components/plugin.js
# ./node_modules/.cache/nuxt/index.js
# ./node_modules/.cache/nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js
I also had this issue. However, this is how I solve it.
Add the following to your nuxt.config.js file.
build: {
postcss: {
plugins: {
/**
* do not remove the cssnano key.
* (https://github.com/fullcalendar/fullcalendar/issues/5503)
*/
cssnano: {
preset: [
'default',
{
calc: false,
},
],
},
},
},
transpile: [
/#fullcalendar.*/, // always need for fullcalenar
],
},
To learn more about it, read this processing css with postcss, calc/var problems.
I hope this helps you. If you have solved this, please share your solution so that the community can learn from it.

CSS Visual Regession Testing with BackdropJS - could not run grunt:reference or grunt:test

I tried following this tutorial link on setting up backstop.js
https://joe-watkins.io/css-visual-regression-testing-with-grunt-backstopjs/
I followed all the instructions as required.
But I'm running into this error onscreen.
andy.cmwong#ONLM4800GR8LN32 /c/backstop_test
$ grunt backstop:reference
Running "backstop:reference" (backstop) task
[12:16:30] Using gulpfile c:\backstop_test\bower_components\backstopjs\gulpfile.js
[12:16:30] Starting 'clean'...
bitmaps_reference was cleaned.
[12:16:30] Starting 'bless'...
[12:16:30] Finished 'clean' after 9.82 ms
[12:16:30] Finished 'bless' after 15 ms
[12:16:30] Starting 'reference'...
[12:16:30] Starting 'init'...
[12:16:30] Finished 'init' after 73 μs
[12:16:30] Starting 'test'...
Generating reference files.
[12:16:30] Finished 'test' after 4.03 ms
reference has run.
[12:16:30] Finished 'reference' after 5.24 ms
Testing script failed with code: 1
Looks like an error occured. You may want to try running `$ gulp echo`. This will echo the requested test URL output to the console. You can check this output to verify that the file requested is inde
ed being received in the expected format.
cp: cannot stat `./bitmaps_reference': No such file or directory
ERROR: Error: Command failed: C:\Windows\system32\cmd.exe /s /c "cp -rf ./bitmaps_reference c:\backstop_test\tests"
cp: cannot stat `./bitmaps_reference': No such file or directory
Earlier, there was an additional error which states the gulp.run() is deprecated thus it suggested I need to use another npm module to execute tasks in sequence, which led me to this.
https://www.npmjs.com/package/run-sequence
And I managed to resolved it like so
//under bower_components/gulp/tasks/reference.js
var gulp = require('gulp');
var runSequence = require('run-sequence').use(gulp);
//FIRST CLEAN REFERENCE DIR. THEN TEST
gulp.task('reference', ['clean','bless'], function() {
//gulp.run('test');
runSequence('test');
console.log('reference has run.');
});
It works.
However, I'm still not able to complete the grunt/gulp tasks execution thus I'm really stuck with this.
I'm wondering has anybody tried following the tutorial link above and managed to succeed in getting backstopjs to work?
Your input on this is greatly appreciated.
UPDATE
I forgot to show you what my grunt config setup looks like.
........................
grunt.initConfig({
backstop: {
setup: {
options : {
backstop_path: './bower_components/backstopjs',
test_path: './tests',
setup: false,
configure: true
}
},
test: {
options : {
backstop_path: './bower_components/backstopjs',
test_path: './tests',
create_references: false,
run_tests: true
}
},
reference: {
options : {
backstop_path: '/bower_components/backstopjs',
test_path: './tests',
create_references: true,
run_tests: false
}
}
}
});
......................etc
My backstop.json file
{
"viewports": [
{
"name": "phone",
"width": 320,
"height": 480
},
{
"name": "tablet_v",
"width": 568,
"height": 1024
},
{
"name": "tablet_h",
"width": 1024,
"height": 768
}
],
"scenarios": [
{
"label": "http://getbootstrap.com",
"url": "http://getbootstrap.com",
"hideSelectors": [],
"removeSelectors": [
"#carbonads-container"
],
"selectors": [
"header",
"main",
"body .bs-docs-featurette:nth-of-type(1)",
"body .bs-docs-featurette:nth-of-type(2)",
"footer",
"body"
],
"readyEvent": null,
"delay": 500,
"misMatchThreshold" : 0.1
}
]
}
I managed to get it working last night when I got onto my Linux box(VMWare build), redo the backstopjs setup and successfully perform some test runs.
I did have my original suspicion that it was my Window OS environment that wasn't set up properly so I may have to reinstall npm/node/backstop etc, and have it resolved from there.
All good now.

Grunt less source maps change path prefix

My config
server: {
options: {
sourceMap: true,
sourceMapFilename: '.tmp/styles/main.css.map',
sourceMapURL: '/styles/main.css.map'
},
files: {
'.tmp/styles/main.css':
'src/app/views/styles/application.less'
}
},
My structure
.tmp
src
Gruntfile.js
so after calling grunt less:server
I am getting .tmp/styles/main.css.map
with attr "sources" everywhere src/ prefix
but I want without src/ because server starts from src/*
How can I change it ?
Since version 1.0.0. grunt-contrib-less accepts the same options as the command line compiler does. You can get a list of these options by running lessc wihtout any argument on your command line:
--source-map-rootpath=X Adds this path onto the sourcemap filename and less file paths.
So you should use:
options: {
sourceMap: true,
sourceMapFilename: '.tmp/styles/main.css.map',
sourceMapURL: '/styles/main.css.map',
sourceMapRootpath: "/app/views/styles/"
}

Grunt-template-jasmine-istanbul missing dir error

I install grunt plugins grunt-template-jasmine-istanbul
npm install grunt-template-jasmine-istanbul --save-dev
and add to Gruntfile.js as following:
coverage: {
src: ['app/scripts/**/*.js'],
options: {
specs: ['test/**/*.js'],
template: require('grunt-template-jasmine-istanbul'),
templateOptions: {
coverage: 'test/coverage/coverage.json',
report: [
{type:'html',options: {dir: 'test/coverage/html'}},
{type:'text',options: {dir: 'test/coverage/text'}},
{type:'text'},
],
thresholds: {
lines: 75,
statements: 75,
branches: 75,
functions: 90
}
}
}
},
but when running test it shown following warning and no report in test/coverage folder:
my#computer:/share/angularjs-gs$ grunt test:coverage
Running "coverage" task
Warning: "dir" option is required. Use --force to continue.
Aborted due to warnings.
I've also created test/coverage/html and test/converage/text folder. I also view code from plugin's author but cannot find any solution: https://github.com/maenu/grunt-template-jasmine-istanbul-example/blob/connect/Gruntfile.js
I've found it, must wrap coverage object by jasmine, it maybe that coverage used as jasmine plugin but spec and src attribute seems being redundant.
jasmine: {
coverage: {
src: ['app/scripts/**/*.js'],
options: {
specs: ['test/**/*.js'],
template: require('grunt-template-jasmine-istanbul'),
templateOptions: {
coverage: 'test/coverage/coverage.json',
report: [
{type:'html',options: {dir: 'test/coverage/html'}},
{type:'text',options: {dir: 'test/coverage/text/'}},
{type:'text-summary'}
],
thresholds: {
lines: 75,
statements: 75,
branches: 75,
functions: 90
}
}
}

Resources