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'));
});
});