Notes on type update to v4

[mydea]

This is not really an "issue" per se, but I ran into a variety of steps I had to do in our app to update the types to v4, which might or might not be unavoidable. But I figured others might run into this as well, so maybe this helps in some way.

The main things I had to do to get it to work again after updating all type packages to their latest version were:

• Ensure this.element is typed "correctly" in tests for qunit-dom. As assert.dom(this.element) will not work anymore, as this.element is Document | Element which is not accepted by qunit-dom. So I replaced those with assert.dom(this.element as Element), basically. Not sure if this is unavoidable or if this should be updated in one place or the other to simply allow this.element. Also not really sure when this could return a Document, but 🤷
• Properly type service lookups in tests. So basically this.owner.lookup('service:my-service') as MyService, as that now returns unknown instead of any.
• Import TestContext from @ember/test-helpers instead of ember-test-helpers and get rid of @types/ember-test-helpers (see Types for ember-test-helpers are confusing #1470)

Finally, and maybe the most important (?) step, I had to actually remove all @types/ember**** mentions from my yarn.lock file and completely re-generate all type-related dependencies, as I seemed to get stuck in some weird in-between dependency state which broke stuff as well. That made it work for me, in the end.

[chriskrycho]

Thanks!

• On this.element: this is a weird thing, but it represents what the actual type is. I don't even know what you would have to do to return Document as this.element in tests like that! However, I would also recommend that people move away from using this.element. One goal of the work we’re doing at Introduce new test helpers for rendering (and re-rendering) that obviate the need for get and set emberjs/rfcs#785 is to move away from there being any need to use the special this value in tests anymore, and if your tests move away from using this.element to using (e.g.) ember-test-selectors, then this problem will go away.

• This is mostly just a clean win, I think, but I appreciate that you called it out as a change here.

• Glad to have the extra coverage here; we covered it explicitly in the release blog post. (You were early, and your feedback was appreciated!)

[mydea]

Jup, I agree, overall it makes sense and is def. an improvement once you have everything setup correctly ;)

Just FYI when we use this.element in tests, it is mostly for testing helpers, to avoid having to wrap everything in some element. E.g. like this:

await render(hbs`{{format-date this.myDate}}`);

assert.dom(this.element as Element).hasText('2022-02-10');

This could also be written like this, I guess:

await render(hbs`<div>{{format-date this.myDate}}</div>`);

assert.dom('div').hasText('2022-02-10');

But that also doesn't really feel that great IMHO.

[chriskrycho]

I think 'div' (or using ember-test-selectors) is a generally preferable pattern there for this, vs. this.element—not least because I hope to see all of the this. patterns go away entirely over time as we work on making the test design more ergonomic for TypeScript.

[raido]

I had to actually remove all @types/ember**** mentions from my yarn.lock file and completely re-generate all type-related dependencies

This just saved me a lot of time. Thank you @mydea!