Add Glint support to the AuHelpText component

appuniversum · Feb 20, 2024 · 0f76dfd · 0f76dfd
1 parent d3446a1
commit 0f76dfd
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 27 deletions.
diff --git a/addon/components/au-help-text.gjs → addon/components/au-help-text.gts b/addon/components/au-help-text.gjs → addon/components/au-help-text.gts
@@ -1,6 +1,19 @@
 import Component from '@glimmer/component';
 
-export default class AuHelpText extends Component {
+export interface AuHelpTextSignature {
+  Args: {
+    skin?: 'secondary' | 'tertiary';
+    size?: 'normal' | 'large';
+    error?: boolean;
+    warning?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLSpanElement;
+}
+
+export default class AuHelpText extends Component<AuHelpTextSignature> {
   get skin() {
     if (this.args.skin == 'secondary') return 'au-c-help-text--secondary';
     if (this.args.skin == 'tertiary') return 'au-c-help-text--tertiary';

diff --git a/addon/template-registry.ts b/addon/template-registry.ts
@@ -15,6 +15,7 @@ import type AuContent from '@appuniversum/ember-appuniversum/components/au-conte
 import type AuDateInput from '@appuniversum/ember-appuniversum/components/au-date-input';
 import type AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
 import type AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
+import type AuHelpText from '@appuniversum/ember-appuniversum/components/au-help-text';
 import type AuHr from '@appuniversum/ember-appuniversum/components/au-hr';
 import type AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
 import type AuInput from '@appuniversum/ember-appuniversum/components/au-input';
@@ -45,6 +46,7 @@ export default interface AppuniversumRegistry {
   AuDateInput: typeof AuDateInput;
   AuFormRow: typeof AuFormRow;
   AuHeading: typeof AuHeading;
+  AuHelpText: typeof AuHelpText;
   AuHr: typeof AuHr;
   AuIcon: typeof AuIcon;
   AuInput: typeof AuInput;

diff --git a/tests/integration/components/au-help-text-test.gts b/tests/integration/components/au-help-text-test.gts
@@ -0,0 +1,20 @@
+import AuHelpText from '@appuniversum/ember-appuniversum/components/au-help-text';
+import { render } from '@ember/test-helpers';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | au-help-text', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it accepts block content and extra attributes', async function (assert) {
+    await render(
+      <template>
+        <AuHelpText data-test-help-text>
+          Some help text
+        </AuHelpText>
+      </template>,
+    );
+
+    assert.dom('[data-test-help-text]').hasText('Some help text');
+  });
+});
diff --git a/tests/integration/components/au-help-text-test.js b/tests/integration/components/au-help-text-test.js
diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts
@@ -119,6 +119,14 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-heading]').exists();
   });
 
+  test('`<AuHelpText>` resolves in loose mode', async function (assert) {
+    await render(
+      hbs`<AuHelpText data-test-help-text>Some help text</AuHelpText>`,
+    );
+
+    assert.dom('[data-test-help-text]').exists();
+  });
+
   test('`<AuHr>` resolves in loose mode', async function (assert) {
     await render(hbs`<AuHr data-test-hr />`);