Add Glint support to the AuTable component

Author: Windvis

addon/components/au-table.gjs addon/components/au-table.gts

@@ -1,6 +1,19 @@
 import Component from '@glimmer/component';
 
-export default class AuTable extends Component {
+export interface AuTableSignature {
+  Args: {
+    size?: 'small';
+  };
+  Blocks: {
+    body: [];
+    footer: [];
+    header: [];
+    title: [];
+  };
+  Element: HTMLTableElement;
+}
+
+export default class AuTable extends Component<AuTableSignature> {
   get size() {
     if (this.args.size == 'small') return 'au-c-table--small';
     else return '';

addon/template-registry.ts

@@ -37,6 +37,7 @@ import type AuPanel from '@appuniversum/ember-appuniversum/components/au-panel';
 import type AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
 import type AuRadioGroup from '@appuniversum/ember-appuniversum/components/au-radio-group';
 import type AuRadio from '@appuniversum/ember-appuniversum/components/au-radio';
+import type AuTable from '@appuniversum/ember-appuniversum/components/au-table';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -82,6 +83,7 @@ export default interface AppuniversumRegistry {
   AuPill: typeof AuPill;
   AuRadioGroup: typeof AuRadioGroup;
   AuRadio: typeof AuRadio;
+  AuTable: typeof AuTable;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers

tests/integration/components/au-table-test.js tests/integration/components/au-table-test.gts

@@ -1,7 +1,7 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
+import AuTable from '@appuniversum/ember-appuniversum/components/au-table';
 import { render } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
 
 const TABLE = {
   TABLE: '[data-test-table]',
@@ -15,26 +15,24 @@ module('Integration | Component | au-table', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it has optional named blocks', async function (assert) {
-    await render(hbs`
-      <AuTable>
-        default block content
-      </AuTable>
-    `);
+    await render(<template><AuTable /></template>);
 
     assert.dom(TABLE.TABLE).hasNoText();
     assert.dom(TABLE.TITLE).doesNotExist();
     assert.dom(TABLE.HEADER).doesNotExist();
     assert.dom(TABLE.BODY).doesNotExist();
     assert.dom(TABLE.FOOTER).doesNotExist();
 
-    await render(hbs`
-      <AuTable>
-        <:title>Title</:title>
-        <:header>Header</:header>
-        <:body>Body</:body>
-        <:footer>Footer</:footer>
-      </AuTable>
-    `);
+    await render(
+      <template>
+        <AuTable>
+          <:title>Title</:title>
+          <:header>Header</:header>
+          <:body>Body</:body>
+          <:footer>Footer</:footer>
+        </AuTable>
+      </template>,
+    );
 
     assert.dom(TABLE.TITLE).hasText('Title');
     assert.dom(TABLE.HEADER).hasText('Header');
@@ -43,11 +41,7 @@ module('Integration | Component | au-table', function (hooks) {
   });
 
   test('it accepts extra html attributes', async function (assert) {
-    await render(hbs`
-      <AuTable class="test">
-        default block content
-      </AuTable>
-    `);
+    await render(<template><AuTable class="test" /></template>);
 
     assert.dom(TABLE.TABLE).hasClass('test');
   });

tests/integration/components/loose-mode-test.ts

@@ -269,6 +269,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-radio]').exists();
   });
 
+  test('`<AuTable>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuTable data-test-table />
+    `);
+    assert.dom('[data-test-table]').exists();
+  });
+
   test('`<AuToolbar>` resolves in loose mode', async function (assert) {
     await render(hbs`
       <AuToolbar data-test-toolbar></AuToolbar>