From d5d2ce21dfc5f3587ab59f4e5446f672ab57c585 Mon Sep 17 00:00:00 2001 From: Sam Van Campenhout Date: Thu, 4 Apr 2024 11:00:57 +0200 Subject: [PATCH] Add Glint support to the `AuTextarea` component --- .../{au-textarea.gjs => au-textarea.gts} | 15 +++- addon/template-registry.ts | 2 + .../components/au-textarea-test.gts | 73 +++++++++++++++++++ .../components/au-textarea-test.js | 55 -------------- .../integration/components/loose-mode-test.ts | 7 ++ 5 files changed, 96 insertions(+), 56 deletions(-) rename addon/components/{au-textarea.gjs => au-textarea.gts} (71%) create mode 100644 tests/integration/components/au-textarea-test.gts delete mode 100644 tests/integration/components/au-textarea-test.js diff --git a/addon/components/au-textarea.gjs b/addon/components/au-textarea.gts similarity index 71% rename from addon/components/au-textarea.gjs rename to addon/components/au-textarea.gts index c1dcfa4d8..431531f4d 100644 --- a/addon/components/au-textarea.gjs +++ b/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 { get width() { if (this.args.width == 'block') return 'au-c-textarea--block'; else return ''; diff --git a/addon/template-registry.ts b/addon/template-registry.ts index a2900c0f0..01977efca 100644 --- a/addon/template-registry.ts +++ b/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 diff --git a/tests/integration/components/au-textarea-test.gts b/tests/integration/components/au-textarea-test.gts new file mode 100644 index 000000000..7da8ae8ee --- /dev/null +++ b/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( + , + ); + + 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( + , + ); + 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( + , + ); + 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 = ''; +} diff --git a/tests/integration/components/au-textarea-test.js b/tests/integration/components/au-textarea-test.js deleted file mode 100644 index eb42326aa..000000000 --- a/tests/integration/components/au-textarea-test.js +++ /dev/null @@ -1,55 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { fillIn, render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | au-textarea', function (hooks) { - setupRenderingTest(hooks); - - test('it can be disabled', async function (assert) { - this.isDisabled = true; - await render(hbs``); - - assert.dom('textarea').isDisabled(); - - this.set('isDisabled', false); - assert.dom('textarea').isNotDisabled(); - }); - - test('it supports the `value` attribute', async function (assert) { - this.value = ''; - this.handleChange = (event) => { - this.set('value', event.target.value); - }; - - await render( - hbs``, - ); - assert.dom('textarea').hasNoValue(); - - this.set('value', 'foo'); - assert.dom('textarea').hasValue('foo'); - - await fillIn('textarea', 'bar'); - assert.strictEqual(this.value, 'bar'); - }); - - test('it supports updating the value through the block contents', async function (assert) { - this.value = ''; - this.handleChange = (event) => { - this.value = event.target.value; - }; - - await render( - hbs`{{this.value}}`, - ); - assert.dom('textarea').hasNoValue(); - - this.set('value', 'foo'); - assert.dom('textarea').hasValue('foo'); - - await fillIn('textarea', 'bar'); - assert.dom('textarea').hasValue('bar'); - assert.strictEqual(this.value, 'bar'); - }); -}); diff --git a/tests/integration/components/loose-mode-test.ts b/tests/integration/components/loose-mode-test.ts index f53b76097..e71c66c6d 100644 --- a/tests/integration/components/loose-mode-test.ts +++ b/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('`` resolves in loose mode', async function (assert) { + await render(hbs` + + `); + assert.dom('[data-test-textarea]').exists(); + }); + test('`` resolves in loose mode', async function (assert) { await render(hbs`