-: Alright. Hopefully you had some success
in the last section, putting a test together to make sure
that that input gets emptied.
So in this section, we'll go over a solution together.
So, let's get to it.
I'm gonna flip back over to my comment box dot test file
and I'll first get started by adding in a new it statement.
So, I'll say 'when form is submitted
text area gets emptied'
like so.
So, now inside of here
the first thing we need to do is make sure
that the text area starts off with some text inside of it.
If we try to submit the form when there's no text
inside there, well we're not really doing a very great test.
So to enter in some fake text to the text area
we're gonna run the same line of code
that we executed up here in the previous test.
So, we're going to attempt to find the text area.
I'll then simulate a change event on it
and I'll pass in the mocked out or the fake event object.
So, the fake event object will have a target property
that has a object of its own that has a value property
and I'll give that text area some text of, again
we'll just say 'new comment' to keep it simple.
After that, we'll then force our component to
update to make sure that the text area
gets the brand new value of this dot state dot comment
assigned to it.
So, I'll say wrapped dot update.
So now in theory, the text area has the correct value
or a value, I should say, inside of it.
So, now we're going to attempt to submit the form itself
and we should then be able to verify
that the text area gets completely emptied out.
So, to actually submit the form, I'm going to
find the form element within our wrapped component.
So, I'll say wrapped dot find form
and then I'll simulate the submit event.
So again, when we simulate an event
we use the normal HTML name of the event
which in this case is simply submit.
We do not try to say simulate 'on submit'.
'On submit' is the name of the prop
that is used to assign event handlers
to the form element right here.
So, we're not trying to simulate 'on submit'
we're trying to simulate just 'submit'.
So, now back over here
we can again attempt to update the form
cause remember when we submit the form right here
it'll call that handle submit function.
Handle Submit is going to attempt to change the value
of comment right here, to be an empty string
by calling set state.
But calling set state is an asynchronous operation.
So, we need to force our component to update in order
for this new value of state dot comment to take effect.
So back over here, I'll again call wrapped dot update.
So, that should get the new value inside of our text area
or at least clear it out is what I really mean to say.
So, now after that we can go ahead
and make our actual assertion.
We're gonna do the same thing that we did before
where we find the text area, we look up the value prop
and then we assert that it's equal to some new value.
And in this case we want it to be equal
to empty string cause we want the text area to be empty.
So, I'll say wrapped dot find text area dot prop value
and then I'm gonna wrap that entire thing
with an expect function, like so.
So, make sure you get expect one parenthesis
and then a closing parenthesis over here as well.
And then we expect that to equal empty string, like so.
Okay, so this looks pretty good.
I'm gonna save the file
and I'll go see if my tests are passing.
So, there's the automatic rerun of my test suite
and it looks like that new test is passing.
Now as usual, we're gonna do a quick change to
break the test and make sure it's working the way we expect.
So, I'm going to change the to equal right here
to some arbitrary string.
I'll save the file and we'll verify
that the test is in fact broken.
Okay, so expected empty string
which is definitely what we want right here to
equal 1, 2, 3, 4, 5, 6.
Now, there's one last thing I wanna mention
about this test right here.
What we have definitely works as is
but one thing that's kind of a weakness in this test
is that when we do that initial text area simulate
change right here and then call wrap dot update
it technically would've been kind of good form to
write another expectation right here that says yes
in fact the text area did have its value changed.
In other words, it kind of would've been nice to
put an expectation right here where we find the text area
get the value prop and say yes the thing did get new comment
assigned to it because otherwise our test could be
getting a false positive.
It could be the case that you and I wrote some faulty test
code right here, such that our text area never
ever got a new value in the first place.
So, by adding on this expectation right here
we are just saying yep,
after we try to change the value of text area,
it does in fact change.
And then, after we trigger the form submit event
it goes back to being an empty string.
So, that would've definitely been a good approach.
Now in this case, I don't feel like we really need to add
in this extra expectation right here because we are already
testing that in the test right above it.
So, if we did not have this test right here,
I probably would leave this line of code.
But because we do have that test,
I feel reasonably comfortable saying,
you know what,
we are setting the correct value inside that text area.
So, I am going to delete that expectation.
And then one other thing really quickly, I'll make sure
that I reset the to equal right here
from 1, 2, 3, 4, 5, 6, back to empty string as well.
Okay, so that looks pretty good.
We've now got our working tests
inside of our comment box test file.
However, there's always a however, I apologize
there's always a however.
One more thing I wanna point out here.
You'll notice that inside these last two tests
we have some identical lines of code right here.
So in both cases we find that text area,
we simulate a change event
and then we call wrap dot update in both cases.
So, this is another location where we could probably
extract some of this set up logic into a before each.
So, let's come back the next section and we'll talk
about how we could possibly extract
this little bit of configuration
into a before each statement
that runs before each of these tests.