{"id":10321,"date":"2016-01-28T12:11:39","date_gmt":"2016-01-28T10:11:39","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=10321"},"modified":"2016-01-18T17:58:19","modified_gmt":"2016-01-18T15:58:19","slug":"outside-testing-ember-apps","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/","title":{"rendered":"Outside-In Testing for Ember Apps"},"content":{"rendered":"

While the actual tests themselves may not change, the are many different approaches to testing an Ember app. In this post, we are going to explore one such option: \u201cOutside-in.\u201d This is where we drive the development of our application\/feature starting at the highest level and let the tests guide us down all the way to lowest level.<\/p>\n

In the case of our Ember app, the highest level is an acceptance test. An acceptance test is where we will test how a user actually interacts with our application. This means visiting pages, clicking things, and making sure that the page renders what we want it to. Testing these things will lead us down to integration tests. This is where we test components in a semi-isolated fashion. Finally, our \u201cOutside-in\u201d approach will take us down to the last type of Ember test: the unit test. This is where we test fully-isolated functionality.<\/p>\n

Outside-in testing is a useful approach in that it allows the code to guide us through the testing process. We don\u2019t decide beforehand how many tests to write, or what exactly to test. The code will decide this for us.<\/p>\n

Let\u2019s walk through a full-cycle example of this to give you a better idea. First, we\u2019ll need to have an Ember app to work with.<\/p>\n

Setting Up an Ember App to Test<\/h2>\n

Our app is going be very simple. It will show a list of blog posts, each with a title, author, and short preview. This will be enough to illustrate the full outside-in approach, exercising each type of test along the way. Remember, your focus should be on the testing process, not the actual app itself. Let\u2019s create our app and run the generated tests to make sure everything is ready to go:<\/p>\n

ember new outside-in\r\ncd outside-in\r\nember test<\/pre>\n
Everything should be passing for now since we haven\u2019t actually done anything.<\/p>\n
Acceptance Tests<\/h2>\n
We start at the outside with our first acceptance test:<\/p>\n
\/\/ tests\/acceptance\/posts-test.js\r\n\r\nimport { test } from 'qunit';\r\nimport moduleForAcceptance from 'outside-in\/tests\/helpers\/module-for-acceptance';\r\n\r\nmoduleForAcceptance('Acceptance | posts');\r\n\r\ntest('displays the list of posts', function(assert) {\r\n  visit('\/posts');\r\n\r\n  andThen(function() {\r\n    const posts = find('.post');\r\n    assert.equal(posts.length, 2);\r\n  });\r\n});<\/pre>\n
This test is pretty straightforward. Ember provides us with some useful test helpers<\/a> that we can use within our acceptance tests. In this case, we\u2019re using the visit<\/code> helper that will navigate to the given route and the andThen<\/code> helper which will wait for all previous async helpers to finish executing. Then we just check to make sure that our blog posts are being rendered.<\/p>\n
We can run just this test with ember test -m 'Acceptance | posts'<\/code>. This test will obviously fail since we haven\u2019t actually done anything yet.<\/p>\n
However, the failure message can help guide us to the next step: \u201cAssertion Failed: The URL \u2018\/posts\u2019 did not match any routes in your application.\u201d<\/p>\n
Let\u2019s go ahead and add that route with some fake data to get us started:<\/p>\n
\/\/ app\/router.js\r\n\r\nimport Ember from 'ember';\r\nimport config from '.\/config\/environment';\r\n\r\nconst Router = Ember.Router.extend({\r\n  location: config.locationType\r\n});\r\n\r\nRouter.map(function() {\r\n  this.route('posts');\r\n});\r\n\r\nexport default Router;\r\n\/\/ app\/routes\/posts.js\r\n\r\nimport Ember from 'ember';\r\n\r\nconst POSTS = [{\r\n  title: 'Sed Do Eiusmod Tempor',\r\n  author: 'John Johnson',\r\n  body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\r\n}, {\r\n  title: 'Ut enim ad minim',\r\n  author: 'Bob Robertson',\r\n  body: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?'\r\n}];\r\n\r\nexport default Ember.Route.extend({\r\n  model() {\r\n    return POSTS;\r\n  }\r\n});\r\n\/\/ app\/templates\/posts.hbs\r\n\r\n{{#each model as |post|}}\r\n  {{post-preview post=post}}\r\n{{\/each}}<\/pre>\n
Running the test again, we get \u201cAssertion Failed: A helper named \u2018post-preview\u2019 could not be found.\u201d We need to create the component:<\/p>\n
\/\/ app\/components\/post-preview.js\r\n\r\nimport Ember from 'ember';\r\n\r\nexport default Ember.Component.extend({\r\n});<\/pre>\n
The test now fails because it isn\u2019t finding any elements with class \u201cpost.\u201d Now is when we drop down to a slightly lower level to test the component itself.<\/p>\n
Integration\/Component Tests<\/h2>\n
Our integration test checks that our component renders the post title and author as well as a truncated preview of the body:<\/p>\n
\/\/ tests\/integration\/components\/post-preview-test.js\r\n\r\nimport { moduleForComponent, test } from 'ember-qunit';\r\nimport hbs from 'htmlbars-inline-precompile';\r\n\r\nconst POST = {\r\n  title: 'Sed Do Eiusmod Tempor',\r\n  author: 'John Johnson',\r\n  body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\r\n};\r\n\r\nconst PREVIEW = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ...';\r\n\r\nmoduleForComponent('post-preview', 'Integration | Component | post preview', {\r\n  integration: true\r\n});\r\n\r\ntest('it has the correct class', function(assert) {\r\n  this.set('post', POST);\r\n\r\n  this.render(hbs`{{post-preview post=post}}`);\r\n\r\n  assert.ok(this.$('.post').length);\r\n});\r\n\r\ntest('it renders the post attributes', function(assert) {\r\n  this.set('post', POST);\r\n\r\n  this.render(hbs`{{post-preview post=post}}`);\r\n\r\n  assert.equal(this.$('.title').text().trim(), 'Sed Do Eiusmod Tempor');\r\n  assert.equal(this.$('.author').text().trim(), 'John Johnson');\r\n  assert.equal(this.$('.preview').text().trim(), PREVIEW);\r\n});<\/pre>\n
We can run just these tests with ember test -m 'Integration | Component | post preview'<\/code>. Both tests will fail because we haven\u2019t actually implemented the component at all yet. We can get the first test to pass by simply adding classNames<\/code>:<\/p>\n
\/\/ app\/components\/post-preview.js\r\n\r\nimport Ember from 'ember';\r\n\r\nexport default Ember.Component.extend({\r\n  classNames: ['post']\r\n});<\/p><\/pre>\n
The second test requires a little more work. Let\u2019s add a basic template:<\/p>\n
\/\/ app\/templates\/components\/post-preview.hbs\r\n\r\n<h2 class=\"title\">{{post.title}}<\/h2>\r\n<div class=\"author\">{{post.author}}<\/div>\r\n<p class=\"preview\">{{post.body}}<\/p><\/pre>\n
This gets us most of the way there. However, instead of rendering a truncated preview of the post, our component is currently rendering the entire post body. Let\u2019s make use of a helper to truncate the body:<\/p>\n
\/\/ app\/templates\/components\/post-preview.hbs\r\n\r\n<h2 class=\"title\">{{post.title}}<\/h2>\r\n<div class=\"author\">{{post.author}}<\/div>\r\n<p class=\"preview\">{{truncate post.body length=80}}<\/p><\/pre>\n
The tests now fail with \u201cAssertion Failed: A helper named \u2018truncate\u2019 could not be found.\u201d Let\u2019s go ahead and create the helper:<\/p>\n
\/\/ app\/helpers\/truncate.js\r\n\r\nimport Ember from 'ember';\r\n\r\nexport function truncate(params\/*, hash*\/) {\r\n  return params;\r\n}\r\n\r\nexport default Ember.Helper.helper(truncate);<\/pre>\n
Running the integration test once more, we see that the helper is now being used but the test is still failing because it isn\u2019t actually truncating anything. This leads us to drop down one more level where we can unit test the truncate<\/code> helper\u2019s behavior in isolation.<\/p>\n
Unit Tests<\/h2>\n
We want our helper to do one simple thing. We want it to truncate the given text and add an ellipsis if the length of the text is greater than it should be. We\u2019ll need a few tests to make sure this working as expected:<\/p>\n
\/\/ tests\/unit\/helpers\/truncate-test.js\r\n\r\nimport { truncate } from '..\/..\/..\/helpers\/truncate';\r\nimport { module, test } from 'qunit';\r\n\r\nmodule('Unit | Helper | truncate');\r\n\r\ntest('it does nothing if text is not longer than the given length', function(assert) {\r\n  const result = truncate(['short'], { length: 5 });\r\n  const expected = 'short';\r\n\r\n  assert.equal(result, expected);\r\n});\r\n\r\ntest('it truncates with an ellipsis if text is longer than the given length', function(assert) {\r\n  const result = truncate(['longer'], { length: 5 });\r\n  const expected = 'longe...';\r\n\r\n  assert.equal(result, expected);\r\n});<\/pre>\n
The first test will pass as our helper is currently just returning whatever is passed in. The second one will fail. Let\u2019s get it to pass by truncating to the specified length:<\/p>\n
\r\n\/\/ app\/helpers\/truncate.js\r\n\r\nimport Ember from 'ember';\r\n\r\nexport function truncate(, { length }) {\r\n  if (text && text.length > length) {\r\n    return `${text.substring(0, length)}...`;\r\n  } else {\r\n    return text;\r\n  }\r\n}\r\n\r\nexport default Ember.Helper.helper(truncate); <\/pre>\n
Great! That worked. Our helper is good to go.<\/p>\n
Looping Back<\/h3>\n
Our tests guided us down to the lowest level where we unit tested our helper until it did what we want. Now we can step back up a level to verify that our integration test for the component that uses that helper is also passing:<\/p>\n
ember test -m 'Integration | Component | post preview'<\/pre>\n
Indeed, it is. Let\u2019s step back up to the highest level now and make sure our acceptance test is passing:<\/p>\n
ember test -m 'Acceptance | posts'<\/pre>\n
We are all green! We can run the whole test suite ember test to verify that everything is working.<\/p>\n
Conclusion<\/h2>\n
We\u2019ve now gone full circle. We started with a high-level acceptance test and let that guide us down to a lower-level integration\/component test, which then drove us even lower to a helper unit test. Once that unit test was passing, we are able to step back up a level and see that our integration test was passing. Stepping up another level, our acceptance test was passing as well.<\/p>\n
This \u201coutside-in\u201d process of testing feels very natural once you get the hang of it. We don\u2019t need to think too hard about what the next step is. The test failures guide us there. The example application used here was overly simple, but the process scales up to much more complicated features. Paired with Ember\u2019s wonderful testing tools, this makes for an enjoyable way to develop your app.<\/p>\n
\n\n\n\n
Reference: <\/span><\/td>\nOutside-In Testing for Ember Apps<\/a> from our WCG partner<\/a> Florian Motlik at the Codeship Blog<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
While the actual tests themselves may not change, the are many different approaches to testing an Ember app. In this post, we are going to explore one such option: \u201cOutside-in.\u201d This is where we drive the development of our application\/feature starting at the highest level and let the tests guide us down all the way …<\/p>\n","protected":false},"author":133,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[315],"class_list":["post-10321","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-ember"],"yoast_head":"\nOutside-In Testing for Ember Apps - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"While the actual tests themselves may not change, the are many different approaches to testing an Ember app. In this post, we are going to explore one\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Outside-In Testing for Ember Apps - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"While the actual tests themselves may not change, the are many different approaches to testing an Ember app. In this post, we are going to explore one\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-01-28T10:11:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Kriss\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Kriss\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/\"},\"author\":{\"name\":\"Jason Kriss\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/af4520771712aa77192a6c9f14d7bdba\"},\"headline\":\"Outside-In Testing for Ember Apps\",\"datePublished\":\"2016-01-28T10:11:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/\"},\"wordCount\":1025,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"Ember\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/\",\"name\":\"Outside-In Testing for Ember Apps - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2016-01-28T10:11:39+00:00\",\"description\":\"While the actual tests themselves may not change, the are many different approaches to testing an Ember app. In this post, we are going to explore one\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Outside-In Testing for Ember Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/af4520771712aa77192a6c9f14d7bdba\",\"name\":\"Jason Kriss\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b768937d66763e5d6c12484d06a09f4b72e3025909e27ec7e5db4fd384a44fcd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b768937d66763e5d6c12484d06a09f4b72e3025909e27ec7e5db4fd384a44fcd?s=96&d=mm&r=g\",\"caption\":\"Jason Kriss\"},\"description\":\"Jason Kriss is the founder of Pagefront, a tool for hosting and deploying Ember apps.\",\"url\":\"https:\/\/www.webcodegeeks.com\/author\/jason-kriss\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Outside-In Testing for Ember Apps - Web Code Geeks - 2026","description":"While the actual tests themselves may not change, the are many different approaches to testing an Ember app. In this post, we are going to explore one","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/","og_locale":"en_US","og_type":"article","og_title":"Outside-In Testing for Ember Apps - Web Code Geeks - 2026","og_description":"While the actual tests themselves may not change, the are many different approaches to testing an Ember app. In this post, we are going to explore one","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-01-28T10:11:39+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Jason Kriss","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Jason Kriss","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/"},"author":{"name":"Jason Kriss","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/af4520771712aa77192a6c9f14d7bdba"},"headline":"Outside-In Testing for Ember Apps","datePublished":"2016-01-28T10:11:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/"},"wordCount":1025,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["Ember"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/","name":"Outside-In Testing for Ember Apps - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2016-01-28T10:11:39+00:00","description":"While the actual tests themselves may not change, the are many different approaches to testing an Ember app. In this post, we are going to explore one","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/outside-testing-ember-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Outside-In Testing for Ember Apps"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/af4520771712aa77192a6c9f14d7bdba","name":"Jason Kriss","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b768937d66763e5d6c12484d06a09f4b72e3025909e27ec7e5db4fd384a44fcd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b768937d66763e5d6c12484d06a09f4b72e3025909e27ec7e5db4fd384a44fcd?s=96&d=mm&r=g","caption":"Jason Kriss"},"description":"Jason Kriss is the founder of Pagefront, a tool for hosting and deploying Ember apps.","url":"https:\/\/www.webcodegeeks.com\/author\/jason-kriss\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/133"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=10321"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10321\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=10321"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=10321"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=10321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}