Add Glint support to the AuRadioGroup component

Author: Windvis

addon/components/au-radio-group.gjs addon/components/au-radio-group.gts

@@ -1,12 +1,34 @@
-import { AuRadio } from '@appuniversum/ember-appuniversum';
 import { hash } from '@ember/helper';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
+import type { WithBoundArgs } from '@glint/template';
+import AuRadio, { type AuRadioSignature } from './au-radio';
 
 // TODO: replace these with the named imports from ember-truth-helpers v4 once our dependencies support that version
 import or from 'ember-truth-helpers/helpers/or';
 
-export default class AuRadioGroup extends Component {
+export interface AuRadioGroupSignature {
+  Args: {
+    alignment?: 'inline';
+    disabled?: AuRadioSignature['Args']['disabled'];
+    name?: AuRadioSignature['Args']['name'];
+    onChange?: AuRadioSignature['Args']['onChangeGroup'];
+    selected?: AuRadioSignature['Args']['groupValue'];
+  };
+  Blocks: {
+    default: [
+      {
+        Radio: WithBoundArgs<
+          typeof AuRadio,
+          'name' | 'inGroup' | 'groupValue' | 'disabled' | 'onChangeGroup'
+        >;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuRadioGroup extends Component<AuRadioGroupSignature> {
   uniqueName = guidFor(this);
 
   get alignmentClass() {

addon/template-registry.ts

@@ -35,6 +35,7 @@ import type AuModal from '@appuniversum/ember-appuniversum/components/au-modal';
 import type AuNavigationLink from '@appuniversum/ember-appuniversum/components/au-navigation-link';
 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 AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
@@ -79,6 +80,7 @@ export default interface AppuniversumRegistry {
   AuNavigationLink: typeof AuNavigationLink;
   AuPanel: typeof AuPanel;
   AuPill: typeof AuPill;
+  AuRadioGroup: typeof AuRadioGroup;
   AuRadio: typeof AuRadio;
   AuToolbar: typeof AuToolbar;
 

tests/integration/components/au-radio-group-test.gts

@@ -0,0 +1,112 @@
+import AuRadioGroup from '@appuniversum/ember-appuniversum/components/au-radio-group';
+import { settled } from '@ember/test-helpers';
+import { click, render } from '@ember/test-helpers';
+import { tracked } from '@glimmer/tracking';
+import { setupRenderingTest } from 'dummy/tests/helpers';
+import { module, test } from 'qunit';
+
+module('Integration | Component | au-radio-group', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it can be given a name', async function (assert) {
+    await render(
+      <template>
+        <AuRadioGroup @name="foo" as |Group|>
+          <Group.Radio data-test-foo>Foo</Group.Radio>
+        </AuRadioGroup>
+      </template>,
+    );
+    assert.dom('[data-test-foo]').hasAttribute('name', 'foo');
+  });
+
+  test('if it is given no name, it will automatically generate a unique name', async function (assert) {
+    await render(
+      <template>
+        <AuRadioGroup as |Group|>
+          <Group.Radio data-test-foo>Foo</Group.Radio>
+        </AuRadioGroup>
+      </template>,
+    );
+    assert.dom('[data-test-foo]').hasAttribute('name');
+  });
+
+  test('it can be given a value', async function (assert) {
+    const state = new TestState();
+    state.value = 'bar';
+
+    await render(
+      <template>
+        <AuRadioGroup @selected={{state.value}} as |Group|>
+          <Group.Radio @value="foo" data-test-foo>Foo</Group.Radio>
+          <Group.Radio @value="bar" data-test-bar>Bar</Group.Radio>
+        </AuRadioGroup>
+      </template>,
+    );
+
+    assert.dom('[data-test-bar]').isChecked();
+    assert.dom('[data-test-foo]').isNotChecked();
+
+    state.value = 'foo';
+    await settled();
+    assert.dom('[data-test-bar]').isNotChecked();
+    assert.dom('[data-test-foo]').isChecked();
+  });
+
+  test('it can be disabled', async function (assert) {
+    const state = new TestState();
+    state.disabled = true;
+    await render(
+      <template>
+        <AuRadioGroup @disabled={{state.disabled}} as |Group|>
+          <Group.Radio data-test-foo>Foo</Group.Radio>
+        </AuRadioGroup>
+      </template>,
+    );
+
+    assert.dom('[data-test-foo]').isDisabled();
+
+    state.disabled = false;
+    await settled();
+    assert.dom('[data-test-foo]').isNotDisabled();
+  });
+
+  test('it calls the provided @onChange action when its state changes by user input', async function (assert) {
+    let currentValue: string | undefined;
+
+    const handleChange = (value: string | undefined, event: Event) => {
+      currentValue = value;
+      assert.true(event instanceof Event);
+    };
+
+    await render(
+      <template>
+        <AuRadioGroup @onChange={{handleChange}} as |Group|>
+          <Group.Radio @value="foo" data-test-foo>Foo</Group.Radio>
+          <Group.Radio @value="bar" data-test-bar>Bar</Group.Radio>
+        </AuRadioGroup>
+      </template>,
+    );
+
+    await click('[data-test-bar]');
+    assert.strictEqual(currentValue, 'bar');
+
+    await click('[data-test-foo]');
+    assert.strictEqual(currentValue, 'foo');
+  });
+
+  test('it adds any extra attributes to the group element', async function (assert) {
+    await render(
+      <template>
+        <AuRadioGroup foo="bar" data-test-radio-group as |Group|>
+          <Group.Radio>Foo</Group.Radio>
+        </AuRadioGroup>
+      </template>,
+    );
+    assert.dom('[data-test-radio-group]').hasAttribute('foo', 'bar');
+  });
+});
+
+class TestState {
+  @tracked disabled?: boolean;
+  @tracked value?: string;
+}

tests/integration/components/au-radio-group-test.js

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