Add Glint support to the {{au-date-input}} modifier

Author: Windvis

addon/modifiers/au-date-input.js addon/modifiers/au-date-input.ts

@@ -1,34 +1,52 @@
+import { assert } from '@ember/debug';
+import { registerDestructor } from '@ember/destroyable';
+import type Owner from '@ember/owner';
+import Modifier, { type ArgsFor } from 'ember-modifier';
+import Inputmask from 'inputmask';
 import {
   toIsoDateString,
   isIsoDateString,
   isoDateToBelgianFormat,
-} from '@appuniversum/ember-appuniversum/utils/date';
-import { assert } from '@ember/debug';
-import { registerDestructor } from '@ember/destroyable';
-import Modifier from 'ember-modifier';
-import Inputmask from 'inputmask';
+} from '../utils/date';
+
+export interface AuDateInputModifierSignature {
+  Args: {
+    Named: {
+      value?: string | Date;
+      prefillYear?: boolean;
+      onChange?: (isoDate: string | null, date: Date | null) => void;
+    };
+  };
+  Element: HTMLInputElement;
+}
+
+type Signature = AuDateInputModifierSignature;
 
-export default class AuDateInputModifier extends Modifier {
-  input;
-  argValue;
-  argOnChange;
-  currentIsoDate;
+export default class AuDateInputModifier extends Modifier<Signature> {
+  input!: Signature['Element'];
+  argValue?: Signature['Args']['Named']['value'];
+  argOnChange?: Signature['Args']['Named']['onChange'];
+  currentIsoDate?: string | null;
 
-  constructor() {
-    super(...arguments);
+  constructor(owner: Owner, args: ArgsFor<Signature>) {
+    super(owner, args);
     registerDestructor(this, this.removeInputmask);
   }
 
   get isInitialized() {
     return Boolean(this.input);
   }
 
-  modify(input, positional, { value, onChange, prefillYear = false }) {
-    let valueHasChanged = this.argValue !== value;
+  modify(
+    input: Signature['Element'],
+    _positional: never,
+    { value, onChange, prefillYear = false }: Signature['Args']['Named'],
+  ) {
+    const valueHasChanged = this.argValue !== value;
 
     if (valueHasChanged || !this.isInitialized) {
       this.argValue = value;
-      let isoDate = ensureIsoDate(value);
+      const isoDate = ensureIsoDate(value);
       this.currentIsoDate = isoDate;
       input.value = isoDate ? isoDateToBelgianFormat(isoDate) : '';
     }
@@ -42,17 +60,17 @@ export default class AuDateInputModifier extends Modifier {
     }
   }
 
-  initialize(input, prefillYear) {
+  initialize(input: Signature['Element'], prefillYear?: boolean) {
     this.input = input;
 
-    let inputmask = new Inputmask({
+    const inputmask = new Inputmask({
       alias: 'datetime',
       inputFormat: 'dd-mm-yyyy',
       outputFormat: 'yyyy-mm-dd',
       placeholder: 'DD-MM-JJJJ',
       prefillYear,
       oncomplete: () => {
-        let isoDate = this.input.inputmask.unmaskedvalue();
+        const isoDate = this.input.inputmask!.unmaskedvalue();
 
         if (isoDate !== this.currentIsoDate) {
           this.currentIsoDate = isoDate;
@@ -70,7 +88,7 @@ export default class AuDateInputModifier extends Modifier {
     inputmask.mask(input);
   }
 
-  onChange(isoDate, date) {
+  onChange(isoDate: string | null, date: Date | null) {
     this.argOnChange?.(isoDate, date);
   }
 
@@ -79,7 +97,7 @@ export default class AuDateInputModifier extends Modifier {
   };
 }
 
-function ensureIsoDate(argValue) {
+function ensureIsoDate(argValue?: unknown): string | undefined {
   if (!argValue) {
     return;
   }

addon/template-registry.ts

@@ -1,3 +1,4 @@
+// Components
 import type AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
 import type AuApp from '@appuniversum/ember-appuniversum/components/au-app';
 import type AuBadge from '@appuniversum/ember-appuniversum/components/au-badge';
@@ -17,7 +18,11 @@ import type AuLink from '@appuniversum/ember-appuniversum/components/au-link';
 import type AuList from '@appuniversum/ember-appuniversum/components/au-list';
 import type AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
 
+// Modifiers
+import type AuDateInputModifier from '@appuniversum/ember-appuniversum/modifiers/au-date-input';
+
 export default interface AppuniversumRegistry {
+  // Components
   AuAlert: typeof AuAlert;
   AuApp: typeof AuApp;
   AuBadge: typeof AuBadge;
@@ -36,4 +41,7 @@ export default interface AppuniversumRegistry {
   AuLink: typeof AuLink;
   AuList: typeof AuList;
   AuLoader: typeof AuLoader;
+
+  // Modifiers
+  'au-date-input': typeof AuDateInputModifier;
 }

package-lock.json

@@ -127,6 +127,7 @@
     "@storybook/theming": "^6.5.7",
     "@testing-library/dom": "^9.3.1",
     "@tsconfig/ember": "^3.0.2",
+    "@types/inputmask": "^5.0.7",
     "@types/qunit": "^2.19.9",
     "@types/rsvp": "^4.0.8",
     "@typescript-eslint/eslint-plugin": "^6.14.0",

package.json

@@ -133,3 +133,15 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-loader]').exists();
   });
 });
+
+module('Integration | Modifier | Loose mode', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('`{{au-date-input}}` resolves in loose mode', async function (assert) {
+    await render(hbs`
+    <AuInput data-test-date-input {{au-date-input value="2023-02-02"}} />
+  `);
+
+    assert.dom('[data-test-date-input]').hasValue('02-02-2023');
+  });
+});

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

@@ -0,0 +1,87 @@
+import auDateInput from '@appuniversum/ember-appuniversum/modifiers/au-date-input';
+import { find } from '@ember/test-helpers';
+import {
+  typeIn,
+  fillIn,
+  render,
+  settled,
+  triggerKeyEvent,
+} from '@ember/test-helpers';
+import { tracked } from '@glimmer/tracking';
+import { setupRenderingTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+module('Integration | Modifier | au-date-input', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it accepts an iso date string or date object as a value', async function (assert) {
+    class TestState {
+      @tracked value?: string | Date;
+    }
+    const state = new TestState();
+    state.value = '2023-02-02';
+
+    await render(
+      <template><input {{auDateInput value=state.value}} /></template>,
+    );
+
+    assert.dom('input').hasValue('02-02-2023');
+
+    state.value = new Date(2024, 5, 3);
+    await settled();
+    assert.dom('input').hasValue('03-06-2024');
+
+    state.value = undefined;
+    await settled();
+    assert.dom('input').hasNoValue();
+  });
+
+  test('it calls @onChange with the correct date', async function (assert) {
+    const onChange = (isoDate: string | null, date: Date | null) => {
+      assert.step(isoDate!);
+      assert.step((date instanceof Date).toString());
+    };
+
+    await render(
+      <template><input {{auDateInput onChange=onChange}} /></template>,
+    );
+
+    await fillIn('input', '0202202');
+    await typeIn('input', '3'); // fillIn alone doesn't do the trick, but typeIn has issues when typing all the characters..
+
+    assert.verifySteps(
+      ['2023-02-02', 'true'],
+      '@onChange returns an iso string and date instance',
+    );
+  });
+
+  test('it calls @onChange with `null` if the input is cleared', async function (assert) {
+    const onChange = (isoDate: string | null, date: Date | null) => {
+      assert.step((isoDate === null).toString());
+      assert.step((date === null).toString());
+    };
+
+    await render(
+      <template>
+        <input {{auDateInput value="2023-02-02" onChange=onChange}} />
+      </template>,
+    );
+
+    const input = find('input');
+
+    await clearInput(input!);
+    assert.verifySteps(
+      ['true', 'true'],
+      '`@onChange` returns `null` if the input is cleared',
+    );
+  });
+});
+
+async function clearInput(input: HTMLInputElement) {
+  // Focus seems to be needed to make the backspace work
+  input.focus();
+
+  while (input.value.length > 0) {
+    await triggerKeyEvent(input, 'keydown', 'Backspace');
+  }
+}