Instructor: So we finished up with our first step here.
Tuning the terminal to run like a browser.
And we're now gonna move onto our next step.
We're going to build a helper called renderComponent
that should render a given React class.
So this is where things really start to get interesting.
So the renderComponent helper that we're gonna build here,
it's sole job,
it's sole purpose is no matter what,
it's gonna take an instance
or it's gonna take a component class,
a React component class.
It's gonna render it.
It's gonna get it's HTML.
It's gong to wrap that with jQuery element.
And we're talk exactly why that's happening.
And it returns that jQuery wrapped element
So in practice it is pretty concise code
that we're gonna write here.
It's only about a handful of lines.
But let me tell you,
it's absolutely action packed so to speak.
So the first thing we'll do
is we'll declare a function call renderComponent.
And so this much is at least hopefully a given.
You're building a function here.
We're gonna pass some arguments to it
and it's gonna return some very helpful little thing to us.
So let's start with square one.
Best place to start is saying
how in the world
are we going to render our React component at all.
Let's pull in our class here.
So we'll say,
the first argument is gonna be out component class.
So this is what we're gonna pass in by default.
Let's say that we're gonna make a variable const.
And we'll say that it's gonna be the component instance.
And so just to be clear here,
a component class is a reference to the component class
that we build.
That's what happens when we say like,
class, comment box, extends, react.component.
That is a class.
What we're gonna make is an instance of that class.
So we're going to spin off a copy of the class, so to speak.
So help us with this,
very luckily we've got access to a very helpful handler
from the React library
that we get access to
through the text utils library from React.
Let's go look up the documentation from this really quick.
So in the browser I'm just gonna search for React.
And we'll go to the official documentation.
We'll click on the docs at the top.
And then on the left-hand side under the Add On section,
we're specially looking for Test Utilities.
Let's click on Test Utilities.
We're gonna come back here.
The first word you see is Simulate which might ring a bell.
So we'll definitely come back here later.
But let's scroll down a little bit
and check out the method
right underneath called renderintoDocument.
So renderintoDocument will render a component
to a detached DOM node in the document.
And right after it,
very prominently displayed,
"This function requires a DOM."
And so this is where everything comes back to jsdom again.
When we run mocha from the command line,
we do not have a DOM.
That's what this note right her is specifically telling us.
So warning us against.
And so this is coming back to the jsdom
and the purpose of setting up
our fake html document right here.
This test helper,
this renderintoDocument would not work at all
if we did not have a DOM available to us.
So let's look at the method signature here
just a little bit.
We call renderintoDocoment
and we pass an instance of our ReactElement.
So let's go ahead and give this a shot.
At the top I've already included our test utils library.
So we can do just import TestUtils from,
and it's not React here
it's gonna be react-addons-test-utils.
Now back down into our componentInstance=,
we'll say TestUtils.renderIntoDocument.
And we're going to pass our component instance.
Now we create a component instance
just by wrapping our component class with a JSX tag.
So we can do just ComponentClass like so.
So this creates the instance of the component,
we rendered into the document.
And so you can see,
since I'm saying,
"Oh, this is the component instance."
Our variable name over here is a little bit misleading.
I apologize for that.
Nonetheless, I think it conveys enough meaning.
This variable right here is holding a reference
that is kind of like the rendered version
of our componentInstance.
So I'm mostly telling the truth,
so to speak. (chuckles)
Okay.
So let's continue going here.
At this point, we have put our componentInstance together
and kind of rendered the component,
so to speak.
According to at least this method name.
The next step is going to be
getting access to the actual DOM node.
So this component instance method or this componentInstance,
is not a reference to the actual DOM element
that is created by our component.
To get access to the actual DOM element or the actual HTML
that our component produces,
we need to make use of the library React DOM.
Remember, React DOM is a library
that is included with React.
Or as side library
that is specifically for working with React
and the DOM at the same time.
So at the top we'll import ReactDOM from react-dom.
And again, this is starting good to go.
I do not expect to you know this stuff
off the top of your head
or be able to regurgitate it or anything like that.
The intent here is to say,
"Hey, here's kind of what's going on behind the scenes.
I just wanna you a taste of what's going on."
So again, I don't expect you to memorize this at all.
I'm gonna call ReactDOM.findDOMNode.
And watch the capitalization on findDOMNode.
DOM is all capitalized
and then the N in node is capitalized as well.
So we're gonna find the DOM node of our componentInstance.
And so this right here produces HTML.
This is how we get access to HTML
from our componentInstance.
This is the magic.
Right here.
This is the good stuff.
So the last step that we need to do,
is we just are gonna wrap this HTML with a jQuery call.
So now,
whenever we call renderComponent
and we pass it to ComponentClass,
we're gonna render our element into a document.
Into like fragment of a document, so to speak.
We're gonna use ReactDOM to get a reference to the HTML
that our component produced,
and then we're warp that with a jQuery element.
So again, the purpose of the jQuery element here
is just so that we can get access
to all those really, really, really helpful matchers
from jQuery Chai.
Or Chai jQuery.
Whichever order you wanna go with.
I'm gonna reiterate that point in much more detail
when we start talking about the
setting up our Chai jQuery library later on.
Okay, so this looks good.
At least enough to say and see if we get any specs passing.
Let's pull our specs back up.
So I'm gonna save this.
And gee, kind of feels like nothing happened.
Let me put some new lines in here.
Yeah, okay.
So we're still not quite there.
Oh, I know what's happening.
We are still not exporting
the function render component just yet.
So we defined it but we're exporting it.
Let's do that at the bottom.
But let's take care of that in the next section.
'Cause there really is one more step in here
that we need take of
that I'm just trying to be mysterious about.
Anyways, I'll catch you in the next section.