-: So the last two helpers that we need to put together
is the helper for simulating
events on a React component and a helper
for setting up our jquery library as well.
Let's go ahead and do the tricker of the two
which is going to be building our helper
for simulating events.
So this one is gonna be
a lot of little gotchas on here.
It really requires some in depth knowledge of jqueries.
So again, this is one
of the ones where it's gonna be a lot of
I have no idea what's going on,
but again, the point here
or the idea here is just to give you a taste
of what's going on behind the scenes
as opposed to trying to gain
some intrinsic mastery.
So the one place where we use this simulating events
or this event simulator,
was inside of the comment box test.
So let's go ahead
and open that file up.
Inside of our test file,
inside of our components file,
I'm gonna find comment box test.
Now inside of comment box test
we use this down in the nested describe.
So on a jquery element, a jquery object
we called dot simulate,
past the event name that we wanted to trigger.
And then if it was a value or a change,
that we wanted to simulate,
we passed along the change event,
or the new value to place on the element.
So this is the kind
of signature we're going, we're going for
we should be able to chain onto any jquery object
and then pass in the event name,
and then a new value for the element,
if it is a element that can hold a a value.
So the really gotcha part, the hard part
the part that requires you to have some knowledge
about jquery is the part where we're gonna figure
out how to add this method
to every instance of jquery by default.
And so to add a method to jquery
we add a function
to dollar sign.fn.
So if we say dollar sign.fn.simulate, is a function
then every jquery instance
that we ever create will have access
to this simulate function.
And it can be called.
We would use it like,
so we would say go find a 'div'
and then we could say, just dot simulate.
That's what this dot fn does right here.
Okay, let's go ahead and put our arguments on.
The first argument is gonna be
the event name that we care about.
And the second one will be a value
if we want to set a value on the element itself.
So the real other interesting thing
there's probably two very challenging
or interesting aspects about this helper right here.
The first one is the where to put the function.
And the second one is how to get access
to the jquery element, right?
We are calling the simulate helper
by doing something like div.simulate.
And so it stands to reason that inside
of this function we're going
to want to somehow get access
to the 'div' that was selected here.
And so the tricky part here is knowing
that the element that was selected
if we want to get access to it inside of this
this function right here, we just say this.
So if I call dollar sign div.simulate
and I referred to this
it would be a reference to the 'div'
that was selected.
And so that's our real
it's our handle into the react element.
It's our handle into the component
into the components HTML to get
out the actual element
that we care about and make changes
to it or simulate an event on it
or change the value on it.
It's by just referring to this.
So the next thing that we'll do is make use
of the test utils library provided by React.
Remember, we already imported that library up at the top.
So we brought in test utils,
it's one of the React add-ons.
Let's go pull open our documentation for React right now.
So in a browser window,
I'm gonna search for react js.
Click on the link,
we'll go to documentation at the top.
And then on the left hand side, a little bit
of ways down under
the add-on section is the test utilities.
Now we've already looked at this page right here
and when we previously looked at it, I pointed
out in particular this simulate method on test utils.
And so as the bold text right here says very clearly
this is possibly the most single useful utility
in react test utils.
And so what we're going to do is reference react
test utils dot simulate
and then call the event type that we want to call
and pass a reference to the element
that we wanna trigger that event on.
And so you can see a couple more instances
of this down here I can see react test,
utils simulate change with node,
and also we can do a key down.
So it's really the method name right here.
The method name right here is the event name
that we want to trigger.
So with that knowledge, we can really wrap up this,
the first part of this event or this,
this simulate helper right here.
We'll say test utils dot simulate capital S.
And then the first element is the, is the reference
to the HTML element that we want
to trigger this event on.
And we're missing one part here.
We're missing the call where we add in the event name.
So in the documentation there was stuff
like say.click or dot change
but we wanna be able to pass in the event name
on the fly and trigger different events based
on this different event name.
So to do that, we're going
going to not reference a direct property like this.
We will instead reference a object property
by using the square brackets
and referring to event name.
So now if a user, if we make use
of this helper function
and we pass in the change event,
we will call testutils.simulate.change,
and then invoke that function with this,
which is a reference to our 'div.'
All right, there's one more gotcha in here
and it's just that when we are making reference
to this, I said, Hey, it's, you know
the 'div' that we already selected
but we specifically want to get the
the first 'div'
this, this selector right here is an array
that can contain many different elements.
And so we just wanna trigger this
this event on the first element in the array.
And so we're just gonna add on zero.
Again, this is a little bit of a gotcha
little bit of a tough one.
Okay? So this is looking good for
our first step right here
but we still need to implement the value.
We need to somehow get the value
onto the HTML element that got selected.
So let's go ahead and take care of that
in the next section.