We Keep Coding

Webpack Issue with * in export statement

I'm attempting to package with webpack. However, I am receiving a Module parse failed: Unexpected token error. It points to a node module, which has a export statement using an astrisk.
export * as example from "exampleModule";
How can I avoid webpack throwing the error when building?
I'm using babel 7.11.5 and have plugin-proposal-export-namespace-from in my babel config plugins.
My babel.config.js is as follows:
/* eslint global-require: off, import/no-extraneous-dependencies: off */
const developmentEnvironments = ['development', 'test'];
const developmentPlugins = [require('react-hot-loader/babel')];
const productionPlugins = [
require('babel-plugin-dev-expression'),
// babel-preset-react-optimize
require('#babel/plugin-transform-react-constant-elements'),
require('#babel/plugin-transform-react-inline-elements'),
require('babel-plugin-transform-react-remove-prop-types'),
];
module.exports = (api) => {
// See docs about api at https://babeljs.io/docs/en/config-files#apicache
const development = api.env(developmentEnvironments);
return {
presets: [
// #babel/preset-env will automatically target our browserslist targets
require('#babel/preset-env'),
require('#babel/preset-typescript'),
[require('#babel/preset-react'), { development }],
],
plugins: [
// Stage 0
require('#babel/plugin-proposal-function-bind'),
// Stage 1
require('#babel/plugin-proposal-export-default-from'),
require('#babel/plugin-proposal-logical-assignment-operators'),
[require('#babel/plugin-proposal-optional-chaining'), { loose: false }],
[
require('#babel/plugin-proposal-pipeline-operator'),
{ proposal: 'minimal' },
],
[
require('#babel/plugin-proposal-nullish-coalescing-operator'),
{ loose: false },
],
require('#babel/plugin-proposal-do-expressions'),
// Stage 2
[require('#babel/plugin-proposal-decorators'), { legacy: true }],
require('#babel/plugin-proposal-function-sent'),
require('#babel/plugin-proposal-export-namespace-from'),
require('#babel/plugin-proposal-numeric-separator'),
require('#babel/plugin-proposal-throw-expressions'),
// Stage 3
require('#babel/plugin-syntax-dynamic-import'),
require('#babel/plugin-syntax-import-meta'),
[require('#babel/plugin-proposal-class-properties'), { loose: true }],
require('#babel/plugin-proposal-json-strings'),
...(development ? developmentPlugins : productionPlugins),
],
};
};

How to enable JavaScript Protractor Firefox headless

We have e2e test with Protractor on headless mode.
We want to test the authentication first.
The behaviour is like the above:
1/ The user tap a link on the browser
2/ the server will check if this user is authenticated or not
2.1 if the user is authenticated, the home page will appear
2.2 if not, the user will be redirect to the sso login page by a
The problem here is that, the javascript won't be executed. I try to add some flags but it doesn't make any difference.
exports.config = {
allScriptsTimeout: 20000,
specs: [
'./e2e/account/**/account.spec.ts',
],
capabilities: {
'browserName': 'firefox',
'marionette': true,
'moz:firefoxOptions': {
args: [ "--headless"],
firefox_binary: '/opt/firefox/firefox',
binary_: '/opt/firefox/firefox',
},
acceptInsecureCerts: true,
javascriptEnabled: true,
},
directConnect: true,
baseUrl: 'http://demop-staging-ppd.com/',
framework: 'mocha',
// SELENIUM_PROMISE_MANAGER: false,
mochaOpts: {
reporter: 'spec',
slow: 3000,
ui: 'bdd',
timeout: 720000
},
beforeLaunch: function() {
require('ts-node').register({
project: 'tsconfig.e2e.json'
});
},
onPrepare: function() {
browser.driver.manage().window().setSize(1280, 1024);
// Disable animations
// #ts-ignore
browser.executeScript('document.body.className += " notransition";');
const chai = require('chai');
const chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
const chaiString = require('chai-string');
chai.use(chaiString);
// #ts-ignore
global.chai = chai;
},
useAllAngular2AppRoots: true
};
the spec file :
before(async () => {
await browser.waitForAngularEnabled(false);
});
it('should content display content ', async () => {
await browser.get('/');
browser.sleep(5000);
const content= await browser.getPageSource();
console.log(content)
});
I'm open to any suggestions and can provide you with any additional information.
[UPDATE]
I change my config file as a above to try enabling javascript on my browse. It works on local but when I try this on docker image dosen't
capabilities: {
'browserName': 'firefox',
'marionette': true,
'moz:firefoxOptions': {
args: ["--headless"],
firefox_binary: '/opt/firefox/firefox',
binary_: '/opt/firefox/firefox',
"prefs": {
"javascript.options.showInConsole": true,
"javascript.enabled": true
},
"log": { "level": "trace" }
},
acceptInsecureCerts: true,
acceptSslCerts: true,
},

