I'd like Protractor E2E tests to reflect my code coverage in SonarQube.
I've tried grunt-protractor-coverage npm module but it shows 100% coverage while the report file it creates is empty.
Here's the relevant part of my Gruntfile.js:
connect: {
options: {
port: 9000,
hostname: 'localhost'
},
runtime: {
options: {
base: 'instrumented/build'
}
}
},
instrument: {
files: 'build/**/*.js',
options: {
lazy: true,
basePath: "instrumented"
}
},
protractor_coverage: {
options: {
keepAlive: true,
noColor: false,
coverageDir: 'coverage',
args: {
baseUrl: 'http://localhost:9000'
}
},
local: {
options: {
configFile: './protractor-chrome-conf.js'
}
}
},
makeReport: {
src: 'coverage/*.json',
options: {
type: 'lcov',
dir: 'coverage/dir',
print: 'detail'
}
}
Any ideas?
You must first install the SonarJS code analyzer
And then this plugin can be fed with a LCOV report providing the coverage information: http://docs.sonarqube.org/display/PLUG/JavaScript+Coverage+Results+Import
Related
I am building a project with webpack module federation with the following setup:
React host (running on localhost:3000)
Angular Remote 1 (running on localhost:4201)
Angular Remote 2 (running on localhost:4202)
The goal is to get both remotes working. If I only run one of the and remove the other it is working perfectly.
The issue I am facing is that when the remotes are loaded, __webpack_require__.p is set by one of the remotes' script and therefore the other remote's chunk is loaded from the wrong url.
Here is the error I get:
My module federation config is the following:
React host:
.
.
.
new ModuleFederationPlugin({
name: "react_host",
filename: "remoteEntry.js",
remotes: {
angular_remote_1: "angular_remote_1#http://localhost:4201/angular_remote_1.js",
angular_remote_2: "angular_remote_2#http://localhost:4202/angular_remote_2.js"
},
exposes: {},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
.
.
.
Angular Remote 1
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_1",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_1",
library: { type: "var", name: "angular_remote_1" },
filename: "angular_remote_1.js",
exposes: {
'./angularRemote1': './src/loadAngularRemote1.ts',
},
shared: ["#angular/core", "#angular/common", "#angular/router"]
})
],
};
Angular Remote 2
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
output: {
publicPath: "auto",
uniqueName: "angular_remote_2",
scriptType: "text/javascript"
},
optimization: {
runtimeChunk: false
},
experiments: {
outputModule: true,
},
plugins: [
new ModuleFederationPlugin({
name: "angular_remote_2",
library: { type: "var", name: "angular_remote_2" },
filename: "angular_remote_2.js",
exposes: {
'./angularRemote2': './src/loadAngularRemote2.ts',
},
shared: ["#angular/core", "#angular/common", "#angular/router"]
})
],
};
Thins I have tried so far:
Playing around with public path (between auto and hardcoded)
Setting a custom chunkLoadingGlobal for both remotes (not the host)
The exact reproduction of this issue can be found here: https://github.com/BarniPro/react-host-angular-remotes-microfrontend
Any help is greatly appreciated.
The issue can be solved by setting the topLevelAwait experiment to true in the remotes's webpack.config.js:
experiments: {
topLevelAwait: true,
},
This results in the two remotes loading in sync which prevents the paths from overriding each other.
Another update I had to make was disabling the splitChunks option in the remotes' optimization settings (see SplitChunksPlugin):
optimization: {
runtimeChunk: false, // This is also needed, but was added in the original question as well
splitChunks: false,
}
The Github repo has been updated with the working solution.
I am building a library with vite, react and ant design.
The build command vite build runs fine without warnings, but when I run vite preview command, then I give an error. I do not know why this is happening.
[![enter image description here][1]][1]
index.b71761d7.js:4879 TypeError: jsxDevRuntime.exports.jsxDEV is not a function
at Provider (index.b71761d7.js:31334:48)
at Ch (index.b71761d7.js:3752:8)
at ck (index.b71761d7.js:6267:12)
at bk (index.b71761d7.js:5797:12)
at ak (index.b71761d7.js:5790:5)
at Tj (index.b71761d7.js:5773:7)
at Lj (index.b71761d7.js:5541:26)
at Jg (index.b71761d7.js:5389:52)
at lk (index.b71761d7.js:6631:3)
at index.b71761d7.js:6719:7
Please help me, thank you very much!
This is my vite.config.js file
import { defineConfig, loadEnv } from 'vite';
import react from '#vitejs/plugin-react';
export default ({ mode }) => {
// Load app-level env vars to node-level env vars.
console.log('Running on environment ' + mode);
process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
return defineConfig({
plugins: [
react({
babel: {
plugins: [['#babel/plugin-transform-react-jsx', { runtime: 'automatic' }]],
},
}),
],
resolve: {
alias: [{ find: /^~/, replacement: '' }],
},
css: {
preprocessorOptions: {
less: {
modifyVars: {
// 'primary-color': '#282F7E',
'primary-color': '#F58220',
// 'text-color': '#282F7E',
'btn-border-radius-base': '6px',
'btn-border-radius-sm': '6px',
'control-border-radius': '6px',
'tag-border-radius': '6px',
dark: true,
compact: true,
},
javascriptEnabled: true,
},
},
},
optimizeDeps: {
include: ['#ant-design/icons'],
},
server: {
port: 3711,
},
preview: {
port: 8711,
},
build: {
chunkSizeWarningLimit: 1000,
outDir: 'build',
},
});
};
[1]: https://i.stack.imgur.com/gw1Wf.png
I am using codeceptJS with webdriverio Selenium standalone server. my problem is how do i load my unpacked chrome extension when i run tests. i’ve been searching for the solution from past 2 days but couldn’t find a solution. all i get is some java code from searches.
first of all thank you very much both of you wOxxOm && Yandimirkin Vladislav
what i did was added few lines into codecept.conf.js
desiredCapabilities: {
chromeOptions: {
args: [ "--load-extension=D:/Projects/dpl/dist", "--disable-gpu", "--window-size=1366,768" ]
}
}
Here is what codecept.conf.js looks like now:
exports.config = {
tests: './*_test.js',
output: './output',
helpers: {
WebDriver: {
url: 'http://localhost',
browser: 'chrome',
desiredCapabilities: {
chromeOptions: {
args: [ "--load-extension=D:/Projects/dpl/dist", "--disable-gpu", "--window-size=1366,768" ]
}
}
},
ResembleHelper : {
require: "codeceptjs-resemblehelper",
screenshotFolder : "./tests/output/",
baseFolder: "./tests/screenshots/base/",
diffFolder: "./tests/screenshots/diff/"
}
},
plugins: {
wdio: {
enabled: true,
services: ['selenium-standalone']
}
},
include: {},
bootstrap: null,
mocha: {},
name: 'codecept'
}
1) Add to you
capababilies: { extensions: extensionsToLoad }
Where extensionsToLoad is array of base64 encoded extensions, something like this
fs.readFileSync("./test.crx").toString("base64")
Build Errors on Netlify. Build exceeds maximum allowed runtime.
Can build locally running yarn build and inside the Netlify docker container, however when on Netlifys build it exceeds maximum allowed runtime.
Am getting some warnings like the below when running in the Netlify docker container
Warning: a promise was created in a handler at opt/buildhome/repo/node_modules/postcss/lib/lazy-result.js:213:17 but was not returned from it
Warning: a promise was created in a handler at /opt/buildhome/repo/node_modules/gatsby-transformer-remark/extend-node-type.js:179:19 but was not returned from it
Those two warnings are pointing to two Gatsby plugins I have configured. (Config below)
require('dotenv').config();
module.exports = {
siteMetadata: {
title: 'My Website',
},
proxy: {
prefix: '/.netlify/functions',
url: 'http://localhost:9000',
},
plugins: [
'gatsby-plugin-eslint',
'gatsby-plugin-react-helmet',
'gatsby-plugin-postcss',
{
resolve: 'gatsby-source-contentful',
options: {
spaceId: process.env.SPACE_ID,
accessToken: process.env.ACCESS_TOKEN,
},
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
exclude: /img/,
},
},
},
'gatsby-plugin-sharp',
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-images-contentful',
options: {
maxWidth: 590,
},
},
],
},
},
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
};
Have tried to debug all weekend but not sure what else to do. I couldn't find anyone else who has had similar issues.
Just installed a new and fresh angularJS application based on Yeoman's generator-cg-angular. After typing grunt serve I have the normal following stack:
$ grunt serve
Running "dom_munger:read" (dom_munger) task
Processing index.html
Wrote script[data-concat!="false"].src to dom_munger.data.appjs
Wrote link[rel="stylesheet"][data-concat!="false"].href to dom_munger.data.appcss
Running "jshint:main" (jshint) task
>> 5 files lint free.
Running "connect:main" (connect) task
Started connect web server on http://localhost:9001
Running "watch" task
Waiting...
You can see that my problem is with the "watch" task. I had a yeoman's generator-angular project that always worked as expected when I called grunt servewith it but now with generator-cg-angular, this one call doesn't work.
Note that grunt build and grunt test work perfectly. Only have problem with the grunt serve command.
Here is my Gruntfile.js content if someone can pin point the problem.
I'm assuming the problem starts on this line: grunt.event.on('watch',... but have no clue how to resolve it.
/*jslint node: true */
'use strict';
var pkg = require('./package.json');
//Using exclusion patterns slows down Grunt significantly
//instead of creating a set of patterns like '**/*.js' and '!**/node_modules/**'
//this method is used to create a set of inclusive patterns for all subdirectories
//skipping node_modules, bower_components, dist, and any .dirs
//This enables users to create any directory structure they desire.
var createFolderGlobs = function(fileTypePatterns) {
fileTypePatterns = Array.isArray(fileTypePatterns) ? fileTypePatterns : [fileTypePatterns];
var ignore = ['node_modules','bower_components','dist','temp'];
var fs = require('fs');
return fs.readdirSync(process.cwd())
.map(function(file){
if (ignore.indexOf(file) !== -1 ||
file.indexOf('.') === 0 ||
!fs.lstatSync(file).isDirectory()) {
return null;
} else {
return fileTypePatterns.map(function(pattern) {
return file + '/**/' + pattern;
});
}
})
.filter(function(patterns){
return patterns;
})
.concat(fileTypePatterns);
};
module.exports = function (grunt) {
// load all grunt tasks
require('load-grunt-tasks')(grunt);
// Project configuration.
grunt.initConfig({
connect: {
main: {
options: {
port: 9001
}
}
},
watch: {
main: {
options: {
livereload: true,
livereloadOnError: false,
spawn: false
},
files: [createFolderGlobs(['*.js','*.less','*.html']),'!_SpecRunner.html','!.grunt'],
tasks: [] //all the tasks are run dynamically during the watch event handler
}
},
jshint: {
main: {
options: {
jshintrc: '.jshintrc'
},
src: createFolderGlobs('*.js')
}
},
clean: {
before:{
src:['dist','temp']
},
after: {
src:['temp']
}
},
less: {
production: {
options: {
},
files: {
'temp/app.css': 'app.less'
}
}
},
ngtemplates: {
main: {
options: {
module: pkg.name,
htmlmin:'<%= htmlmin.main.options %>'
},
src: [createFolderGlobs('*.html'),'!index.html','!_SpecRunner.html'],
dest: 'temp/templates.js'
}
},
copy: {
main: {
files: [
{src: ['img/**'], dest: 'dist/'},
{src: ['bower_components/font-awesome/fonts/**'], dest: 'dist/',filter:'isFile',expand:true}
//{src: ['bower_components/angular-ui-utils/ui-utils-ieshiv.min.js'], dest: 'dist/'},
//{src: ['bower_components/select2/*.png','bower_components/select2/*.gif'], dest:'dist/css/',flatten:true,expand:true},
//{src: ['bower_components/angular-mocks/angular-mocks.js'], dest: 'dist/'}
]
}
},
dom_munger:{
read: {
options: {
read:[
{selector:'script[data-concat!="false"]',attribute:'src',writeto:'appjs'},
{selector:'link[rel="stylesheet"][data-concat!="false"]',attribute:'href',writeto:'appcss'}
]
},
src: 'index.html'
},
update: {
options: {
remove: ['script[data-remove!="false"]','link[data-remove!="false"]'],
append: [
{selector:'body',html:'<script src="app.full.min.js"></script>'},
{selector:'head',html:'<link rel="stylesheet" href="app.full.min.css">'}
]
},
src:'index.html',
dest: 'dist/index.html'
}
},
cssmin: {
main: {
src:['temp/app.css','<%= dom_munger.data.appcss %>'],
dest:'dist/app.full.min.css'
}
},
concat: {
main: {
src: ['<%= dom_munger.data.appjs %>','<%= ngtemplates.main.dest %>'],
dest: 'temp/app.full.js'
}
},
ngmin: {
main: {
src:'temp/app.full.js',
dest: 'temp/app.full.js'
}
},
uglify: {
main: {
src: 'temp/app.full.js',
dest:'dist/app.full.min.js'
}
},
htmlmin: {
main: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeComments: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
},
files: {
'dist/index.html': 'dist/index.html'
}
}
},
imagemin: {
main:{
files: [{
expand: true, cwd:'dist/',
src:['**/{*.png,*.jpg}'],
dest: 'dist/'
}]
}
},
karma: {
options: {
frameworks: ['jasmine'],
files: [ //this files data is also updated in the watch handler, if updated change there too
'<%= dom_munger.data.appjs %>',
'bower_components/angular-mocks/angular-mocks.js',
createFolderGlobs('*-spec.js')
],
logLevel:'ERROR',
reporters:['mocha'],
autoWatch: false, //watching is handled by grunt-contrib-watch
singleRun: true
},
all_tests: {
browsers: ['PhantomJS','Chrome','Firefox']
},
during_watch: {
browsers: ['PhantomJS']
},
}
});
grunt.registerTask('build',['jshint','clean:before','less','dom_munger','ngtemplates','cssmin','concat','ngmin','uglify','copy','htmlmin','imagemin','clean:after']);
grunt.registerTask('serve', ['dom_munger:read','jshint','connect', 'watch']);
grunt.registerTask('test',['dom_munger:read','karma:all_tests']);
grunt.event.on('watch', function(action, filepath) {
//https://github.com/gruntjs/grunt-contrib-watch/issues/156
var tasksToRun = [];
if (filepath.lastIndexOf('.js') !== -1 && filepath.lastIndexOf('.js') === filepath.length - 3) {
//lint the changed js file
grunt.config('jshint.main.src', filepath);
tasksToRun.push('jshint');
//find the appropriate unit test for the changed file
var spec = filepath;
if (filepath.lastIndexOf('-spec.js') === -1 || filepath.lastIndexOf('-spec.js') !== filepath.length - 8) {
spec = filepath.substring(0,filepath.length - 3) + '-spec.js';
}
//if the spec exists then lets run it
if (grunt.file.exists(spec)) {
var files = [].concat(grunt.config('dom_munger.data.appjs'));
files.push('bower_components/angular-mocks/angular-mocks.js');
files.push(spec);
grunt.config('karma.options.files', files);
tasksToRun.push('karma:during_watch');
}
}
//if index.html changed, we need to reread the <script> tags so our next run of karma
//will have the correct environment
if (filepath === 'index.html') {
tasksToRun.push('dom_munger:read');
}
grunt.config('watch.main.tasks',tasksToRun);
});
};
Thanks for your help.