I started using Jasmine to test javascript code and its working fine. But I would like to display inputs to the test suite in specrunner.html.
I tried HtmlReporter() and TrivialReporter() but no luck.
SPEC CODE:
checkAddition("TEST_SUITE","Test INPUTS1",getResult(2,3),5);
checkAddition("TEST_SUITE","Test INPUTS2",getResult(3,8),11);
function checkAddition(suite_name,testcase,result,equalto){
describe(suite_name, function() {
it(testcase, function() {
expect(result).toEqual(equalto);
});
});
}
JavaScript CODE:
function getResult(input1,input2){
return input1+input2;
}
OUTPUT :
EXPECTED OUTPUT :
I need to display inputs that looks like expected output (I edited code in browser using firebug to share expected output).
Please help me. Help would be appreciated :)
The built reporters won't do this. You either need to need to hack the innards of those built in reporters to do this (you're on your own with this route), or create your own reports from scratch (see here for some examples).
But I find this to be a strange request. Perhaps there is a cleaner way to achieve your goal, whatever that may be. Maybe a test suite isn't what you want if you want this info.
Related
I would like to disable a block of code(say a function) in a file for analysis by SonarQube... Any suggestions on how to do that..
I found something for java here --> Turning Sonar off for certain code
As far as I know Sonar respects // NOSONAR tag for Java projects but it looks like that is also has been implemented for JS: https://jira.sonarsource.com/browse/SONARJS-294
SonarQube provides plenty of options for ignoring issues in specific files and/or code blocks, see Narrowing the Focus documentation (and to your specific case: look for Ignore Issues in Blocks).
To ignore blocks:
// BEGIN-NOSCAN
const YourFunction () => {
// Your code
}
// END-NOSCAN
To ignore single lines:
// NOSONAR
const YourCode = 'Example';
You can read more about it here in the SonarQube docs Narrowing the Focus. Thanks to Jan and Nicolas's answer above.
Thank you for checking my question. This may sound trivial but I need help here.
I want to learn how to change HTML code with GULP. Or just change some strings with GULP. For example today I need to change this:
<img class="social" src="../symbols/facebook.svg">
to this:
<svg class="social">
<use xlink:href="../symbols/sprite.svg?v201608061556#facebook"></use>
</svg>
As you can see I am building icon system via symbols and I want to keep my original HTML clean as it can be. So I can work without any watchers and such. Later I just run GULP once and it does the job: create sprite and change HTML to use this sprite.
I tried gulp-replace and it can change one string to another with regex, but it looks too complicated for me with regex. I am not even sure that it is possible to do with regex. And I also want to add timestamp as ?v201608061556. So I want to run some JavaScript that I can write in gulp file.
Next one I tried is gulp-dom and it looks like the thing I need. But I can't make it work due to some errors:
if (node.nodeType === NODE_TYPE.DOCUMENT_NODE) {
^
TypeError: Cannot read property 'nodeType' of undefined
Error log in terminal:
So the questions is:
Is it possible to make with regex and gulp-replace package?
Does anyone know gulp-dom
package. Can I make it work somehow? Is it possible to complete my
task with it?
Is there another way to write JavaScript in Gulp task
so I can take a string, process it according to my needs with all JavaScript functionality and save?
Can I work with HTML from Gulp the same way
I work when I code websites? Work with DOM, use
querySelector and classList for example? Maybe jQuery?
Thanks.
Ok, I found a gulp-change. It gives you file content as a string. You can do everything you want with that string with javascript and then return it back to pipe.
It would be easier to diagnose the issue if you had posted your gulp tasks stream. With the information you provided I believe you are getting this error because (if you are following the example on the plugin page) you are probably returning the element you modified, not the complete Document representation. Below follows the example from the gulp plugin page:
gulp.task('html', function() {
return gulp.src('./src/index.html')
.pipe(dom(function(){
return this.querySelectorAll('body')[0].setAttribute('data-version', '1.0');
}))
.pipe(gulp.dest('./public/'));
});
There are two crucial steps you should take to manipulate the DOM with gulp-dom:
first make the changes on the element(s) you want using simple js DOM manipulation methods such as getElmentById, setAttribute, appendChild, etc.
once that is done, your gulp stream should return this (the whole Document), not the element(s) you are targeting for modification.
In your case you could do something like this (If you find this too verbose you may try to use a different plugin/approach altogether):
var gulp = require('gulp');
var dom = require('gulp-dom);
gulp.task('domManipulation', function() {
return gulp.src('app/index.html')
.pipe(dom(function(){
// cache/create all elements you will work with --'this' is your Document
var parentDiv = this.querySelector('div.imgParent');
var img = this.querySelector('img.social');
var svg = this.createElement('svg');
var use = this.createElement('use');
// DOM manipulation
svg.classList.add('social');
use.setAttribute('xlink:href', "../symbols/sprite.svg?v201608061556#facebook");
svg.appendChild(use);
parentDiv.replaceChild(svg, img);
return this; // return the whole Document
}))
.pipe(gulp.dest('dist'));
});
I tested the code above and it works just fine. Hope this helps.
I have a 17000 line page with lots of HTML/JavaScript/jQuery and it's always frustrating when I make a typo and there's no clue when the page loads into the browser what the problem is. It just - doesn't do anything. Consider the patch of code below, for example, where the third line terminates with a ' instead of a ; .
$(document).on('click', 'input#answer_chkbx', function(e) {
if(e.target.checked){
x$ = g.currentElement$.find('.cellContent')'
g.currentElement$.addClass('answerBox')
.css('background-color','tansparent')
.height(25)
.width(150);
}
});
There should be something that runs through the code and finds that immediately.
Is there a way to check for things like this?
Thanks
You might consider a tool such as JSLint or JSHint.
For offline coding you can use Netbeans IDE or Dreamweaver
I work on an app with a javascript/html front-end and a back-end REST service. I mostly work on the back end service, but I'm attempting to add javascript unit tests to the build. I had someone help me with the javascript testing framework setup, using phantomjs, qunit, and jstestrunner, all referenced from Maven.
I wrote a trivial unit test for a module (we'll call it "data.daily.js") that begins like this:
Data.Daily = new Function();
Data.Daily.prototype = {
Just to be clear, this code runs every day in production, and appears to work fine in all major browsers (FF, IE, and Chrome).
The test looks like this:
requirejs.config({ shim: { 'data.daily': ['config'] } });
require(['data.daily'], function() {
'use strict';
module('data.daily');
test('data.daily.test.initialize', function() {
var dataDaily = new Data.Daily();
dataDaily.initialize(Config.AJAX_DAILY_DATA_BASE_URL, Config.MOCKDATA_AJAX_DAILY_DATA_BASE_URL);
deepEqual(dataDaily.getData(), {}, "object is \"" + JSON.stringify(dataDaily.getData()) + "\", but it should be empty object");
});
});
When I run this test, it fails like this:
ReferenceError: Can't find variable: Data, source: http://localhost:9080/data.daily.js:5
[data.daily] data.daily.test.initialize: failed: 1 passed: 0
Died on test #1 at http://localhost:9080/js/qunit.js:425
at http://localhost:9080/js/data.daily.test.js:17
at http://localhost:9080/js/require.js:1682
at http://localhost:9080/js/require.js:983
at http://localhost:9080/js/require.js:1194
at http://localhost:9080/js/require.js:129
at http://localhost:9080/js/require.js:1237
at each (http://localhost:9080/js/require.js:58)
at http://localhost:9080/js/require.js:1238
at http://localhost:9080/js/require.js:1043
at http://localhost:9080/js/require.js:1224
at http://localhost:9080/js/require.js:882
at callGetModule (http://localhost:9080/js/require.js:1249)
at http://localhost:9080/js/require.js:1578
at http://localhost:9080/js/require.js:1703: Can't find variable: Data, source: ReferenceError: Can't find variable: Data
The only way I can find to get this test working is to change "data.daily.js" in this way, adding a line before the existing lines:
var Data = {};
Data.Daily = new Function();
Data.Daily.prototype = {
Now I have to say that this looks logical to me, but the fact remains that the existing code works fine in all the major browsers. This code only started failing when referenced from the test.
Note that I also tried changing the test script instead, adding the "var Data = {}" line before the "var dataDaily = new Data.Daily()" line, but that had no effect.
So, can anyone explain what is going on here? Why does the original code work if it fails in the test. Is there something funky about how "require.js" works that makes this happen? Why didn't the test work by adding the line in the test, instead of the CUT (code under test)?
Ok, I've managed to resolve this.
The assignment is actually present in the existing production code, I just didn't think to look in ".html" files for it before. When I didn't find it in ".js" files, I thought something else was going on.
The reason it didn't work to put the line in the test script instead was because I was putting the line in the wrong place. The error actually occurs at configuration time, not when the test itself is executed, so the assignment had to be before the "requirejs.config()" call. Now the test works, without having to modify the CUT.
My problem is that I'm using the CKEditor 3.4 plugin for jQuery, and it's giving me an error in IE 7+8 when executing a $(selector).val(html) call on the editor:
The error:
'this.$.innerHTML' is null or not an object
...which when run in the debugger, points to this line of code in the huge CKEditor.js:
getHtml:function(){var i=this.$.innerHTML;return c?i.replace(/<\?[^>]*>/g,''):i;}
...which translates to this in the source:
getHtml : function()
{
var retval = this.$.innerHTML;
// Strip <?xml:namespace> tags in IE. (#3341).
return CKEDITOR.env.ie ? retval.replace( /<\?[^>]*>/g, '' ) : retval;
},
My offending code (stripped down, but still giving the error):
var editor_data = $("textarea#body").val();
$("textarea#body").val(editor_data);
... and the textarea code for posterity:
<textarea name="body" rows="15" cols="50" class="wysiwyg" id="body"></textarea>
I've tried reproducing in jsFiddle in IE8, but the strange thing is that it works as intended there. I'd love to also provide a working sample but I unfortunately cannot for reasons outside my control.
I've also tried this fix, and it cleared up the error issue, but after that setData did not work as intended and just overwrote the editor contents with nothing. I'll admit this problem+fix is a bit over my head...: http://dev.ckeditor.com/ticket/4566
(Sorry, long post :S) I've also tried to use the direct JavaScript API into CKEditor (abandoning the jQuery integration) and it threw the same error.
Anyone have anything they'd like me to try to fix this issue, or have any hunches of what it might be? It would be much appreciated!
Personally I'm not a fan of the existing answer that consists of modifying the source code because as soon as you update ckEditor, then you have to remember to modify the source yet again. I was having the same problem as the original poster and found a fix that is considered a hack, but totally usable. Simply, a Try/Catch made it all nice and happy in IE8. Now to test in IE7. The other bonus of this fix is that you're not left with blank data when it fails but that you get actual content you were trying to retrieve.
var editor = $('textarea.editor').ckeditorGet();
var vPageContent = "";
try{
vPageContent = editor.getData();//function call fails here
} catch(err){
vPageContent = editor.getData();//but will work here
}
May not be the best solution but take a look at this:
http://dev.ckeditor.com/ticket/4566
It claims that replacing
getHtml:function(){var i=this.$.innerHTML;return c?i.replace(/<\?[^>]*>/g,''):i;},
with
getHtml:function(){return (this.$) ? this.$.innerHTML : "";},
will solve the problem.
I'm not claiming this is the correct answer but I had the same problem today and (for now) it seems to work.
be careful with extra comma. IE does not like exra commas. You can check your code for extra comma with json lint