How to stub a computed property

Testing
1

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

  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:

  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

2

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 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:

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:

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');
});
2 Likes