Add deprecation for this.$() in curly components

packages/@ember/-internals/glimmer/tests/integration/components/curly-components-test.js

@@ -3612,6 +3612,8 @@ if (jQueryDisabled) {
     class extends RenderingTestCase {
       ['@test it has a jQuery proxy to the element']() {
         let instance;
+        let element1;
+        let element2;
 
         let FooBarComponent = Component.extend({
           init() {
@@ -3627,13 +3629,17 @@ if (jQueryDisabled) {
 
         this.render('{{foo-bar}}');
 
-        let element1 = instance.$()[0];
+        expectDeprecation(() => {
+          element1 = instance.$()[0];
+        }, 'Using this.$() in a component has been deprecated, consider using this.element');
 
         this.assertComponentElement(element1, { content: 'hello' });
 
         runTask(() => this.rerender());
 
-        let element2 = instance.$()[0];
+        expectDeprecation(() => {
+          element2 = instance.$()[0];
+        }, 'Using this.$() in a component has been deprecated, consider using this.element');
 
         this.assertComponentElement(element2, { content: 'hello' });
 
@@ -3642,6 +3648,7 @@ if (jQueryDisabled) {
 
       ['@test it scopes the jQuery proxy to the component element'](assert) {
         let instance;
+        let $span;
 
         let FooBarComponent = Component.extend({
           init() {
@@ -3657,14 +3664,18 @@ if (jQueryDisabled) {
 
         this.render('<span class="outer">outer</span>{{foo-bar}}');
 
-        let $span = instance.$('span');
+        expectDeprecation(() => {
+          $span = instance.$('span');
+        }, 'Using this.$() in a component has been deprecated, consider using this.element');
 
         assert.equal($span.length, 1);
         assert.equal($span.attr('class'), 'inner');
 
         runTask(() => this.rerender());
 
-        $span = instance.$('span');
+        expectDeprecation(() => {
+          $span = instance.$('span');
+        }, 'Using this.$() in a component has been deprecated, consider using this.element');
 
         assert.equal($span.length, 1);
         assert.equal($span.attr('class'), 'inner');

packages/@ember/-internals/glimmer/tests/integration/components/dynamic-components-test.js

@@ -835,6 +835,8 @@ if (jQueryDisabled) {
     class extends RenderingTestCase {
       ['@test it has a jQuery proxy to the element']() {
         let instance;
+        let element1;
+        let element2;
 
         let FooBarComponent = Component.extend({
           init() {
@@ -850,13 +852,17 @@ if (jQueryDisabled) {
 
         this.render('{{component "foo-bar"}}');
 
-        let element1 = instance.$()[0];
+        expectDeprecation(() => {
+          element1 = instance.$()[0];
+        }, 'Using this.$() in a component has been deprecated, consider using this.element');
 
         this.assertComponentElement(element1, { content: 'hello' });
 
         runTask(() => this.rerender());
 
-        let element2 = instance.$()[0];
+        expectDeprecation(() => {
+          element2 = instance.$()[0];
+        }, 'Using this.$() in a component has been deprecated, consider using this.element');
 
         this.assertComponentElement(element2, { content: 'hello' });
 
@@ -865,6 +871,7 @@ if (jQueryDisabled) {
 
       ['@test it scopes the jQuery proxy to the component element'](assert) {
         let instance;
+        let $span;
 
         let FooBarComponent = Component.extend({
           init() {
@@ -880,14 +887,18 @@ if (jQueryDisabled) {
 
         this.render('<span class="outer">outer</span>{{component "foo-bar"}}');
 
-        let $span = instance.$('span');
+        expectDeprecation(() => {
+          $span = instance.$('span');
+        }, 'Using this.$() in a component has been deprecated, consider using this.element');
 
         assert.equal($span.length, 1);
         assert.equal($span.attr('class'), 'inner');
 
         runTask(() => this.rerender());
 
-        $span = instance.$('span');
+        expectDeprecation(() => {
+          $span = instance.$('span');
+        }, 'Using this.$() in a component has been deprecated, consider using this.element');
 
         assert.equal($span.length, 1);
         assert.equal($span.attr('class'), 'inner');

packages/@ember/-internals/glimmer/tests/integration/components/life-cycle-test.js

@@ -1603,7 +1603,7 @@ if (!jQueryDisabled) {
     'Run loop and lifecycle hooks - jQuery only',
     class extends RenderingTestCase {
       ['@test lifecycle hooks have proper access to this.$()'](assert) {
-        assert.expect(6);
+        assert.expect(7);
         let component;
         let FooBarComponent = Component.extend({
           tagName: 'div',
@@ -1634,8 +1634,12 @@ if (!jQueryDisabled) {
           template: 'hello',
         });
         let { owner } = this;
-        let comp = owner.lookup('component:foo-bar');
-        runAppend(comp);
+
+        expectDeprecation(() => {
+          let comp = owner.lookup('component:foo-bar');
+          runAppend(comp);
+          runTask(() => tryInvoke(component, 'destroy'));
+        }, 'Using this.$() in a component has been deprecated, consider using this.element');
         runTask(() => tryInvoke(component, 'destroy'));
       }
     }

packages/@ember/-internals/views/lib/mixins/view_support.js

@@ -5,6 +5,7 @@ import { assert } from '@ember/debug';
 import { hasDOM } from '@ember/-internals/browser-environment';
 import { matches } from '../system/utils';
 import { default as jQuery, jQueryDisabled } from '../system/jquery';
+import { deprecate } from '@ember/debug';
 
 function K() {
   return this;
@@ -177,6 +178,15 @@ export default Mixin.create({
       this.tagName !== ''
     );
     assert('You cannot access this.$() with `jQuery` disabled.', !jQueryDisabled);
+    deprecate(
+      'Using this.$() in a component has been deprecated, consider using this.element',
+      false,
+      {
+        id: 'ember-views.curly-components.jquery-element',
+        until: '4.0.0',
+        url: 'https://emberjs.com/deprecations/v3.x#toc_jquery-apis',
+      }
+    );
     if (this.element) {
       return sel ? jQuery(sel, this.element) : jQuery(this.element);
     }