test(forms): add test for multi-select and custom accessors (#9624)

modules/@angular/forms/src/directives/select_multiple_control_value_accessor.ts

@@ -44,6 +44,8 @@ abstract class HTMLCollection {
 
 /**
  * The accessor for writing a value and listening to changes on a select element.
+ *
+ * @experimental
  */
 @Directive({
   selector:

modules/@angular/forms/src/forms.ts

@@ -39,6 +39,7 @@ export {FormControlName} from './directives/reactive_directives/form_control_nam
 export {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
 export {FormGroupName} from './directives/reactive_directives/form_group_name';
 export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
+export {SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
 export {AsyncValidatorFn, MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, Validator, ValidatorFn} from './directives/validators';
 export {FormBuilder} from './form_builder';
 export {AbstractControl, FormArray, FormControl, FormGroup} from './model';

modules/@angular/forms/test/directives_spec.ts

@@ -12,7 +12,7 @@ import {fakeAsync, flushMicrotasks, tick,} from '@angular/core/testing';
 
 import {SpyNgControl, SpyValueAccessor} from './spies';
 
-import {FormGroup, FormControl, FormArray, FormArrayName, FormControlName, FormGroupName, NgModelGroup, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/forms';
+import {FormGroup, FormControl, FormArray, FormArrayName, FormControlName, FormGroupName, NgModelGroup, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor, Validator} from '@angular/forms';
 
 import {selectValueAccessor, composeValidators} from '@angular/forms/src/directives/shared';
 import {TimerWrapper} from '../src/facade/async';
@@ -77,6 +77,13 @@ export function main() {
           ])).toEqual(selectAccessor);
         });
 
+        it('should return select multiple accessor when provided', () => {
+          const selectMultipleAccessor = new SelectMultipleControlValueAccessor();
+          expect(selectValueAccessor(dir, [
+            defaultAccessor, selectMultipleAccessor
+          ])).toEqual(selectMultipleAccessor);
+        });
+
         it('should throw when more than one build-in accessor is provided', () => {
           var checkboxAccessor = new CheckboxControlValueAccessor(null, null);
           var selectAccessor = new SelectControlValueAccessor(null, null);
@@ -90,6 +97,14 @@ export function main() {
               .toEqual(customAccessor);
         });
 
+        it('should return custom accessor when provided with select multiple', () => {
+          const customAccessor = new SpyValueAccessor();
+          const selectMultipleAccessor = new SelectMultipleControlValueAccessor();
+          expect(selectValueAccessor(
+                     dir, <any>[defaultAccessor, customAccessor, selectMultipleAccessor]))
+              .toEqual(customAccessor);
+        });
+
         it('should throw when more than one custom accessor is provided', () => {
           var customAccessor: ControlValueAccessor = <any>new SpyValueAccessor();
           expect(() => selectValueAccessor(dir, [customAccessor, customAccessor])).toThrowError();

tools/public_api_guard/forms/index.d.ts

@@ -376,6 +376,17 @@ export declare class SelectControlValueAccessor implements ControlValueAccessor
     writeValue(value: any): void;
 }
 
+/** @experimental */
+export declare class SelectMultipleControlValueAccessor implements ControlValueAccessor {
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    value: any;
+    constructor();
+    registerOnChange(fn: (value: any) => any): void;
+    registerOnTouched(fn: () => any): void;
+    writeValue(value: any): void;
+}
+
 /** @experimental */
 export interface Validator {
     validate(c: AbstractControl): {