In sapui5 , I want to run karma to test some file about es6 code.
But It can't be supported.
I try to join babel in karma.conf.js, transform the es6 code to es5 code ,then run coverage. It works fine, but the result is not normal. It tests the es5 code.
preprocessors: {
'webapp/controller/*.js': ['babel', 'coverage']
// './!(test|localService)/**/*.js': ['coverage']
},
babelPreprocessor: {
options: {
presets: ['#babel/preset-env'],
sourceMap: 'inline'
},
sourceFileName: function(file) {
return file.originalPath;
}
}
I want to get the coverage about es6 code. But actually it gets the coverage of the es5 code。
Related
I have an existing Angular v5 app and have environment.json files for my environments (like DEV, Test, Production, etc.). The environments files are stored in the directory like so: src/Environments/DEV/environment.json.
Here is an example of a dev environment.json file:
{
"Comment": "Environment=DEV",
"API_ORIGIN": "https://myapp-dev",
"ORIGIN": "https://myapp-dev/index.html",
}
There is a root environment.json file in src folder that my app reads from. When I want to use a specific environment I just copy that environment content into the root and run the app.
Now with Cucumber and Protractor is there a way I can pass some command line argument to specify which environment.json file to use based on my setup? I have urls in these environment.json files so I need a way to tell Cucumber and Protractor which environment to use. If I have to copy all of the environment.json files into the e2e folder that is fine with me. Just in case the solution I need to use depends on the tools I am using here is my tsconfig.e2e.json file. Please let me know if it is incorrect:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"chai",
"cucumber",
"node"
]
}
}
Here is the protractor.conf.js file. Let me know if it is incorrect as well please:
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/features/**/*.feature'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
cucumberOpts: {
// require step definition files before executing features
require: ['./e2e/steps/**/*.ts'],
// <string[]> (expression) only execute the features or scenarios with tags matching the expression
tags: [],
// <string[]> ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
compiler: []
},
// Enable TypeScript for the tests
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
}
};
I'm also using npm if that matters. I'm running these tests with ng e2e command provided by angular.
sure, 2 ways:
pass a parameter to protractor protractor conf.js --params.env="dev" and then refer to it as browser.params.env in specs. Downside is, it will only be available when the config is parsed and the browser is started, so you can really use that in the config itself
Run the process with an env variable MY_VAR=Dev protractor config.js and it will be available anywhere by running process.env.MY_VAR
For reference
https://stackoverflow.com/a/58547994/9150146
https://stackoverflow.com/a/66111592/9150146
P.S.
how you implement it is up to you, but this approach is the most flexible
conf.js
let environment = require('src/Environments/' + process.env.TEST_ENV + '/environment.json');
module.exports = {
baseUrl: environment.API_ORIGIN
}
and start your protractor like so
TEST_ENV=DEV protractor config.js
I must be making a mistake somewhere, but it's not being written to stdout during optimization. I'm trying to optimize a file via requirejs, but the output isn't being minified. According to the documentation, UglifyJS should minify the code.
At any rate, the following code is trivial, but it isolates the problem.
src/index.js:
require(['config'], function () {
require(['myMod'], function (myMod) {
console.log(myMod.x());
})
})
src/myMod.js:
define(function () {
let myMod = {
x: 5
};
return myMod;
})
src/config.js:
define(function () {
require.config({
baseUrl: 'src'
});
})
And here's the gulp task that is performing the optimization:
gulp.task('optimize', function (cb) {
let config = {
appDir: 'src',
dir: 'dist/src',
generateSourceMaps: true,
preserveLicenseComments: false,
removeCombined: true,
baseUrl: './',
modules: [{
name: 'index',
include: ['myMod']
}]
}
let success = function (buildResponse) { console.log(buildResponse); cb() },
error = function (err) { console.log(err); cb(err) }
rjs.optimize(config, success, error)
})
After running the task, dist/src/index.js has all of the other modules included in it. However, it's not minified, and none of the variables have been renamed. Instead, it's as if the files were just concatenated, nothing more. Could someone tell me (1) why is it not being minified? (2) is UglifyJS throwing an error? If so, is there a way to see it when the gulp task is being run?
EDIT Here's a link to RequireJS docs where it talks about using the optimizer in node, which is done in the gulp task mentioned above. It's at the bottom under "Using the optimizer as a node module".
http://requirejs.org/docs/node.html
RequireJS' optimizer bundles UglifyJS2. UglifyJS2 does not handle ES6 or higher. If I take the options you use in your gulpfile, and plunk them into a separate file that I name options.js, and issue this command:
$ ./node_modules/.bin/r.js -o options.js
Then I get this output:
Tracing dependencies for: index
Uglify file: /tmp/t33/dist/src/index.js
Error: Cannot uglify file: /tmp/t33/dist/src/index.js. Skipping it. Error is:
SyntaxError: Unexpected token: name (myMod)
If the source uses ES2015 or later syntax, please pass "optimize: 'none'" to r.js and use an ES2015+ compatible minifier after running r.js. The included UglifyJS only understands ES5 or earlier syntax.
index.js
----------------
config.js
index.js
myMod.js
As you can see, UglifyJS does fail to minify your file, and RequireJS just skips the minification step for that file. Since this is not an outright error, the file is still output, just not minified.
If you change let to var in myMod.js, then the issue disappears.
Unfortunately, since this is not an execution failure (r.js still runs, it just does not minify the file), the error is not signaled to the errback handler you pass to rjs.optimize. I don't see a way to catch such error in a Gulpfile. The safe thing to do is to set optimize: "none" and perform the minification as an additional build step after running rjs.optimize.
I had also run into the same issue where require.js's optimizer (r.js) was combining different modules, but, it was not minify-ing the merged file. Although my run time environment is different from yours (using Java's Nashorn engine), this error was visible on my console :
If the source uses ES2015 or later syntax, please pass "optimize: 'none'" to r.js and use an ES2015+ compatible minifier after running r.js. The included UglifyJS only understands ES5 or earlier syntax.
Also, this error does not stop the optimizer from combining the files, it's just that the optimizer will not be able to mini-fy the merged file.
I keep getting the following error with my gulpfile for the watch plugin
‘watch* errored after XXms
Error in plugin ‘gulp-watch’
Message:
glob should be String or Array, not object
Here is what my code in the gulpfile looking like
function sassWatch(sassData) {
gulp.src(sassData.watch)
.pipe(watch({glob:sassData.watch, emitOnGlob: true}, function() {
gulp.src(sassData.sass)
.pipe(sass(sassOptions))
.on('error', function(err) {
gutil.log(err.message);
gutil.beep();
global.errorMessage = err.message + " ";
})
.pipe(checkErrors())
.pipe(rename(sassData.name))
.pipe(gulp.dest(sassData.output))
.pipe(livereload());
}));
}
Any idea what I'm doing wrong here?
You're using the pre-1.0.0 way of providing a globbing pattern to gulp-watch, but your gulp-watch plugin has a version >= 1.0.0.
The 1.0.0 release of gulp-watch changed the method signature from:
watch([options, callback])
to
watch(glob, [options, callback])
This means you have to provide your globbing pattern like this:
.pipe(watch(sassData.watch, { /*other options*/ }, function() {
Note that the emitOnGlob option was removed in 1.0.0. Read this github issue and the Migration to 1.0.0 notes for more information.
So first.. I have next gulp task:
gulp.task('js', function() {
browserify('./src/js/main.js')
.bundle()
.on('error', onError)
.pipe( source('main.js') )
.pipe( gulp.dest(path.build.js) );
});
and package.json:
{
"browserify": {
"transform": [
["babelify", { "presets": ["es2015"] }],
"debowerify"
]
},
}
I am importing Backbone in main.js (or only underscore... it doesn't matter)
import Backbone from 'backbone';
And in console I am getting error
Uncaught TypeError: Cannot read property '_' of undefined
I checked code and found that in underscore sources at start of library root is undefined
// Establish the root object, `window` in the browser, or `exports` on the server.
var root = this;
// Save the previous value of the `_` variable.
var previousUnderscore = root._;
I think the problem is that debowerify or babelfy is wrapping code in some function. But also if I use node modules without debowerify all works fine. But I want to use bower.
So how to fix this problem?
To any future visitors to this question,
this is similar to Underscore gives error when bundling with Webpack
The gist of the issue is that babel is probably running the underscore.js code, since underscore.js uses this, and in es6 this is undefined when outside of a function, naturally this._ fails.
In code I've fixed the issue by ensuring that babel does not run on node_modules.
In my case the same error arose when using just browserify with underscore. I've workarounded issue by switching from underscore to lodash. They are in general (surely not fully) compatible, but at the worst I'd rather copy some missing function from underscore sources than live with its deisolated load approach.
Forgive me if I'm missing something obvious, I'm relatively new to javascript, ES2015, etc.
I have a gulp task to run gulp-babel over my Aurelia application. Everything runs and works, except the files containing decorators (Aurelia's #inject)
those files spit out the same error in gulp-notify:
Error: (path-to-file)/nav-bar.js: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got "Decorator"
I'm not really sure how to begin resolving this. My task looks like:
gulp.task('build-system', function () {
return gulp.src(paths.source)
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(changed(paths.output, {extension: '.js'}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(babel(compilerOptions))
.pipe(sourcemaps.write({includeContent: true}))
.pipe(gulp.dest(paths.output));
});
and my compilerOptions:
module.exports = {
moduleIds: false,
comments: false,
compact: false,
presets: ['es2015'],
plugins: ['syntax-decorators', 'transform-decorators']
};
any insight would be greatly appreciated!
I believe this is a babel v6 issue. (which is implied by your presets: ['es2015'])
If you drop back to babel v5.x (as included with the skeleton) it should work.
Here's the decorator issue in the Babel Phabricator instance. It may be some time before it's fixed based on this reply.