multiCapabilities: [ { browserName: 'firefox', firefoxOptions: { args: ['--headless'] }, 'moz:firefoxOptions': { args: [ '--headless' ] } } ]
Please check with this
Use webdriver-manager to execute. With directConnect you will have permission denied error.
I checked in linux PC also. This works fine

'Error: TypeError: ProtractorImageComparison is not a constructor' with the protractor-image-comparison v2.0.1

I'm trying to write some visual tests and running into the mentioned error with the protractor-image-comparison of version 2.0.1. Even though there is an update of the library I decided to stick to the older version since I experience some issues with the newest one as well.
My setup is:
//protractor.conf.js:
const { SpecReporter } = require('jasmine-spec-reporter');
const { join } = require('path');
const { ProtractorImageComparison } = require('protractor-image-comparison');
exports.config = {
allScriptsTimeout: 11000,
specs: ['./src/**/*-spec.ts'],
capabilities: {
browserName: 'chrome',
chromeOptions: {
args: [
// '--headless',
'--disable-gpu', '--window-size=1600,950', '--no-sandbox'],
},
},
SELENIUM_PROMISE_MANAGER: false,
directConnect: true,
framework: 'jasmine2',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {
},
},
onPrepare() {
require('ts-node').register({
project: join(__dirname, './tsconfig.e2e.json'),
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
browser.protractorImageComparison = new ProtractorImageComparison({
baselineFolder: join(__dirname, '/src/resources/baseline/'),
screenshotPath: join(__dirname, '/src/tmp/'),
formatImageName: '{tag}',
autoSaveBaseline: false
});
},
};

I came across this issue today and apparently from version 3.0.1 this package now functions as a plugin and not a class which needs to be instantiated.
I managed to get it working adding the following code to my conf.js:
plugins: [
{
inline: require('protractor-image-comparison'),
// package: 'protractor-image-comparison' //protractor is installed globally so it is checking for plugin globally also
options: {
baselineFolder: './testArtifacts/screen-compare/baselines/',
screenshotPath: './testArtifacts/screen-compare/screenshots/',
formatImageName: `{tag}-{logName}-{width}x{height}`,
savePerInstance: true,
},
},
],
Note: For me protractor was installed globally so I needed this workaround using inline instead of package to get it searching for the plugin module locally.

How transpiling nodejs Gulp-Task with gulp-babel and ignore "import"?

The goal is, transpiling ES6 scripts into ES5 and make them browser readable.
This works most with my node.js gulp task, but some of the script use "import" like
import EstaticoModule from '../../assets/js/helpers/module';
I would like to skip this "import" and more over delete this row from result.
Is there a param in "gulp-babel" to achieve this or has one another idea to make this in a better way?
Here is my gulp task:
'use strict';
/**
* #function `gulp js:lint1`
* #desc Lint JavaScript files (using `ESLint`).
*/
var gulp = require('gulp'),
helpers = require('require-dir')('../../helpers'),
webpack = require('webpack'),
babel = require("gulp-babel");
//babel = require("babelify");
//babel = require("babel-core");
//require("babel-core");
var taskName = 'js:lint1',
taskConfig = {
src: [
'source/assets/js/**/*.js',
'source/modules/**/*.js',
'source/pages/**/*.js',
'source/demo/modules/**/*.js',
'source/demo/pages/**/*.js',
'!source/modules/**/*.data.js',
'!source/pages/**/*.data.js',
'!source/demo/modules/**/*.data.js',
'!source/demo/pages/**/*.data.js',
'!source/modules/.scaffold/scaffold.js',
'!source/assets/js/libs/**/*.js',
'!source/assets/js/libs/wtscript.js'
],
watch: [
'./source/assets/js/**/*.js',
'./source/modules/**/*.js',
'./source/pages/**/*.js',
'./source/demo/modules/**/*.js',
'./source/demo/pages/**/*.js',
'!./source/modules/.scaffold/scaffold.js'
],
dest: './RSE/',
srcBase: './source/assets/js/'
}
gulp.task( taskName, function() {
var helpers = require('require-dir')('../../helpers'),
tap = require('gulp-tap'),
path = require('path'),
cached = require('gulp-cached'),
eslint = require('gulp-eslint');
return gulp.src(taskConfig.src, {
dot: true
})
.pipe(cached('linting'))
.pipe(eslint())
.pipe(eslint.formatEach())
.pipe(tap(function(file) {
if (file.eslint && file.eslint.errorCount > 0) {
helpers.errors({
task: taskName,
message: 'Linting error in file "' + path.relative('./source/', file.path) + '" (details above)'
});
}else{
console.log(file);
}
}))
.pipe(babel({
presets: [
'es2015',
'react'
],
plugins: [
// Work around some issues in IE
'transform-class-properties',
'transform-proto-to-assign',
['transform-es2015-classes', {
loose: true
}]
]
}))
.pipe(gulp.dest(taskConfig.dest))
;
});
module.exports = {
taskName: taskName,
taskConfig: taskConfig
};

I have found a way:
// EXCLUDE IMPORTS FROM STREAM
var content = file.contents.toString();
content = content.replace(/import/g, "//$&");
// RETURN STREAM INTO PIPE
file.contents = Buffer.from(content);
This will result in
//import EstaticoModule from '../../assets/js/helpers/module';
Here is the code in summary:
'use strict';
/**
* #function `gulp js:create:js:files`
* #desc Lint JavaScript files (using `ESLint`), EXCLUDE IMPORTS FROM STREAM and create separate js files in modules/%module% folder.
*/
var gulp = require('gulp'),
helpers = require('require-dir')('../../helpers'),
webpack = require('webpack'),
babel = require("gulp-babel");
var taskName = 'js:create:js:files',
taskConfig = {
src: [
'source/assets/js/**/*.js',
'source/modules/**/*.js',
'source/pages/**/*.js',
'source/demo/modules/**/*.js',
'source/demo/pages/**/*.js',
'!source/modules/**/*.data.js',
'!source/pages/**/*.data.js',
'!source/demo/modules/**/*.data.js',
'!source/demo/pages/**/*.data.js',
'!source/modules/.scaffold/scaffold.js',
'!source/assets/js/libs/**/*.js',
'!source/assets/js/libs/wtscript.js'
],
watch: [
'./source/assets/js/**/*.js',
'./source/modules/**/*.js',
'./source/pages/**/*.js',
'./source/demo/modules/**/*.js',
'./source/demo/pages/**/*.js',
'!./source/modules/.scaffold/scaffold.js'
],
dest: './build/',
srcBase: './source/assets/js/'
}
gulp.task( taskName, function() {
var helpers = require('require-dir')('../../helpers'),
tap = require('gulp-tap'),
path = require('path'),
cached = require('gulp-cached'),
eslint = require('gulp-eslint');
return gulp.src(taskConfig.src, {
dot: true
})
.pipe(cached('linting'))
.pipe(eslint())
.pipe(eslint.formatEach())
.pipe(tap(function(file) {
if (file.eslint && file.eslint.errorCount > 0) {
helpers.errors({
task: taskName,
message: 'Linting error in file "' + path.relative('./source/', file.path) + '" (details above)'
});
}else{
// EXCLUDE IMPORTS FROM STREAM
var content = file.contents.toString();
content = content.replace(/import/g, "//$&");
// RETURN STREAM INTO PIPE
file.contents = Buffer.from(content);
}
}))
.pipe(babel({
presets: [
'es2015'
,'react'
],
plugins: [
// Work around some issues in IE
'transform-class-properties',
'transform-proto-to-assign',
['transform-es2015-classes', {
loose: true
}]
]
}))
.pipe(gulp.dest(taskConfig.dest))
;
});
module.exports = {
taskName: taskName,
taskConfig: taskConfig
};

Grunt code coverage doesn't work

I've the following grunt file which runs the mocha tests OK (I get results of the test after running grunt.js)Now I want to add a code and I use the https://github.com/taichi/grunt-istanbul module. but when I run the grunt.js nothing happen,any idea?
What I want is simply after that mocha test are running it will run the code coverage with some reports? any new code coverage will be great
This is my project structure
myApp
-server.js
-app.js
-test
-test1.spec
-test2.spec
-test-reports
-grunt.js
-utils
-file1.js
-file2.js
-controller
-file1.js
-file2.js
This is the code inside the grunt for what I've tried
module.exports = function (grunt) {
var path = require('path');
process.env.RESOURCE_PATH_PREFIX = "../";
var d = new Date();
var datestring = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear() + " " +
d.getHours() + ":" + d.getMinutes();
var npmCommand = path.dirname(process.execPath).concat('/npm');
var reportDir = "./test-reports/" + datestring;
grunt.initConfig({
jasmine_nodejs: {
// task specific (default) options
options: {
specNameSuffix: ["-spec.js"],
helperNameSuffix: "helper.js",
useHelpers: false,
stopOnFailure: false,
reporters: {
console: {
colors: true,
},
junit: {
savePath: "./test-reports",
filePrefix: "testresult",
}
}
},
test: {
specs: [
"test/*",
]
},
makeReport: {
src: './test-reports/coverage.json',//should I create this file?or its created automatically ?
options: {
type: ['lcov', 'html'],
dir: reportDir,
print: 'detail'
}
},
coverage: {
APP_DIR_FOR_CODE_COVERAGE: "./utils/*.js",//HERE IS THE PATH OF THE UTILS Folder which all the js login which I want to test there
clean: ['build'],
instrument: {
files: tasks,//WHAT IS TASKS????
options: {
lazy: true,
basePath: 'build/instrument/'//I DONT KNOW WHAT IT IS???
}
},
reloadTasks: {
rootPath: 'build/instrument/tasks'//SHOULD I USE IT????
},
storeCoverage: {
options: {
dir: reportDir
}
}
}
});
grunt.loadNpmTasks('grunt-jasmine-nodejs');
grunt.loadNpmTasks('grunt-istanbul');
grunt.registerTask('default', ['jasmine_nodejs']);
grunt.registerTask('cover', ['instrument', 'test',
'storeCoverage', 'makeReport']);
};
If there is mocha code coverage which can help it will be great either, I want that after I run the test I will able to see report with all the code coverage.
I want that the coverage will be done for folder utils and controller (all the files there) how should I config that?
UPDATE
This is what I use for jasmin and I think I should change to mocha
jasmine_nodejs: {
// task specific (default) options
options: {
specNameSuffix: ["-spec.js"], // also accepts an array
helperNameSuffix: "helper.js",
useHelpers: false,
stopOnFailure: false,
reporters: {
console: {
colors: true,
cleanStack: 1, // (0|false)|(1|true)|2|3
verbosity: 4, // (0|false)|1|2|3|(4|true)
listStyle: "indent", // "flat"|"indent"
activity: false
},
junit: {
savePath: "./test-reports",
filePrefix: "testresult",
consolidate: true,
useDotNotation: true
}
}
},
test: {
// target specific options
options: {
useHelpers: false
},
// spec files
specs: [
"test/*",
]
}
},
How should I change it?
The syntax of my test are similar(jasmine/mocha) and what I want is simply to run my test and after run the code coverage

I'll give you an indirect answer. I've gotten code coverage to work before, but with a different plugin (and with mocha). I'm not sure if you're open to swapping out jasmine for mocha but I will say that I struggled with various code coverage plugins before coming across this one. I think you'll agree the configuration is both concise and obvious.
The plugin you want is grunt-mocha-istbanbul, and here is a sample configuration for your Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
clean: ['coverage'],
mocha_istanbul: {
coverage: {
src: 'test',
options: {
timeout: 20000,
'report-formats': 'html',
print: 'summary',
check: {
lines: 90,
statements: 90,
functions: 100,
branches: 80
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-mocha-istanbul');
grunt.registerTask('default', ['clean', 'mocha_istanbul']);
}