diff --git a/addons/rose/addon/components/rose/table/row/cell/index.js b/addons/rose/addon/components/rose/table/row/cell/index.js index 0fc901f10..01bcb5fd7 100644 --- a/addons/rose/addon/components/rose/table/row/cell/index.js +++ b/addons/rose/addon/components/rose/table/row/cell/index.js @@ -4,13 +4,14 @@ import { computed } from '@ember/object'; export default Component.extend({ layout, - classNameBindings: ['cellStyle', 'cellSizeStyle'], - cellStyle: computed(function () { + tagName: 'td', + classNameBindings: ['cellTypeStyle', 'cellStyle'], + cellTypeStyle: computed(function () { return this.tagName.match('th') ? `rose-table-header-cell` : 'rose-table-cell'; }), - cellSizeStyle: computed(function () { + cellStyle: computed(function () { return this.style ? `rose-table-cell-${this.style}` : ''; }), }); diff --git a/addons/rose/addon/components/rose/table/row/index.hbs b/addons/rose/addon/components/rose/table/row/index.hbs index 7431132ea..5183c0746 100644 --- a/addons/rose/addon/components/rose/table/row/index.hbs +++ b/addons/rose/addon/components/rose/table/row/index.hbs @@ -1,6 +1,6 @@ {{yield (hash - cell=(component 'rose/table/row/cell' tagName='td') + cell=(component 'rose/table/row/cell') headerCell=(component 'rose/table/row/cell' tagName='th') )}} diff --git a/addons/rose/tests/integration/components/rose/table-test.js b/addons/rose/tests/integration/components/rose/table-test.js index 06f2a5b8c..aa78b58eb 100644 --- a/addons/rose/tests/integration/components/rose/table-test.js +++ b/addons/rose/tests/integration/components/rose/table-test.js @@ -43,4 +43,9 @@ module('Integration | Component | rose/table', function (hooks) { `); assert.ok(find('tfoot')); }); + + test('it supports a style class', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-table-condensed')); + }); }); diff --git a/addons/rose/tests/integration/components/rose/table/row-test.js b/addons/rose/tests/integration/components/rose/table/row-test.js index 94c57cd08..7e0774504 100644 --- a/addons/rose/tests/integration/components/rose/table/row-test.js +++ b/addons/rose/tests/integration/components/rose/table/row-test.js @@ -32,4 +32,9 @@ module('Integration | Component | rose/table/row', function (hooks) { assert.ok(find('th')); assert.ok(find('.rose-table-header-cell')); }); + + test('it can be hidden', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-table-row-visually-hidden')); + }); }); diff --git a/addons/rose/tests/integration/components/rose/table/row/cell-test.js b/addons/rose/tests/integration/components/rose/table/row/cell-test.js index c58c9096c..48928d3d6 100644 --- a/addons/rose/tests/integration/components/rose/table/row/cell-test.js +++ b/addons/rose/tests/integration/components/rose/table/row/cell-test.js @@ -1,26 +1,38 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; +import { render, find } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; module('Integration | Component | rose/table/row/cell', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); + assert.expect(2); + await render(hbs` + content + `); + assert.ok(find('td')); + assert.equal(find('.rose-table-cell').textContent.trim(), 'content'); + }); - await render(hbs``); + test('it renders with attributes', async function (assert) { + assert.expect(1); + await render(hbs``); + assert.ok(find('#cell')); + }); - assert.equal(this.element.textContent.trim(), ''); + test('it renders as header cell', async function (assert) { + assert.expect(4); + await render(hbs``); + assert.ok(find('th')); + assert.ok(find('.rose-table-header-cell')); + assert.notOk(find('td')); + assert.notOk(find('.rose-table-cell')); + }); - // Template block usage: - await render(hbs` - - template block text - - `); - - assert.equal(this.element.textContent.trim(), 'template block text'); + test('it adds a style class', async function (assert) { + assert.expect(1); + await render(hbs``); + assert.ok(find('.rose-table-cell-expand')); }); });