- In this section
we're going to see how to test the properties on an object.
We'll see how to test a length property on a string
or an array.
We'll see how to test if an object has a property.
And then we'll see how to test
if an object has a property with a particular value.
So the examples for this section
are in the usual place in the standard Jest matchers folder.
There's a test file example, test.JS.
It defines a suite
with a bunch of tests to illustrate the techniques.
So if you want to follow along in your own machine,
go into JsTdd, lesson02.
Open the standard Jest matchers folder
in the code editor.
And it looks something like this.
There's the suite with our test functions.
So in the suite
there are five different functions
or five different tests to test all the different aspects.
So if you want to run those tests first to see if it works
do this npm run test or yawn test.
So let's do that first just to see if it's going to work.
So open up a command window in the correct folder,
and go into standard test matchers.
And in here, npm run test
dash dash minus T properties.
Okay, that'll pluck out our test suite
and it'll run five tests in that suite.
So let's just wait for the results.
Then what we'll do is we'll take a look
through the examples.
So we're just waiting for it to get going.
There we go.
Okay, so it's detected that suite
and it's run the five test functions in that suite.
So that's good.
Let's look at the examples in more detail.
So first of all, there's a two half length matcher where
if you have an array or string or any object
actually that has a length property
you can check the value of that length property.
So here we go, here's an array with three items.
I'm expecting that array to have length three.
You're testing the length property to have the value three.
Here's a string I'm expecting that string
to have a length of four characters.
Okay, so basically any object that has a length property
you can apply this matcher to see the value of the length.
Okay, more generally you might want to test
if an object has a property.
Maybe you don't care what the value is.
You just want to know, does it have the property or not?
So there are several different ways where you can access
or specify which property you're interested in.
First of all, you can use the dot syntax.
Have a look at this example here.
I've got an object and the object has a name.
That would be me and oh, I have some benefits.
The benefits is a nested object.
Oh, I have a car.
That's a, quite a nice benefit.
It's a Mazda6.
Okay, so that is actually the car that I own.
Funnily enough.
Oh, I also have pay, that's a benefit.
My pay is a salary of $10,000 and a bonus of $500.
So we have an object here with a nested object.
You can use the dot syntax to drill into nested objects.
So test the employee to see if it has a property
and benefits.car.make.
The dot syntax allows you to drill into nested objects.
So I started with the employee.
It has a property called benefits
and that takes me to an object which has a car property
which has a make property.
Okay, so the dot syntax allows you to tunnel
into the nested objects properties.
Also this employee has a property called benefits car make,
model, so benefits car model, so that property exists.
But unfortunately I still don't have a jet.
Okay, so the benefits object doesn't have a jet
property here, but I live in hope.
So you can test if a property exists
using the dot syntax object dot sub dot sub object.
Alternatively instead of using the dot syntax
you can use the array syntax if you prefer.
So here's the similar example
but using array syntax, so same employee
and I'm checking if that employee has a property.
Now here, I've specified an array of sub property names.
If you like, so first of all, start them with the employee.
Does it have a property called benefits?
Yes.
Inside that object,
does it have a child property called car?
Yes.
Inside this child object
does it have a sub property called make?
Yes, there it is.
Okay, so you can either use
you can either say benefits dot car dot make
or you can use square brackets to, specify the,
you know how you want to go.
And the advantage of using the array syntax is
that potentially you could programmatically
generate this array to be more generic.
But anyway, there we go.
So my employee does have a benefits dot car dot make
and a benefits dot car dot model, but using array syntax.
Again, in this example
I don't really care what the property value is.
I just want to check that it exists.
Now then, look at this, you can test array elements.
So here have slightly different employee now.
And it's Andy.
Good name and the benefits company car and a pay package.
Oh, and the employee has skills.
JavaScript, TypeScript, and C Sharp.
So you can use in the array syntax
you can actually check that you have an element
in an array.
Check this employee, but it has a property
not just the array syntax here, square brackets.
check that the employee has a skills property.
Yes.
And then, which is an array by the way.
Test if that array has an element zero.
Yes, it does.
I haven't checked the value of it
but it does have an element zero.
And likewise,
does my employee have a property called skills?
Yes.
And if you drill into that object or that
that property, is there an element index one?
Yes, there is.
There's that one there.
Okay, so you can use numeric fields here
to specify indexed elements that you want in an array.
Right.
If you take it a step further you can actually check
not only for the presence of our property,
but for the value as well.
So what you do is you pass a second parameter
specifying the value that you are hoping is there.
So here's my employee
and the certain benefits and certain skills.
Notice now, when I call the two half property
I'm passing two parameters, the first parameter is the
the name of the property that I'm checking for.
And the second value,
the second parameter is the value that I'm looking for.
Okay, so I'm checking
that the employee has a property benefits car make, okay.
So benefits, car, make it's that property there
but I'm also checking not only that the property exists
but it has this value.
Okay, so yes, it does.
The benefits car make property is a Mazda.
So in this first example
I use the Dot syntax to drill into the sub property.
You could still use the array syntax if you prefer.
So this bit of syntax is effectively equivalent to that
but using array syntax
and using Dot syntax whichever you find more natural.
So does my employee have a benefits car model property?
Yes, benefits, car, model.
Yes, that's right.
And also is the value of that property a six, a Mazda6?
That's actually the name of a model in the Mazda series.
That's like a family sized car.
Oh, and also have a look at this one.
I'm checking the value of element zero in the skills array.
So take that employee.
Does it have a property called skills?
Yes.
Does that array have an element zero?
Yes.
What is the value of that element?
Is it JS?
Yes, it is.
Okay, so using this approach, you can check, you can drill
into an object, use an a dot syntax or an array syntax
and then you can specify the second parameter
the value that you want to check for that property.