test case execution fails while using charts from #ant-design/charts, I even use jest-canvas-mock but the issue didn't resolve, here is screen shot .
Try installing the canvas package, because jest converts the canvas of the antd graph to div so after installing this package your test cases will work.
class Worker {
constructor(stringUrl) {
this.url = stringUrl;
this.onmessage = () => {};
}
postMessage(msg) {
this.onmessage(msg);
}
}
global.URL.createObjectURL = jest.fn();
window.Worker = Worker;
And then use this code above your describe
Hope this works for you.
Related
I wrote this little example:
import { isBrowser, isNode } from "browser-or-node";
// runs at load
async function run() {
if (isBrowser) {
document.body.style.backgroundColor = "black";
} else if (isNode) {
const fs = await import("./myLittleScript");
console.log(fs);
}
}
run()
And ./myLittleScript is actually importing the node filesystem module to use if the user runs the script in node.
Is this idea wrong ? What is the right approach ?
I get an error that the script is not found, even though it is in the same directory than the index.ts which is the code pasted here.
This is when bundling it with webpack, but I am interested in knowing whether this is an acceptable approach or not. (I know I could just write 2 functions.)
I am trying to enable fullscreen in my game written in Phaser 3.
I am doing it from Scene class via
this.game.scale.startFullScreen();
but getting error in f12 browser console
Uncaught TypeError: this.game.scale.startFullScreen is not a function
at TitleScene.<anonymous> (TitleScene.js:23)
at InputPlugin.emit (phaser.js:2025)
at InputPlugin.processDownEvents (phaser.js:167273)
...
In docs ScaleManager class has startFullScreen method.
Why console tells me it doesn't?
This is the full code of TitleScene.js:
export class TitleScene extends Phaser.Scene {
constructor ()
{
const config =
{
key: 'TitleScene'
}
super(config);
}
preload ()
{
this.load.image('Title', 'assets/Title.png');
}
create ()
{
this.background = this.add.image(960, 540, 'Title');
this.input.manager.enabled = true;
this.input.once('pointerdown', function () {
this.scene.start('MainScene');
this.game.scale.startFullScreen(); // here is the error
}, this);
}
}
There are two problems prevented me from resolving this problem:
I followed examples from here
https://www.phaser.io/examples/v2
But I am using the third version Phaser. And everyone who uses the same must follow examples from here
https://www.phaser.io/examples/v3
You must pay attention to url while using their site with examples. Both pages are the same from the first look. But urls are different. Also there are warning after each example using the second (old) version of engine.
And finally this function name is not startFullScreen but startFullscreen :)
I am building a library which uses the web audio api(ToneJS to be more specific).
I have tried using jsdom, mocha-jsdom with no success.
I get this error -
node_modules/tone/build/Tone.js:3869
this.input = this.output = this._gainNode = this.context.createGain();
Which makes sense and tells me that i need to use an environment with a context.
I'm not even sure how i should setup the tests for my project.
How should i setup a test environment correctly for my project?
I would suggest to not use Tone.js at all in your unit tests. Tone.js only works in the browser as it requires the Web Audio API. Instead you could use a spy/mock/stub of Tone.js which just makes sure that you use Tone as intended.
If you for example want to write a test for the AudioManager you could create a stripped down mock of Tone.js which just provides what you need.
const FakeTone = {
Players: function () { },
context: { resume () { } }
};
Next I would recommend to rewrite the AudioManager in a way that it accepts Tone as a constructor argument instead of importing it. This will make testing a lot easier. Instead of ...
import Tone from 'tone';
export class AudioManager {
// ...
generatePlayers () {
return new Tone.Players()
}
// ...
}
... it would then be ...
export class AudioManager {
constructor (Tone) {
this.Tone = Tone;
}
// ...
generatePlayers () {
return new this.Tone.Players();
}
// ...
}
... which looks a bit ugly at first, but you hopefully get used to it after a while. :-)
This will allow you to test the AudioManager with the FakeTone object.
const audioManager = new AudioManager(FakeTone);
expect(audioManager.generatePlayers()).to.be.an.instanceOf(FakeTone.Players);
You could also use something like Sinon.JS to write more advanced tests.
I am trying to get this library https://github.com/bencevans/node-sonos running in an node 6.10 environment. Problem is that is build for a higher node version but I need it to be able to run on a 6.10 system. So I tried downgrading the package manually. The biggest feature which node 6.10 can not handle is async await keyword. I found the asyncawait package which seems to fix that to a certain extend but I can not figure out how to rewrite class methods with it:
class SonosListener extends EventEmitter{
async stopListener () {
if (this._listening) {
this._eventServer.close()
this._listening = false
let cancel = function (s) {
return s.cancelAllSubscriptions()
}
var cancelAll = this._deviceSubscriptions.map(cancel)
return Promise.all(cancelAll)
} else {
return new Promise((resolve, reject) => { reject(new Error('Not listening')) })
}
}
}
How can I resolve this function using the asyncawait package in node 6.10?
My component has the following computed code:
textButton() {
const key = this.$root.feature.name === //...
// ...
},
Right now I'm trying desperately to mock "root" in my test, but I just don't know how. Any tips?
Vue test utils provides you with the ability to inject mocks when you mount (or shallow mount) your component.
const $root = 'some test value or jasmine spy'
let wrapper = shallow(ComponentToTest, {
mocks: { $root }
})
That should then be easily testable. Hope that helps
There are two ways to accomplish this with vue-test-utils.
One way, as mentioned above, is using the mocks mounting option.
const wrapper = shallowMount(Foo, {
mocks: {
$root: {
feature: {
name: "Some Val"
}
}
}
})
But in your case, you probably want to use the computed mouting option, which is a bit cleaner than a deep object in mocks.
const wrapper = shallowMount(Foo, {
computed: {
textButton: () => "Some Value"
}
})
Hopefully this helps!
If you are interested I am compiling a collection of simple guides on how to test Vue components here. It's under development, but feel free to ask make an issue if you need help with other related things to testing Vue components.
Solution from https://github.com/vuejs/vue-test-utils/issues/481#issuecomment-423716430:
You can set $root on the vm directly:
wrapper.vm.$root = { loading: true }
wrapper.vm.$forceUpdate()
Or you can pass in a parent component with the parentComponent mounting option. In VTU, the paren will be the $root:
const Parent = {
data() {
return {
loading: "asdas"
}
}
}
const wrapper = shallowMount(TestComponent, {
parentComponent: Parent
})
You may use a Vue Plugin inside the test to inject the mock data into localVue so that your components can access it.
import {createLocalVue, shallow} from '#vue/test-utils';
const localVue = createLocalVue();
localVue.use((Vue) => {
Vue.prototype.feature = {
name: 'Fake news!'
};
});
let wrapper = shallow(Component, {
localVue
});
I had the same issues a while ago and I came to the conclusion that accessing this.$root may be a sign that you have to further improve the way you communicate with components. Consider using the plugin structure to define globally available properties and methods not only inside the test for example. Mixins might be helpful as well.
https://v2.vuejs.org/v2/guide/plugins.html
https://v2.vuejs.org/v2/api/#mixins