- So far, we've seen two different ways
in which we can load HTML into our test environment.
The first approach we looked at was like, I've shown here.
We used the document object that was created
for us by JS DOM.
We called the standard DOM API method to create an element.
And then we assigned some content to the element and an ID.
And then we added the element
into the document's body structure.
So that's one way of adding content
so that we can then test against it using JavaScript.
If you have a lot of content
then it's quite painful creating each element one by one.
So the other approach that we've seen
is where you basically have a string of literal HTML
and then you assign it directly into your body.
So here in the document object provided by JS DOM.
The document object has a standard body property
obviously represents the body element
and I've assigned the inner HTML to be a chunk of content.
So as when we do that the document object model
will automatically it'll automatically create objects
in the DOM tree to represent the document structure.
We've seen that.
Okay, so a third approach is
rather than writing code to create the HTML,
a third approach would be
to actually load in an existing HTML document directly.
And that's what we're going to see in this section.
So if you wanna take a look at the folder
at JS DOM Loading HTML.
Here's what it looks like.
And if you open that folder in a browser,
so if you open that folder in a code editor,
it looks like this.
So a couple of things to note,
first of all, remember to configure
the test environment to be JS DOM.
So that we have a document object.
Here's the HTML document that I'm gonna load in.
Okay, and we'll see how to do that.
And this is the code that's going to load
the existing document.
So let's take a closer look at how to do that.
So first of all, and here's the HTML document.
Very simple, it could be complex,
but this is a simple HTML document.
The body content has a heading
and what the first paragraph has an ID
with some nested child content.
This paragraph says "hi" in bold.
The second paragraph has a different ID obviously,
with some different content.
This paragraph says, "bye" in italics.
That's the HTML document
which I would like to load into my test harness
so I can write code that accesses this HTML page.
So this is how you load HTML content
from an HTML file into your JS DOM document.
First of all, I'm importing the standard FS module.
That's the standard libi for doing file API
and it has a read file sync method.
It reads a file synchronously.
You give it the file name,
index at HTML from the current folder,
and it basically gives you back
it gives you back the HTML document effect
read a file like this.
That is just read in just as a, as a text file.
You can say two string
and that will give you the content of that file as a string
and then assign that HTML to the N HTML property.
So this is similar to what I had before
in my JS DOM document.
I'm getting the document element.
So remember, that's basically the HTML element
and then I'm assigning it's inner HTML to be
what I've just read in from the file.
The difference from before is
that I've given it the HTML manually
and here I've given it the content of the file
that I've just read in, read the file into this string
assign that string into my document object.
Right, so basically that picture
on the right hand side shows the structure of my document.
We have the document object at the top.
It has an HTML child element, which has a head and a body.
The head had a child, which was the title.
So just a, a quick reminder of what that looks like.
Here's my head.
It has a, a title element as a child
and then there's a body element.
The body element has a head in each one
and two paragraphs and each of those paragraphs,
well the first paragraph has a bold child element
and the second paragraph has an italic child element.
Okay? So that's the body, the body content.
It has a child for the head in one
which I can get if I need to,
a child for the first paragraph with an ID p1
and a child for the second paragraph ID p2
and inside there, there's another child element.
If you are interested, bold and italic.
So that entire content is going,
has been read in into my document object.
Okay, so let's run some tests.
I can verify that the document node exists
while it does exist because we are running in JS DOM mode.
And I can also check a bit further from my document node.
I can get the document element.
Remember there is a difference.
The document node is at the top.
The document element is the HTML element.
It's the root element.
So make sure that exists first of all, and make sure
that the name of that element is HTML case insensitive.
Very good.
Next let's access an element by its ID.
So document takes us to the document node,
get element by ID standard dot API
give it the ID p1 remember was the first paragraph.
P1 is the ID of the first paragraph.
So this will gimme back a pointer to the first paragraph
and the inner HTML I'm checking this para says "hi".
Okay, I'm just checking that the content
that I'm picking up is the correct content.
Good.
Also you can use query selector.
This will give you back the first element
or the first node that matches this CSS selector
and the hash symbol means ID remember in HTML.
So I'm gonna, from the top, from the document node again
find the first node that matches this selector an ID p2.
So that's gonna be this paragraph.
That would be the second paragraph.
And that's that one there.
Okay. So let's have a look at that.
That should give us this one here.
And this paragraphs in the HTML, this para says "bye"
this para says "bye", okay,
so that should all work, shouldn't it?
Run the tests and it all works beautifully.
So in this example, we had HTML
in a file and we loaded that content.
And then we basically wrote our JavaScript
against the content that we've just loaded from the webpage.
So that's quite a realistic approach.
You know often, you would have an existing webpage
that your JavaScript code needs to test against.
And well, we've just seen how to do that.