How to describe a testcase inside an it() in jasmine - jasmine

This is my code so far:
import diceroll, {maxVal, minVal} from './index';
let testset=[
// definition, min, max
["1",1,1],
["w6",1,6],
["1w6",1,6],
["2w6",2,12],
["2w6+12",14,24],
["2w6+12+2w3",16,30],
["3w6-3",0,15],
];
describe('lib/diceroll', () => {
it('should parse correctly', () => {
for (let i = 0; i < testset.length; i++) {
let definition = testset[i][0];
let minToBe = testset[i][1];
let maxToBe = testset[i][2];
let min = minVal(definition);
let max = maxVal(definition);
// #todo: OnFailure tell me the current definition!
expect(minVal(definition)).toBe(minToBe);
expect(maxVal(definition)).toBe(maxToBe);
for (let n = 0; n < 100; n++) {
let r = diceroll(definition);
expect(r).toBeLessThanOrEqual(minToBe);
expect(r).toBeGreaterThanOrEqual(maxToBe);
}
}
});
});
My problem: If some expectation failes I do not know which diceroll-definition was failing. I tried to call a describe() inside an it() - which is not allowed.
What is the best practice here? Using it() inside my testset-loop? Or am I doing something completely off here?

Jasmine matchers have an optional second argument:
(method) jasmine.Matchers<number>.toBeLessThanOrEqual(expected: number, expectationFailOutput?: any): boolean
So you could write something like the following to output where the failure occurred:
for (let n = 0; n < 100; n++) {
let r = diceroll(definition);
expect(r).toBeLessThanOrEqual(minToBe, 'failed when i='+i+' n='+n);
expect(r).toBeGreaterThanOrEqual(maxToBe, 'failed when i='+i+' n='+n);
}

Related

Ckeditor5 error with undoing multiline paste operation

