tests

Author: mmalerba

.github/CODEOWNERS

@@ -59,7 +59,7 @@
 /src/cdk/bidi/**                                   @jelbourn
 /src/cdk/coercion/**                               @jelbourn
 /src/cdk/collections/**                            @jelbourn @crisbeto @andrewseguin
-/src/cdl/input/**                                  @mmalerba
+/src/cdk/input/**                                  @mmalerba
 /src/cdk/keycodes/**                               @jelbourn
 /src/cdk/layout/**                                 @josephperrott
 /src/cdk/observers/**                              @jelbourn @crisbeto

src/cdk/input/_autofill.scss

@@ -16,9 +16,9 @@
 // Used to generate UIDs for keyframes used to change the input autofill styles.
 $cdk-input-autofill-color-frame-count: 0;
 
-// Mixin used to apply custom background and foreground colors to an autofilled input.
-// Based on:
-// https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete#answer-37432260
+// Mixin used to apply custom background and foreground colors to an autofilled input. Based on:
+// https://stackoverflow.com/questions/2781549/
+// removing-input-background-colour-for-chrome-autocomplete#answer-37432260
 @mixin cdk-input-autofill-color($background, $foreground:'') {
   @keyframes cdk-input-autofill-color-#{$cdk-input-autofill-color-frame-count} {
     to {
@@ -27,11 +27,14 @@ $cdk-input-autofill-color-frame-count: 0;
     }
   }
 
-  &:-webkit-autofill,
+  &:-webkit-autofill {
+    animation-name: cdk-input-autofill-color-#{$cdk-input-autofill-color-frame-count};
+    animation-fill-mode: both;
+  }
+
   &.cdk-input-autofill-monitored:-webkit-autofill {
     animation-name: cdk-input-autofill-start,
                     cdk-input-autofill-color-#{$cdk-input-autofill-color-frame-count};
-    animation-fill-mode: both;
   }
 
   $cdk-input-autofill-color-frame-count: $cdk-input-autofill-color-frame-count + 1 !global;

src/cdk/input/autofill.spec.ts

@@ -0,0 +1,186 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import {AutofillEvent, AutofillMonitor} from './autofill';
+import {InputModule} from './input-module';
+import {empty as observableEmpty} from 'rxjs/observable/empty';
+
+describe('AutofillMonitor', () => {
+  let autofillMonitor: AutofillMonitor;
+  let fixture: ComponentFixture<Inputs>;
+  let testComponent: Inputs;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [InputModule],
+      declarations: [Inputs],
+    }).compileComponents();
+  });
+
+  beforeEach(inject([AutofillMonitor], (afm: AutofillMonitor) => {
+    autofillMonitor = afm;
+    fixture = TestBed.createComponent(Inputs);
+    testComponent = fixture.componentInstance;
+
+    for (const input of [testComponent.input1, testComponent.input2, testComponent.input3]) {
+      spyOn(input.nativeElement, 'addEventListener');
+      spyOn(input.nativeElement, 'removeEventListener');
+    }
+
+    fixture.detectChanges();
+  }));
+
+  afterEach(() => {
+    // Call destroy to make sure we clean up all listeners.
+    autofillMonitor.ngOnDestroy();
+  });
+
+  it('should add monitored class and listener upon monitoring', () => {
+    const inputEl = testComponent.input1.nativeElement;
+    expect(inputEl.addEventListener).not.toHaveBeenCalled();
+
+    autofillMonitor.monitor(inputEl);
+    expect(inputEl.classList).toContain('cdk-input-autofill-monitored');
+    expect(inputEl.addEventListener).toHaveBeenCalledWith('animationstart', jasmine.any(Function));
+  });
+
+  it('should not add multiple listeners to the same element', () => {
+    const inputEl = testComponent.input1.nativeElement;
+    expect(inputEl.addEventListener).not.toHaveBeenCalled();
+
+    autofillMonitor.monitor(inputEl);
+    autofillMonitor.monitor(inputEl);
+    expect(inputEl.addEventListener).toHaveBeenCalledTimes(1);
+  });
+
+  it('should remove monitored class and listener upon stop monitoring', () => {
+    const inputEl = testComponent.input1.nativeElement;
+    autofillMonitor.monitor(inputEl);
+    expect(inputEl.classList).toContain('cdk-input-autofill-monitored');
+    expect(inputEl.removeEventListener).not.toHaveBeenCalled();
+
+    autofillMonitor.stopMonitoring(inputEl);
+    expect(inputEl.classList).not.toContain('cdk-input-autofill-monitored');
+    expect(inputEl.removeEventListener)
+        .toHaveBeenCalledWith('animationstart', jasmine.any(Function));
+  });
+
+  it('should stop monitoring all monitored elements upon destroy', () => {
+    const inputEl1 = testComponent.input1.nativeElement;
+    const inputEl2 = testComponent.input2.nativeElement;
+    const inputEl3 = testComponent.input3.nativeElement;
+    autofillMonitor.monitor(inputEl1);
+    autofillMonitor.monitor(inputEl2);
+    autofillMonitor.monitor(inputEl3);
+    expect(inputEl1.removeEventListener).not.toHaveBeenCalled();
+    expect(inputEl2.removeEventListener).not.toHaveBeenCalled();
+    expect(inputEl3.removeEventListener).not.toHaveBeenCalled();
+
+    autofillMonitor.ngOnDestroy();
+    expect(inputEl1.removeEventListener).toHaveBeenCalled();
+    expect(inputEl2.removeEventListener).toHaveBeenCalled();
+    expect(inputEl3.removeEventListener).toHaveBeenCalled();
+  });
+
+  it('should emit and add filled class upon start animation', () => {
+    const inputEl = testComponent.input1.nativeElement;
+    let animationStartCallback: Function = () => {};
+    let autofillStreamEvent: AutofillEvent | null = null;
+    inputEl.addEventListener.and.callFake((_, cb) => animationStartCallback = cb);
+    const autofillStream = autofillMonitor.monitor(inputEl);
+    autofillStream.subscribe(event => autofillStreamEvent = event);
+    expect(autofillStreamEvent).toBeNull();
+    expect(inputEl.classList).not.toContain('cdk-input-autofilled');
+
+    animationStartCallback({animationName: 'cdk-input-autofill-start', target: inputEl});
+    expect(inputEl.classList).toContain('cdk-input-autofilled');
+    expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: true} as any);
+  });
+
+  it('should emit and remove filled class upon end animation', () => {
+    const inputEl = testComponent.input1.nativeElement;
+    let animationStartCallback: Function = () => {};
+    let autofillStreamEvent: AutofillEvent | null = null;
+    inputEl.addEventListener.and.callFake((_, cb) => animationStartCallback = cb);
+    const autofillStream = autofillMonitor.monitor(inputEl);
+    autofillStream.subscribe(event => autofillStreamEvent = event);
+    animationStartCallback({animationName: 'cdk-input-autofill-start', target: inputEl});
+    expect(inputEl.classList).toContain('cdk-input-autofilled');
+    expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: true} as any);
+
+    animationStartCallback({animationName: 'cdk-input-autofill-end', target: inputEl});
+    expect(inputEl.classList).not.toContain('cdk-input-autofilled');
+    expect(autofillStreamEvent).toEqual({target: inputEl, isAutofilled: false} as any);
+  });
+
+  it('should cleanup filled class if monitoring stopped in autofilled state', () => {
+    const inputEl = testComponent.input1.nativeElement;
+    let animationStartCallback: Function = () => {};
+    inputEl.addEventListener.and.callFake((_, cb) => animationStartCallback = cb);
+    autofillMonitor.monitor(inputEl);
+    animationStartCallback({animationName: 'cdk-input-autofill-start', target: inputEl});
+    expect(inputEl.classList).toContain('cdk-input-autofilled');
+
+    autofillMonitor.stopMonitoring(inputEl);
+    expect(inputEl.classlist).not.toContain('cdk-input-autofilled');
+  });
+});
+
+describe('cdkAutofill', () => {
+  let autofillMonitor: AutofillMonitor;
+  let fixture: ComponentFixture<InputWithCdkAutofilled>;
+  let testComponent: InputWithCdkAutofilled;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [InputModule],
+      declarations: [InputWithCdkAutofilled],
+    }).compileComponents();
+  });
+
+  beforeEach(inject([AutofillMonitor], (afm: AutofillMonitor) => {
+    autofillMonitor = afm;
+    spyOn(autofillMonitor, 'monitor').and.returnValue(observableEmpty());
+    spyOn(autofillMonitor, 'stopMonitoring');
+    fixture = TestBed.createComponent(InputWithCdkAutofilled);
+    testComponent = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should monitor host element on init', () => {
+    expect(autofillMonitor.monitor).toHaveBeenCalledWith(testComponent.input.nativeElement);
+  });
+
+  it('should stop monitoring host element on destroy', () => {
+    expect(autofillMonitor.stopMonitoring).not.toHaveBeenCalled();
+    fixture.destroy();
+    expect(autofillMonitor.stopMonitoring).toHaveBeenCalledWith(testComponent.input.nativeElement);
+  });
+});
+
+@Component({
+  template: `
+    <input #input1>
+    <input #input2>
+    <input #input3>
+  `
+})
+class Inputs {
+  @ViewChild('input1') input1: ElementRef;
+  @ViewChild('input2') input2: ElementRef;
+  @ViewChild('input3') input3: ElementRef;
+}
+
+@Component({
+  template: `<input #input cdkAutofill>`
+})
+class InputWithCdkAutofilled {
+  @ViewChild('input') input: ElementRef;
+}

src/cdk/input/autofill.ts

@@ -69,6 +69,7 @@ export class AutofillMonitor implements OnDestroy {
     if (info) {
       info.unlisten();
       element.classList.remove('cdk-input-autofill-monitored');
+      element.classList.remove('cdk-input-autofilled');
       this._monitoredElements.delete(element);
     }
   }