Блог

Мне действительно может потребоваться некоторая помощь, у меня есть около 12 компонентов, которые я не могу протестировать из-за тех же проблем. Я сидел над этим около 15 часов и действительно не добился большого прогресса, я думаю, может быть, мои насмешки неверны. Я просто выберу случайный в качестве примера проблем.

Я использую Karma и Jasmine для тестирования в среде разработки Angular 10

Компонент называется ArchivedUserStoryOverview, и я создал собственный контроллер для взаимодействия с Firebase, я высмеиваю наблюдаемые, которые будут возвращены полностью (или, по крайней мере, это то, что я думаю, что я делаю). Важно отметить, что мое приложение работает без ошибок, возникающих при тестировании.

Фактический компонент: Archiveduserstoryoverview.component.ts

 import { Component, OnInit } from '@angular/core';
import { FirebaseController } from '../../services/firebase-controller';
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: 'app-archiveduserstoryoverview',
  templateUrl: './archiveduserstoryoverview.component.html',
  styleUrls: ['./archiveduserstoryoverview.component.css']
})
export class ArchiveduserstoryoverviewComponent implements OnInit {
  projectId: string;
  userstoryArray: Array<any>;
  assigneeArray: Array<string>;

  constructor(public firebaseController: FirebaseController, private route: ActivatedRoute) { 
    this.userstoryArray = new Array<any>();
    this.assigneeArray = new Array<string>();
    this.route.params.subscribe(params => this.setProjectId(params["id"]));
  }

  ngOnInit(): void {
    this.firebaseController.getUserstoriesSnapshot().subscribe(res => {
      res.forEach(item => {
        if(item.payload.val()['ProjectId'] == this.projectId){
          this.userstoryArray.push([item.key, item.payload.val()]);
          this.getUserNameByKey(item.payload.val()['AssignedUser']);
        }
      })
    });
  }

  setProjectId(id){
    this.projectId = id;
  }

  // Returns the username for a given user key
  private getUserNameByKey(userKey: string): any {
    this.firebaseController.getUserByKey(userKey).subscribe(a => {
      const data = a.payload.val();
      const id = a.key;
      this.assigneeArray.push(data['Name']);
    });
  }

  deArchiveUserstory(key){
    this.firebaseController.deArchiveUserstory(key);
  }
}
  

Тестовый компонент: Archiveduserstoryoverview.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ArchiveduserstoryoverviewComponent } from './archiveduserstoryoverview.component';
import {RouterTestingModule} from '@angular/router/testing';
import {FirebaseController} from '../../services/firebase-controller';
import {Observable, of} from 'rxjs';
import {AppModule} from '../../app.module';

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

  let fixtureUserstories = [
    {
      "-MFR0QIUc7tA3tAES5Zb" : {
        "AssignedUser" : "-MEZSC3KJvUynPd98kcH",
        "Description" : "",
        "EndDate" : "2020-02-22",
        "ProjectId" : "0",
        "SprintId" : "0",
        "Status" : "New",
        "Storypoints" : "",
        "Title" : "Frondend1"
      },
      "-MFRd7PsweHm07JUhZjA" : {
        "AssignedUser" : "",
        "Description" : "div links uitlijnen",
        "EndDate" : "2020-02-24",
        "ProjectId" : "0",
        "SprintId" : "-MFCHMDwfK84cVUdXosO",
        "Status" : "Archived",
        "Storypoints" : 1,
        "Title" : "About us fiksen"
      },
      "-MFRdG-biiv_okiRSWvi" : {
        "AssignedUser" : "-MEZSCn1yv9Yjo3eK4pr",
        "Description" : "nieuwe versie van angular",
        "EndDate" : "2020-02-25",
        "ProjectId" : "0",
        "SprintId" : "-MFCHMDwfK84cVUdXosO",
        "Status" : "New",
        "Storypoints" : 20,
        "Title" : "Updaten"
      }
    }
  ];
  let mockUserstories$ = of(fixtureUserstories);

  let fixtureUsers = [
    {
      "-MEZSC3KJvUynPd98kcH" : {
        "Name" : "Mitch"
      },
      "-MEZSCn1yv9Yjo3eK4pr" : {
        "Name" : "Maarten"
      },
      "-MEgdGlEPzDi1h32gTbH" : {
        "Name" : "John Doe"
      },
      "-MFYR3ln26SB8JjdE8eS" : {
        "Name" : "test"
      }
    }
    ]

  let mockUsers$ = of(fixtureUsers);

  beforeEach(async(() => {

    const fakeAFDB = jasmine.createSpyObj('FireBaseController', [ 'getUserstoriesSnapshot', 'getUserNameByKey']);

    fakeAFDB.getUserstoriesSnapshot.and.callFake(function() {
      return mockUserstories$;
    });

    fakeAFDB.getUserNameByKey('-MFYR3ln26SB8JjdE8eS').and.callFake(function() {
      return mockUsers$;
    });

    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule, AppModule
      ],
      declarations: [ ArchiveduserstoryoverviewComponent ],
      providers: [ { provide: FirebaseController, useValue: fakeAFDB  }]
    })
      .compileComponents();
  }));

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

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

