Check out a free preview of the full Ember Octane Fundamentals course

The "Login Form Integration Test" Lesson is part of the full, Ember Octane Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Mike creates an integration test for the login form, elminating whitespace for readability and asserting against an array using the deepEqual method.

Preview
Close

Transcript from the "Login Form Integration Test" Lesson

[00:00:00]
>> Mike North: Last step here is a check to make sure our tests are passing, and they are not. So let's check out what our integration test looks like cuz that's the one that's failing, the login form integration test.
>> Mike North: And here is the meat of this test. It involves creating a login form component, which looks fine to me, right?

[00:00:29]
There are no arguments we pass into this, yet. We then get the text content and trim all leading and trailing whitespace. And that checks out, cuz we can see that there's no white space at the beginning or end of this string, and we expect it to be an empty string.

[00:00:46]
Okay, well, that right there is not gonna align with what the real situation is. We can also see that we have one tests that checks the the login form component used as a self closing element and then one that passes something into the element, this bought content. I will only say for now, this does not look like the way we are using the component, in login hps.

[00:01:15]
So for now we're just gonna say, this does not align with what we need to test. But we'll look later at what that means and how to use it. So I have a kinda well practiced regular expression I use for situations like this. Don't need to necessarily copy it, but it lets me make a more meaningful assert here.

[00:01:41]
So I wanna trim the string. But then I want to replace any new lines that are surrounded by any amount of white space, with a new line that has no white space around it. So this is what that regex looks like. That's a space,
>> Mike North: And I want any amount of it, and then I want one or more new lines.

[00:02:09]
And then I want any amount of space that might follow the new lines. So this would handle 17 tabs, and then 6 new lines, and then 15 more tabs that would all be regarded as one match. And then the last thing I'm gonna add here is g, and that basically tells replace that any of these that you find take care of them all, don't just take care of the first one.

[00:02:36]
And then I'm gonna replace those with these simple new line. Here's how that looks. All right, so, this is already a lot easier to assert against, right? We've just stripped out all of the white space. Anytime there was some sort of new liney white space thing, we normalized that.

[00:02:55]
We can also split it by new line. And now we get a nice array. So I can assert against that array and it makes my test a bit more readable. I do this because often I don't really care about white space in HTML. It's not meaningful for most HTML.

[00:03:14]
So I don't want that to be included in my tests. And this means that whoever reformats the HTML or add some stuff like it's adding a couple new tabs is not gonna break this test which is exactly what I want. I'm being sure to use deep equal because the shallow equal will just compare, it will compare whether like one array triple equals another array with identical contents.

[00:03:45]
And that doesn't work. So deep equal will actually iterate through the contents and check the individual members and their order and make sure that everything checks out. So there you go. That is a very basic integration test for this. And we have reached the end of step seven.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now