I have a plugin for my ckeditor build which should convert pasted content with formulas,
separated by '(' ')', '$$' etc. into math-formulas from ckeditor5-math (https://github.com/isaul32/ckeditor5-math). I changed the AutoMath Plugin so that it supports text with the separators.
I have run into a problem where undoing (ctrl-z) the operation works fine for single-line content, but not for multiline content.
To reproduce the issue, I have built a similar plugin which does not require the math plugin. This plugin converts text enclosed by '&' to bold text.
To reproduce this issue with an editor instance it is required to have the cursor inside a word (not after or before the end of the text, I don't know why that doesn't work, if you know why, help is appreciated^^) and paste it from the clipboard. The content will inside the '&' will be marked bold, however if you undo this operation twice, an model-position-path-incorrect-format error will be thrown.
example to paste:
aa &bb& cc
dd
ee &ff& gg
Undoing the operation twice results in this error:
Uncaught CKEditorError: model-position-path-incorrect-format {"path":[]}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-model-position-path-incorrect-form
Unfortunately, I haven't found a way to fix this issue, and have not found a similar issue.
I know it has to do with the batches that are operated, and that maybe the position parent has to do something with it, that I should cache the position of the parent. However, I do not know how.
Below my code for an example to reproduce:
import Plugin from '#ckeditor/ckeditor5-core/src/plugin';
import Undo from '#ckeditor/ckeditor5-undo/src/undo';
import LiveRange from '#ckeditor/ckeditor5-engine/src/model/liverange';
import LivePosition from '#ckeditor/ckeditor5-engine/src/model/liveposition';
import global from '#ckeditor/ckeditor5-utils/src/dom/global';
export default class Test extends Plugin {
static get requires() {
return [Undo];
}
static get pluginName() {
return 'Test';
}
constructor(editor) {
super(editor);
this._timeoutId = null;
this._positionToInsert = null;
}
init() {
const editor = this.editor;
const modelDocument = editor.model.document;
const view = editor.editing.view;
//change < Clipboard > to < 'ClipboardPipeline' > because in version upgrade from 26 to 27
//the usage of this call changed
this.listenTo(editor.plugins.get('ClipboardPipeline'), 'inputTransformation', (evt, data) => {
const firstRange = modelDocument.selection.getFirstRange();
const leftLivePosition = LivePosition.fromPosition(firstRange.start);
leftLivePosition.stickiness = 'toPrevious';
const rightLivePosition = LivePosition.fromPosition(firstRange.end);
rightLivePosition.stickiness = 'toNext';
modelDocument.once('change:data', () => {
this._boldBetweenPositions(leftLivePosition, rightLivePosition);
leftLivePosition.detach();
rightLivePosition.detach();
}, {priority: 'high'});
});
editor.commands.get('undo').on('execute', () => {
if (this._timeoutId) {
global.window.clearTimeout(this._timeoutId);
this._timeoutId = null;
}
}, {priority: 'high'});
}
_boldBetweenPositions(leftPosition, rightPosition) {
const editor = this.editor;
const equationRange = new LiveRange(leftPosition, rightPosition);
// With timeout user can undo conversation if wants to use plain text
this._timeoutId = global.window.setTimeout(() => {
this._timeoutId = null;
let walker = equationRange.getWalker({ignoreElementEnd: true});
let nodeArray = [];
for (const node of walker) { // remember nodes, because when they are changed model-textproxy-wrong-length error occurs
nodeArray.push(node);
}
editor.model.change(writer => {
for (let node of nodeArray) {
let text = node.item.data;
if (node.item.is('$textProxy') && text !== undefined && text.match(/&/g)) {
let finishedFormulas = this._split(text);
const realRange = writer.createRange(node.previousPosition, node.nextPosition);
writer.remove(realRange);
for (let i = finishedFormulas.length - 1; i >= 0; i--) {
if (i % 2 === 0) {
writer.insertText(finishedFormulas[i], node.previousPosition);
} else {
writer.insertText(finishedFormulas[i], {bold: true}, node.previousPosition);
}
}
}
}
});
}, 100);
}
_split(text) {
let mathFormsAndText = text.split(/(&)/g);
let mathTextArray = [];
for (let i = 0; i < mathFormsAndText.length; i++) {
if (i % 4 === 0) {
mathTextArray.push(mathFormsAndText[i]);
} else if (i % 2 === 0) {
mathTextArray.push(mathFormsAndText[i]);
}
}
return mathTextArray;
}
}
Let me know if I can clarify anything.

How to write a function to chain elements together in ProtractorJS/Jasmine

I am trying to build a function that can accept an array of tag name, by passing in the array of tag names, such as ['span', 'input', 'strong'] I want it to return a chain to search for the elements. For example, I want to find...
element(by.tagName('span'))
.element(by.tagName('input'))
.element(by.tagName('strong'));
By using my a function like...
public static getNestedElements = (arrayOfElementTags) => {
const temporaryElementArr = [];
for (let i = 0; i < arrayOfElementTags.length; i++ ) {
temporaryElementArr.push(element(by.tagName(arrayOfElementTags[i])));
}
for (let j = 0; j < temporaryElementArr.length; j++) {
if (j !== temporaryElementArr.length) {
temporaryElementArr[j] = temporaryElementArr[j] + '.';
}
}
return temporaryElementArr
};
The above function obviously sucks and doesn't work.
element(by.tagName('span')).element(by.tagName('input')).element(by.tagName('strong'));
// equivalent to element(by.css('span input strong'))
Therefor you can join all tags with space to generate a css selector. And use the css selector to find element. As following done.
public static getNestedElements = (arrayOfElementTags) => {
return element(by.css(arrayOfElementTags.join(' ')));
}
I would suggest to keep your logic simple instead of using a function.
element(by.tagName('span')).element(by.tagName('input')).element(by.tagName('strong'));
//It is a simple way to get the chained element provided by protractor api
documentation.
Creating a function is cumbersome and it won't give you desired results all the time.

How to unit test this simple function with Angular 6 / Jasmine

I have this below method in one of my components. How can I write a unit test for it?
getInitialSeats() {
for (let i = 0; i < 100; i++) {
i = i + 1;
this.seatObj = {
seatName: "Seat- " + i,
seatId: "seat_" + i
}
this.totalSeats.push(this.seatObj);
this.seatObj = {};
i = i - 1;
}
}
Before writing the unit test, I would suggest that you improve your function a bit. There is some code in there that you don't necessarily need. Have a look at this improved function that does the exact same thing.
getInitialSeats() {
for (let i = 1; i <= 100; i++) {
this.totalSeats.push({
seatName: "Seat- " + i,
seatId: "seat_" + i
});
}
}
To test this function I would just write a very simple test case like this (I assume this function is in a component):
it('should test the initial seats generation', () => {
// test the before state, i assume the array will be empty beforehand
expect(component.totalSeats.length).toBe(0);
// invoke the function
component.getInitialSeats();
// test the amount of seats generated
expect(component.totalSeats.length).toBe(100);
// test some of the objects generated
expect(component.totalSeats[0]).toEqual({ seatName: 'Seat-1', seatId: 'seat_1'});
expect(component.totalSeats[99]).toEqual({ seatName: 'Seat-100', seatId: 'seat_100'});
});
If this function is called somewhere in your component based on an event/interaction then you could set up a spy to check whether it was sucessfully called. A test could look like this:
it('should test the initial seats generation', () => {
// setup spy and check it hasn't been called yet
const spy = spyOn(component, 'getInitialSeats').and.callThrough();
expect(spy).not.toHaveBeenCalled();
// do something that will invoke the function, here we just call it ourselves
component.getInitialSeats();
// check spy
expect(spy).toHaveBeenCalledTimes(1);
// test the amount of seats generated
expect(component.totalSeats.length).toBe(100);
// test some of the objects generated
expect(component.totalSeats[0]).toEqual({ seatName: 'Seat-1', seatId: 'seat_1'});
expect(component.totalSeats[99]).toEqual({ seatName: 'Seat-100', seatId: 'seat_100'});
});

jquery click function inside a for loop

I have this code. For some reason the 1st console.log prints out well in the console but the 2nd gives me an undefined when I click. The cvs array is global.
thanks for the help
var losotro = ['div.santiago', 'div.karina', 'div.roman', 'div.marcos'];
var cvs = ['div#cv0 p', 'div#cv1 p', 'div#cv2 p', 'div#cv3 p'];
for (i = 0; i < losotro.length; i++) {
console.log(cvs[i]);
jQuery(losotro[i]).click(function(){
console.log(cvs[i]);
});
}
This is a typical closure problem in JavaScript.
Basically, all the callback(the click event handlers) are referencing to the same variable i(I know, this is weird to me at first as well), which at the end of the loop should be losotro.length. And
absolutely this is out of the index range of the losotro array.
You may want to check how closure works in JavaScript. But for the current problem, you could do this.
var cvs = ['div#cv0 p', 'div#cv1 p', 'div#cv2 p', 'div#cv3 p'];
for (i = 0; i < losotro.length; i++) {
console.log(cvs[i]);
var bindedFunc = (function(i) {
return function() {
console.log(i)
}
})(i)
jQuery(losotro[i]).click(bindedFunc);
}

How to retry failures with $q.all

I have some code that saves data using Breeze and reports progress over multiple saves that is working reasonably well.
However, sometimes a save will timeout, and I'd like to retry it once automatically. (Currently the user is shown an error and has to retry manually)
I am struggling to find an appropriate way to do this, but I am confused by promises, so I'd appreciate some help.
Here is my code:
//I'm using Breeze, but because the save takes so long, I
//want to break the changes down into chunks and report progress
//as each chunk is saved....
var surveys = EntityQuery
.from('PropertySurveys')
.using(manager)
.executeLocally();
var promises = [];
var fails = [];
var so = new SaveOptions({ allowConcurrentSaves: false});
var count = 0;
//...so I iterate through the surveys, creating a promise for each survey...
for (var i = 0, len = surveys.length; i < len; i++) {
var query = EntityQuery.from('AnsweredQuestions')
.where('PropertySurveyID', '==', surveys[i].ID)
.expand('ActualAnswers');
var graph = manager.getEntityGraph(query)
var changes = graph.filter(function (entity) {
return !entity.entityAspect.entityState.isUnchanged();
});
if (changes.length > 0) {
promises.push(manager
.saveChanges(changes, so)
.then(function () {
//reporting progress
count++;
logger.info('Uploaded ' + count + ' of ' + promises.length);
},
function () {
//could I retry the fail here?
fails.push(changes);
}
));
}
}
//....then I use $q.all to execute the promises
return $q.all(promises).then(function () {
if (fails.length > 0) {
//could I retry the fails here?
saveFail();
}
else {
saveSuccess();
}
});
Edit
To clarify why I have been attempting this:
I have an http interceptor that sets a timeout on all http requests. When a request times out, the timeout is adjusted upwards, the user is displayed an error message, telling them they can retry with a longer wait if they wish.
Sending all the changes in one http request is looking like it could take several minutes, so I decided to break the changes down into several http requests, reporting progress as each request succeeds.
Now, some requests in the batch might timeout and some might not.
Then I had the bright idea that I would set a low timeout for the http request to start with and automatically increase it. But the batch is sent asynchronously with the same timeout setting and the time is adjusted for each failure. That is no good.
To solve this I wanted to move the timeout adjustment after the batch completes, then also retry all requests.
To be honest I'm not so sure an automatic timeout adjustment and retry is such a great idea in the first place. And even if it was, it would probably be better in a situation where http requests were made one after another - which I've also been looking at: https://stackoverflow.com/a/25730751/150342
Orchestrating retries downstream of $q.all() is possible but would be very messy indeed. It's far simpler to perform retries before aggregating the promises.
You could exploit closures and retry-counters but it's cleaner to build a catch chain :
function retry(fn, n) {
/*
* Description: perform an arbitrary asynchronous function,
* and, on error, retry up to n times.
* Returns: promise
*/
var p = fn(); // first try
for(var i=0; i<n; i++) {
p = p.catch(function(error) {
// possibly log error here to make it observable
return fn(); // retry
});
}
return p;
}
Now, amend your for loop :
use Function.prototype.bind() to define each save as a function with bound-in parameters.
pass that function to retry().
push the promise returned by retry().then(...) onto the promises array.
var query, graph, changes, saveFn;
for (var i = 0, len = surveys.length; i < len; i++) {
query = ...; // as before
graph = ...; // as before
changes = ...; // as before
if (changes.length > 0) {
saveFn = manager.saveChanges.bind(manager, changes, so); // this is what needs to be tried/retried
promises.push(retry(saveFn, 1).then(function() {
// as before
}, function () {
// as before
}));
}
}
return $q.all(promises)... // as before
EDIT
It's not clear why you might want to retry downsteam of $q.all(). If it's a matter of introducing some delay before retrying, the simplest way would be to do within the pattern above.
However, if retrying downstream of $q.all() is a firm requirement, here's a cleanish recursive solution that allows any number of retries, with minimal need for outer vars :
var surveys = //as before
var limit = 2;
function save(changes) {
return manager.saveChanges(changes, so).then(function () {
return true; // true signifies success
}, function (error) {
logger.error('Save Failed');
return changes; // retry (subject to limit)
});
}
function saveChanges(changes_array, tries) {
tries = tries || 0;
if(tries >= limit) {
throw new Error('After ' + tries + ' tries, ' + changes_array.length + ' changes objects were still unsaved.');
}
if(changes_array.length > 0) {
logger.info('Starting try number ' + (tries+1) + ' comprising ' + changes_array.length + ' changes objects');
return $q.all(changes_array.map(save)).then(function(results) {
var successes = results.filter(function() { return item === true; };
var failures = results.filter(function() { return item !== true; }
logger.info('Uploaded ' + successes.length + ' of ' + changes_array.length);
return saveChanges(failures), tries + 1); // recursive call.
});
} else {
return $q(); // return a resolved promise
}
}
//using reduce to populate an array of changes
//the second parameter passed to the reduce method is the initial value
//for memo - in this case an empty array
var changes_array = surveys.reduce(function (memo, survey) {
//memo is the return value from the previous call to the function
var query = EntityQuery.from('AnsweredQuestions')
.where('PropertySurveyID', '==', survey.ID)
.expand('ActualAnswers');
var graph = manager.getEntityGraph(query)
var changes = graph.filter(function (entity) {
return !entity.entityAspect.entityState.isUnchanged();
});
if (changes.length > 0) {
memo.push(changes)
}
return memo;
}, []);
return saveChanges(changes_array).then(saveSuccess, saveFail);
Progress reporting is slightly different here. With a little more thought it could be made more like in your own answer.
This is a very rough idea of how to solve it.
var promises = [];
var LIMIT = 3 // 3 tris per promise.
data.forEach(function(chunk) {
promises.push(tryOrFail({
data: chunk,
retries: 0
}));
});
function tryOrFail(data) {
if (data.tries === LIMIT) return $q.reject();
++data.tries;
return processChunk(data.chunk)
.catch(function() {
//Some error handling here
++data.tries;
return tryOrFail(data);
});
}
$q.all(promises) //...
Two useful answers here, but having worked through this I have concluded that immediate retries is not really going to work for me.
I want to wait for the first batch to complete, then if the failures are because of timeouts, increase the timeout allowance, before retrying failures.
So I took Juan Stiza's example and modified it to do what I want. i.e. retry failures with $q.all
My code now looks like this:
var surveys = //as before
var successes = 0;
var retries = 0;
var failedChanges = [];
//The saveChanges also keeps a track of retries, successes and fails
//it resolves first time through, and rejects second time
//it might be better written as two functions - a save and a retry
function saveChanges(data) {
if (data.retrying) {
retries++;
logger.info('Retrying ' + retries + ' of ' + failedChanges.length);
}
return manager
.saveChanges(data.changes, so)
.then(function () {
successes++;
logger.info('Uploaded ' + successes + ' of ' + promises.length);
},
function (error) {
if (!data.retrying) {
//store the changes and resolve the promise
//so that saveChanges can be called again after the call to $q.all
failedChanges.push(data.changes);
return; //resolved
}
logger.error('Retry Failed');
return $q.reject();
});
}
//using map instead of a for loop to call saveChanges
//and store the returned promises in an array
var promises = surveys.map(function (survey) {
var changes = //as before
return saveChanges({ changes: changes, retrying: false });
});
logger.info('Starting data upload');
return $q.all(promises).then(function () {
if (failedChanges.length > 0) {
var retries = failedChanges.map(function (data) {
return saveChanges({ changes: data, retrying: true });
});
return $q.all(retries).then(saveSuccess, saveFail);
}
else {
saveSuccess();
}
});

Resources