Upgrade all deps; Fix tests; Fix native class compat

Author: josemarluedke

.eslintrc.js

@@ -18,6 +18,11 @@ module.exports = {
   },
   rules: {
     'ember/no-legacy-test-waiters': 'off',
+    'ember/no-classic-classes': 'off',
+    'ember/no-classic-components': 'off',
+    'ember/require-tagless-components': 'off',
+    'ember/no-computed-properties-in-native-classes': 'off',
+    'ember/no-actions-hash': 'off',
   },
   overrides: [
     // node files

addon/services/apollo.js

@@ -116,8 +116,8 @@ function newDataFunc(observable, resultKey, resolve, unsubscribeFn = null) {
 export default class ApolloService extends Service {
   client = null;
 
-  init() {
-    super.init(...arguments);
+  constructor(...args) {
+    super(...args);
 
     this.client = new ApolloClient(this.clientOptions());
   }

package.json

@@ -37,16 +37,16 @@
     "test:ember": "ember test"
   },
   "dependencies": {
-    "@apollo/client": "^3.2.1",
-    "@ember/test-waiters": "~3.0.0",
+    "@apollo/client": "^3.5.10",
+    "@ember/test-waiters": "~3.0.1",
     "@embroider/macros": "^1.5.0",
     "@glimmer/tracking": "^1.0.4",
     "broccoli-graphql-filter": "^1.0.0",
     "ember-auto-import": "^2.4.0",
     "ember-cli-babel": "^7.26.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
+    "@babel/core": "^7.17.7",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.6.0",
     "@embroider/test-setup": "^1.2.0",
@@ -58,9 +58,9 @@
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-terser": "^4.0.2",
-    "ember-compatibility-helpers": "^1.2.1",
+    "ember-compatibility-helpers": "^1.2.6",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-fetch": "^8.0.2",
+    "ember-fetch": "^8.1.1",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
     "ember-qunit": "^5.1.5",
@@ -75,12 +75,12 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-qunit": "^7.2.0",
-    "graphql": "^15.3.0",
-    "graphql-tag": "^2.11.0",
+    "graphql": "^15.8.0",
+    "graphql-tag": "^2.12.6",
     "graphql-tools": "^4.0.8",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "pretender": "^3.4.3",
+    "pretender": "^3.4.7",
     "prettier": "^2.5.1",
     "qunit": "^2.18.0",
     "qunit-dom": "^2.0.0",

tests/acceptance/query-and-unsubscribe-test.js

@@ -2,7 +2,6 @@ import { module, test } from 'qunit';
 import { setupApplicationTest } from 'dummy/tests/helpers/setup';
 import { addResolveFunctionsToSchema } from 'graphql-tools';
 import { click, currentURL, visit } from '@ember/test-helpers';
-import { run } from '@ember/runloop';
 
 module('Acceptance | main', function (hooks) {
   setupApplicationTest(hooks);
@@ -56,9 +55,7 @@ module('Acceptance | main', function (hooks) {
     let queries = getQueries();
     assert.ok(Object.keys(queries).length, 'there is an active watchQuery');
 
-    run(async function () {
-      await click('.add-review');
-    });
+    await click('.add-review');
 
     // Now that we've gone to a route with no queries, the RouteQueryManager
     // should have unsubscribed from the watchQuery and there should be no

tests/acceptance/watch-query-test.js

@@ -55,6 +55,7 @@ module('Acceptance | watch query', function (hooks) {
             'Rambo: Last Blood',
             'correct mutation title is passed in'
           );
+          movie.title = title;
           return Object.assign({}, movie, { title });
         },
       },

tests/dummy/app/templates/movie.hbs

@@ -1,48 +1,45 @@
 <h2>Movie Detail</h2>
 
-<LinkTo @route="index">
+<LinkTo @route='index'>
   Back
 </LinkTo>
 
-<div class="actions-menu">
+<div class='actions-menu'>
   <button
-    {{action "changeTitle" this.model.movie.id "Rambo: Last Blood"}}
-    class="button change-movie-title"
-    type="button"
+    {{action 'changeTitle' @model.movie.id 'Rambo: Last Blood'}}
+    class='button change-movie-title'
+    type='button'
   >
     Change Movie Title
   </button>
 
   <button
-    {{action "refetchUsingObservable" this.model}}
-    class="button refetch-data-using-observable"
-    type="button"
+    {{action 'refetchUsingObservable' @model}}
+    class='button refetch-data-using-observable'
+    type='button'
   >
     Refetch (using observable)
   </button>
 
   <button
-    {{action "refreshUsingRoute"}}
-    class="button refresh-data"
-    type="button"
+    {{action 'refreshUsingRoute'}}
+    class='button refresh-data'
+    type='button'
   >
     Refetch (using route refresh())
   </button>
 
-  <LinkTo
-    @route="new-review"
-    class="button add-review"
-  >
+  <LinkTo @route='new-review' class='button add-review'>
     Add Review
   </LinkTo>
 </div>
 
-<MovieDetail @movie={{this.model.movie}} />
+<MovieDetail @movie={{@model.movie}} />
 
-<div class="movie-reviews">
+<div class='movie-reviews'>
   {{#each this.reviews as |review|}}
     <p>{{review.stars}} stars</p>
   {{else}}
     <p>No reviews</p>
   {{/each}}
-</div>
+</div>

tests/unit/-private/query-manager-hooks-component-test.js

@@ -31,77 +31,31 @@ let OverriddenApollo = class extends ApolloService {
   }
 };
 
-module('Unit | queryManager | Setup Hooks in Ember Components', function (
-  hooks
-) {
-  setupTest(hooks);
-
-  hooks.beforeEach(function (assert) {
-    assertDeepEqual = assert.deepEqual.bind(assert);
-    unsubscribeCalled = 0;
-
-    this.subject = function () {
-      this.owner.register('service:overridden-apollo', OverriddenApollo);
-      this.owner.register('component:test-component', TestObject);
-      return this.owner.lookup('component:test-component');
-    };
-  });
-
-  test('it unsubscribes from any watchQuery subscriptions', function (assert) {
-    assert.expect(5);
-
-    TestObject = EmberComponent.extend({
-      apollo: queryManager({ service: 'overridden-apollo' }),
-      willDestroyElement() {
-        assert.ok(true, 'Should have called the original willDestroyElement');
-      },
-    });
-
-    let subject = this.subject();
-    assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
-
-    subject.apollo.watchQuery({ query: 'fakeQuery' });
-    subject.apollo.watchQuery({ query: 'fakeQuery' });
-
-    subject.willDestroyElement();
-
-    assert.equal(
-      unsubscribeCalled,
-      2,
-      '_apolloUnsubscribe() was called once per watchQuery'
-    );
-  });
-
-  test('it unsubscribes from any subscriptions', async function (assert) {
-    TestObject = EmberComponent.extend({
-      apollo: queryManager({ service: 'overridden-apollo' }),
+module(
+  'Unit | queryManager | Setup Hooks in Ember Components',
+  function (hooks) {
+    setupTest(hooks);
+
+    hooks.beforeEach(function (assert) {
+      assertDeepEqual = assert.deepEqual.bind(assert);
+      unsubscribeCalled = 0;
+
+      this.subject = function () {
+        this.owner.register('service:overridden-apollo', OverriddenApollo);
+        this.owner.register('component:test-component', TestObject);
+        return this.owner.lookup('component:test-component');
+      };
     });
 
-    let subject = this.subject();
-    assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
-
-    subject.apollo.subscribe({ query: 'fakeSubscription' });
-    subject.apollo.subscribe({ query: 'fakeSubscription' });
-
-    subject.willDestroyElement();
-
-    assert.equal(
-      unsubscribeCalled,
-      2,
-      '_apolloUnsubscribe() was called once per subscribe'
-    );
-  });
-
-  if (gte('3.10.0')) {
-    test('it works using decorator syntax', function (assert) {
+    test('it unsubscribes from any watchQuery subscriptions', function (assert) {
       assert.expect(5);
-      TestObject = class MyTestClassOjbect extends EmberComponent {
-        @queryManager({ service: 'overridden-apollo' }) apollo;
 
+      TestObject = EmberComponent.extend({
+        apollo: queryManager({ service: 'overridden-apollo' }),
         willDestroyElement() {
           assert.ok(true, 'Should have called the original willDestroyElement');
-        }
-      };
+        },
+      });
 
       let subject = this.subject();
       assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
@@ -117,5 +71,59 @@ module('Unit | queryManager | Setup Hooks in Ember Components', function (
         '_apolloUnsubscribe() was called once per watchQuery'
       );
     });
+
+    test('it unsubscribes from any subscriptions', async function (assert) {
+      TestObject = EmberComponent.extend({
+        apollo: queryManager({ service: 'overridden-apollo' }),
+      });
+
+      let subject = this.subject();
+      assert.equal(unsubscribeCalled, 0, 'should have been initialized with 0');
+
+      subject.apollo.subscribe({ query: 'fakeSubscription' });
+      subject.apollo.subscribe({ query: 'fakeSubscription' });
+
+      subject.willDestroyElement();
+
+      assert.equal(
+        unsubscribeCalled,
+        2,
+        '_apolloUnsubscribe() was called once per subscribe'
+      );
+    });
+
+    if (gte('3.10.0')) {
+      test('it works using decorator syntax', function (assert) {
+        assert.expect(5);
+        TestObject = class MyTestClassOjbect extends EmberComponent {
+          @queryManager({ service: 'overridden-apollo' }) apollo;
+
+          willDestroyElement() {
+            assert.ok(
+              true,
+              'Should have called the original willDestroyElement'
+            );
+          }
+        };
+
+        let subject = this.subject();
+        assert.equal(
+          unsubscribeCalled,
+          0,
+          'should have been initialized with 0'
+        );
+
+        subject.apollo.watchQuery({ query: 'fakeQuery' });
+        subject.apollo.watchQuery({ query: 'fakeQuery' });
+
+        subject.willDestroyElement();
+
+        assert.equal(
+          unsubscribeCalled,
+          2,
+          '_apolloUnsubscribe() was called once per watchQuery'
+        );
+      });
+    }
   }
-});
+);