角度2这么多私人功能！-单位测试它们？让他们公开？

Question

我发现在我的角2应用程序中，我的大部分功能都是私有的。例如，看看这个组件(我最大的组件--它是一个表单--所以它有很多控件，这些控件是子组件)。

import {
    Component,
    ViewChild,
    ElementRef,
    EventEmitter,
    Output,
    OnInit
} from '@angular/core';
import {
    FormGroup,
    FormBuilder,
    Validators,
    ControlValueAccessor,
    FormControl,
    AbstractControl,
    ReactiveFormsModule
} from '@angular/forms';
import { ResultService } from '../../../services/result.service';
import { Result, FindRequest } from '../../../models/all-models';
import { HighlightDirective } from '../../../directives/highlight.directive';
import { DistanceUnitsComponent } from './distance-units.component';
import { MultiselectComponent } from 
    '../../../shared/subcomponents/multiselect-find-category.component';
import { MultiselectFindMealTypeComponent } from
    '../../../shared/subcomponents/multiselect-find-meal-type.component';
import { NumberPickerComponent } from './number-picker.component';
import { InputComponent } from '../../../shared/subcomponents/input.component';
import { AreaComponent } from 
    '../../../shared/subcomponents/area-picker.component';



@Component({
    selector: 'find-form',
    templateUrl: 'app/find-page/subcomponents/find-page/find-form.component.html',
    styleUrls: ['app/find-page/subcomponents/find-page/find-form.component.css'],
    providers: [ResultService]
})

export class FindFormComponent implements OnInit {
    @ViewChild('multiselectFindCategory')
    private _multiselectFindCategory: MultiselectComponent;
    @ViewChild('multiselectFindMealType')
    private _multiselectFindMealType: MultiselectFindMealTypeComponent;
    @ViewChild('distanceUnits') private _distanceUnits: DistanceUnitsComponent;
    @ViewChild('numberPicker') private _numberPicker: NumberPickerComponent;
    @ViewChild('areaInput') private _areaInput: AreaComponent;
    @ViewChild('keywordsInput') private _keywordsInput: InputComponent;
    @Output() private _onResultsRecieved:
    EventEmitter<Object> = new EventEmitter<Object>();
    @Output() private _onSubmitted: EventEmitter<boolean> =
    new EventEmitter<boolean>();

    private _categoryError: string = 'hidden';
    private _mealTypeError: string = 'hidden';
    private _areaError: string = 'hidden';

    private _findForm: FormGroup;
    private _submitted: boolean = false;
    private _findRequest: FindRequest;

    private _displayMealCategories: boolean = false;
    private _mealSelected: boolean = false;
    private _place: google.maps.Place;

    constructor(private _resultService: ResultService,
                    private _formBuilder: FormBuilder) {}

    ngOnInit() {
        this._findForm = this._formBuilder.group({
            categories: [null, Validators.required],
            mealTypes: [[], this._mealTypesValidator()],
            location: null,
            distanceNumber: null,
            distanceUnit: 'kilometers',
            keywords: null,
        });
    }

    private _mealTypesValidator = () => {
        return (control: FormControl) => {
            var mealTypes = control.value;
            if (mealTypes) {
                if (mealTypes.length < 1 && this._mealSelected) {
                    return {
                        mealTypesValid: { valid: false }
                    };
                }
            }
            return null;
        };
    };

    private _setAreaErrorVisibility(): void {
        if (this._areaInput.areaInput.nativeElement.value) {
            if (!this._areaInput.address) {
                this._areaError = 'visible';
            } else {
                this._areaError = 'hidden';
            }
        } else {
            this._areaError = 'hidden';
            this._findForm.get("location").setValue(null);
        }
    }

    private _onCategoriesChanged(): void {
        this._findForm.get('categories').markAsDirty();
        this._mealSelected = this._multiselectFindCategory.mealSelected;
        this._findForm.controls['mealTypes'].updateValueAndValidity();
        if (!this._mealSelected) {
            this._mealTypeError = 'hidden';
            this._findForm.get('mealTypes').setValue([]);
        }

        if (this._multiselectFindCategory.selectedCategories.length > 0) {
            this._findForm.get('categories').setValue(
                this._multiselectFindCategory.selectedCategories
            );
        } else {
            this._findForm.get('categories').setValue(null);
        }
    }

    private _onMealTypesChanged(): void {
        this._findForm.get('mealTypes').markAsDirty();
        if (this._multiselectFindMealType.selectedCategories.length > 0) {
            this._findForm.get('mealTypes').setValue(
                this._multiselectFindMealType.selectedCategories
            );
        } else {
            this._findForm.get('mealTypes').setValue([]);
        }
    }

    private _onAreaChanged(areaEntered: any): void {
        this._setStateOfDistanceControls(areaEntered.areaEntered);
        this._areaError = "hidden";
        if (areaEntered.place) {
            this._findForm.get("location").setValue({
                lat: areaEntered.place.geometry.location.lat(),
                lng: areaEntered.place.geometry.location.lng()
            })
        }
    }

    private _onDistanceUnitsChanged(distanceUnit: string): void {
        this._findForm.get("distanceUnit").setValue(distanceUnit);
    }

    private _onDistanceNumberChanged(distanceNumber: number): void {
        this._findForm.get("distanceNumber").setValue(distanceNumber);
    }

    private _setStateOfDistanceControls(areaEntered: any): void {
        if (areaEntered) {
            this._distanceUnits.isEnabled = true;
            this._numberPicker.isEnabled = true;
        } else {
            this._distanceUnits.isEnabled = false;
            this._numberPicker.isEnabled = false;
        }
        this._distanceUnits.imagePath = this._distanceUnits.imagePath;
    }

    private _getResults(form: FormGroup): void {
        var results: Result[] = [];
        results = this._resultService.getResults();
        if (results) {
            this._onResultsRecieved.emit({
                recieved: true,
                results: results,
                location: this._findForm.get("location").value
            });
        }
    }

    private _onSubmit(model: any, isValid: boolean): void {
        this._submitted = true;
        console.log(model, isValid);
        this._setAreaErrorVisibility();
        if (isValid && this._areaError === "hidden") {
            this._onSubmitted.emit(true);
            this._getResults(this._findForm);
        }
    }
}

我想成为这里最好的练习。所以我没有公开的anythings...This，在我看来，它就像一个带有角2的东西，因为在我的大多数非角度应用程序中，我需要更多的公共东西。我的代码只是超级松耦合，因为没有其他组件需要访问它吗？我不知道它是不是好..。

但是我需要对它进行单元测试，通常您不会对任何私有的内容进行单元测试，所以我很困惑。我有很多逻辑，显然应该测试一下。

，我是不是把太多的私事都做了？，还是说私密是很好的做法？应该只对所有的私有函数进行单元测试吗？

Answer 1

我建议您将所有内容公开/不要添加任何正在公开到模板html或当然其他组件中的前缀。这也是我们公司的做法，也是Angular2官方指南中的做法。

通过这种方式，您可以自动测试您的私有函数，因为它们应该在您的公共方法的某个地方被调用。

您还可以使用Protractor和Selenium之类的工具创建UI测试，以涵盖许多场景。