Почему мои модульные тесты Karma выдают ошибку для отсутствующих методов доступа в компонентах, которые не имеют форм? - PullRequest
0 голосов
/ 15 мая 2019

Я настраиваю модульное тестирование для нашего унифицированного проекта Ionic4 (получение интерактивной справки и исследований - это ожидаемая часть проекта), и у меня возникают проблемы с прохождением всех тестов "create component" в Karma.Я не писал никаких тестов сам, поэтому только пытаюсь разобраться во всех ошибках, сгенерированных автоматически сгенерированными.

Проблема заключается в том, что некоторые компоненты выдают следующую ошибку: «Uncaught Error: Uncaught (в обещании): Ошибка: Нет доступа к значению для элемента управления формы с именем: X», X является полем формы в полностьюдругой компонент (какие тесты проходят нормально).Эта ошибка возникает, только если я запускаю все тесты.Если я запускаю именно те, которые не работают, они пройдут без проблем.

Я пытался исследовать проблему и сообщение об ошибке, но пока не нашел ничего, связанного с моей конкретной проблемой.Проблема в том, что в 2 из 3 компонентов, которые жалуются, нет формы, а в 3-м жалобы касаются полей в другом компоненте.

Это сообщение об ошибке для компонента Event:

Uncaught Error: Uncaught (in promise): Error: No value accessor for form control with name: 'username'
    Error: No value accessor for form control with name: 'username'
        at te (webpack:///node_modules/@angular/forms/fesm5/forms.js:2144 <- test-config/karma-test-shim.js:2092:1740)
        at J (webpack:///node_modules/@angular/forms/fesm5/forms.js:2054 <- test-config/karma-test-shim.js:2092:117)
        at webpack:///node_modules/@angular/forms/fesm5/forms.js:4337 <- test-config/karma-test-shim.js:2106:16703
        at e.invoke (webpack:///node_modules/zone.js/dist/zone.js:391 <- test-config/karma-test-shim.js:2140:7006)
        at e.onInvoke (webpack:///node_modules/zone.js/dist/async-test.js:106 <- test-config/karma-test-shim.js:2290:1819)
        at e.onInvoke (webpack:///node_modules/zone.js/dist/proxy.js:126 <- test-config/karma-test-shim.js:2253:2259)
        at e.invoke (webpack:///node_modules/zone.js/dist/zone.js:390 <- test-config/karma-test-shim.js:2140:6946)
        at Object.onInvoke (webpack:///node_modules/@angular/core/fesm5/core.js:17299 <- test-config/karma-test-shim.js:600:1161)
        at e.invoke (webpack:///node_modules/zone.js/dist/zone.js:390 <- test-config/karma-test-shim.js:2140:6946)
        at t.run (webpack:///node_modules/zone.js/dist/zone.js:150 <- test-config/karma-test-shim.js:2140:2205)
        at webpack:///node_modules/zone.js/dist/zone.js:889 <- test-config/karma-test-shim.js:2140:13729
        at e.invokeTask (webpack:///node_modules/zone.js/dist/zone.js:423 <- test-config/karma-test-shim.js:2140:7690)
        at e.onInvokeTask (webpack:///node_modules/zone.js/dist/async-test.js:90 <- test-config/karma-test-shim.js:2290:1616)
        at e.onInvokeTask (webpack:///node_modules/zone.js/dist/proxy.js:157 <- test-config/karma-test-shim.js:2253:2880)
        at e.invokeTask (webpack:///node_modules/zone.js/dist/zone.js:422 <- test-config/karma-test-shim.js:2140:7611)
        at Object.onInvokeTask (webpack:///node_modules/zone.js/dist/zone.js:304 <- test-config/karma-test-shim.js:2140:4663)
        at e.invokeTask (webpack:///node_modules/zone.js/dist/zone.js:422 <- test-config/karma-test-shim.js:2140:7611)
        at Object.onInvokeTask (webpack:///node_modules/@angular/core/fesm5/core.js:17290 <- test-config/karma-test-shim.js:600:1073)
        at e.invokeTask (webpack:///node_modules/zone.js/dist/zone.js:422 <- test-config/karma-test-shim.js:2140:7611)
        at t.runTask (webpack:///node_modules/zone.js/dist/zone.js:195 <- test-config/karma-test-shim.js:2140:2868)
        at v (webpack:///node_modules/zone.js/dist/zone.js:601 <- test-config/karma-test-shim.js:2140:9981)
        at t.invokeTask [as invoke] (webpack:///node_modules/zone.js/dist/zone.js:502 <- test-config/karma-test-shim.js:2140:8826)
        at y (webpack:///node_modules/zone.js/dist/zone.js:1744 <- test-config/karma-test-shim.js:2171:631)
        at g (webpack:///node_modules/zone.js/dist/zone.js:1770 <- test-config/karma-test-shim.js:2171:873) thrown


Это .ts для события:

export class EventPage implements OnInit {
    activity: any;
    allEvents = [];

    constructor(private router: Router, private authService: AuthService, private activityService: ActivityService, private dataService: DataService) {
    }


    ngOnInit() {
        this.activityService.getAllActivities().subscribe(data => this.allEvents = data);
        this.activity = 'all-activities';
    }

    loadEvent(activity) {
        this.dataService.setData('activity', activity);
        this.router.navigateByUrl('/specific-event/activity');
    }

    goToCreateEvent() {
        this.router.navigate(['create-event']);
    }

    segmentChanged(event) {
        this.activity = event.target.value;
    }
}

.spec.ts:

import {CUSTOM_ELEMENTS_SCHEMA, TemplateRef, ViewContainerRef} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {EventPage} from './event.page';
import {Router} from '@angular/router';
import {AuthService} from '../../services/authentication-service/auth.service';
import {ActivityService} from '../../services/activity-service/activity.service';
import {DataService} from '../../services/data.service';
import {SharedDirectivesModule} from '../../directives/shared-directives.module';
import {HasRoleDirective} from '../../directives/has-role.directive';
import {CommonModule} from '@angular/common';
import {UserService} from '../../services/user-service/user.service';
import {ActivityServiceMock, UserServiceMock} from '../../../../test-config/mocks-ionic';

describe('EventPage', () => {
    let component: EventPage;
    let fixture: ComponentFixture<EventPage>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [SharedDirectivesModule],
            declarations: [EventPage],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            providers: [
                {provide: Router, useValue: null},
                {provide: AuthService, useValue: null},
                {provide: ActivityService, useValue: new ActivityServiceMock()},
                {provide: DataService, ueValue: null},
                {provide: UserService, useValue: new UserServiceMock()},
                {provide: TemplateRef, useValue: null},
                {provide: ViewContainerRef, useValue: null}]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(EventPage);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

И это форма из регистра компонента, который имеетполе, запрашиваемое в Event:

   <form>
        ...
                        <ion-item>
                            <ion-input name="username" placeholder="Username" type="username" ngModel required
                                       [(ngModel)]="username"></ion-input>
                        </ion-item>

                        <ion-item>
                            <ion-input name="displayname" placeholder="Displayname" type="username" ngModel required
                                       [(ngModel)]="displayname"></ion-input>
                        </ion-item>

        ...
    </form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...