The last thing our test needs is an assert statement to verify that the behavior we expect is equal to the actual behavior of our code.
We want to make sure our app is in an empty state.
We can write a test for this behavior by deciding that poems will be listed in an HTML element with an id
attribute set to poems
. Then, write an assert statement to verify that the element with the ID poems
is empty.
We can do this using the Chai assert.equal
method, which evaluates if the two arguments are equal.
In the case of our poetry app, the assert statement would look like this:
assert.equal(browser.getText('#poems'), '')
Because we will render the poetry onto the page as text, we can evaluate the contents of the HTML element as a string.
The .getText
method, from WebdriverI/O, gets the text content from the selected DOM element.
Here we are using browser.getText()
to evaluate if the text in the element with the ID poems
is equal to an empty string.
Our final code for this feature test would look like this:
describe('User visits root', () => { describe('without existing poems', () => { it('page starts blank', () => { browser.url('/'); assert.equal(browser.getText('#poems'), ''); }); }); });
Instructions
Use assert.equal()
to evaluate if an element with ID of "messages"
has no text in it. For example:
<section id="messages"></section>
Then run your test suite using npm test
to check your work and celebrate being in the red!