fix(progress-circular): render correctly in determinate mode

.travis.yml

@@ -12,8 +12,7 @@ addons:
   chrome: stable
 
 cache:
-  directories:
-    - $HOME/.npm
+  yarn: true
 
 env:
   global:
@@ -35,9 +34,11 @@ matrix:
     - env: EMBER_TRY_SCENARIO=ember-canary
 
 before_install:
-  - npm config set spin false
-  - npm install -g npm@4
-  - npm --version
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH=$HOME/.yarn/bin:$PATH
+
+install:
+  - yarn install --no-lockfile --non-interactive
 
 script:
   # Usually, it's ok to finish the test scenario without reverting

addon/components/paper-progress-circular.js

@@ -59,7 +59,7 @@ export default Component.extend(ColorMixin, {
     return mode === MODE_DETERMINATE || mode === MODE_INDETERMINATE ? `md-mode-${mode}` : 'ng-hide';
   }),
 
-  isIndeterminate: equal('mode', MODE_INDETERMINATE),
+  isIndeterminate: equal('mode', MODE_INDETERMINATE).readOnly(),
 
   strokeWidth: computed('strokeRatio', 'diameter', function() {
     return this.get('strokeRatio') * this.get('diameter');
@@ -113,9 +113,11 @@ export default Component.extend(ColorMixin, {
     let newValue = clamp(this.get('value'), 0, 100);
     let newDisabled = this.get('disabled');
 
-    if (this.oldValue !== newValue) {
-      // value changed
-      this.startDeterminateAnimation(this.oldValue, newValue);
+    let diameterChanged = this.oldDiameter !== this.get('diameter');
+    let strokeRatioChanged = this.oldStrokeRatio !== this.get('strokeRatio');
+
+    if (this.oldValue !== newValue || diameterChanged || strokeRatioChanged) {
+      this.startDeterminateAnimation(this.oldValue || 0, newValue);
       this.oldValue = newValue;
     }
 
@@ -128,6 +130,9 @@ export default Component.extend(ColorMixin, {
       }
       this.oldValue = newValue;
     }
+
+    this.oldDiameter = this.get('diameter');
+    this.oldStrokeRatio = this.get('strokeRatio');
   },
 
   willDestroyElement() {
@@ -167,8 +172,12 @@ export default Component.extend(ColorMixin, {
 
     let renderFrame = (value, diameter, strokeWidth, dashLimit) => {
       if (!this.isDestroyed && !this.isDestroying) {
-        this.$('path').attr('stroke-dashoffset', this.getDashLength(diameter, strokeWidth, value, dashLimit));
-        this.$('path').attr('transform', `rotate(${rotation} ${diameter / 2} ${diameter / 2})`);
+        let $path = this.$('path');
+        if (!$path) {
+          return;
+        }
+        $path.attr('stroke-dashoffset', this.getDashLength(diameter, strokeWidth, value, dashLimit));
+        $path.attr('transform', `rotate(${rotation} ${diameter / 2} ${diameter / 2})`);
       }
     };
 
@@ -178,7 +187,6 @@ export default Component.extend(ColorMixin, {
     } else {
       let animation = () => {
         let currentTime = clamp(now() - startTime, 0, animationDuration);
-
         renderFrame(ease(currentTime, animateFrom, changeInValue, animationDuration), diameter, strokeWidth, dashLimit);
 
         // Do not allow overlapping animations

config/ember-try.js

@@ -1,5 +1,6 @@
 /* eslint-env node */
 module.exports = {
+  useYarn: true,
   scenarios: [
     {
       name: 'ember-lts-2.12',

tests/dummy/app/templates/demo/progress-circular.hbs

@@ -10,7 +10,6 @@
     {{! END-SNIPPET }}
   </div>
   {{code-snippet name="progress-circular.determinate.hbs"}}
-
   <h3>Indeterminate</h3>
   <p>For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
   <div class="layout-column layout-gt-sm-row layout-align-space-around">
@@ -65,4 +64,5 @@
     </div>
     {{! END-SNIPPET }}
   </div>
+
 {{/doc-content}}

tests/integration/components/paper-progress-circular-test.js

@@ -1,4 +1,5 @@
 import { moduleForComponent, test } from 'ember-qunit';
+import wait from 'ember-test-helpers/wait';
 import hbs from 'htmlbars-inline-precompile';
 
 moduleForComponent('paper-progress-circular', 'Integration | Component | paper progress circular', {
@@ -24,4 +25,21 @@ test('should set correct size based on diameter', function(assert) {
   let $el = this.$('md-progress-circular');
   assert.ok(/height:.*25px/.test($el.attr('style')));
   assert.ok(/width:.*25px/.test($el.attr('style')));
-});
+});
+
+test('renders correctly with explicit value and diameter', async function(assert) {
+  assert.expect(5);
+
+  this.render(hbs`{{paper-progress-circular value=50 diameter=25}}`);
+
+  await wait();
+
+  let $el = this.$('md-progress-circular');
+  assert.ok(/height:.*25px/.test($el.attr('style')));
+  assert.ok(/width:.*25px/.test($el.attr('style')));
+
+  let $svgPath = $el.find('path');
+  assert.equal('rotate(0 12.5 12.5)', $svgPath.attr('transform'), 'rotated halfway');
+  assert.ok(parseFloat($svgPath.attr('stroke-dashoffset')), 'stroke-dashoffset has a number');
+  assert.ok(parseFloat($svgPath.attr('stroke-dasharray')), 'stroke-dasharray has a number');
+});