TypeError: Cannot read property 'lookup' of undefined

[Mifrill]

Thanks for the package!

The point is init, according to docs example:

test('visit public home page', async function(assert) {
  let screen = this.owner.lookup('service:screen');
  screen.stubMediaFeatures({ type: 'tv', width: 640 });
  await visit(visitUrl);
  assert.equal(currentURL(), visitUrl);
});

got an error:

TypeError: Cannot read property 'lookup' of undefined

Any help is appreciated

"ember": "2.9.0", "ember-screen": "^1.0.0",

[mitchlloyd]

Hey @Mifrill!

So it looks like the test context doesn't have an owner here (this.owner is undefined). Make sure in this case that you're using a "container" test where owner is defined.

[Mifrill]

@mitchlloyd yeah, looks so, it works:

const { getOwner } = Ember;
let owner = getOwner(this);

Thanks! But it still not change the width for some reason

This solution is not working too:

    screenMeter = this.application.__container__.lookup('service:screen-meter');
    screenMeter.set('screenWidth', 640);

is it related for ember version?

[Mifrill]

aha, do I need to put some related code into the controller? Looks like it's not working separately, I mean using only in testing code without any changes in app

[mitchlloyd]

Seems like I'll need some more code examples to understand what you're facing.

Maybe you can show the "service:screen-meter" implementation?

[mitchlloyd]

Hopefully you got this working. If not let me know and I'll reopen the issue.

[Mifrill]

Hey, @mitchlloyd really thank you for your care here. Sorry about the delay.

Unfortunately - nope, the problem still exists. About service:screen-meter, yeah, I guess, I can show it:

import Ember from 'ember';

export default Ember.Service.extend({
  screenWidth: null,
  screenHeight: null,

  init() {
    this._super(...arguments);
    this.getSize = this.getSize.bind(this);
    window.addEventListener('resize', this.getSize, true);
    this.getSize();
  },

  willDestroy() {
    window.removeEventListener('resize', this.getSize, true);
  },

  getSize() {
    this.set('screenWidth', window.innerWidth);
    this.set('screenHeight', window.innerHeight);
  }
});

but, it seems like, it can't change windows size for a smaller size, for some reason.

So, another way, it's to use ember-window-mock, but it also did not work by the first attempt :smiley:

[mitchlloyd]

Based on the code sample you provided, it doesn't look like you're using this library. This library adds an abstraction called 'screen' on top of window to react to screen sizes. This library embraces the "don't mock types you don't own" testing principle rather than stubbing globals like window.

Perhaps if you could tell me what you're trying to accomplish at a higher level (i.e. "when the screen gets small, hide something") I could provide an example if this library can help.

[Mifrill]

@mitchlloyd yeah, sure, I found this lib when trying to resolve this issue: https://stackoverflow.com/questions/56753439/how-to-resize-chrome-window-for-ember-acceptance-test Much appreciate your help!