Merge pull request #91 from jherdman/upgrade-ember-again

Upgrade ember again

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module'
@@ -15,6 +16,7 @@ module.exports = {
     browser: true
   },
   rules: {
+    'ember/no-jquery': 'error'
   },
   overrides: [
     // node files

.npmignore

@@ -12,6 +12,7 @@
 /.env*
 /.eslintignore
 /.eslintrc.js
+/.git/
 /.gitignore
 /.template-lintrc.js
 /.travis.yml

addon/components/chartist-chart.js

@@ -3,7 +3,7 @@ import Component from '@ember/component';
 
 import { assert } from '@ember/debug';
 
-import { observer, computed } from '@ember/object';
+import { computed } from '@ember/object';
 
 import { capitalize } from '@ember/string';
 
@@ -55,27 +55,19 @@ export default Component.extend({
   // We're doing this to help ease people into this project. Instead of just
   // getting some "uncaught exception" we're hoping these error messages will
   // point them in the right direction.
-  init() {
-    let { data } = this;
-
-    assert(
-      'The value of the "data" attribute must be an object',
-      typeof data === 'object' &&
-      data !== null
-    );
-
+  didReceiveAttrs() {
     this._super(...arguments);
-  },
 
-  chartType: computed('type', function() {
     let { type } = this;
 
     assert(
       'Invalid or missing "type" attribute',
       typeof type !== 'undefined' && type !== null
     );
+  },
 
-    return capitalize(type);
+  chartType: computed('type', function() {
+    return capitalize(this.type);
   }),
 
   // This is where the business happens. This will only run if checkForReqs
@@ -98,23 +90,27 @@ export default Component.extend({
       responsiveOptions
     );
 
-    this.set('chart', chart);
+    this.chart = chart;
   },
 
-  /* eslint-disable ember/no-observers */
-  onData: observer('data', function() {
+  didRender() {
+    this._super(...arguments);
+
     let {
       chart,
       data,
       options,
       updateOnData,
     } = this;
 
+    if (typeof data === 'undefined') {
+      return;
+    }
+
     if (updateOnData) {
       let opts = options || {};
 
       chart.update(data, opts);
     }
-  }),
-  /* eslint-enable ember/no-observers */
+  },
 });

package.json

@@ -33,37 +33,40 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
-    "broccoli-funnel": "^1.1.0",
-    "broccoli-merge-trees": "^1.2.1",
+    "broccoli-funnel": "^2.0.2",
+    "broccoli-merge-trees": "^3.0.2",
     "chartist": "^0.11.0",
-    "ember-cli-babel": "^7.7.3",
-    "ember-cli-htmlbars": "^3.0.1"
+    "ember-cli-babel": "^7.11.1",
+    "ember-cli-htmlbars": "^4.0.0"
   },
   "devDependencies": {
-    "@ember/optional-features": "^0.7.0",
+    "@ember/optional-features": "^1.0.0",
+    "babel-eslint": "^10.0.3",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.11.0",
+    "ember-cli": "~3.13.1",
     "ember-cli-dependency-checker": "^3.1.0",
     "ember-cli-eslint": "^5.1.0",
-    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
-    "ember-cli-inject-live-reload": "^1.8.2",
-    "ember-cli-sass": "^7.1.7",
+    "ember-cli-inject-live-reload": "^2.0.1",
+    "ember-cli-sass": "^10.0.1",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-template-lint": "^1.0.0-beta.1",
-    "ember-cli-uglify": "^2.1.0",
+    "ember-cli-template-lint": "^1.0.0-beta.3",
+    "ember-cli-uglify": "^3.0.0",
+    "ember-concurrency": "^1.1.0",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.0",
-    "ember-load-initializers": "^2.0.0",
+    "ember-load-initializers": "^2.1.0",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-qunit": "^4.4.1",
-    "ember-resolver": "^5.0.1",
-    "ember-source": "~3.11.1",
-    "ember-source-channel-url": "^1.1.0",
-    "ember-try": "^1.0.0",
-    "eslint-plugin-ember": "^6.2.0",
-    "eslint-plugin-node": "^9.0.1",
+    "ember-qunit": "^4.5.1",
+    "ember-resolver": "^5.3.0",
+    "ember-source": "~3.13.0",
+    "ember-source-channel-url": "^2.0.1",
+    "ember-test-selectors": "^2.1.0",
+    "ember-try": "^1.2.1",
+    "eslint-plugin-ember": "^7.1.0",
+    "eslint-plugin-node": "^10.0.0",
     "loader.js": "^4.7.0",
-    "qunit-dom": "^0.8.4"
+    "qunit-dom": "^0.9.0",
+    "sass": "^1.23.0"
   },
   "engines": {
     "node": "8.* || >= 10.*"

testem.js

@@ -13,7 +13,6 @@ module.exports = {
         // --no-sandbox is needed when running Chrome inside a container
         process.env.CI ? '--no-sandbox' : null,
         '--headless',
-        '--disable-gpu',
         '--disable-dev-shm-usage',
         '--disable-software-rasterizer',
         '--mute-audio',

tests/acceptance/smoke-tests-test.js

@@ -0,0 +1,13 @@
+import { module, test } from 'qunit';
+import { visit } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+
+module('Acceptance | smoke tests', function(hooks) {
+  setupApplicationTest(hooks);
+
+  test('three charts are rendered', async function(assert) {
+    await visit('/');
+
+    assert.dom('[data-test-selector="chart"]').exists({ count: 3 });
+  });
+});

tests/dummy/app/components/chart-fish-over-time.js

@@ -1,50 +1,9 @@
 import ChartistChart from './chartist-chart';
 
-import { later } from '@ember/runloop';
-
-import { Promise } from 'rsvp';
-
 import { computed } from '@ember/object';
 
-// This is faking a fairly common use case of using data for a chart in an
-// async way.
-function getData () {
-  return new Promise(function(resolve) {
-    later(function() {
-      resolve({
-        labels: [
-          'Salmon', 'Yellowtail', 'Dolphin', 'Cow'
-        ],
-        series: [
-          ['2', '8', '3', '9']
-        ]
-      });
-    }, 500);
-  });
-}
-
 export default ChartistChart.extend({
-  init() {
-    getData().then((data) => {
-      this.set('data', data);
-    });
-
-    this._super();
-
-    // An example showing that the chart will update when the data changes.
-    later(() => {
-      let newData = {
-        labels: [
-          'Salmon', 'Yellowtail', 'Dolphin', 'Cow'
-        ],
-        series: [
-          ['22', '18', '0', '19']
-        ]
-      };
-
-      this.set('data', newData);
-    }, 4000);
-  },
+  type: 'bar',
 
   ratio: 'ct-minor-seventh',
 

tests/dummy/app/controllers/application.js

@@ -1,18 +1,14 @@
 import Controller from '@ember/controller';
 
-import { computed } from '@ember/object';
+export default class ApplicationController extends Controller {
+  chartResOptions =  [
+    ['screen and (min-width: 640px)', {
+      showArea: true,
+      lineSmooth: false,
 
-export default Controller.extend({
-  chartResOptions: computed(function() {
-    return [
-      ['screen and (min-width: 640px)', {
-        showArea: true,
-        lineSmooth: false,
-
-        axisX: {
-          showLabel: false
-        }
-      }]
-    ];
-  }),
-});
+      axisX: {
+        showLabel: false
+      }
+    }]
+  ];
+}

tests/dummy/app/routes/application.js

@@ -1,5 +1,7 @@
 import Route from '@ember/routing/route';
 
+import { task, timeout } from 'ember-concurrency';
+
 export default Route.extend({
   model() {
     return {
@@ -13,5 +15,32 @@ export default Route.extend({
         ]
       }
     };
-  }
+  },
+
+  deferredComponentData: task(function * () {
+    const labels = [
+      'Salmon',
+      'Yellowtail',
+      'Dolphin',
+      'Cow',
+    ];
+
+    yield timeout(500);
+
+    this.controller.set('data', {
+      labels,
+      series: [
+        ['2', '8', '3', '9']
+      ]
+    });
+
+    yield timeout(4000);
+
+    this.controller.set('data', {
+      labels,
+      series: [
+        ['22', '18', '0', '19']
+      ],
+    });
+  }).on('activate'),
 });

tests/dummy/app/templates/application.hbs

@@ -1,11 +1,20 @@
-<div class="container">
-  {{chartist-chart
-    type="bar"
-    data=model.chartData
-    responsiveOptions=chartResOptions
-  }}
-
-  {{chart-fish-over-time}}
+<ChartistChart
+  @type="bar"
+  @data={{this.model.chartData}}
+  @responsiveOptions={{this.chartResOptions}}
+  data-test-selector="chart"
+  data-test-id="bar"
+/>
 
-  {{pie-i-like}}
+<div class="container">
+  <ChartFishOverTime
+    @data={{this.data}}
+    data-test-selector="chart"
+    data-test-id="fish"
+  />
 </div>
+
+<PieILike
+  data-test-selector="chart"
+  data-test-id="pie"
+/>