Angular 2.0.1 создана платформа с другой конфигурацией. Пожалуйста, сначала уничтожьте его
Я пытаюсь запустить модульные тесты Angular 2 на компоненте Angular 2 с помощью Jasmine (однако я не использую Karma... просто webpacking мой код, а затем запуск тестов в жасмин SpecRunner по умолчанию.формат HTML).
Когда я запускаю свой код, я получаю сообщение об ошибке: "была создана платформа с другой конфигурацией. Пожалуйста, сначала уничтожьте его.- Я весь день об этом ломал голову. Читаю каждый пост на StackOverflow, который могу найти, но я все еще застрял. Есть предложения?
import { ComponentFixture, ComponentFixtureAutoDetect, TestBed, async, fakeAsync, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from "@angular/platform-browser-dynamic/testing";
import {AppLogin} from "../../../app/login/app.login";
describe("Login Component", () => {
let comp: AppLogin;
let fixture: ComponentFixture<AppLogin>;
let el: DebugElement;
function setup() {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
}
setup();
beforeEach(() => {
TestBed.configureTestingModule({
providers: [AppLogin]
});
fixture = TestBed.createComponent(AppLogin);
comp = fixture.componentInstance;
});
it("login form should pass validation", () => {
fixture.detectChanges();
var form = {
EmailAddress: 'test@me.com',
Password: 'test'
};
var validated = comp.formValidated(form);
expect(validated).toBe(true);
});
});
Вот компонент, который я пытаюсь проверить...
import { Component } from '@angular/core';
@Component({
selector: 'app-login',
template: `
<form *ngIf="active" (ngSubmit)="onSubmit()" class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="EmailAddress" class="sr-only">Email address</label>
<input type="email" name="EmailAddress" id="EmailAddress" class="form-control" placeholder="Email address"
[(ngModel)]="form.EmailAddress" required autofocus>
<label for="Password" class="sr-only">Password</label>
<input type="password" name="Password" id="Password" class="form-control" placeholder="Password" required
[(ngModel)]="form.Password">
<div class="checkbox">
<label>
<input type="checkbox" id="RememberMe" value="remember-me" [(ngModel)]="form.RememberMe"> Remember me
</label>
</div>
<div *ngIf="form.hasError">
<div *ngFor="let error of form.errorMessages" class="alert alert-danger fade in">{{error.message}}</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
`
})
export class AppLogin {
form: any;
constructor() {
//
}
formValidated(form: any): boolean {
form.errorMessages = [];
form.hasError = false;
if (form.EmailAddress == null)
form.errorMessages.push({ message: 'Email Address is required.' });
if (form.Password == null)
form.errorMessages.push({ message: 'Password is required.' });
if (form.errorMessages.count > 0)
form.hasError = true;
return !form.hasError;
}
onSubmit(form: any): void {
console.log('Form data: ', form);
}
}
1 ответ:
К сожалению, один только Jasmine не предоставил мне отладочную информацию, в которой я нуждался, поэтому я больше не использую Jasmine для моего модульного тестирования. Я использую рекомендуемую установку Karma/Jasmine. (Примечание: однако, я не использую угловой карма-тест-ШИМ, поэтому я должен запустить TestBed.initTestEnvironment).
Я провел тесты в Karma и получил ошибку о шаблоне моего компонента. Мой шаблон компонента имеет угловую форму. Мне пришлось импортировать угловой модуль FormsModule в мой тест окружающая среда. Вот код, который решил эту проблему...
import { ComponentFixture, ComponentFixtureAutoDetect, TestBed, async, fakeAsync, tick } from '@angular/core/testing'; import { By, BrowserModule } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from "@angular/platform-browser-dynamic/testing"; import { FormsModule } from '@angular/forms'; import {AppLogin} from "../../../app/login/app.login"; describe("Login Component", () => { let comp: AppLogin; let fixture: ComponentFixture<AppLogin>; let el: DebugElement; beforeEach(() => { TestBed.resetTestEnvironment(); TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); TestBed.configureTestingModule({ imports: [ FormsModule, BrowserModule ], declarations: [ AppLogin ] }); fixture = TestBed.createComponent(AppLogin); comp = fixture.componentInstance; }); it("login form should pass validation", () => { fixture.detectChanges(); var form = { EmailAddress: 'test@me.com', Password: 'test' }; var validated = comp.formValidated(form); expect(validated).toBe(true); }); });
У меня была куча проблем с настройкой Karma с Webpack первоначально, но вот конфигурация Karma, которую я написал, которая работает очень хорошо для меня (и не требует карма-тест-ШИМ)...
И, наконец, вот код для тестов.файл ts я включил в свою конфигурацию Karma. Именно здесь мне требуется () весь код, который мне нужен для выполнения угловых тестов...module.exports = function(config) { config.set({ basePath: '', frameworks: ['jasmine'], files: [ 'src/tests/tests.ts', 'src/tests/login/app.login.spec.ts' ], exclude: [ ], preprocessors: { 'src/tests/tests.ts': ['webpack'], 'src/tests/login/app.login.spec.ts': ['webpack', 'sourcemap'] }, webpack: { devtool: 'inline-source-map', resolve: { extensions: ['', '.ts', '.js'] }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015'] } }, { test: /\.ts$/, loaders: ['ts-loader'] } ] } }, webpackMiddleware: { // webpack-dev-middleware configuration noInfo: true }, plugins: [ require("karma-webpack"), require("karma-jasmine"), require("karma-chrome-launcher"), require("karma-sourcemap-loader"), require("karma-spec-reporter") ], reporters: ['spec'], port: 9876, colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: true }); };
require('zone.js/dist/zone'); require('reflect-metadata'); require('rxjs'); require('@angular/platform-browser'); require('@angular/platform-browser-dynamic'); require('@angular/core'); require('@angular/common'); require('@angular/http'); require('@angular/router'); Error.stackTraceLimit = Infinity; require('zone.js/dist/long-stack-trace-zone'); require('zone.js/dist/proxy'); // since zone.js 0.6.15 require('zone.js/dist/sync-test'); require('zone.js/dist/jasmine-patch'); // put here since zone.js 0.6.14 require('zone.js/dist/async-test'); require('zone.js/dist/fake-async-test'); var testing = require('@angular/core/testing');