Fix curly {{input}} and implicit this. Add tests for common cell renderers

addon/components/hyper-table/cell-renderers/link.hbs

@@ -8,7 +8,7 @@
     class="upf-link--reset link__value"
     onclick="event.stopPropagation();"
   >
-    {{value}}
+    {{this.value}}
   </a>
 
   <OSS::Button

addon/components/hyper-table/cell-renderers/numeric.hbs

@@ -10,13 +10,14 @@
   <div class="editing-input">
     {{#if (and this.editStatus.status (not this.isSuccess))}}
       <div class={{if this.isError "is-invalid"}}>
-        {{input
-          type="number"
-          focus-out=(action "toggleEditing" this.editableValue)
-          insert-newline=(action "toggleEditing" this.editableValue)
-          value=this.value
+        <Input
+          @type="number"
+          @insert-newline={{action "toggleEditing" this.editableValue}}
+          @value={{this.value}}
+          aria-label={{or this.column.field.name "Value"}}
           class="editing-input__field form-control"
-        }}
+          {{on "focusout" (action "toggleEditing" this.editableValue)}}
+        />
       </div>
     {{else}}
       <div class="text-value" {{enable-tooltip title=(format-numeric this.value) placement="bottom"}}>

addon/components/hyper-table/cell-renderers/text.hbs

@@ -11,13 +11,14 @@
 {{#if this.isUpsertable}}
   <div class="editing-input">
     <div class={{if this.isError "is-invalid"}}>
-      {{input
-        type="text"
-        value=this.editableValue
+      <Input
+        @type="text"
+        @value={{this.editableValue}}
+        @insert-newline={{action "toggleEditing" this.editableValue}}
+        aria-label={{or this.column.field.name "Value"}}
         class="editing-input__field form-control upf-input"
-        focus-out=(action "toggleEditing" this.editableValue)
-        insert-newline=(action "toggleEditing" this.editableValue)
-      }}
+        {{on "focusout" (action "toggleEditing" this.editableValue)}}
+      />
     </div>
     <div class="text-value" {{enable-tooltip title=this.editableValue placement="bottom"}}>
       {{this.editableValue}}

tests/integration/components/hyper-table/cell-renderers/link-test.ts

@@ -0,0 +1,44 @@
+import { A } from '@ember/array';
+import EmberObject from '@ember/object';
+import { render, type TestContext } from '@ember/test-helpers';
+
+import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | hyper-table/cell-renderers/link', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders a link value', async function (this: TestContext, assert) {
+    this.item = EmberObject.create({ website: 'https://example.com' });
+    this.column = EmberObject.create({ key: 'website', field: EmberObject.create({}) });
+    this.manager = EmberObject.create({ editStatus: A([]) });
+
+    await render(
+      hbs`<HyperTable::CellRenderers::Link
+        @item={{this.item}}
+        @column={{this.column}}
+        @manager={{this.manager}}
+      />`
+    );
+
+    assert.dom('a.link__value').hasAttribute('href', 'https://example.com');
+    assert.dom('a.link__value').hasText('https://example.com');
+  });
+
+  test('it renders a default when the value is empty', async function (this: TestContext, assert) {
+    this.item = EmberObject.create({ website: null });
+    this.column = EmberObject.create({ key: 'website', field: EmberObject.create({}) });
+    this.manager = EmberObject.create({ editStatus: A([]) });
+
+    await render(
+      hbs`<HyperTable::CellRenderers::Link
+        @item={{this.item}}
+        @column={{this.column}}
+        @manager={{this.manager}}
+      />`
+    );
+
+    assert.dom().hasText('—');
+  });
+});

tests/integration/components/hyper-table/cell-renderers/numeric-test.ts

@@ -0,0 +1,43 @@
+import { A } from '@ember/array';
+import EmberObject from '@ember/object';
+import { render, type TestContext } from '@ember/test-helpers';
+
+import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | hyper-table/cell-renderers/numeric', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders a value', async function (this: TestContext, assert) {
+    this.item = EmberObject.create({ total: 123 });
+    this.column = EmberObject.create({ key: 'total', field: EmberObject.create({}), upsertable: false });
+    this.manager = EmberObject.create({ editStatus: A([]) });
+
+    await render(
+      hbs`<HyperTable::CellRenderers::Numeric
+        @item={{this.item}}
+        @column={{this.column}}
+        @manager={{this.manager}}
+      />`
+    );
+
+    assert.dom('.text-value').hasText('123');
+  });
+
+  test('it renders a default when the value is empty', async function (this: TestContext, assert) {
+    this.item = EmberObject.create({ total: null });
+    this.column = EmberObject.create({ key: 'total', field: EmberObject.create({}), upsertable: false });
+    this.manager = EmberObject.create({ editStatus: A([]) });
+
+    await render(
+      hbs`<HyperTable::CellRenderers::Numeric
+        @item={{this.item}}
+        @column={{this.column}}
+        @manager={{this.manager}}
+      />`
+    );
+
+    assert.dom().hasText('—');
+  });
+});

tests/integration/components/hyper-table/cell-renderers/text-test.ts

@@ -0,0 +1,43 @@
+import { A } from '@ember/array';
+import EmberObject from '@ember/object';
+import { render, type TestContext } from '@ember/test-helpers';
+
+import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | hyper-table/cell-renderers/text', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders a value', async function (this: TestContext, assert) {
+    this.item = EmberObject.create({ name: 'FooBar' });
+    this.column = EmberObject.create({ key: 'name', field: EmberObject.create({}), upsertable: false });
+    this.manager = EmberObject.create({ editStatus: A([]) });
+
+    await render(
+      hbs`<HyperTable::CellRenderers::Text
+        @item={{this.item}}
+        @column={{this.column}}
+        @manager={{this.manager}}
+      />`
+    );
+
+    assert.dom('.text-value').hasText('FooBar');
+  });
+
+  test('it renders a default when the value is empty', async function (this: TestContext, assert) {
+    this.item = EmberObject.create({ name: null });
+    this.column = EmberObject.create({ key: 'name', field: EmberObject.create({}), upsertable: false });
+    this.manager = EmberObject.create({ editStatus: A([]) });
+
+    await render(
+      hbs`<HyperTable::CellRenderers::Text
+        @item={{this.item}}
+        @column={{this.column}}
+        @manager={{this.manager}}
+      />`
+    );
+
+    assert.dom().hasText('—');
+  });
+});