Я начинаю с создания пользовательских историй и пользователей, структура — это всего лишь фрагмент из серверной части Firebase.

Теперь, когда я запускаю все свои тесты, он выдает эти три ошибки:

Я не уверен, что означает «И» в данном случае, раньше я думал, что оно отсутствует в одном из методов, которые должны были вызываться, которые я не заглушал и не издевался, но это, похоже, неверно

Сбой: не удается прочитать свойство ‘and’ неопределенного

 at <Jasmine>
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/views/archiveduserstoryoverview/archiveduserstoryoverview.component.spec.ts:75:54)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
    at AsyncTestZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.AsyncTestZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:1032:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:289:1)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:363:1)
    at Zone.runGuarded (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:133:1)
    at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:1154:1)
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:1092:1)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)
  

Действительно странный, AngularFireDatabase даже не создан, потому что я полностью издеваюсь над своим собственным контроллером

Ошибка NullInjectorError: R3InjectorError(DynamicTestModule)[FirebaseController -> AngularFireDatabase -> AngularFireDatabase]: ошибка NullInjectorError: нет поставщика для AngularFireDatabase!

 error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'FirebaseController', 'AngularFireDatabase', 'AngularFireDatabase' ] })
    at <Jasmine>
    at NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:915:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11081:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11081:1)
    at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:801:1)
    at ɵɵinject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:805:1)
    at Object.FirebaseController_Factory [as factory] (ng:///FirebaseController/ɵfac.js:5:46)
    at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11248:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11070:1)
    at NgModuleRef$1.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24198:1)
    at Object.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:22101:1)
  

Это имеет смысл, тест не проходит

Ожидалось, что undefined будет правдивым.

 Error: Expected undefined to be truthy.
    at <Jasmine>
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/views/archiveduserstoryoverview/archiveduserstoryoverview.component.spec.ts:96:23)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
    at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)
  

Я так невероятно застрял на этом, я переписал способ, которым я издеваюсь несколько раз, и, похоже, я действительно не могу решить это, если у кого-нибудь, пожалуйста, есть время, чтобы помочь мне? Дайте мне знать, если вы хотите просмотреть какие-либо другие файлы.

Ваша самая большая проблема заключается в том, что вы импортируете AppModule . Модуль вашего приложения будет использовать все зависимости вашего модуля — вы должны импортировать только то, что нужно этому конкретному компоненту, а это исключительно RouterTestingModule .

Как только вы удалите это, вы больше не должны получать сообщение об ошибке AngularFireDatabase . Что, вероятно, должно было произойти, так это то, что, поскольку AppModule предоставлял реальную службу FirebaseController, она сначала использовала службу из AppModule.

Следующая проблема — в вашем компоненте у вас есть метод с именем getUserNameByKey , и он вызывает this.firebaseController.getUserByKey . У вашего fakeAFDB должно было быть getUserByKey .

Третья проблема —

 fakeAFDB.getUserNameByKey('-MFYR3ln26SB8JjdE8eS').and.callFake(function() {
      return mockUsers$;
    });
  

Обратите внимание, как вы вызываете функцию здесь? С любой подделкой вы определяете функцию, а не вызываете ее. Способ сделать это fakeAFDB.getUserByKey.and.callFake(function () { return mockUsers$; });

Теперь, написанный таким образом, вы будете возвращать точно такое же значение независимо от того, что передается. Если вы хотите применить логику к этому, вы можете сделать что-то вроде

 fakeAFDB.getUserByKey.and.callFake(function (key) {
  if (key = 'some string'){
    return mockUsers$;
  }
  return someOtherResu<
});
  

Вот окончательное решение, которое вы ищете. Однако после вашего вызова все равно будут возникать ошибки, fixture.detectChanges поскольку код в ngOnInit вашего контроллера просматривается if(item.payload.val()['ProjectId'] == this.projectId){ , и в вашем getUserstoriesSnapshot результате не определена val функция. Я надеюсь, что вы можете соответствующим образом изменить свои поддельные результаты.

 beforeEach(async(() => {
    const fakeAFDB = jasmine.createSpyObj<FirebaseController>('FireBaseController', ['getUserstoriesSnapshot', 'getUserByKey']);
    // returnValue is better here since you don't need logic on the return
    fakeAFDB.getUserstoriesSnapshot.and.returnValue(mockUserstories$);

    fakeAFDB.getUserByKey.and.callFake(() => {
      return mockUsers$;
    });

    TestBed.configureTestingModule({
      declarations: [ArchiveduserstoryoverviewComponent],
      imports: [RouterTestingModule],
      providers: [ { provide: FirebaseController, useValue: fakeAFDB  }]
    })
      .compileComponents();
  }));