How to unit test if Vuex action has been dispatched in VueJS - unit-testing

I just want to test if myAwesome action is dispatched when my App.vue component is created(). Is this something you would test? I'm using Jasmine for these tests. Any help would be awesome!
App.js
describe('when app is created()', () => {
it('should dispatch myAwesomeAction', (done) => {
const actions = {
myAwesomeAction() {
console.log('myAwesomeAction')
// commit()
}
}
const state = {
myAwesomeAction: false
}
const mutations = {
LOAD_SUCCESS(state) {
state.myAwesomeAction = true
}
}
const options = {
state,
mutations,
actions
}
const mockStore = new Vuex.Store(options)
spyOn(mockStore, 'dispatch')
const vm = new Vue({
template: '<div><component></component></div>',
store: mockStore,
components: {
'component': App
}
}).$mount()
Vue.nextTick(() => {
expect(mockStore.dispatch).toHaveBeenCalled()
expect(mockStore.dispatch).toHaveBeenCalledWith('myAwesomeAction')
done()
})
})
})
Errors:
1) should dispatch myAwesomeAction
App
Expected spy dispatch to have been called.
webpack:///src/views/App/test/App.spec.js:49:6 <- index.js:50916:50
webpack:///~/vue/dist/vue.esm.js:505:15 <- index.js:3985:24
nextTickHandler#webpack:///~/vue/dist/vue.esm.js:454:0 <- index.js:3934:16
Expected spy dispatch to have been called with [ 'loadOrganisation' ] but it was never called.
webpack:///src/views/App/test/App.spec.js:50:54 <- index.js:50918:54
webpack:///~/vue/dist/vue.esm.js:505:15 <- index.js:3985:24
nextTickHandler#webpack:///~/vue/dist/vue.esm.js:454:0 <- index.js:3934:16

The thing is, you are trying to unit test a store from a component, so there's a little bit of a problem when you are mocking some elements and relying in true functionality in other elements. I'm no expert in vuex, I had a similar problem trying to spy on a store action and call a component's method (can't remember what the problem was, i remember i did waste half a day with it).
My suggestion: test component as unit, then test store module as unit, that means in your app component you can spy
spyOn(vm, 'myAwesomeAction');
Vue.nextTick(() => {
expect(vm.myAwesomeAction).toHaveBeenCalled()
done()
});
(that is, check if initializing your component, your method that calls the store action is called, in my example myawesomeaction will be a mapAction name in the methods object)
And then, you can unit test your store, and check that if you call myawesomeaction the mutation on that component will occur
check the test action helper here: https://vuex.vuejs.org/en/testing.html

Related

RXJS Marble Testing TestScheduler not flushing observable and wrong expectation for Angular Jasmine Unit Test

