All language subtitles for 009 Testing User Interaction & State_en

Now, this first test, which we wrote,

isn't doing too much useful things.

So let's make our component a bit more powerful

so that we can test more useful things.

And let's say that in this component

we have some state, which should change

if a button is clicked.

And if that button is clicked

some text on the screen changes,

and we want to test whether that works correctly.

So for this, of course, we need to import useState

from React because that is how we can manage state

and functional components.

And then here we can call useState.

And here, I'll just name that state

changedText and setChangedText.

And at the beginning,

this is false because the text has not changed.

But if a button is clicked, the text should change.

So here I'll have a button where I say Change Text

and upon a click on this button,

I want to execute a function.

So I'll add a function to this component,

the changeTextHandler function,

in which I'll simply call setChangedText

and set this to true.

And it's this changeTextHandler function

which will be connected to this onClick prop here

on this button changeTextHandler.

Like this.

Now of course we need to do something

when that state changes.

And therefore, I will render this paragraph

at the beginning

so we can render it conditionally and check

if changed text is false

with an exclamation mark here.

And if that's the case,

then I will render that.

Otherwise, if changed text is true,

hence no exclamation mark,

I'll render 'Changed' here in this paragraph.

That is some code, which we could have here.

Now, if I save that, the component changes

but our test still passes

because the only test we have thus far

doesn't care about that change

we just made to the component.

It just tests where 'Hello world' is still there,

and that's definitely the case.

But now with that new functionality,

which we added here, I got at least two ideas

on how we could test this component now

in addition to the test which we already have.

And do you have some ideas as well?

Think about that briefly.

And then after a couple of seconds

I'll share my ideas with you.

The two ideas, which I got here,

are that we can A, test whether we see this text

if the state did not change yet.

So if the button was not clicked.

And if we see this other text here

if the button was clicked.

Because that's important.

When you write tests

you really want to test all possible scenarios.

Because otherwise your tests are not worth that much.

Because if you only test one scenario

then you will never notice,

or at least not as quickly,

if some other scenario fails because of some change.

So you want to test all possible scenarios,

all possible scenarios that make sense.

So here in this case, I want to write two new tests.

And definitely feel free to write

at least one of those tests on your own.

The test where we test

whether we see this text

if the button was not clicked.

Because we don't know yet how we can click

the button virtually,

so you won't be able to write that test on your own,

but you should be able to write that other test

on your own, where you check for this paragraph.

Here's a quick pause for you to pause the video

and try writing that first test on your own.

Thereafter we'll write both tests together.

Were are you successful?

Let's write that together

and let's start with that first test here.

Here I want to test that the component renders,

and please note how this reads

like a nice sentence.

Greeting component renders Hello World as a text.

Greeting component renders something else.

And that's how you typically want to name those things.

So that tests you would name

and test name for nice sentences.

And here, I'll then say renders

good to see you

if the button was not clicked.

So here I'm describing what I'm testing.

And this part with the button is of course

important because we will then soon write

another test where we test the opposite.

So here we again, want to arrange, act, and assert.

Arranging is the same as before.

We render greeting.

Acting as the same as before.

We don't do anything.

We don't click the button,

so we don't do anything.

And then asserting is also quite similar.

Here I then want to get my paragraph element

or output element, however you want to name it.

And I want to get it by text.

And we could again match it exactly

or just look for 'good to see you'

without matching it exactly.

And hence I'll set exact here to false.

And then my expectation is

that this element exists in the DOM

so that I'm able to find an element with that test.

Let's remove that second test for now and save this.

Now our tests are executed

and we see that we got two tests and both passed,

which is our expectation.

Now let's write that second test

where we want to click that button.

Here the expectation is that we render

Changed if the button was clicked.

So we render Changed

if the button was clicked.

And then here we write our testing code.

Of course you can also put that into quotes

to make it clearer

what's the actual text you're looking for.

But that is optional,

and really just there to help you

understand your testing output.

Now again, we'll arrange the same way

we did it before but now we also need to act.

So I'll add those comments again here

to make this easier to understand.

Now we need to act.

And the act which we want to do

is that we want to click that button.

Now for this, we can import another feature

from another package,

which also was installed out of the box,

from the testing library user event package,

to be precise.

From there, I want to import

userEvent just like this.

So from @testing-library user event.

User event is an object

that helps us trigger user events

in this virtual screen.

We can simply use user event,

and then there, we got all these typical events

which we can perform like clicking,

double clicking, hovering, typing into inputs.

Here we of course need a click.

And click then needs one argument at least.

It needs the element

on which you want to simulate a click.

And in my case that's, of course, this button here.

We can select this button again by text

but we can also select it differently

and to mix things up, I'll show you that alternative.

We can, again, use the screen here

and get this element by role.

We can get it by role, and button is a role

elements can have on the screen.

And since I only have one button here

that will give me access to this one button I have here.

Of course you could also, again, use get by text.

There is nothing wrong with that.

Now that's the button on which we want to simulate a click.

So it's this button element,

which I pass to user event click.

And then we still have the assert step.

Here I want to get access

to some element by text again.

So I'll get by text,

and the text I'm now looking for is changed.

So I'll copy that.

And that will actually be my exact text here.

So we can now even remove exact false

but you can also keep it there.

And now of course we need the actual assertion

which is that we expect output element

to be in the document, like before.

And if I save that,

the tests all execute

and all three tests passed,

and that means that this button click simulation

worked and this test passed.

And that's how you can test

user interaction and state changes here.

Now to conclude this there is one other test

we could add here to test another thing

that should definitely be the case

for this component.

And it can be hard to spot it,

but maybe you can see it.

Which other thing could we test here

that could make sense to test?

Well, let me show you something.

What if I introduce an error as a developer

and I actually do forget

to render this first paragraph conditionally.

So it's always there.

Unfortunately, my tests won't spot this,

my tests all succeed

because all the things I test still work out.

But if I know that this paragraph

should never be visible

if we click the button,

then of course we also need a test

that tests if that paragraph is gone

once we click the button.

So there is a fourth test which could make sense here,

a test where we click the button and then check

if the paragraph with this text here

is not visible.

And definitely try writing this test on your own.

Again, after a short pause,

we'll write it together.

Were are you successful?

Let's write this test together.

For that here, I'll give that test a description

and I'll say 'does not render'.

So greeting component

does not render

good to see you

if the button was clicked.

That's my description.

And then here in the testing code,

I will generally copy the code

from that other test where we clicked the button

because I again want to click the button.

But then in here,

I don't check if we have this changed paragraph,

but instead I try to find the element

with a text of 'good to see you',

and that should not be an exact match.

Now get by text will fail

if an element is not found,

and here my expectation is actually

that it's not found.

So here we should write not to be in the document.

But again, since this would throw an error

if it's not found, this test could never pass

if the element is not found

even though that is what we want.

So that's then a reason for using query by text

because that will simply return null

if the element is not found.

And therefore, actually here I then want to check

if output element is null and for that,

we got the toBeNull method here.

And you can of course look through all the available methods

to see what you need for your tests you're writing.

So here I want to check if that's null

because that would be my expectation

since I don't want to find this element

if the button was clicked.

If we now save everything

this test fails as it should

because we have an error in our component.

This element with this text should not exist.

And now we see that this test fails

and as a developer, we can go

to the component code and fix this bug,

and make sure that we only render this paragraph

if changed text is not true.

So what we had before.

And if I save this, the tests rerun

and they now all pass.

And that's why testing is important,

and how we write tests,

and how we can also test more

than just static components.