use a real component for md-tabs-canvas

addon/components/paper-tabs-canvas.js

@@ -0,0 +1,27 @@
+/**
+ * @module ember-paper
+ */
+import Component from 'ember-component';
+import computed from 'ember-computed';
+import layout from '../templates/components/paper-tabs-canvas';
+
+/**
+ * @class PaperTabsCanvas
+ * @extends Component
+ */
+export default Component.extend({
+
+  tagName: 'md-tabs-canvas',
+
+  layout,
+
+  /* Inherited from {{paper-tabs-wrapper}} */
+  shouldPaginate: computed.readOnly('parentComponent.shouldPaginate'),
+  shouldCenterTabs: computed.readOnly('parentComponent.shouldCenterTabs'),
+
+  classNameBindings: [
+    'shouldPaginate:md-paginated',
+    'shouldCenterTabs:md-center-tabs'
+  ]
+
+});

addon/components/paper-tabs-wrapper.js

@@ -28,17 +28,6 @@ export default Component.extend(ChildMixin, {
   canPageBack: computed.readOnly('parentComponent.canPageBack'),
   canPageForward: computed.readOnly('parentComponent.canPageForward'),
 
-  canvasClass: computed('shouldPaginate', 'shouldCenterTabs', function() {
-    let classes = [];
-    if (this.get('shouldPaginate')) {
-      classes.push('md-paginated');
-    }
-    if (this.get('shouldCenterTabs')) {
-      classes.push('md-center-tabs');
-    }
-    return classes.join(' ');
-  }),
-
   actions: {
     nextPage() {
       if (this.get('canPageForward')) {

addon/templates/components/paper-tabs-canvas.hbs

@@ -0,0 +1 @@
+{{yield}}

addon/templates/components/paper-tabs-wrapper.hbs

@@ -2,8 +2,8 @@
   {{paper-prev-button disabled=(not canPageBack) click=(action "previousPage")}}
   {{paper-next-button disabled=(not canPageForward) click=(action "nextPage")}}
 {{/if}}
-<md-tabs-canvas class={{canvasClass}}>
+{{#paper-tabs-canvas parentComponent=parentComponent}}
   {{#paper-pagination-wrapper parentComponent=parentComponent}}
     {{yield}}
   {{/paper-pagination-wrapper}}
-</md-tabs-canvas>
+{{/paper-tabs-canvas}}

app/components/paper-tabs-canvas.js

@@ -0,0 +1 @@
+export { default } from 'ember-paper/components/paper-tabs-canvas';

tests/integration/components/paper-tabs-canvas-test.js

@@ -0,0 +1,36 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('paper-tabs-canvas', 'Integration | Component | paper tabs canvas', {
+  integration: true,
+  beforeEach() {
+    this.set('parentComponent', (function() {
+      return {
+        wormhole: 'wormhole',
+        send() {},
+        registerChild() {},
+        unregisterChild() {}
+      };
+    })());
+  }
+});
+
+test('it add md-paginated to canvas if parentComponent.shouldPaginate is true', function(assert) {
+  this.set('parentComponent.shouldPaginate', true);
+
+  this.render(hbs`{{#paper-tabs-canvas parentComponent=parentComponent}}
+     block content
+  {{/paper-tabs-canvas}}`);
+
+  assert.ok(this.$('md-tabs-canvas').hasClass('md-paginated'));
+});
+
+test('it add md-center-tabs to canvas if parentComponent.shouldCenterTabs is true', function(assert) {
+  this.set('parentComponent.shouldCenterTabs', true);
+
+  this.render(hbs`{{#paper-tabs-canvas parentComponent=parentComponent}}
+     block content
+  {{/paper-tabs-canvas}}`);
+
+  assert.ok(this.$('md-tabs-canvas').hasClass('md-center-tabs'));
+});