Update polaris-spinner to v3.10.0

addon/components/polaris-spinner.js

@@ -2,7 +2,6 @@ import Component from '@ember/component';
 import layout from '../templates/components/polaris-spinner';
 import { computed } from '@ember/object';
 import { classify } from '@ember/string';
-import SvgHandling from '../mixins/components/svg-handling';
 
 const allowedColors = ['white', 'teal', 'inkLightest'];
 const colorsForLargeSpinner = ['teal', 'inkLightest'];
@@ -11,7 +10,12 @@ const defaultColor = 'teal';
 const allowedSizes = ['small', 'large'];
 const defaultSize = 'large';
 
-export default Component.extend(SvgHandling, {
+const spinnerSVGSources = {
+  small: '/@smile-io/ember-polaris/illustrations/spinner-small.svg',
+  large: '/@smile-io/ember-polaris/illustrations/spinner-large.svg',
+};
+
+export default Component.extend({
   tagName: '',
 
   layout,
@@ -71,8 +75,9 @@ export default Component.extend(SvgHandling, {
   /**
    * @private
    */
-  spinnerSource: computed('normalizedSize', function() {
-    return `polaris/spinner-${this.get('normalizedSize')}`;
+  spinnerSVG: computed('normalizedSize', function() {
+    let size = this.get('normalizedSize') === 'large' ? 'large' : 'small';
+    return spinnerSVGSources[size];
   }).readOnly(),
 
   /**

addon/templates/components/polaris-spinner.hbs

@@ -1,8 +1,10 @@
-{{svg-jar
-  spinnerSource
-  data-test-spinner=true
+{{!-- TODO: replace this with polaris-image when implemented. --}}
+<img
+  alt=""
+  src={{spinnerSVG}}
+  class={{spinnerClass}}
+  draggable="false"
   role="status"
-  id=svgElementId
-  class=spinnerClass
-  aria-label=accessibilityLabel
-}}
+  aria-label={{accessibilityLabel}}
+  data-test-spinner
+>

tests/integration/components/polaris-spinner-test.js

@@ -1,132 +1,74 @@
-import { moduleForComponent, test } from 'ember-qunit';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
-import { findAll } from 'ember-native-dom-helpers';
-import MockSvgJarComponent from '../../mocks/components/svg-jar';
 
-const spinnerSelector = 'svg.Polaris-Spinner';
+const spinnerSelector = '[data-test-spinner]';
 
-moduleForComponent(
-  'polaris-spinner',
-  'Integration | Component | polaris spinner',
-  {
-    integration: true,
+module('Integration | Component | polaris spinner', function(hooks) {
+  setupRenderingTest(hooks);
 
-    beforeEach() {
-      this.register(
-        'component:svg-jar',
-        MockSvgJarComponent.extend({
-          attributeBindings: ['role'],
-        })
-      );
-    },
-  }
-);
+  test('it uses the label as the aria-label for the spinner', async function(assert) {
+    let label = 'Content is loading';
 
-test('renders the correct HTML with default attributes', function(assert) {
-  this.render(hbs`{{polaris-spinner}}`);
+    this.set('label', label);
 
-  let spinners = findAll(spinnerSelector);
-  assert.equal(spinners.length, 1, 'renders one spinner');
-
-  let spinner = spinners[0];
-  assert.equal(
-    spinner.dataset.iconSource,
-    'polaris/spinner-large',
-    'renders spinner-large SVG'
-  );
-  assert.ok(
-    spinner.classList.contains('Polaris-Spinner--sizeLarge'),
-    'spinner size defaults to large'
-  );
-  assert.ok(
-    spinner.classList.contains('Polaris-Spinner--colorTeal'),
-    'spinner color defaults to teal'
-  );
-  assert.equal(
-    spinner.getAttribute('role'),
-    'status',
-    'has correct role attribute'
-  );
-});
-
-test('handles size and color correctly', function(assert) {
-  // Set unsupported size and color values initially.
-  this.setProperties({
-    size: 'unknown',
-    color: 'unknown',
+    await render(hbs`
+      {{polaris-spinner
+        accessibilityLabel=label
+      }}
+    `);
+    assert.dom(spinnerSelector).hasAttribute('aria-label', label);
   });
-  this.render(hbs`{{polaris-spinner size=size color=color}}`);
 
-  let spinners = findAll(spinnerSelector);
-  assert.equal(spinners.length, 1, 'renders one spinner');
-
-  // Check the correct defaults were used for size and color.
-  let spinner = spinners[0];
-  assert.equal(
-    spinner.dataset.iconSource,
-    'polaris/spinner-large',
-    'with unsupported size - renders spinner-large SVG'
-  );
-  assert.ok(
-    spinner.classList.contains('Polaris-Spinner--sizeLarge'),
-    'with unsupported size - spinner size defaults to large'
-  );
-  assert.ok(
-    spinner.classList.contains('Polaris-Spinner--colorTeal'),
-    'with unsupported color - spinner color defaults to teal'
-  );
-
-  // Set a color that isn't supported at large size.
-  this.setProperties({
-    size: 'large',
-    color: 'white',
+  test('it renders a large spinner by default', async function(assert) {
+    await render(hbs`
+      {{polaris-spinner}}
+    `);
+    assert.dom(spinnerSelector).hasClass('Polaris-Spinner--sizeLarge');
   });
 
-  assert.equal(
-    spinner.dataset.iconSource,
-    'polaris/spinner-small',
-    'with unsupported color for large size - renders spinner-small SVG'
-  );
-  assert.ok(
-    spinner.classList.contains('Polaris-Spinner--sizeSmall'),
-    'with unsupported color for large size - spinner size changes to small'
-  );
-  assert.ok(
-    spinner.classList.contains('Polaris-Spinner--colorWhite'),
-    'with unsupported color for large size - spinner color is honored'
-  );
-
-  // Set a color that's supported at large size.
-  this.setProperties({
-    size: 'large',
-    color: 'inkLightest',
+  test('it renders a large spinner when size is large', async function(assert) {
+    await render(hbs`
+      {{polaris-spinner
+        size="large"
+      }}
+    `);
+    assert.dom(spinnerSelector).hasClass('Polaris-Spinner--sizeLarge');
   });
 
-  assert.equal(
-    spinner.dataset.iconSource,
-    'polaris/spinner-large',
-    'with supported color for large size - renders spinner-large SVG'
-  );
-  assert.ok(
-    spinner.classList.contains('Polaris-Spinner--sizeLarge'),
-    'with supported color for large size - spinner size changes to large'
-  );
-  assert.ok(
-    spinner.classList.contains('Polaris-Spinner--colorInkLightest'),
-    'with supported color for large size - spinner color is honored'
-  );
-});
+  test('it renders a small spinner when size is small', async function(assert) {
+    await render(hbs`
+      {{polaris-spinner
+        size="small"
+      }}
+    `);
+    assert.dom(spinnerSelector).hasClass('Polaris-Spinner--sizeSmall');
+  });
 
-test('handles `accessibilityLabel` correctly', function(assert) {
-  this.render(hbs`{{polaris-spinner accessibilityLabel="access granted"}}`);
+  test('it renders a small spinner when color is white even if size is large', async function(assert) {
+    await render(hbs`
+      {{polaris-spinner
+        color="white"
+        size="large"
+      }}
+    `);
+    assert.dom(spinnerSelector).hasClass('Polaris-Spinner--sizeSmall');
+  });
 
-  let spinners = findAll(spinnerSelector);
-  assert.equal(spinners.length, 1, 'renders one spinner');
+  test('it renders an inkLightest spinner when color is inkLightest', async function(assert) {
+    await render(hbs`
+      {{polaris-spinner
+        color="inkLightest"
+      }}
+    `);
+    assert.dom(spinnerSelector).hasClass('Polaris-Spinner--colorInkLightest');
+  });
 
-  let spinner = spinners[0];
-  assert.equal(
-    spinner.getAttribute('aria-label'),
-    'access granted',
-    'sets the correct aria-label'
-  );
+  test('it sets the role to status to denote advisory information to screen readers', async function(assert) {
+    await render(hbs`
+      {{polaris-spinner}}
+    `);
+    assert.dom(spinnerSelector).hasAttribute('role', 'status');
+  });
 });