Merge pull request #471 from appuniversum/chore/more-gts

More Glint / TS conversion

addon/components/au-form-row.gjs → addon/components/au-form-row.gts

@@ -1,6 +1,16 @@
 import Component from '@glimmer/component';
 
-export default class AuFormRow extends Component {
+export interface AuFormRowSignature {
+  Args: {
+    alignment?: 'inline' | 'pre' | 'post';
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuFormRow extends Component<AuFormRowSignature> {
   get alignment() {
     if (this.args.alignment == 'inline') return 'au-c-form-row--inline';
     if (this.args.alignment == 'pre')

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

@@ -3,7 +3,18 @@ import Component from '@glimmer/component';
 // TODO: replace these with the named imports from ember-truth-helpers v4 once our dependencies support that version
 import eq from 'ember-truth-helpers/helpers/eq';
 
-export default class AuHeading extends Component {
+export interface AuHeadingSignature {
+  Args: {
+    level?: '1' | '2' | '3' | '4' | '5' | '6';
+    skin?: '1' | '2' | '3' | '4' | '5' | '6' | 'functional';
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLHeadingElement;
+}
+
+export default class AuHeading extends Component<AuHeadingSignature> {
   get skin() {
     if (this.args.skin == '1') return 'au-c-heading--1';
     if (this.args.skin == '2') return 'au-c-heading--2';

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';

addon/template-registry.ts

@@ -13,6 +13,9 @@ import type AuCheckboxGroup from '@appuniversum/ember-appuniversum/components/au
 import type AuContentHeader from '@appuniversum/ember-appuniversum/components/au-content-header';
 import type AuContent from '@appuniversum/ember-appuniversum/components/au-content';
 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';
@@ -41,6 +44,9 @@ export default interface AppuniversumRegistry {
   AuContentHeader: typeof AuContentHeader;
   AuContent: typeof AuContent;
   AuDateInput: typeof AuDateInput;
+  AuFormRow: typeof AuFormRow;
+  AuHeading: typeof AuHeading;
+  AuHelpText: typeof AuHelpText;
   AuHr: typeof AuHr;
   AuIcon: typeof AuIcon;
   AuInput: typeof AuInput;

tests/integration/components/au-form-row-test.gts

@@ -0,0 +1,18 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
+
+module('Integration | Component | au-form-row', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it accepts block content', async function (assert) {
+    await render(
+      <template>
+        <AuFormRow data-test-form-row>Form row</AuFormRow>
+      </template>,
+    );
+
+    assert.dom('[data-test-form-row]').hasText('Form row');
+  });
+});

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

@@ -0,0 +1,82 @@
+import AuHeading, {
+  type AuHeadingSignature,
+} from '@appuniversum/ember-appuniversum/components/au-heading';
+import { settled } from '@ember/test-helpers';
+import { render } from '@ember/test-helpers';
+import { tracked } from '@glimmer/tracking';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Component | au-heading', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it accepts block content and extra attributes', async function (assert) {
+    await render(
+      <template>
+        <AuHeading data-test-heading>
+          Some title
+        </AuHeading>
+      </template>,
+    );
+
+    assert.dom('[data-test-heading]').hasText('Some title');
+  });
+
+  test('it defaults to a h1 element', async function (assert) {
+    await render(
+      <template>
+        <AuHeading>
+          Some title
+        </AuHeading>
+      </template>,
+    );
+
+    assert.dom('h1').exists('it defaults to h1');
+  });
+
+  test('it has a `@level` argument that can be used to set the h* element', async function (assert) {
+    class TestState {
+      @tracked level?: AuHeadingSignature['Args']['level'];
+    }
+
+    const state = new TestState();
+    state.level = '1';
+
+    await render(
+      <template>
+        <AuHeading @level={{state.level}}>
+          Some title
+        </AuHeading>
+      </template>,
+    );
+
+    assert.dom('h1').exists();
+
+    state.level = '2';
+    await settled();
+    assert.dom('h2').exists();
+
+    state.level = '3';
+    await settled();
+    assert.dom('h3').exists();
+
+    state.level = '4';
+    await settled();
+    assert.dom('h4').exists();
+
+    state.level = '5';
+    await settled();
+    assert.dom('h5').exists();
+
+    state.level = '6';
+    await settled();
+    assert.dom('h6').exists();
+
+    // @ts-expect-error: invalid level values are possible in projects that don't use Glint
+    state.level = 'invalid level';
+    await settled();
+    assert
+      .dom('h1')
+      .exists('it falls back to h1 if the level value is invalid');
+  });
+});

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');
+  });
+});

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

@@ -107,6 +107,26 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-date-input]').exists();
   });
 
+  test('`<AuFormRow>` resolves in loose mode', async function (assert) {
+    await render(hbs`<AuFormRow data-test-form-row />`);
+
+    assert.dom('[data-test-form-row]').exists();
+  });
+
+  test('`<AuHeading>` resolves in loose mode', async function (assert) {
+    await render(hbs`<AuHeading data-test-heading>Some title</AuHeading>`);
+
+    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 />`);