Add Glint support to the AuTextarea component

addon/components/au-textarea.gjs → addon/components/au-textarea.gts

@@ -1,6 +1,19 @@
 import Component from '@glimmer/component';
 
-export default class AuTextarea extends Component {
+export interface AuTextareaSignature {
+  Args: {
+    disabled?: boolean;
+    error?: boolean;
+    warning?: boolean;
+    width?: 'block';
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLTextAreaElement;
+}
+
+export default class AuTextarea extends Component<AuTextareaSignature> {
   get width() {
     if (this.args.width == 'block') return 'au-c-textarea--block';
     else return '';

addon/template-registry.ts

@@ -39,6 +39,7 @@ import type AuRadioGroup from '@appuniversum/ember-appuniversum/components/au-ra
 import type AuRadio from '@appuniversum/ember-appuniversum/components/au-radio';
 import type AuTable from '@appuniversum/ember-appuniversum/components/au-table';
 import type AuTabs from '@appuniversum/ember-appuniversum/components/au-tabs';
+import type AuTextarea from '@appuniversum/ember-appuniversum/components/au-textarea';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -86,6 +87,7 @@ export default interface AppuniversumRegistry {
   AuRadio: typeof AuRadio;
   AuTable: typeof AuTable;
   AuTabs: typeof AuTabs;
+  AuTextarea: typeof AuTextarea;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers

tests/integration/components/au-textarea-test.gts

@@ -0,0 +1,73 @@
+import AuTextarea from '@appuniversum/ember-appuniversum/components/au-textarea';
+import { on } from '@ember/modifier';
+import { fillIn, render, settled } from '@ember/test-helpers';
+import { tracked } from '@glimmer/tracking';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | au-textarea', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it can be disabled', async function (assert) {
+    const state = new TestState();
+    state.isDisabled = true;
+    await render(
+      <template><AuTextarea @disabled={{state.isDisabled}} /></template>,
+    );
+
+    assert.dom('textarea').isDisabled();
+
+    state.isDisabled = false;
+    await settled();
+    assert.dom('textarea').isNotDisabled();
+  });
+
+  test('it supports the `value` attribute', async function (assert) {
+    const state = new TestState();
+
+    const handleChange = (event: Event) => {
+      state.value = (event.target as HTMLTextAreaElement).value;
+    };
+
+    await render(
+      <template>
+        <AuTextarea value={{state.value}} {{on "change" handleChange}} />
+      </template>,
+    );
+    assert.dom('textarea').hasNoValue();
+
+    state.value = 'foo';
+    await settled();
+    assert.dom('textarea').hasValue('foo');
+
+    await fillIn('textarea', 'bar');
+    assert.strictEqual(state.value, 'bar');
+  });
+
+  test('it supports updating the value through the block contents', async function (assert) {
+    const state = new TestState();
+    const handleChange = (event: Event) => {
+      state.value = (event.target as HTMLTextAreaElement).value;
+    };
+
+    await render(
+      <template>
+        <AuTextarea {{on "change" handleChange}}>{{state.value}}</AuTextarea>
+      </template>,
+    );
+    assert.dom('textarea').hasNoValue();
+
+    state.value = 'foo';
+    await settled();
+    assert.dom('textarea').hasValue('foo');
+
+    await fillIn('textarea', 'bar');
+    assert.dom('textarea').hasValue('bar');
+    assert.strictEqual(state.value, 'bar');
+  });
+});
+
+class TestState {
+  @tracked isDisabled?: boolean;
+  @tracked value?: string = '';
+}

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

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