Basic static components w/ tests

app/components/file-table-item.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+
+const defaultFile = {};
+
+export default Component.extend({
+  file: defaultFile,
+});

app/components/file-table.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+const defaultFiles = [];
+
+export default Component.extend({
+  files: defaultFiles,
+});

app/templates/components/file-table-item.hbs

@@ -0,0 +1,25 @@
+<tr data-test-id="file-table-item">
+  <td data-test-id="file-table-item-selected">
+    &nbsp;
+  </td>
+  <td data-test-id="file-table-item-name">
+    {{file.name}}
+  </td>
+  <td data-test-id="file-table-item-device">
+    {{file.device}}
+  </td>
+  <td data-test-id="file-table-item-path">
+    {{file.path}}
+  </td>
+  <td>
+    <i
+      class="file-table-item-status-{{file.status}}"
+      data-test-id="file-table-status-icon"
+    >
+      &nbsp;
+    </i>
+  </td>
+  <td data-test-id="file-table-item-status">
+    {{file.status}}
+  </td>
+</tr>

app/templates/components/file-table.hbs

@@ -0,0 +1,21 @@
+
+<header data-test-id="file-table-action-bar">
+  <label data-test-action="file-table-select-all"></label>
+  <button data-test-action="file-table-download-selected">Download Selected</button>
+</header>
+
+<table>
+  <thead data-test-id="file-table-header">
+    <th>&nbsp;</th>
+    <th>Name</th>
+    <th>Device</th>
+    <th>Path</th>
+    <th>&nbsp;</th>
+    <th>Status</th>
+  </thead>
+  <tbody>
+    {{#each files as | file |}}
+      {{file-table-item file=file selected=selected}}
+    {{/each}}
+  </tbody>
+</table>

tests/integration/components/file-table-item-test.js

@@ -0,0 +1,47 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+const genericFile = () => {
+  return {
+    name: 'foo.bar',
+    device: 'Baz',
+    path: '~/foo.bar',
+    status: 'available',
+  };
+};
+
+module('Integration | Component | file-table-item', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders expected elements', async function(assert) {
+    await render(hbs`{{file-table-item}}`);
+
+    assert.ok(this.element, 'Component itself');
+    assert.ok(find('[data-test-id=file-table-item-name]'), 'Name');
+  });
+
+  test('it renders row with generic data', async function(assert) {
+    this.set('file', genericFile());
+    await render(hbs`{{file-table-item file=file}}`);
+
+    assert.equal(find('[data-test-id=file-table-item-name]').textContent.trim(), this.file.name, 'Renders name as text');
+    assert.equal(find('[data-test-id=file-table-item-device]').textContent.trim(), this.file.device, 'Renders device as text');
+    assert.equal(find('[data-test-id=file-table-item-path]').textContent.trim(), this.file.path, 'Renders path as text');
+    assert.equal(find('[data-test-id=file-table-item-status]').textContent.trim(), this.file.status, 'Renders status as text');
+  });
+
+  test('it handles toggling status visible elements', async function(assert) {
+    this.set('file', genericFile());
+    this.set('file.status', 'scheduled');
+    await render(hbs`{{file-table-item file=file}}`);
+
+    assert.equal(find('[data-test-id=file-table-item-status]').textContent.trim(), 'scheduled', 'Renders correct status text');
+    assert.equal(find('[data-test-id=file-table-status-icon]').classList.contains('file-table-item-status-scheduled'), true, 'Status icon has expected class');
+
+    this.set('file', genericFile());
+    assert.equal(find('[data-test-id=file-table-item-status]').textContent.trim(), 'available', 'Renders correct status text');
+    assert.equal(find('[data-test-id=file-table-status-icon]').classList.contains('file-table-item-status-available'), true, 'Status icon has expected class');
+  });
+});

tests/integration/components/file-table-test.js

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | file-table', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders expected elements', async function(assert) {
+    await render(hbs`{{file-table}}`);
+
+    assert.ok(this.element, 'Component itself');
+    assert.ok(find('[data-test-id=file-table-action-bar]'), 'Action bar');
+    assert.ok(find('[data-test-action=file-table-select-all]'), 'Select all');
+    assert.ok(find('[data-test-action=file-table-download-selected]'), 'Download selected');
+    assert.ok(find('[data-test-id=file-table-header]'), 'Table header');
+    assert.notOk(find('[data-test-id=file-table-item]'), 'Should have no table rows without data');
+  });
+});