Question

我是第一次尝试Jasmine单元测试并将其应用为现有代码，我试图按照jasmine上的文档进行测试。

以下是html文件的结构

<!doctype html>
<html>
    <head>
        <title>Jasmine Test</title>
        <link rel="stylesheet" href="bower_components/jasmine/lib/jasmine-core/jasmine.css">
    </head>
    <body>
        <script src="bower_components/jasmine/lib/jasmine-core/jasmine.js"></script>
        <script src="bower_components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
        <script src="bower_components/jasmine/lib/jasmine-core/boot.js"></script>

        <!-- include source files here... -->
         <script type="text/javascript" src="signUp.js"></script>

        <!-- include spec files here... -->
        <script src="test/signUp.js"></script>
    </body>
</html>

以下是我的signUp.js文件下的代码

var signUp = {

    usernameValid: function(validity){
        var emailValue = $('#inputEmail').val(),
            pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i),
            regexVal = pattern.test(emailValue);
        if(emailValue == "" || !regexVal){
            $('.inputEmail').removeClass("has-success").addClass("has-error");
        }else{
            validity = true
            $('.inputEmail').removeClass("has-error").addClass("has-success");
        }

        return validity;
    },

    passwordValidity: function(validity){
        var passwordVal = $('#inputPassword').val();

        if(passwordVal == ""){
            $('.inputPassword').addClass("has-error").removeClass("has-success");
        }else if(passwordVal.length < 6){
            $('.inputPassword').addClass("has-error").removeClass("has-success");
            $('#inputPassword').attr("placeholder", "Password must be at least 6 characters");
        }else{
            validity = true;
            $('.inputPassword').addClass("has-success").removeClass("has-error");
        }

        return validity;
    },

    cnfrmPassword: function(validity){
        var confirmPassVal = $('#inputConfirmPassword').val(),
            passwordVal = $('#inputPassword').val();

        if(confirmPassVal == "" || passwordVal != confirmPassVal){
            $('.inputConfirmPassword').addClass("has-error").removeClass("has-success");
            $('#inputConfirmPassword').attr("placeholder", "Password did not match");
        }else{
            validity = true;
            $('.inputConfirmPassword').addClass("has-success").removeClass("has-error");
        }

        return validity;
    },

    nameValidity: function(validity){
        var firstName = $('#inputFirstName').val(),
            pattern = new RegExp(/^[a-zA-Z]*$/),
            regexVal = pattern.test(firstName);

        if(firstName == "" || !regexVal){
            $('.inputFirstName').addClass("has-error").removeClass("has-success");
        }else if(!regexVal){
            $('.inputFirstName').addClass("has-error").removeClass("has-success");
            $('#inputFirstName').attr("placeholder", "Only letters for this field");
        }else{
            validity = true;
            $('.inputFirstName').addClass("has-success").removeClass("has-error");
        }

        return validity;
    },

    lastNameField: function(){
        var lastName = $('#inputLastName').val();

        if(lastName){
            $('.inputLastName').addClass("has-success");
        }
    },

    checkDOB: function(validity){
        var dateOfBirth = $('#inputDOB').val(),
            today = new Date(),
            birthdate = new Date(dateOfBirth),
            age = today.getFullYear() - birthdate.getFullYear(),
            month = today.getMonth() - birthdate.getMonth();

        if (month < 0 || (month == 0 && today.getDate() < birthDate.getDate())) {
            age--;
        }

        if(dateOfBirth == "" || (age < 14 || age > 150)){
            $('.inputDOB').addClass("has-error").removeClass("has-success");
        }else{
            validity = true;
            $('.inputDOB').addClass("has-success").removeClass("has-error");
        }

        return validity;
    },

    convertDate: function(dateOfBirth){
        var date = new Date(dateOfBirth);
        return date.toISOString();
    },

    dateType: function(){
        if(!Modernizr.inputtypes.date){
            $('#inputDOB').datepicker();
        }
    }

$(document).ready(function(){
    signUp.usernameValid();
    //any other functionality
}

在我的test / signUp.js文件中，我有以下

describe("SignUp fields", function(){
    it("should expect UserName", function(){
        expect(signUp.usernameValid()).toBeDefined();
    });
});

运行上面的内容后，我似乎得到以下错误

TypeError：无法读取属性＆＃39; usernameValid＆＃39;未定义的

以及检查＆＃34; signUp＆＃34;对象引发参考错误

编辑：jquery与jasmine有什么特殊的支持吗？

Answer 1

所以经过一番研究后我发现我错过了jquery文件。我从cdn中包含了jquery源代码扩展，但我仍然注意到同样的错误然后我切换到本地版本的jquery并且它工作了。此外，我必须包括现代化库，因为我在我的主js文件中使用它。

Jasmine测试参考错误

1 个答案: