Ember Octane Fundamentals

Helper Integration Testing

Ember Octane Fundamentals

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

The "Helper Integration Testing" 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 helper function created in the previous lesson. The test makes use of Handlebars markup.

Preview
Close

Transcript from the "Helper Integration Testing" Lesson

[00:00:00]
>> Mike North: The last thing we need to do around helpers is write a test for it. And we call this kind of test an integration test, because we're testing the helper through its contract with the outside world. We're using this helper in the same way that other code that needs to leverage the helper would use it.

[00:00:19]
We're not using it in the contrived way, we're using it in the normal way. Passing the normal arguments, using it's public interface with the rest of the world. So let's go and look at our format time stamp test. And this is the path of that file, so it's gonna be tests integration.

[00:00:37]
And I'm getting a nice autocomplete here, but it's integration/helpers format times dev test. And this is how it looks. And I'm going to go to /tests. And our test is currently failing.
>> Mike North: It's failing because the starting point for this test just passes 1234 to our function, and it expects 1234 to come out.

[00:01:06]
And this was the state of things when we began, but it's not how things work right now. Now if we look at these three lines, this is the meaningful part of this test. Everything else is sort of generic two-unit setup. What we're doing here is we're creating a value that kind of lives outside the helper.

[00:01:25]
And it is destined to be passed into the helper as an argument. So we're setting input value. We're kind of creating input value in the context around this snippet of handle bars template that is part of our test. This is really cool. We get to use the same kind of mark up to define our test scenarios that we use when we are actually using this thing.

[00:01:53]
So let's change this and make it myDate, and we're gonna make it like.
>> Mike North: Make it something like that. You can make this date whatever you want. Now we're getting a problem here where it's failing in a different way, and that's because input value does not exist. So we're gonna say, okay, I'm gonna pass you my date instead.

[00:02:22]
So now we can see that what was expected here. We expected 1234, what we got instead was this string. And that is coming from the final line here. This is the assertion in the test. It's grabbing an element that kind of wraps our little snippet of handle bars.

[00:02:42]
Getting its text content, trimming away white space, and comparing that to 1234. So we wanna compare it to the value we expect to get out. And now, it's disappeared cuz the test is green, and we are green, and good to go. So, now we're done. We've written a helper.

[00:03:05]
Well, we started with a generic JavaScript function, we wrapped a very thin layer of ember around that. It's it's two lines. And I recommend that you write your apps this way. You should be writing regular JavaScript apps that have a like M&Ms, it has like a firm Ember shell around it.

[00:03:24]
So it doesn't melt in your hand. [LAUGH] So, our testing burden around this is very low. Like I'm actually happy with just the one assertion being there because the rest of my testing is unit tests for the underlying function. The integration test for the helper, it's just to make sure that things are wired up.

[00:03:46]
And if that one case works, that means that we can unit test the rest of that, and we got that for free.

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