I have this code ES6 Javascript
runAnimation() {
this.animationTimer = setTimeout(() => {
this.strokePath.style.strokeDashoffset = this.currentOffsetValue;
this.progressCount.innerHTML = this.currentValue;
this.runAnimation();
}, this.opts.duration);
}
and how to test setTimeout anonymous function?
this.animationTimer = setTimeout(() => {
this.strokePath.style.strokeDashoffset = this.currentOffsetValue;
this.progressCount.innerHTML = this.currentValue;
this.runAnimation();
}, this.opts.duration);
solved it myself.
My solution is make other function at setTimeout.
before
setTimeout( () => {
this.strokePath.style.strokeDashoffset = this.currentOffsetValue;
this.progressCount.innerHTML = this.currentValue;
this.runAnimation();
}, 100);
after
setTimeout(this.timerAnimationTimeout.bind(this), 100);
timerAnimationTimeout() {
this.strokePath.style.strokeDashoffset = this.currentOffsetValue;
this.progressCount.innerHTML = this.currentValue;
this.runAnimation();
}
Related
I have an initializer method calling another method that returns a promise, like:
initStuffAfterLoad() {
const _this = this;
const theInterval = window.setInterval(function() {
if (thing) {
window.clearInterval(theInterval);
_this.getBanana()
.then(response => {
_this.getApple(response, _this);
});
}
}, 100);
}
and am needing to test whether getBanana was called (jest/sinon). So far I have:
test('init function calls getBanana', () => {
let thing = true
const getBananaSpy = sinon.spy();
sinon.stub(TheClass.prototype, 'getBanana').callsFake(getBananaSpy).resolves();
jest.useFakeTimers();
TheClass.prototype.initStuffAfterLoad();
jest.runOnlylPendingTimers();
expect(getBananaSpy.called).toBeTruthy();
TheClass.prototype.getBanana.restore();
});
However it still receives false at the assertion. I figure I'm not handling the Promise part correctly - what is the best practice way to do this?
I am not familiar with sinon, but here is a way to achieve your need with pure jest (even better it also checks that getApple is called when getBanana reseolves :))
jest.useFakeTimers()
const _this = {
getBanana: () => {},
getApple: () => {}
}
const initStuffAfterLoad = () => {
const theInterval = window.setInterval(function() {
window.clearInterval(theInterval);
_this.getBanana().then(response => {
_this.getApple(response, _this)
});
}, 100);
}
test('', () => {
let result
_this.getBanana = jest.fn(() => {
result = new Promise( resolve => { resolve() } )
return result
})
_this.getApple = jest.fn()
initStuffAfterLoad()
jest.runAllTimers()
expect(_this.getBanana.mock.calls.length).toBe(1)
return result.then(() => {
expect(_this.getApple.mock.calls.length).toBe(1)
})
})
code tested :)
PASS test\temp.test.js √ (25ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.489s
I'm having an issue with the sort() in ranking data from coinmarketcap api. With an ajax api call, sort works in returning an array with the right ranking. With an axios api call, seen below, it doesn't.
Here is my code using axios and vue.js:
let coinMarket = 'https://api.coinmarketcap.com/v2/ticker/?limit=10'
let updateInterval = 60 * 1000;
let newApp = new Vue({
el: '#coinApp',
data: {
// data within an array
results: []
},
methods: {
getCoins: function() {
axios
.get(coinMarket)
.then((resp) => {
this.results = formatCoins(resp);
});
},
getColor: (num) => {
return num > 0 ? "color:green;" : "color:red;";
},
},
created: function() {
this.getCoins();
}
})
setInterval(() => {
newApp.getCoins();
},
updateInterval
);
function formatCoins(res) {
var coinDataArray = []
Object.keys(res.data).forEach(function(key) {
coinDataArray.push(res.data[key])
})
coinDataArray.sort(function(a,b) {
return a.rank > b.rank
})
console.log(coinDataArray)
}
Where am I going wrong?
If you look into the data responded by https://api.coinmarketcap.com/v2/ticker/?limit=10, you will find the data you need is under res.data.data, not res.data.
So within the function=formatCoins, replace res.data with res.data.data, then works.
Vue.config.productionTip = false
let coinMarket = 'https://api.coinmarketcap.com/v2/ticker/?limit=10'
let updateInterval = 60 * 1000;
function formatCoins(res) {
var coinDataArray = []
Object.keys(res.data.data).forEach(function(key) {
coinDataArray.push(res.data.data[key])
})
coinDataArray.sort(function(a,b) {
return a.rank - b.rank
})
return coinDataArray
}
let newApp = new Vue({
el: '#coinApp',
data: {
// data within an array
results: []
},
methods: {
getCoins: function() {
axios
.get(coinMarket)
.then((resp) => {
this.results = formatCoins(resp);
});
},
getColor: (num) => {
return num > 0 ? "color:green;" : "color:red;";
},
},
created: function() {
this.getCoins();
}
})
setInterval(() => {
newApp.getCoins();
},
updateInterval
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<div id="coinApp">
<div v-for="(record, index) in results" :key="index">
{{index}} - {{record.name}}: {{record.rank}}
</div>
</div>
I have a function that returns promise:
Setup.zoomIn() : Promise<void> {...}
I would like to use rxjs to invoke that function 5 times with delay of 1 second between each, like this:
let obs = Observable.create(observer => {
let count = 0;
setTimeout(() => {
Setup.zoomIn();
count++;
observer.next();
}, 1000);
if (count === 5) {observer.complete();}
};
obs.subscribe(() =>
console.log('zoomed out');
)};
Only and only when that is executed I would like to continue with execution to perform further steps:
obs.toPromise.then(() => {
// do some stuff here but only after zoom has been invoked 5 times
})
Create a list of observables for zoomIns functions and concat them with another Observable.
function zoomIn(i) {
return new Promise(res => {
setTimeout(()=>res(i), 1000);
});
};
function anotherPromise() {
return Rx.Observable.defer(()=> {
return new Promise(res => {
setTimeout(()=>res('anotherPromise'), 3000);
});
});
}
const zoonInList = Array(5).fill(0).map((x, i)=>i).map(i=>
Rx.Observable.defer(()=> {
return zoomIn(i);
})
);
Rx.Observable.concat(...zoonInList, anotherPromise())
.subscribe(x=>console.log(x))
I don't know why subscription.unsubscribe is not a function.
I can't figure out.
const Rx = require("rx");
const observable = Rx.Observable.create(function(observer) {
observer.next(1);
observer.next(2);
const intervalId = setInterval(() => {
observer.next('nmb');
}, 1000);
return function unsubscribe() {
clearInterval(intervalId);
}
});
const subscription = observable.subscribe(x => console.log(x));
setTimeout(() => {
subscription.unsubscribe();
}, 5000);
This issue is encountered when writing code against the rxjs 5 api but referencing rxjs 4.
I'd like to use the built-in JsTestDriver functionality and code coverage support of the WebStorm IDE. However, I use mocha instead of Jasmine.
How can I configure webstorm to recognize mocha, or use a mocha plugin?
I did find this piece of code to create a mocha jstestdriver adapater on the web, but not sure how and where to add it to webstorm...
/**
* Mocha JsTestDriver Adapter.
* #author jan#prachar.eu (Jan Prachar)
*/
(function(){
/**
* Our mocha setup
*/
var setup = mocha.setup;
var mochaOptions = {};
mocha.setup = function (opts) {
if ('string' === typeof opts) {
mochaOptions.ui = opts;
} else {
mochaOptions = opts;
}
setup.call(mocha, mochaOptions);
};
var getReporter = function (onTestDone, onComplete) {
var Base = mocha.reporters.Base;
var Reporter = function (runner) {
var self = this;
Base.call(this, runner);
this.onTestDone = onTestDone;
this.onComplete = onComplete;
this.reset = function () {
jstestdriver.console.log_ = [];
};
this.reset();
runner.on('start', function () {
});
runner.on('suite', function (suite) {
});
runner.on('suite end', function (suite) {
});
runner.on('test', function (test) {
self.reset();
});
runner.on('pending', function () {
});
runner.on('pass', function (test) {
self.onTestDone(new jstestdriver.TestResult(
test.parent.fullTitle(),
test.title,
'passed',
'',
'',
test.duration
));
});
runner.on('fail', function (test, err) {
var message = {
message: err.message,
name: '',
stack: err.stack
};
self.onTestDone(new jstestdriver.TestResult(
test.parent.fullTitle(),
test.title,
'failed',
jstestdriver.angular.toJson([message]),
'',
test.duration
));
});
runner.on('end', function () {
self.onComplete();
});
};
// Inherit from Base.prototype
Reporter.prototype.__proto__ = Base.prototype;
return Reporter;
};
var MOCHA_TYPE = 'mocha test case';
TestCase('Mocha Adapter Tests', null, MOCHA_TYPE);
jstestdriver.pluginRegistrar.register({
name: 'mocha',
getTestRunsConfigurationFor: function (testCaseInfos, expressions, testRunsConfiguration) {
for (var i = 0; i < testCaseInfos.length; i++) {
if (testCaseInfos[i].getType() === MOCHA_TYPE) {
testRunsConfiguration.push(new jstestdriver.TestRunConfiguration(testCaseInfos[i], []));
}
}
},
runTestConfiguration: function (config, onTestDone, onComplete) {
if (config.getTestCaseInfo().getType() !== MOCHA_TYPE) return false;
mochaOptions.reporter = getReporter(onTestDone, onComplete);
mocha.setup(mochaOptions);
mocha.run();
return true;
},
onTestsFinish: function () {
}
});
})();
Does this Mocha Adapter really work?
Were you able to test it from the command?
I would imagine that it would be configured similar to how the jasmineAdapter.js is configured below.
server: http://<localhost>:4224
load:
- tools/Jasmine/jasmine.js
- tools/Jasmine/jasmineAdapter.js
- lib/require.js
- src/*.js
test:
- specs/*.js