refactor: update ember-cli 3.28 (#288)

.eslintignore

@@ -13,6 +13,8 @@
 # misc
 /coverage/
 !.*
+.*/
+.eslintcache
 
 # ember-try
 /.node_modules.ember-try/

.eslintrc.js

@@ -1,8 +1,13 @@
+'use strict';
+
 module.exports = {
   root: true,
   parserOptions: {
     ecmaVersion: 2018,
-    sourceType: 'module'
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
   },
   plugins: [
     'ember',

.gitignore

@@ -12,6 +12,7 @@
 /.env*
 /.pnp*
 /.sass-cache
+/.eslintcache
 /connect.lock
 /coverage/
 /libpeerconnection.log

.npmignore

@@ -10,9 +10,12 @@
 /.editorconfig
 /.ember-cli
 /.env*
+/.eslintcache
 /.eslintignore
 /.eslintrc.js
 /.gitignore
+/.prettierignore
+/.prettierrc.js
 /.template-lintrc.js
 /.travis.yml
 /.watchmanconfig
@@ -22,6 +25,7 @@
 /ember-cli-build.js
 /testem.js
 /tests/
+/yarn-error.log
 /yarn.lock
 .gitkeep
 docs/

.travis.yml

@@ -3,7 +3,7 @@ language: node_js
 node_js:
   # we recommend testing addons with the same minimum supported node version as Ember CLI
   # so that your addon works for all apps
-  - "8"
+  - "12"
 
 sudo: false
 dist: trusty
@@ -27,13 +27,12 @@ branches:
     - /^v\d+\.\d+\.\d+/
 
 jobs:
-  fail_fast: true
+  fast_finish: true
   allow_failures:
     - env: EMBER_TRY_SCENARIO=ember-canary
 
   include:
     # runs linting and tests with current locked deps
-
     - stage: "Tests"
       name: "Tests"
       script:

README.md

@@ -13,9 +13,9 @@ to audit your apps.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v2.18 or above
-* Ember CLI v2.13 or above
-* Node.js v8 or above
+* Ember.js v3.24 or above
+* Ember CLI v3.24 or above
+* Node.js v12 or above
 
 
 Installation

addon/templates/components/accessibility-result.hbs

@@ -13,7 +13,7 @@
       <span class="accessibility-result-component">{{violation.component}}</span>
     {{/if}}
     <p class="accessibility-result-description">
-      {{violation.description}}. <a href={{violation.helpUrl}} target="_blank" rel="noopener">Read More</a>
+      {{violation.description}}. <a href={{violation.helpUrl}} target="_blank" rel="noopener noreferrer">Read More</a>
     </p>
     <p class="accessibility-result-summary">
       <ul>

addon/templates/components/accessibility-tester.hbs

@@ -1,8 +1,8 @@
 <ToggleResult
   data-action="toggle-results"
-  @preventToggle={{preventToggle}}
-  style={{position}} />
+  @preventToggle={{this.preventToggle}}
+  style={{this.position}} />
 
-{{#each accessibilityTest.violations as |violation|}}
+{{#each this.accessibilityTest.violations as |violation|}}
   <AccessibilityResult data-test-title="accessibility-result" @violation={{violation}} />
 {{/each}}

addon/templates/components/toggle-result.hbs

@@ -1,11 +1,11 @@
-{{#if isAuditing}}
+{{#if this.isAuditing}}
   <div class="accessibility-loading-overlay"></div>
 {{/if}}
 <button
   type="button"
   aria-label="Scan Accessibility Issues"
-  title={{if accessibilityTest.violations "Disable Accessibility Issues" "Scan Accessibility Issues"}}
-  class={{if accessibilityTest.violations "active"}}>
+  title={{if this.accessibilityTest.violations "Disable Accessibility Issues" "Scan Accessibility Issues"}}
+  class={{if this.accessibilityTest.violations "active"}}>
   <svg
     data-test-action="check-accessibility"
     xmlns="http://www.w3.org/2000/svg"
@@ -19,6 +19,6 @@
     </g>
   </svg>
 </button>
-{{#if accessibilityTest.violations}}
-  <span class="accessibility-violations-badge">{{accessibilityTest.violations.length}}</span>
+{{#if this.accessibilityTest.violations}}
+  <span class="accessibility-violations-badge">{{this.accessibilityTest.violations.length}}</span>
 {{/if}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coyote-labs/ember-accessibility",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "An EmberJS addon to help identify accessibility violations",
   "keywords": [
     "ember-addon"
@@ -17,12 +17,17 @@
     "test": "tests"
   },
   "scripts": {
-    "build": "ember build",
+    "build": "ember build --environment=production",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:hbs": "ember-template-lint .",
-    "lint:js": "eslint .",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "ember test",
-    "test:all": "ember try:each"
+    "test": "npm-run-all lint test:*",
+    "test:ember": "ember test",
+    "test:ember-compatibility": "ember try:each"
   },
   "husky": {
     "hooks": {
@@ -35,41 +40,54 @@
     "broccoli-merge-trees": "^3.0.2",
     "ember-angle-bracket-invocation-polyfill": "^2.0.1",
     "ember-auto-import": "^1.3.0",
-    "ember-cli-babel": "^7.7.3",
-    "ember-cli-htmlbars": "^4.0.5",
+    "ember-cli-babel": "^7.26.10",
+    "ember-cli-htmlbars": "^5.7.2",
     "ember-get-config": "^2.1.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",
-    "@ember/optional-features": "^1.0.0",
+    "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.6.0",
+    "@embroider/test-setup": "^0.48.1",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.13.1",
-    "ember-cli-dependency-checker": "^3.1.0",
-    "ember-cli-eslint": "^5.1.0",
-    "ember-cli-htmlbars-inline-precompile": "^3.0.0",
-    "ember-cli-inject-live-reload": "^2.0.1",
+    "ember-auto-import": "^1.12.0",
+    "ember-cli": "~3.28.6",
+    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-template-lint": "^1.0.0-beta.1",
-    "ember-cli-uglify": "^3.0.0",
+    "ember-cli-terser": "^4.0.2",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.0",
-    "ember-load-initializers": "^2.0.0",
+    "ember-export-application-global": "^2.0.1",
+    "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-qunit": "^4.4.1",
-    "ember-resolver": "^5.0.1",
-    "ember-source": "~3.13.2",
-    "ember-source-channel-url": "^2.0.1",
-    "ember-try": "^1.0.0",
-    "eslint-plugin-ember": "^7.0.0",
+    "ember-page-title": "^6.2.2",
+    "ember-qunit": "^5.1.5",
+    "ember-resolver": "^8.0.3",
+    "ember-source": "~3.28.8",
+    "ember-source-channel-url": "^3.0.0",
+    "ember-template-lint": "^3.15.0",
+    "ember-try": "^1.4.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-ember": "^10.5.8",
     "eslint-plugin-ember-suave": "^2.0.0-beta.1",
-    "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-qunit": "^6.2.0",
     "husky": "^3.0.0",
     "loader.js": "^4.7.0",
-    "qunit-dom": "^0.9.0"
+    "npm-run-all": "^4.1.5",
+    "qunit": "^2.17.2",
+    "qunit-dom": "^1.6.0"
   },
   "engines": {
-    "node": "8.* || >= 10.*"
+    "node": "12.* || 14.* || >= 16"
+  },
+  "ember": {
+    "edition": "octane"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",

tests/dummy/app/components/faint-text.js → tests/dummy/app/components/elements-without-label.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../templates/components/faint-text';
+import layout from '../templates/components/elements-without-label';
 
 export default Component.extend({
   layout

tests/dummy/app/templates/application.hbs

@@ -4,11 +4,11 @@
 
   <BannerImg />
 
-  <button class="empty-btn"></button>
+  <button class="empty-btn" type="button"></button>
 
-  <button type="button" {{action "toggle"}} data-toggle="display-text">Click to display some text</button>
-  {{#if canShowComponent}}
-    <FaintText />
+  <button type="button" {{action "toggle"}} data-toggle="display-text">Click to display some form elements</button>
+  {{#if this.canShowComponent}}
+    <ElementsWithoutLabel />
   {{/if}}
 </div>
 

tests/dummy/app/templates/components/elements-without-label.hbs

@@ -0,0 +1,4 @@
+<form>
+    <label>Input Label</label>
+    <input type="text">
+</form>

tests/dummy/config/optional-features.json

@@ -1,3 +1,6 @@
 {
-  "jquery-integration": false
+  "application-template-wrapper": false,
+  "default-async-observers": true,
+  "jquery-integration": false,
+  "template-only-glimmer-components": true
 }

tests/index.html

@@ -7,27 +7,52 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    {{content-for "head"}}
-    {{content-for "test-head"}}
+    {{content-for 'head'}}
+    {{content-for 'test-head'}}
 
     <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link rel="stylesheet" href="{{rootURL}}assets/dummy.css">
     <link rel="stylesheet" href="{{rootURL}}assets/test-support.css">
 
-    {{content-for "head-footer"}}
-    {{content-for "test-head-footer"}}
+    <style>
+      #ember-testing-container {
+        /* position: absolute; */
+        background: white;
+        bottom: 0;
+        right: 0;
+        width: 640px;
+        height: 384px;
+        overflow: auto;
+        z-index: 9999;
+        border: 1px solid #ccc;
+      }
+      #ember-testing {
+        zoom: 50%;
+      }
+    </style>
+
+    {{content-for 'head-footer'}}
+    {{content-for 'test-head-footer'}}
   </head>
   <body>
-    {{content-for "body"}}
-    {{content-for "test-body"}}
+    {{content-for 'body'}}
+    {{content-for 'test-body'}}
+
+    <div id="qunit"></div>
+    <div id="qunit-fixture">
+      <div id="ember-testing-container">
+        <div id="ember-testing"></div>
+      </div>
+    </div>
 
-    <script src="/testem.js" integrity=""></script>
+    <script src="/testem.js" integrity="" data-embroider-ignore></script>
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/test-support.js"></script>
     <script src="{{rootURL}}assets/dummy.js"></script>
     <script src="{{rootURL}}assets/tests.js"></script>
+    <!-- <script src="{{rootURL}}assets/test-loader.js"></script> -->
 
-    {{content-for "body-footer"}}
-    {{content-for "test-body-footer"}}
+    {{content-for 'body-footer'}}
+    {{content-for 'test-body-footer'}}
   </body>
 </html>