Я относительно плохо знаком с тестированием в Angular2 + и настраиваю свои файлы для тестирования.С момента создания проекта я написал много кода и сейчас пытаюсь протестировать его части.Однако многие из этих тестов теперь не работают, поэтому я сейчас пытаюсь удалить ненужные тесты по умолчанию или исправить те, которые полезны.
Этот конкретный тест не будет выполнен, потому что он не пройдёт до того, как попадет в метод тестирования It ().Я не уверен, что мне не хватает, любая помощь будет оценена.
Я получаю эту ошибку:
Failed: Cannot read property 'subscribe' of undefined
TypeError: Cannot read property 'subscribe' of undefined
at AppComponent../src/app/app.component.ts.AppComponent.setupLanguageTranslation (src/app/app.component.ts:48:26)
at AppComponent../src/app/app.component.ts.AppComponent.ngOnInit (src/app/app.component.ts:32:14)
at checkAndUpdateDirectiveInline (node_modules/@angular/core/fesm5/core.js:22089:1)
at checkAndUpdateNodeInline (node_modules/@angular/core/fesm5/core.js:23353:1)
at checkAndUpdateNode (node_modules/@angular/core/fesm5/core.js:23315:1)
at debugCheckAndUpdateNode (node_modules/@angular/core/fesm5/core.js:23949:1)
at debugCheckDirectivesFn (node_modules/@angular/core/fesm5/core.js:23909:1)
at Object.eval [as updateDirectives] (ng:///DynamicTestModule/AppComponent_Host.ngfactory.js:9:9)
at Object.debugUpdateDirectives [as updateDirectives] (node_modules/@angular/core/fesm5/core.js:23901:1)
at checkAndUpdateView (node_modules/@angular/core/fesm5/core.js:23297:1)
Я пробовал множество статей с похожими проблемами, включая, но не ограничиваясь:
App.component.ts
export class AppComponent implements OnInit, OnDestroy {
title = 'planox';
showError = false;
errorMessage = '';
translatedText: string;
constructor(private _translate: TranslateService,
private utils: Utils) {}
ngOnInit(): void {
this.setupLanguageTranslation();
}
ngOnDestroy(): void {
this._translate.onLangChanged.unsubscribe();
}
setupLanguageTranslation() {
this.subscribeToLangChanged();
// set language
this._translate.setDefaultLang('en'); // set English as default
this._translate.enableFallback(true); // enable fallback
// set current language
this.selectLang('en');
this.utils.error.subscribe(response => {
this.errorMessage = response;
this.showError = true;
setTimeout( () => {
this.showError = false;
}, 2000);
});
}
selectLang(lang: string) {
// set default;
this._translate.use(lang);
}
subscribeToLangChanged() {
// refresh text
this.refreshText();
return this._translate.onLangChanged.value;
}
refreshText() {
// refresh translation when language change
this.translatedText = this._translate.instant('hello world');
}
}
app.component.spec.ts
import {TestBed, async, ComponentFixture, inject} from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import {TranslateService} from './translate/translate.service';
import Utils from './shared/utils';
import {MockTranslateService} from './mocks/mockTranslateService';
import {MockUtils} from './mocks/mockUtils';
import {TRANSLATIONS} from './translate/translation';
describe('AppComponent', () => {
let fixture: ComponentFixture<AppComponent>;
beforeEach(async(() => {
const mockTranslate = new MockTranslateService(TRANSLATIONS);
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
providers: [
{provide: TranslateService, useValue: mockTranslate},
{provide: Utils, useValue: MockUtils},
]
});
fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
}));
it('should create the app', () => {
fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
});
Utils.ts:
import {Subject, throwError} from 'rxjs';
import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
import {Role} from '../classes/role/role.enum';
export enum KEY_CODE {
ENTER = 13,
RIGHT_ARROW = 39,
LEFT_ARROW = 37
}
@Injectable({
providedIn: 'root'
})
export default class Utils {
error: Subject<string> = new Subject<string>();
constructor(private router: Router) {}
handleError(service: string, error: Response | any, customMessage?: string) {
const err = service + '::handleError' + '= ' + error;
this.error.next(customMessage);
return throwError(error);
}
encodeBase64(value: any) {
return btoa(JSON.stringify(value));
}
decodeBase64(value: any) {
return atob(value);
}
navigateToDefaultPage(usersRole: Role) {
if (usersRole === Role.Employee) {
this.router.navigate(['/dashboardNavigation', {outlets: {dashNav: ['productionDashboard']}}]);
} else if (usersRole === Role.Client) {
this.router.navigate(['/clientDashboard']);
} else if (usersRole === Role.OfficeAdmin) {
this.router.navigate(['/dashboardNavigation', {outlets: {dashNav: ['enterpriseDashboard']}}]);
} else {
this.router.navigate(['/auth']);
}
}
validateEmail(inputText: string) {
const mailFormat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (inputText.match(mailFormat)) {
return true;
} else {
return false;
}
}
}
mockUtils.ts
import Utils from "../shared/utils";
import {Subject} from "rxjs";
export class MockUtils extends Utils {
error = new Subject<string>();
}
В основном мне нужна помощь в настройке структуры страницы тестирования, чтобыЯ могу начать писать полезные тесты.
Я могу предоставить любой дополнительный код, который может вам понадобиться, но я не был уверен, что для этого потребуется все.