chore: Add keyboard tests for phone input

apps/ember-test-app/tests/integration/components/form/phone-field-test.gts

@@ -1,4 +1,4 @@
-import { fillIn, render, settled } from '@ember/test-helpers';
+import { fillIn, render, settled, click } from '@ember/test-helpers';
 import { tracked } from '@glimmer/tracking';
 import PhoneField from '@nrg-ui/ember/components/form/phone-field';
 import bind from '@nrg-ui/ember/helpers/bind';
@@ -10,6 +10,41 @@ class Model {
   value: string = '';
 }
 
+async function clickAt(element: HTMLInputElement, position: number) {
+  element.setSelectionRange(position, position);
+  await click(element);
+}
+
+async function simulateBackspace(element: HTMLInputElement) {
+  const cursorPosition = element.selectionStart ?? -1;
+  const value = element.value;
+  element.value =
+    value.slice(0, cursorPosition - 1) + value.slice(cursorPosition);
+  element.setSelectionRange(cursorPosition - 1, cursorPosition - 1);
+  element.dispatchEvent(
+    new InputEvent('input', {
+      key: 'Backspace',
+      inputType: 'deleteContentBackward',
+    }),
+  );
+  await settled();
+}
+
+async function simulateDelete(element: HTMLInputElement) {
+  const cursorPosition = element.selectionStart ?? -1;
+  const value = element.value;
+  element.value =
+    value.slice(0, cursorPosition) + value.slice(cursorPosition + 1);
+  element.setSelectionRange(cursorPosition, cursorPosition);
+  element.dispatchEvent(
+    new InputEvent('input', {
+      key: 'Delete',
+      inputType: 'deleteContentForward',
+    }),
+  );
+  await settled();
+}
+
 module('Integration | Component | form/phone-field', function (hooks) {
   setupRenderingTest(hooks);
 
@@ -83,4 +118,94 @@ module('Integration | Component | form/phone-field', function (hooks) {
     await settled();
     assert.dom('input').hasValue('+1 (123) 456-7890');
   });
+
+  test('it allows for backspacing from end of string', async function (assert) {
+    const model = new Model();
+    model.value = '11234567890';
+    await render(<template>
+      <PhoneField @binding={{bind model "value"}} />
+    </template>);
+    const element = this.element.querySelector('input') as HTMLInputElement;
+    await clickAt(element, element.value.length);
+    for (let i = 0; i < 4; i++) {
+      await simulateBackspace(element);
+    }
+    assert.strictEqual(model.value, '1123456');
+    for (let i = 0; i < 3; i++) {
+      await simulateBackspace(element);
+    }
+    assert.strictEqual(model.value, '1123');
+    for (let i = 0; i < 3; i++) {
+      await simulateBackspace(element);
+    }
+    assert.strictEqual(model.value, '1');
+  });
+
+  test('it allows for deleting from beginning of string', async function (assert) {
+    const model = new Model();
+    model.value = '1234567890123';
+    await render(<template>
+      <PhoneField @binding={{bind model "value"}} />
+    </template>);
+    const element = this.element.querySelector('input') as HTMLInputElement;
+    await clickAt(element, 0);
+    for (let i = 0; i < 4; i++) {
+      await simulateDelete(element);
+    }
+    assert.strictEqual(model.value, '567890123');
+    for (let i = 0; i < 3; i++) {
+      await simulateDelete(element);
+    }
+    assert.strictEqual(model.value, '890123');
+    for (let i = 0; i < 3; i++) {
+      await simulateDelete(element);
+    }
+    assert.strictEqual(model.value, '123');
+    for (let i = 0; i < 3; i++) {
+      await simulateDelete(element);
+    }
+    assert.strictEqual(model.value, '');
+  });
+
+  test('it allows for backspacing from after special characters', async function (assert) {
+    const model = new Model();
+    model.value = '1234567890123';
+    await render(<template>
+      <PhoneField @binding={{bind model "value"}} />
+    </template>);
+    const element = this.element.querySelector('input') as HTMLInputElement;
+    await clickAt(element, 11);
+    await simulateBackspace(element);
+    assert.strictEqual(model.value, '123457890123');
+    assert.strictEqual(element.selectionStart, 10);
+
+    await simulateBackspace(element);
+    await simulateBackspace(element);
+    assert.strictEqual(model.value, '1237890123');
+    assert.strictEqual(element.selectionStart, 6);
+
+    await simulateBackspace(element);
+    await simulateBackspace(element);
+    await simulateBackspace(element);
+    assert.strictEqual(model.value, '7890123');
+    assert.strictEqual(element.selectionStart, 0);
+  });
+
+  test('it allows for deleting from before special characters', async function (assert) {
+    const model = new Model();
+    model.value = '1234567890123';
+    await render(<template>
+      <PhoneField @binding={{bind model "value"}} />
+    </template>);
+    const element = this.element.querySelector('input') as HTMLInputElement;
+    await clickAt(element, 4);
+    await simulateDelete(element);
+    assert.strictEqual(model.value, '123567890123');
+    assert.strictEqual(element.selectionStart, 6);
+
+    await clickAt(element, 0);
+    await simulateDelete(element);
+    assert.strictEqual(model.value, '23567890123');
+    assert.strictEqual(element.selectionStart, 1);
+  });
 });