How to get a ReactiveDict value in an event?


#1

I need to do a test for an event, which is using a ReactiveDict:

'click li': function(event, template) {
	const 	$this = $(event.currentTarget),
			type  = $this.attr('data-type');

	template.dict.set('section', type);
},

I’ve added xolvio:template-isolator to use fireEvent():

describe('Events', function() {
	it('set selected type', function (done) {
		const expectedValue = 'anything';
		Template.example.fireEvent('click li'); 
	  	expect(reactiveVar).to.be.equal(expectedValue);
	  	done();
	});
});

But I’m getting the error Cannot read property 'currentTarget' of undefined.
And how do I get the ReactiveDict-Value?


#2

I’m still stucked on that issue. I also put a SO bounty on that (http://stackoverflow.com/questions/37606918/unit-testing-for-event-in-meteor-application-set-event-and-template-parameter), but still no answer.

Is this really that hard or is there a big misunderstanding of function for this?


#3

I am not familiar with Blaze template testing, and i am not familiar with template-isolator, but it seems you are just firing a “click li” event (event named click li), i don’t see where you are passing the target wich is supposed to constitute the target you are selecting with jquery (i am not sure jquery is working either in this application).
From reading the documentation of template-isolator, you are supposed to provide the context (and target) by hand, hence a true unit test.


#4

I do not understand it totally. So in my example a reactiveDict is getting set by clicking an li-element, which has an attribute with the value. I want to test this ‘process’. My code doesn’t work and I think, I’m doing it totally wrong…


#5

Could it be that you have several li elements and the Template.example.fireEvent('click li'); is not specific enough?

Other than that, what does your template look like? What do your other template methods look like?


#6

@robfallows: This is just an isolated very simplified code. So assume there is is just one list with one li-element.

<template name="example">
	<ul>
		<li data-type="anything">wow</li>
	</ul>
</template>

So my test should be passed, as the expectedValue is ‘anything’ and the rectiveDict should be also ‘anything’ for the ‘section’ field.


#7

From the documentation :

You can also provide the fireEvent method with an options object containing the data context for
the helper invocation, an event and a templateInstance. For example:

fireEvent(‘myEvent’, {
context: { some: ‘values’ },
event: { { which: 13, target: {value: ‘’}} },
templateInstance: new Template(‘myNewTemplate’, function() {})
});

In your event handler, you are relying on the event.currentTarget to be correctly set and on the template to exist.
However, it seems you have to create a dummy (fake) event object with the target you want, and the templateInstance has to be created also.

This is a unit test, you are not testing the whole system but only the part you are interested in, here the event handler. The Template instance and the dom probably don’t even exist.

On a side note, if you really want to test your app (which is a good idea), i would suggest to drop Blaze and Templates with variables attached to them , and to favor React (and perhaps Redux)


#8

@vjau already saw the example in the doc (I posted it on SO, but forgot it here), but my problem is actually to use this in my example. So could you do a favor and show me an example code on my basic code? That would be very glad.

For me React is right now completely new and I don’t have enough time to rewrite the whole app for using React instead of Blaze. :frowning: