如何为使用欧芹验证的 angular2 表单编写 jasmine 单元测试？

Question

我正在尝试对我正在编写的 angular2 应用程序使用 Parsley 验证，并且想编写一些 jasmine 单元测试。我想确保以正确的方式验证输入。

我正在尝试编写一个小测试，但我认为我遇到的问题是我无法加载 parsley。我正在运行因果报应运行ner 并尝试将其包含在配置文件中。

这是我的测试文件：

///<reference path="./../../../../typings/globals/jasmine/index.d.ts"/>

import { Component, DebugElement, AfterViewInit } from "@angular/core";
import { By } from "@angular/platform-browser";
import { ComponentFixture, TestBed, async } from "@angular/core/testing";
import { FormsModule } from '@angular/forms';
import { ComponentFixtureAutoDetect } from '@angular/core/testing';
import { dispatchEvent } from '@angular/platform-browser/testing/browser-util';

declare var jQuery: any;

describe("StringLengthValidationApp", () => {
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [ FormsModule ],
            declarations: [StringLengthValidationApp],
            providers: [
                { provide: ComponentFixtureAutoDetect, useValue: true }
            ]
        });
    });

    beforeEach(async(() => {
        TestBed.compileComponents();
    }));

    it("should work", () => {
        let fixture = TestBed.createComponent(StringLengthValidationApp);

        fixture.detectChanges();
        return fixture.whenStable().then(() => {

            const inputName = 'quick BROWN  fox';
            let nameInput = fixture.debugElement.query(By.css('input')).nativeElement;
            nameInput.value = inputName;
            nameInput.dispatchEvent(new Event('input'));
            fixture.detectChanges();

            let second = fixture.debugElement.query(By.css('textarea')).nativeElement;
            second.value = inputName;
            second.dispatchEvent(new Event('input'));

            fixture.detectChanges();
            console.log(fixture.nativeElement);
            let errors = fixture.debugElement.queryAll(By.css("ul"));

            expect(errors.length).toBe(1);
        });
    });
});

@Component({
    selector: "date-validation-app",
    template: `
        <form id="form"
              class="form-horizontal form-label-left parsleyjs" 
              data-parsley-validate=""
              data-parsley-priority-enabled="false" 
              novalidate="novalidate">

            <input type="text" id="basic" name="basic" class="form-control"
                    required="required"
                    data-parsley-trigger="change"
                    data-parsley-maxlength="3" />

            <textarea name="textarea" rows="10" cols="50">Write something here</textarea>
        </form>
  `
})
class StringLengthValidationApp  {

}

我的karma.conf.js

var webpackConfig = require('./webpack.test');

module.exports = function (config) {
    var _config = {
        basePath: '',

        frameworks: ['jasmine'],

        files: [
          { pattern: './config/karma-test-shim.js', watched: false }
        ],

        preprocessors: {
            './config/karma-test-shim.js': ['webpack', 'sourcemap']
        },

        webpack: webpackConfig,

        webpackMiddleware: {
            stats: 'errors-only'
        },

        webpackServer: {
            noInfo: true
        },

        reporters: ['kjhtml'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['Chrome'],
        singleRun: false
    };

    config.set(_config);
};

和业力测试-shim.js

Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('core-js/es7/reflect');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

require('jquery/src/jquery');
require('parsleyjs/dist/parsley.js');

var appContext = require.context('../src', true, /\.spec\.ts/);

appContext.keys().forEach(appContext);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');


testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

我收到这样的错误消息

Uncaught Error: Error in :0:0 caused by: form.parsley is not a function
TypeError: form.parsley is not a function

当 ngAfterViewInit 函数没有运行尝试绑定欧芹时，它将运行但我的测试失败

Error: Expected 0 to be 1.

并且在 Chrome 中查看时也没有看到验证错误。

我怀疑欧芹没有开始，但我是新手，所以我想我可能犯了任何简单的错误，也可能是其他任何错误

任何关于如何解决它的提示将不胜感激

Answer 1

我想我通过简单地添加就解决了问题 'node_modules/parsleyjs/dist/parsley.js', 到我的 karma.conf.js

中的文件部分

如何为使用欧芹验证的 angular2 表单编写 jasmine 单元测试？

How to write a jasmine unit test for my angular2 forms that uses parsley validation?

unit-testing

jasmine

parsley.js

karma-runner

angular