使用Jasmine进行端到端测试AngularJS应用程序

时间:2014-03-28 00:44:53

标签: javascript angularjs jasmine

我有一个AngularJS应用程序。我想实现一些我可以按需运行的端到端测试。为了做到这一点,我已经构建了一个基本的测试屏幕,其中包含以下内容:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Results</title>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-mocks.js"></script>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css" />

    <!-- Load the Test Files-->
    <script type="text/javascript" src="e2e/tests.e2e.js"></script>
</head>
<body>
    <a href="#" onclick="env.execute()">run tests</a>

</body>
</html>

我的tests.e2e.js文件如下所示:

'use strict';

describe('MyApp', function() {
    browser.get('http://localhost:11000/index.html');

    describe('Welcome Screen', function () {
    });
});

点击&#34;运行测试&#34;在我的测试运行器中,我收到一条错误消息:

MyApp encountered a declaration exception
ReferenceError: browser is not defined

我的问题是,我做错了什么?我见过的例子使用浏览器来基本启动应用程序。但是,我似乎无法弄清楚如何按需进行端到端测试。

感谢您提供任何帮助。

1 个答案:

答案 0 :(得分:0)

(function (module) {

    var myController = function ($scope, $http) {

        $http.get("/api/myData")
            .then(function (result) {
                $scope.data= result.data;
            });
    };

    module.controller("MyController",
        ["$scope", "$http", myController]);

}(angular.module("myApp")));



describe("myApp", function () {

    beforeEach(module('myApp'));

    describe("MyController", function () {

        var scope, httpBackend;
        beforeEach(inject(function ($rootScope, $controller, $httpBackend, $http) {
            scope = $rootScope.$new();
            httpBackend = $httpBackend;
            httpBackend.when("GET", "/api/myData").respond([{}, {}, {}]);
            $controller('MyController', {
                $scope: scope,
                $http: $http
            });
        }));

        it("should have 3 row", function () {
            httpBackend.flush();
            expect(scope.data.length).toBe(3);
        });
    });
});