Instructor: In the last section,
we added some specs around our comment box
and we were just asserting
that it was indeed a controlled component
where the value of the text area
was being assigned
from this dot state dot comment.
Our specs are now all green across the board
and if we go check out
our application inside the browser
we'll see that we can successfully
enter some text in here
and we can click the button all day,
but nothing happens.
So I think the next step
for us is going to be to make sure
that when a user clicks submit comment,
the input should be cleared.
Now, we don't have any functionality right now
for kind of handling this saved comment.
So we're just going to implement
the comment box clearing
and then later on we'll come back
and figure out a way that we're going
to save this comment.
So right now our only priority
is to make sure that when a user
submits the box, the comment box,
the text area gets cleared.
Let's start off by writing a spec
for this inside of our comment box test file.
So we already kind of stubbed out
the it statement here where we said
when a user is entering some text.
When it's submitted,
we're gonna clear the input.
And we've already kind of rigged
up our input up here
by simulating a change event.
So now all we need to do
is figure out a way
to submit our form or the comment box.
Let's go ahead
and write out our spec here.
We're gonna say that we expect,
let's just kind of jump to the very end
where we expect the text area
to be totally empty.
So we're going to expect
component dot find text area
to,
oops.
To have value empty string.
And so immediately you can see
that we've got kind of a difference in specs here.
We've got the spec above
it expects it to have value new comment,
but then this one beneath
it expects there to be no string at all.
So I bet if we save this
and then look at our output, sure enough,
we expected it to have a value of empty string,
but the value was new comment.
So we need to do something right here,
right above this it statement,
right above the expectation
where we try to submit the form
or somehow trigger some behavior
that should cause the comment box
to clear out the input.
So what we're gonna do to make this work
is we're going to assume
that we're going to refactor our comment box
from being just a div
to an actual form element
because that's what we're really doing here.
We're building a form.
So I want to
take our component
which is going to contain a form
and we're going to simulate a submit event.
So this is gonna make the component think
that it's getting submitted.
So let's save this.
We still have the failing specs
so let's go work on the implementation.
I'm going to replace my div with a form.
And basically the only reason
that we're doing this right here
is because a form responds to the submit event,
whereas a div does not.
So this is just gonna make sure
that whenever a user clicks on our button,
it'll just go to try to submit
the form right here.
So this is just some for free HTML default behavior
that we're taking advantage of.
This isn't something that's necessarily a React.
We've got a form, it has a button.
When we click the button,
the form is gonna be submitted.
And so that's how we're gonna detect
that, "hey, it's time to clear out
the input or the text area."
So we'll add an event handler in here.
We'll say on submit
call this dot handle submit
and we'll bind this as well.
So let's define that handle submit method.
This is a form submittal
and whenever a form tries to submit itself
it's going to make a get request to our server,
whatever's hosting this webpage.
And so the first thing we wanna do
is make sure that the form doesn't actually try
to submit itself to the backend.
That's not the behavior we want here.
We're building a single page application
in JavaScript.
We're not building vanilla HTML pages.
So we'll call event dot prevent default
to keep the form from trying to submit itself.
Okay, now the second thing we need to do here
is try to satisfy our test.
We're in the place where, you know,
we're trying to submit the form here.
All we need to do now
is clear out the comment.
So we'll do that by setting our state.
Comment to an empty string.
Let's go ahead and save this.
And we're passing.
So it looks like our change
simulate event here is working just fine.
You'll notice that in the before each
we've found the text area
and then we simulated the change.
And so you might be asking
why didn't we do like find form
and simulate submit?
And the reason for that is
just that the form is the component.
The form is our top level element.
Let's try console logging
the component.
So when we do that,
you'll see that we console log
and we get immediately back the form.
So by just calling component dot simulate submit,
we're simulating the submit event
on the form itself.
Very top level element.
Okay, there's one more thing
that we need to do
that we're not explicitly testing here.
And that's just to make sure
that the button knows that when it's clicked,
it should submit the form.
So we'll just add on action submit
and that just is gonna make
the button try to submit
the form whenever it gets clicked.
All right, let's give this a shout out
in the browser.
I'm going to refresh the page,
we'll enter some text,
we click submit comment,
and sure enough the text area empties itself out.
That's exactly the behavior that we wanted.
One thing that I wanna point out here is
that we developed this whole feature right here
without really having
to ever flip over to the browser
and test out our component
in the browser as well.
We could have done the entire feature
from testing to implementation
by relying only upon the tests.
And once the tests were all green,
we could have only then flipped over the browser
and tested it out manually.
Once you get more experience with writing tests,
I think you're gonna find that more often
you can write the entire component, you know,
as complex as it might be
by only writing tests
and never actually refreshing
the browser or testing it out manually.
And so, although it might take some time
to write your specs out
and figure out you know,
what you want to test,
I find that at the end of the day,
it might be just as fast
to write your specs as it is
to write it without specs.
Just kinda some food for thought.
Okay, so our comment box
is very well tested here.
We've got the component all put together.
Everything is looking pretty good.
I think that the next thing we need to do
is start flushing out our component list,
or excuse me, our comment list.
So let's start tackling that in the next section.