I am trying to learn how to rxjs marble test using testScheduler. When trying to test a behavior subject getter and setter I get the error "Expected spy setVersatilityRowOptions to have been called with:[ VersatilityHeaderRowOptions({ onlyShowCertifiedOperators: true, showOffTeamOperators: false })] but it was never called."
Here is what my code looks like
My Service Functions
setVersatilityRowOptions(versatilityRowOptions: VersatilityHeaderRowOptions): void {
this._versatilityRowOptions.next(versatilityRowOptions);
}
getVersatilityRowOptions(): Observable<VersatilityHeaderRowOptions> {
return this.$versatilityRowOptions;
}
My Component Function I'm testing
updateVersatility(): void {
this.versatilityApiService.getVersatilityRowOptions().subscribe(versatilityRowOptions => {
this.versatilityApiService.setVersatilityRowOptions(versatilityRowOptions);
});
}
My Test File (I have mocked the object, the service, and the services functions in my spec file as well. Additionally, the service has been correctly injected into my spec file).
const testScheduler = new TestScheduler((actual, expected) => {
expect(actual).toEqual(expected);
});
describe('updateVersatility()', () => {it('should update behavior subject', () => {testScheduler.run(({cold}) => {const source1$ = cold('--(x|)', {x: mockVersatilityHeaderRowOptions});spyOn(component['versatilityApiService'],'getVersatilityRowOptions').and.returnValue(source1$);spyOn(component['versatilityApiService'], 'setVersatilityRowOptions');
component.updateVersatility();
getTestScheduler().flush();
fixture.detectChanges();
expect(
component['versatilityApiService'].getVersatilityRowOptions
).toHaveBeenCalled();
expect(component['versatilityApiService'].setVersatilityRowOptions).toHaveBeenCalledWith(mockVersatilityHeaderRowOptions);
});
I tried to run the test Scheduler and thought that the observable would flush and I could expect the setter to be called but it was not.

Vue with jest - Test with asynchronous call

How to make my test wait for the result of my api?
I'm using vue and jest to test my components.
I want to test the method that writes a client to my database. In my component I have the following method:
methods: {
onSubmitClient(){
axios.post(`urlApi`, this.dados).then(res => {
return res;
})
}
}
in my test
describe('login.vue', () => {
let wrapper
beforeAll(()=>{
wrapper = mount(client, {
stubs: ['router-link'],
store,
data() {
return {
dados: {
name: 'tes name',
city: 'test city'
},
};
}
})
})
it('store client', () => {
res = wrapper.vm.onSubmitLogin()
console.log(res);
})
})
My test does not wait for the API call to complete. I need to wait for the API call to know if the test worked. How can I make my test wait for API return?
There are several issues in your code.
First, you cannot return from an async call. Instead, you should be probably setting up some data in your onSubmitClient, and returning the whole axioscall, which is a Promise. for instance:
onSubmitClient(){
return axios.post(`urlApi`, this.dados).then(res => {
this.result = res;
return res;
})
}
I assume the method here is storing a result from the server. Maybe you don't want that; it is just an example. I'll come back to it later.
Ok, so now, you could call onSubmitClient in your wrapper and see if this.result is already set. As you already know, this does not work straightforward.
In order for a jest test to wait for asynchronous code, you need either to provide a done callback function or return a promise. I'll show an example with the former:
it('store client', (done) => {
wrapper.vm.onSubmitLogin().then((res) => {
expect(wrapper.vm.dados).toEqual(res);
done();
})
});
Now this code should just work, but still there is an issue with it, as #jonsharpe says in a comment.
You usually don't want to perform real network requests in unitary tests because they are slow and unrealiable. Also, unitary tests are meant to test components in isolation, and here we are testing not only that our component sets this.result properly when the request is made. We are also testing that there is a webserver up and running that is actually working.
So, what I would do in this scenario to test that single piece of functionality, is to extract the request to another method, mock it with vue-test-utils and jest.fn, and then assert that onSubmitClient does its work:
The component:
export default {
data() {
return {
http: axios,
...
},
methods: {
onSubmitClient(){
this.http.post(`urlApi`, this.dados).then(res => {
this.result = res;
})
}
}
}
}
The test:
it('store client', (done) => {
const fakeResponse = {foo: 'bar'};
var post = jest.fn();
var http : {
post,
};
var wrapper = mount(client, {
stubs: ['router-link'],
store,
data() {
return {
dados: {
name: 'tes name',
city: 'test city'
},
http, //now, the component under test will user a mock to perform the http post request.
}
}
});
wrapper.vm.onSubmitLogin().then( () => {
expect(post).toHaveBeenCalled();
expect(wrapper.vm.result).toEqual(fakeResponse);
done();
})
});
Now, your test asserts two things:
post gets called.
this.result is set as it should be.
If you don't want to store anything in your component from the server, just drop the second assertion and the this.result = res line in the method.
So basically this covers why your test is not waiting for the async request and some issues in your code. There are still some things to consider (f.i. I think a global wrapper is bad idea, and I would always prefer shallowMount over mount when testing components behavior), but this answer should help you a lot.
PS: didn't test the code, so maybe I messed up something. If the thing just doesn't work, look for syntax errors or similar issues.

Testing VueJS method inside of a promise which is returned from a vuex action

I have a Vue component, which is using a mapped action from a vuex store, which returns a promise. When the component calls the mapped action, and the mapped action is resolved, I am calling another vue method vm.$router.push(). I want to assert that the push method gets called. Here is my component, test, and some helper methods I created to sub out the component with vuex and vue-router.
Here is my .vue component with some console.logs to track what's going on.
<template>
<div>
<button #click="promise" class="click-promise">Promise</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions(['promiseAction']),
promise(){
const vm = this
vm.$router.push('/some/route')
console.log('before promiseAction')
console.log(vm.promiseAction())
return vm.promiseAction().then(function (response) {
console.log('inside promiseAction')
vm.$router.push('/some/other/route')
})
}
}
}
</script>
Here is my test. I'm using Mocha, Karma, Chai, and jquery-chia
import Testing from '#/components/Testing'
describe('Testing.vue', () => {
const mount = componentHelper(Testing)
it.only('assert something in a promise returned from an action', () => {
const promise = new Promise(resolve => resolve('success'))
const promiseAction = stubAction('promiseAction').returns(promise)
const vm = mount()
const routerPush = sinon.spy(vm.$router, 'push')
$('.click-promise').click()
expect(promiseAction).to.have.been.called
expect(routerPush).to.have.been.calledWith('/some/route') //this passes
return vm.$nextTick(() => {
console.log('inside nextTick')
expect(routerPush).to.have.been.calledWith('/some/other/routes') //this never happens
})
})
})
And here is my helpers file. I'm not sure if this is 100% neccisary, but I wanted to include everything in this post
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
Vue.use(Vuex)
Vue.use(VueRouter)
let div
beforeEach(() => {
// create a dom element for the component to mount to
div = document.createElement('div')
document.body.appendChild(div)
})
afterEach(() => {
// clean up the document nodes after each test
Array.prototype.forEach.call(document.querySelectorAll('body *:not([type="text/javascript"])'), node => {
node.parentNode.removeChild(node)
})
})
// stub out a store config object
const storeConfig = {
actions: {}
}
/**
* Set up a function that will attach the mock store to the component
* and mount the component to the test div element
*
* Use like this:
* const mount = componentHelper(YourComponent)
* do some setup
* call mount() to instantiate the mocked component
*
* #param component
* #returns {function()}
*/
window.componentHelper = function (component) {
const router = new VueRouter({})
return () => {
// 1. attaches the stubbed store to the component
component.store = new Vuex.Store(storeConfig)
component.router = router
// 2. mounts the component to the dom element
// 3. returns the vue instance
return new Vue(component).$mount(div)
}
}
/**
* Creates an action to be added to the fake store
* returns a sinon stub which can be asserted against
* #param actionName
*/
window.stubAction = (actionName) => {
// 1. create a stub
const stub = sinon.stub()
// 2. create the action function that will be placed in the store and add it to the store
storeConfig.actions[actionName] = function (context, ...args) {
// 3. when this action is called it will call the stub
// return the stub so you can assert against the stubbed return value
// example: stubAction('fakeAction').returns('xyz')
return stub(...args)
}
// 4. return the stub that was placed in the return of the action for assertions
return stub
}
When I run this test this is what I get.
LOG LOG: 'before promiseAction'
LOG LOG: Promise{_c: [], _a: undefined, _s: 1, _d: true, _v: 'success', _h: 0, _n: true}
Testing.vue
✓ assert something in a promise returned from an action
PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 4 SUCCESS (0.045 secs / 0.018 secs)
TOTAL: 1 SUCCESS
=============================== Coverage summary ===============================
Statements : 31.58% ( 6/19 )
Branches : 100% ( 0/0 )
Functions : 0% ( 0/2 )
Lines : 31.58% ( 6/19 )
================================================================================
LOG LOG: 'inside nextTick'
ERROR LOG: '[Vue warn]: Error in nextTick: "AssertionError: expected push to have been called with arguments /some/other/routes
/some/route /some/other/routes "
(found in <Root>)'
ERROR LOG: AssertionError{message: 'expected push to have been called with arguments /some/other/routes
/some/route /some/other/routes ', showDiff: false, actual: push, expected: undefined, stack: undefined, line: 210, sourceURL: 'http://localhost:9877/absolute/home/doug/Code/projects/vue-testing-sandbox/node_modules/chai/chai.js?ab7cf506d9d77c111c878b1e10b7f25348630760'}
LOG LOG: 'inside promiseAction'
As you can see the test passes, but the code inside of the promise does not run until after the test is done. I'm talking about this section
return vm.promiseAction().then(function (response) {
console.log('inside promiseAction')
vm.$router.push('/some/other/route')
})
I also logged out the promise function console.log(vm.promiseAction()) and you can see it is what you would expect.
How can I get the test to wait for the promise? I thought nextTick might be the answer, but it doesn't seem to be working.
Thanks for any help.
There isn't a really good way to do what you want via clicking the button. Moreover, I'm not sure it's even really worth testing it through clicking the button. If Vue's event handlers aren't working correctly you have bigger problems.
Instead I would suggest you just call the promise method and execute your tests in the success callback of the promise returned from that method.
//execute the handler
const test = vm.promise()
// test that the pre-async actions occured
expect(promiseAction).to.have.been.called
expect(routerPush).to.have.been.calledWith('/some/route')
// test the post-async action occurred
return test.then(() => {
expect(routerPush).to.have.been.calledWith('/some/other/routes')
})

How to test react component correctly?

Recently I am learning to test React with jest and enzyme, It seems hard to understand what a unit test is it, my code
import React from "react";
class App extends React.Component {
constructor() {
super();
this.state = {
value: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const value = e.target.value;
this.setState({
value
});
}
render() {
return <Nest value={this.state.value} handleChange={this.handleChange} />;
}
}
export const Nest = props => {
return <input value={props.value} onChange={props.handleChange} />;
};
export default App;
and my test
import React from "react";
import App, { Nest } from "./nest";
import { shallow, mount } from "enzyme";
it("should be goood", () => {
const handleChange = jest.fn();
const wrapper = mount(<App />);
wrapper.find("input").simulate("change", { target: { value: "test" } });
expect(handleChange).toHaveBeenCalledTimes(1);
});
IMO, the mocked handleClick will intercept the handleClick on App,
if this is totally wrong, what's the right way to use mock fn and test the handleClick be called.
Another: I search a lot, read the similar situations, seem like this iscontra-Unit Test,
Probably I should test the two component separately, I can test both components,
test the
<Nest value={value} handleChange={handleChange} />
by pass the props manually, and then handleChangeinvoked by simulate change
it passed test.
but how can I test the connection between the two?
I read
some work is React Team's Work
...
I don't know which parts I have to test in this case, and Which parts react already tested and don't need me to test. That's confusing.
You should take the path of testing the Nest component in isolation first, passing your mocked handleChange as a prop, to verify that input changes are being propagated.
If you want to test the state part, then you can get the instance of your App class from enzyme and call that method directly:
it("should update the Nest value prop when change is received", () => {
const wrapper = mount(<App />);
const instance = wrapper.instance()
instance.handleChange( { target: { value: "test" } })
const nestComponent = wrapper.find("Nest").first()
expect(nestComponent).prop('value').toEqual('test');
});
This a very very basic, almost not needed to test piece of code, but it will get your test coverage up if that's what you're after.
Doc for instance: http://airbnb.io/enzyme/docs/api/ReactWrapper/instance.html
If you want to test for the connection. From what I see, the nest component is a child component inside the App component. You could test that <App /> contains `.
describe('<App />', () => {
it('should contain a nest component', () => {
const wrapper = mount(<App />);
expect(wrapper.find(<Nest />)).toHaveLength(1);
});
});
Secondly, since the onChange event on the nest component updates the state in the App component, you can also test for state changes since its a behavior you expect.
it('should update state', () => {
//find input and simulate change with say {value: 'new value'} and then
expect(wrapper.state().value).toBe('newValue');
});
I hope this helps.

Testing observable object angular 2 karma

I'm working on my unit test cases for Angular 2 with Karma, I got stuck with one of a function where I run the test for below line
expect(component.subscribeToEvents()).toBeTruthy();
and I view my coverage code, the lines inside the test file seems not covering anything inside the subscribe. I have tried using MockBackend in mocking the api call inside a function on service but I'm not sure how to do the mocking on a subscribed object, can somebody please help me?
The below is in test.component.ts
subscribeToEvents() {
this.subscription = this.czData.$selectedColorZone
.subscribe(items => {
this.resourceLoading = true;
if (!this.resourceData || (this.resourceData && this.resourceData.length === 0)) {
this.settings.layout.flypanel.display = false;
this.getAllResources(this.pagination.start, this.pagination.size);
}
else {
this.pagination.start = 1;
this.pagination.end = this.pagination.size;
this.getAllResources(1, this.pagination.size);
this.settings.layout.flypanel.display = true;
}
});
return true;
}
The screenshot of the coverage code
You can't do this, as the subscription is resolved asynchronously. So the synchronous test completes before the async task is resolved.
If all you want is coverage, you can just make the test async. This will cause the Angular test zone to wait until the async task is resolved, before completing the test
import { async } from '#angular/core/testing';
it('..', async(() => {
component.subscribeToEvents();
}))
You can't try to expect anything here, as there is no callback hook for when the task is resolved. So this is really a pointless test. It will give you coverage, but you aren't actually testing anything. For instance, you might want to test that the variables are set when the subscription is resolved.
Based on the code provided, what I would do instead is just mock the service, and make it synchronous. How can you do that? We you can make the mock something like
class CzDataSub {
items: any = [];
$selectedColorZone = {
subscribe: (callback: Function) => {
callback(this.items);
}
}
}
Then just configure it in the test
let czData: CzDataStub;
beforeEach(() => {
czData = new CzDataStub();
TestBed.configureTestingModule({
providers: [
{ provide: CzData, useValue: czData }
]
})
})
Now in your tests, you don't need to make it async, and you can provide any value you want by just setting the items property on the mock, and subscriber will get it
it('..', () => {
czData.items = something;
component.subscribeToEvents();
expect(component.settings.layout.flypanel.display).toBe(false);
})
UPDATE
I think I was half asleep when I wrote this post. One of the above statements is incorrect
You can't try to expect anything here, as there is no callback hook for when the task is resolved.
This is not completely true. This is what fixture.whenStable() is for. For instance if this is your service
class CzData {
_value = new Subject<>();
$selectedColorZone = this._value.asObservable();
setValue(value) {
this._value.next(value);
}
}
Then this is how you would make the test work
let czData: CzData;
let fixture: ComponentFixture<YourComponent>;
let component: YourComponent;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [ CzData ],
declarations: [ YourComponent ]
});
fixture = TestBed.createComponent(YourComponent);
component = fixture.componentInstance;
czData = TestBed.get(czData);
})
it('..', async(() => {
component.subscribeToEvents();
czData.setValue(somevalue);
fixture.whenStable().then(() => {
expect(component.settings.layout.flypanel.display).toBe(false);
})
}))
We use fixture.whenStable() to to wait for the async tasks to complete.
This is not to say that using the mock is wrong. A lot of the time, using the mock would be the way to go. I just wanted to correct my statement, and show how it could be done.
Consider how Angular Outputs are tested since they are subscribed to during testing: https://angular.io/guide/testing#clicking
it('should raise selected event when clicked (triggerEventHandler)', () => {
let selected: Hero;
comp.selected.subscribe((hero: Hero) => selectedHero = hero);
heroDe.triggerEventHandler('click', null);
expect(selectedHero).toBe(expectedHero);
});
So try:
const expectedItem = {}; // mock the expected result from 'subscribeToEvents'
it('should raise selected event when clicked (triggerEventHandler)', () => {
let selectedItem: any; // change to expected type
component.subscribeToEvents.subscribe((item: any) => selectedItem = item);
// fixture.detectChanges(); // trigger change detection if necessary here, depending on what triggers 'subscribeToEvents'
expect(selectedItem).toBe(expectedItem);
});