# How to stub a computed property

**URL:** https://discuss.emberjs.com/t/how-to-stub-a-computed-property/15474
**Category:** Testing
**Created:** [September 14, 2018, 10:16am UTC](https://discuss.emberjs.com/t/how-to-stub-a-computed-property/15474 "2018-09-14T10:16:52Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Willibaur](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/willibaur/32/12624_2.png) [@Willibaur](https://discuss.emberjs.com/u/Willibaur)
#### Post date: [September 14, 2018, 10:16am UTC](https://discuss.emberjs.com/t/how-to-stub-a-computed-property/15474/1 "2018-09-14T10:16:52Z")

</div>

Hi all, I’m trying to stub the following within a rendering component test

```auto
  breadcrumb: computed('router._router.currentPath', function() {
    const routeName = this.get('router._router.currentPath').replace('index.index', 'index');
    const { breadCrumb } = getOwner(this).lookup(`route:${routeName}`);
  }),

```

So far I have managed to do it for `routeName` but I don’t understand how to stub `breadCrumb`

This is what I have so far:

```auto
  test('IS mobile View', async function (assert) {
    setMobileViewStatus(this, true);

    const transitionTo = path => assert.equal(path, 'foo', `transition to correct path \`${path}\``);
    const router = { _router: { currentPath: 'foo.index' }, transitionTo };

    this.setProperties({ router });

    await render(hbs`{{sp-bootstrap/mobile/header router=router}}`);
    const hasMobileViewClass = find('.nav-masterhead-mobile');

    assert.ok(hasMobileViewClass, 'HEADER is rendered on mobile' );
  });

```

Is there a way to stub the whole computed property and make it return whatever I want?

Thanks for your help

---

<div class="post-metadata">

### Author: ![Spencer\_Price](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/spencer_price/32/14878_2.png) [@Spencer\_Price](https://discuss.emberjs.com/u/Spencer_Price)
#### Post date: [September 14, 2018, 12:52pm UTC](https://discuss.emberjs.com/t/how-to-stub-a-computed-property/15474/2 "2018-09-14T12:52:45Z")

</div>

heya!

To start and somewhat unrelated — which version of Ember are you on? If you’re on 2.16+, there is a public [Router Service](https://emberjs.com/api/ember/release/classes/RouterService) so that you don’t have to use the “private” router service via `router._router`. (I suspect you may be since your tests are written in the new style!)

So let’s say that your component instead looked like this:

```nohighlight
export default Component.extend({
  router: service(),
  breadcrumb: computed('router.currentRouteName', function() {
    const routeName = this.get('router.currentRouteName').replace('index.index', 'index');
    const { breadCrumb } = getOwner(this).lookup(`route:${routeName}`);
    return breadCrumb;
  })
});

```

In order to test this, you’ll need to stub out two things — the router service itself, and the route that we’re resolving and getting the `breadCrumb` property from. That would look something like:

```nohighlight
test('IS mobile view', async function(assert) {
  this.owner.register('service:router', { currentRouteName: 'some.path' });
  this.owner.register('route:some.path', { breadCrumb: 'foo > bar' });
  
  await render(his`{{sp-bootstrap/mobile/header}}`);

  assert.dom('.header-element').hasText('foo > bar');
});

```