i'm using jasmine-reporters to generate a report after protractor finish the tests,
this is my configuration file:
onPrepare: function(){
var jasmineReporters = require('jasmine-reporters');
var capsPromise = browser.getCapabilities();
capsPromise.then(function(caps){
var browserName = caps.caps_.browserName.toUpperCase();
var browserVersion = caps.caps_.version;
var prePendStr = browserName + "-" + browserVersion + "-";
jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter("protractor_output", true, true,prePendStr));
});
},
i don't get any error, the reporters installed, but i don't see any file in protractor_output folder.
Any idea what am i doing wrong?
The problem is with the jamsine version:
If you are trying to use jasmine-reporters with Protractor, keep in mind that Protractor is built around Jasmine 1.x. As such, you need to use a 1.x version of jasmine-reporters.
npm install jasmine-reporters#~1.0.0
then the configuration should be:
onPrepare: function() {
// The require statement must be down here, since jasmine-reporters#1.0
// needs jasmine to be in the global and protractor does not guarantee
// this until inside the onPrepare function.
require('jasmine-reporters');
jasmine.getEnv().addReporter(
new jasmine.JUnitXmlReporter('xmloutput', true, true)
);
}
If you are on a newer version of the Jasmine Reporter, then the require statement no longer puts the JUnitXmlReporter on the jasmine object, but does put it on the module export. Your setup would then look like this:
onPrepare: function() {
// The require statement must be down here, since jasmine-reporters#1.0
// needs jasmine to be in the global and protractor does not guarantee
// this until inside the onPrepare function.
var jasmineReporters = require('jasmine-reporters');
jasmine.getEnv().addReporter(
new jasmineReporters.JUnitXmlReporter('xmloutput', true, true)
);
}
also you need to verify that xmloutput directory exist!
To complete the answer, if the output is still not generating,
Try adding these configuration line to your protractor exports.config object :
framework: "jasmine2",
onPrepare: function() {
var jasmineReporters = require('jasmine-reporters');
.......
}
Related
I have seen lots of questions about this but all of the fixes simply does not work with my code.
What am I doing wrong? My beforeEach doesnt get executed.
This is the unit test code:
var assert = require('assert');
var environmentConfiguration;
var fs = require('fs');
var expect = require('chai').expect;
describe('environmentConfiguration', function() {
beforeEach('some description', function() {
console.log("hello")
});
describe('#configFile null configFile', function() {
var result = environmentConfiguration.load(null)
var expectedConfiguration = JSON.parse(fs.readFileSync('./ISPRemotingService.config.json'));
it('should return current ISP environment configuration', function() {
assert(result, expectedConfiguration);
});
});
});
I have also applied simpler versions from Mocha's documentation and beforeEach doesn't gets executed.
Another exception was blocking the unit tests to even reach there. My bad
I am using Visual Studio 2015 Update 3 to create a ASP.Net core application that runs an angular 2 application. I am using SystemJs for configuration that I picked from one of the sites and it has this line of code with the comment.
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'typescript',
I understand the reason for the comment. My application is currently slow.
I'd like to know what are the other options available to ensure that the transpilation does not happen in the browser? How do I pre-transpile the code and load directly from the output location?
This usually means that ts files are sent to browser and transpiled there instead of happening on server side and js code to be sent and executed on client side.
Since you are using gulp you can create a task to transpile the typescript files and bundle them. You can use "gulp-typescript": "^2.5.0" package to achieve this.
However you need to setup your config first (I've just copy pasted the config from their repo):
'use strict';
var GulpConfig = (function () {
function gulpConfig() {
//Got tired of scrolling through all the comments so removed them
//Don't hurt me AC :-)
this.source = './src/';
this.sourceApp = this.source + 'app/';
this.tsOutputPath = this.source + '/js';
this.allJavaScript = [this.source + '/js/**/*.js'];
this.allTypeScript = this.sourceApp + '/**/*.ts';
this.typings = './typings/';
this.libraryTypeScriptDefinitions = './typings/main/**/*.ts';
}
return gulpConfig;
})();
module.exports = GulpConfig;
Then you need to setup the tasks, easiest way just to copy paste the already setup tasks from their repo again:
'use strict';
var gulp = require('gulp'),
debug = require('gulp-debug'),
inject = require('gulp-inject'),
tsc = require('gulp-typescript'),
tslint = require('gulp-tslint'),
sourcemaps = require('gulp-sourcemaps'),
del = require('del'),
Config = require('./gulpfile.config'),
tsProject = tsc.createProject('tsconfig.json'),
browserSync = require('browser-sync'),
superstatic = require( 'superstatic' );
var config = new Config();
/**
* Generates the app.d.ts references file dynamically from all application *.ts files.
*/
// gulp.task('gen-ts-refs', function () {
// var target = gulp.src(config.appTypeScriptReferences);
// var sources = gulp.src([config.allTypeScript], {read: false});
// return target.pipe(inject(sources, {
// starttag: '//{',
// endtag: '//}',
// transform: function (filepath) {
// return '/// <reference path="../..' + filepath + '" />';
// }
// })).pipe(gulp.dest(config.typings));
// });
/**
* Lint all custom TypeScript files.
*/
gulp.task('ts-lint', function () {
return gulp.src(config.allTypeScript).pipe(tslint()).pipe(tslint.report('prose'));
});
/**
* Compile TypeScript and include references to library and app .d.ts files.
*/
gulp.task('compile-ts', function () {
var sourceTsFiles = [config.allTypeScript, //path to typescript files
config.libraryTypeScriptDefinitions]; //reference to library .d.ts files
var tsResult = gulp.src(sourceTsFiles)
.pipe(sourcemaps.init())
.pipe(tsc(tsProject));
tsResult.dts.pipe(gulp.dest(config.tsOutputPath));
return tsResult.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(config.tsOutputPath));
});
/**
* Remove all generated JavaScript files from TypeScript compilation.
*/
gulp.task('clean-ts', function (cb) {
var typeScriptGenFiles = [
config.tsOutputPath +'/**/*.js', // path to all JS files auto gen'd by editor
config.tsOutputPath +'/**/*.js.map', // path to all sourcemap files auto gen'd by editor
'!' + config.tsOutputPath + '/lib'
];
// delete the files
del(typeScriptGenFiles, cb);
});
gulp.task('watch', function() {
gulp.watch([config.allTypeScript], ['ts-lint', 'compile-ts']);
});
gulp.task('serve', ['compile-ts', 'watch'], function() {
process.stdout.write('Starting browserSync and superstatic...\n');
browserSync({
port: 3000,
files: ['index.html', '**/*.js'],
injectChanges: true,
logFileChanges: false,
logLevel: 'silent',
logPrefix: 'angularin20typescript',
notify: true,
reloadDelay: 0,
server: {
baseDir: './src',
middleware: superstatic({ debug: false})
}
});
});
gulp.task('default', ['ts-lint', 'compile-ts']);
This creates the following Gulp tasks:
gen-ts-refs: Adds all of your TypeScript file paths into a file named typescriptApp.d.ts. This file will be used to support code help in some editors as well as aid with compilation of TypeScript files.
ts-lint: Runs a “linting” task to ensure that your code follows specific guidelines defined in the tsline.js file (you can skip this if you like).
compile-ts: Compiles TypeScript to JavaScript and generates source map files used for debugging TypeScript code in browsers such as Chrome.
clean-ts: Used to remove all generated JavaScript files and source map files.
watch: Watches the folder where your TypeScript code lives and triggers the ts-lint, compile-ts, and gen-ts-refs tasks as files changes are detected.
default: The default Grunt task that will trigger the other tasks to run. This task can be run by typing gulp at the command-line when you’re within the typescriptDemo folder.
Note:
You need to change the folders based your file structure but the gist of it is that you need those TypeScript files to be compiled and sent to browser as plain JavaScript.
I'm developing a Jekyll plugin. When I run the jekyll serve command, site files are regenerated when I change any markdown, html, or plugin files, as expected. The problem I've found is that while markdown/HTML files are regenerated, the plugins themselves are not reloaded. I have to terminate jekyll serve and issue the command again for the plugin changes to go into effect. Is there a way to make it so that the plugins get reloaded automatically when changed?
This is for Jekyll 3.1.2.
Based on the suggestion from #DavidJacquel and the gist I found here, I used Gulp with this gulpfile
'use strict';
var gulp = require('gulp'),
express = require('express'),
spawn = require('child_process').spawn;
var jekyll_file = process.platform === 'win32' ? 'jekyll.bat' : 'jekyll';
gulp.task('jekyll', () => {
var jekyll = spawn(jekyll_file, ['build', '--incremental']);
var output = '';
jekyll.stdout.on('data', (t) => { output += t; });
jekyll.stderr.on('data', (t) => { output += t; });
jekyll.on('exit', (code) => {
if (code)
console.log(`Jekyll exited with code: ${code}\n${output}`);
else
console.log("Finished Jekyll build");
});
});
gulp.task('serve', () => {
var server = express();
server.use(express.static('_site/'));
server.listen(4000);
});
gulp.task('watch', () => {
gulp.watch(['**/*.html', '**/*.md', '_plugins/*.rb', '!_site/**/*'], ['jekyll']);
});
gulp.task('default', ['jekyll', 'serve', 'watch']);
to get the desired effect. Also created issue here.
var gulp = require('gulp');
var sass = require('gulp-sass');
var runSequence = require('run-sequence');
var changed = require('gulp-changed');
var plumber = require('gulp-plumber');
var to5 = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');
var paths = require('../paths');
var compilerOptions = require('../babel-options');
var assign = Object.assign || require('object.assign');
// transpiles changed es6 files to SystemJS format
// the plumber() call prevents 'pipe breaking' caused
// by errors from other gulp plugins
// https://www.npmjs.com/package/gulp-plumber
gulp.task('build-system', function () {
return gulp.src(paths.source)
.pipe(plumber())
.pipe(changed(paths.output, {extension: '.js'}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(to5(assign({}, compilerOptions, {modules:'system'})))
.pipe(sourcemaps.write({includeContent: false, sourceRoot: paths.sourceMapRelativePath }))
.pipe(gulp.dest(paths.output));
});
gulp.task('build-sass', function() {
gulp.src(paths.sass + '**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
includePaths: [
paths.sass,
paths.jspmDir + '/github/Dogfalo/materialize#0.96.0/sass',
],
errLogToConsole: true }))
.pipe(sourcemaps.write(paths.sourceMapRelativePath))
.pipe(gulp.dest(paths.cssOutput))
});
// copies changed css files to the output directory
gulp.task('build-css', function () {
return gulp.src(paths.css)
.pipe(changed(paths.output, {extension: '.css'}))
.pipe(gulp.dest(paths.output));
});
// copies changed html files to the output directory
gulp.task('build-html', function () {
return gulp.src(paths.html)
.pipe(changed(paths.output, {extension: '.html'}))
.pipe(gulp.dest(paths.output));
});
// this task calls the clean task (located
// in ./clean.js), then runs the build-system
// and build-html tasks in parallel
// https://www.npmjs.com/package/gulp-run-sequence
gulp.task('build', function(callback) {
return runSequence(
'clean',
['build-system', 'build-html','build-css','build-sass'],
callback
);
});
gulp.task('default', ['build']);
I have gulp-sass working but I am not sure how to reference the System.config({
"map": { short hand to paths.
I am trying to use the materialize css framework so I imported it using
jspm install github:Dogfalo/materialize#0.96.0
which worked fine, but my concern now is that in my build task I have to reference the specific path to the sass folder including the version numbers in the includePaths property
If I look at the config.js file, jspm saved a reference to materialize under the System.config.map section, it seems if I could just reference the short hand materialize name in the code below this would solve my problem
Here is my build-sass task that I added to build.js
gulp.task('build-sass', function() {
gulp.src(paths.sass + '**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
style: 'expanded',
includePaths: [
paths.sass,
paths.jspmDir + '/github/Dogfalo/materialize#0.96.0/sass', //I would like to just reference to shorcut path included in the config.js to materialize
],
errLogToConsole: true }))
.pipe(sourcemaps.write(paths.sourceMapRelativePath))
.pipe(gulp.dest(paths.cssOutput))
});
Or if you have any better way to include a github package such as materialize using jspm and reference it in code letting jspm manage the package and version and just referencing the shorthand that jspm created
Thanks,
Dan
SASS build task
You'll need to install gulp-sass, like you mentioned. Then, you'll want to add the following task to your build file. Notice the task includes plumber and changed as well. This will signal watch to rebuild your sass when you edit it and not break serving on syntax errors.
// compiles sass to css with sourcemaps
gulp.task('build-css', function() {
return gulp.src(paths.style)
.pipe(plumber())
.pipe(changed(paths.style, {extension: '.css'}))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./styles'));
});
Build task
You'll also need to add this new sass build task to your general build task, so that it is included in the build pipeline.
gulp.task('build', function(callback) {
return runSequence(
'clean',
['build-system', 'build-html', 'build-css'],
callback
);
});
Using a CSS framework in code
As you mentioned, having jspm install materialize will let jspm take care of all the heavy lifting for you. Once installed, jspm will modify the config paths to point to the right place. Then, when you need to reference it in code, you can import it normally. To install, you will want to add materialize to your package.json dependencies.
"jspm": {
"dependencies": {
"materialize": "github:Dogfalo/materialize#0.96.0",
Then, jspm will set up a map for you so you can use the normal module syntax.
import 'materialize/js/collapsible';
Materialize is not using the module syntax so, at the moment, you will need to (a) import each piece that you want specifically, as above, and (b) manually import jQuery, since materialize doesn't declare dependencies.
For more information, please see my full write up including examples here:
http://www.foursails.co/blog/building-sass/
I am using [jasmine-reporters] for xml report with Protractor.
Protractor's configuration for [jasmine-reporters] look like below,
onPrepare: function() {
require('jasmine-reporters');
jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter('../e2e_test_out', true, true, 'testresults.e2e.'));
},
above config working fine and gettting the result in 'e2e_test_out' directory with 'testresults.e2e.' prefix.
But when I use protractor's multiCapabilities option,
multiCapabilities: [{
'browserName': 'chrome'
}, {
'browserName': 'internet explorer'
}],
I am getting only one set of report. From that I could not understand the individual browser's result.
Is there any way to generate two diff reports / combined reports for both the browsers?
I found a solution that solved the same problem for me here:
https://github.com/angular/protractor/issues/60
In your protractor.conf file:
onPrepare: function(){
require('jasmine-reporters');
var capsPromise = browser.getCapabilities();
capsPromise.then(function(caps){
var browserName = caps.caps_.browserName.toUpperCase();
var browserVersion = caps.caps_.version;
var prePendStr = browserName + "-" + browserVersion + "-";
jasmine.getEnv().addReporter(new
jasmine.JUnitXmlReporter("protractor_output", true, true,prePendStr));
});
}
This will result in reports like: