Remove no-classic-classes & no-classic-components in docs & convert c…

…lassic components to glimmer

docs/.eslintrc.js

@@ -16,8 +16,6 @@ module.exports = {
     browser: true,
   },
   rules: {
-    'ember/no-classic-classes': 'off',
-    'ember/no-classic-components': 'off',
     'ember/classic-decorator-no-classic-methods': 'off',
     'ember/no-computed-properties-in-native-classes': 'off',
   },

test-app/app/components/custom-group-component.js

@@ -1,9 +1,9 @@
-/* eslint-disable ember/classic-decorator-hooks, ember/require-tagless-components */
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
 export default class CustomGroupComponent extends Component {
-  init() {
-    super.init(...arguments);
+  @action
+  setup() {
     this.onInit?.bind(this)();
   }
 }

test-app/app/components/list-of-countries.js

@@ -1,4 +1,3 @@
-/* eslint-disable ember/require-tagless-components */
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 
 export default class ListOfCountriesComponent extends Component {}

test-app/app/templates/components/custom-group-component.hbs

@@ -1 +1 @@
-<div class="custom-component">{{yield}}</div>
+<div class="custom-component" {{did-insert this.setup}}>{{yield}}</div>

test-app/app/templates/components/list-of-countries.hbs

@@ -1,18 +1,20 @@
-<p>
-  Countries:
-</p>
-<ul>
-  {{#if @extra.field}}
-    {{#each @options as |option index|}}
-      <li>
-        {{index}}. {{get option @extra.field}}
-      </li>
-    {{/each}}
-  {{else}}
-    {{#each @options as |option index|}}
-      <li>
-        {{index}}. {{option.name}}
-      </li>
-    {{/each}}
-  {{/if}}
-</ul>
+<div class="ember-power-select-options">
+  <p>
+    Countries:
+  </p>
+  <ul>
+    {{#if @extra.field}}
+      {{#each @options as |option index|}}
+        <li>
+          {{index}}. {{get option @extra.field}}
+        </li>
+      {{/each}}
+    {{else}}
+      {{#each @options as |option index|}}
+        <li>
+          {{index}}. {{option.name}}
+        </li>
+      {{/each}}
+    {{/if}}
+  </ul>
+</div>

test-app/tests/integration/components/power-select/customization-with-components-test.js

@@ -396,7 +396,6 @@ module(
     test('`@groupComponent` has extension points', async function (assert) {
       this.groupedNumbers = groupedNumbers;
       let numberOfGroups = 5; // number of groups in groupedNumbers
-      assert.expect(4 * numberOfGroups);
 
       let extra = { foo: 'bar' };
       this.extra = extra;
@@ -419,6 +418,10 @@ module(
     `);
 
       await clickTrigger();
+
+      assert
+        .dom('.ember-power-select-options .custom-component')
+        .exists({ count: numberOfGroups });
     });
 
     test('the power-select-multiple placeholder can be customized using `@placeholderComponent`', async function (assert) {

test-app/tests/integration/components/power-select/customization-with-extending-components-test.js

@@ -48,13 +48,14 @@ module(
       <PowerSelect 
         @options={{this.countries}} 
         @selected={{this.country}} 
-        @optionsComponent={{component "list-of-countries"}} 
+        @optionsComponent={{component "list-of-countries"}}
         @onChange={{fn (mut this.foo)}} as |country|>
         {{country.name}}
       </PowerSelect>
     `);
 
       await clickTrigger();
+
       assert
         .dom('.ember-power-select-options')
         .includesText('Countries:', 'The given component is rendered');