fix: type with empty value should clear the input (#50)

Author: timdeschryver

projects/testing-library/src/lib/user-events/type.ts

@@ -40,7 +40,7 @@ export function createType(fireEvent: FireFunction & FireObject) {
     const { allAtOnce = false, delay = 0 } = options || {};
     const initialValue = (element as HTMLInputElement).value;
 
-    if (allAtOnce) {
+    if (allAtOnce || value === '') {
       fireEvent.input(element, { target: { value } });
       element.addEventListener('blur', createFireChangeEvent(initialValue));
       return;

projects/testing-library/tests/user-events/type.spec.ts

@@ -178,7 +178,7 @@ describe('options', () => {
   });
 });
 
-test('should not type when event.preventDefault() is called', async () => {
+test('does not type when event.preventDefault() is called', async () => {
   @Component({
     selector: 'fixture',
     template: `
@@ -219,3 +219,27 @@ test('should not type when event.preventDefault() is called', async () => {
 
   expect(inputControl.value).toBe('');
 });
+
+test('can clear an input field', async () => {
+  @Component({
+    selector: 'fixture',
+    template: `
+      <input type="text" data-testid="input" [value]="initialValue" />
+    `,
+  })
+  class FixtureComponent {
+    @Input() initialValue = '';
+  }
+
+  const component = await render(FixtureComponent, {
+    componentProperties: {
+      initialValue: 'an initial value',
+    },
+  });
+
+  const inputControl = component.getByTestId('input') as HTMLInputElement;
+  expect(inputControl.value).toBe('an initial value');
+
+  component.type(inputControl, '');
+  expect(inputControl.value).toBe('');
+});