AngularJS Essential. Урок 9. Unit тестирование. Домашнее задание.

Мой вариант решения домашнего задания к последнему уроку курса.

Сами конфигурационные файлы Karma configuration здесь не привожу, так как думаю с их созданием проблем не возникнет.

Пока проходил AngularJS, уже стали выкладывать видеоуроки AngularJS 2.0, ура

Дополнительное задание 1

Код

    Дополнительное задание 1
<script src="../Libraries/angular.js"></script>
<script src="Add1.js"></script>
a = <input type="text" placeholder="Enter value" ng-model="operand1">
b = <input type="text" placeholder="Enter value" ng-model="operand2">

Arithmetic operation:
<input type="button" value=" " ng-click="add()" />
<input type="button" value="-" ng-click="sub()" />
<input type="button" value="*" ng-click="mul()" />
<input type="button" value="/" ng-click="div()" /><br /><br />

Result: {{result}}




//Add1.js angular.module("calc", []) .controller("calcCtrl", function ($scope) {
$scope.add = function () {
    $scope.result = parseFloat($scope.operand1)   parseFloat($scope.operand2);
}

$scope.sub = function () {
    $scope.result = parseFloat($scope.operand1) - parseFloat($scope.operand2);
}

$scope.mul = function () {
    $scope.result = parseFloat($scope.operand1) * parseFloat($scope.operand2);
}

$scope.div = function () {
    var operand1 = parseFloat($scope.operand1), operand2 = parseFloat($scope.operand2);

    if (operand2 == 0) { $scope.result = "Division by zero" }
    else {
        $scope.result = operand1 / operand2;
    }
}

});



//Add1_test.js
describe("Calc test", function () {

var mockScope = {}, controller;

beforeEach(angular.mock.module("calc"));

beforeEach(angular.mock.inject(function ($controller, $rootScope) {

    mockScope = $rootScope.$new();

    controller = $controller("calcCtrl", { $scope: mockScope });

    mockScope.operand1 = 15;
    mockScope.operand2 = 5;
}));

it("Addition", function () {
    mockScope.add();
    expect(mockScope.result).toEqual(20);
});

it("Subtraction", function () {
    mockScope.sub();
    expect(mockScope.result).toEqual(10);
});

it("Multiplication", function () {
    mockScope.mul();
    expect(mockScope.result).toEqual(75);
});

it("Division", function () {
    mockScope.div();
    expect(mockScope.result).toEqual(3);
});

})

Задание 1

Код



    Задание 1
<script src="../Libraries/angular.js"></script>
<link href="../Libraries/bootstrap.css" rel="stylesheet" />
<link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
<script src="Task1.js"></script>
<div class="container">

    <h3>ToDo List</h3>

    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Date</th>
                <th>Completed</th>
            </tr>
        </thead>
        <tr ng-repeat="item in tasks">
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
            <td>{{item.duedate}}</td>
            <td>{{item.completed}}</td>
        </tr>
    </table>

    <div>
        <form role="form">
            <div class="form-group">
                <label class="control-label" for="name">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Name" ng-model="newItem.name">
            </div>
            <div class="form-group">
                <label class="control-label" for="date">Due Date</label>
                <input type="date" class="form-control" id="date" placeholder="Date" ng-model="newItem.duedate">
            </div>
            <div class="form-group">
                <label class="control-label" for="description">Description</label>
                <textarea rows="2" class="form-control" id="description" placeholder="Description" ng-model="newItem.description"></textarea>
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="newItem.completed"> Completed
                </label>
            </div>
            <button type="button" class="btn btn-default" ng-click="addItem()">Add</button>
        </form>
    </div>
    <div>{{errorMsg}}</div>
</div>




//Task1.js angular.module("task", []) .constant("baseUrl", "http://localhost:2403/tasks/") .controller("taskCtrl", function ($scope, $http, baseUrl) {
$scope.tasks = [];

$scope.load = function () {
    $http.get(baseUrl).then(
        function (response) {
            $scope.tasks = response.data;
        }, handleError);
}

$scope.addItem = function () {
    $http.post(baseUrl, {
        name: $scope.newItem.name,
        duedate: $scope.newItem.duedate.toLocaleDateString(),
        description: $scope.newItem.description,
        completed: ($scope.newItem.completed ? true : false)
    }).then(
        function (response) {
            $scope.tasks.push({
                id: response.data.id,
                name: response.data.name,
                duedate: response.data.duedate,
                description: response.data.description,
                completed: response.data.completed
            })
        }, handleError);

}

function handleError(error) {
    $scope.errorMsg = "Error code: "   error.status;
}

$scope.load();

})



//Task1_test.js
describe("Task 1 AJAX test", function () {

var mockScope = {}, controller, backend;

beforeEach(angular.mock.module("task"));

beforeEach(angular.mock.inject(function ($httpBackend) {
    backend = $httpBackend;
    backend.expect("GET", "http://localhost:2403/tasks/").respond([
        { id: "aaa1", name: "task1", duedate: "31.12.2016", description: "something1", completed: true },
        { id: "bbb2", name: "task2", duedate: "01.01.2017", description: "something2", completed: true },
        { id: "ccc3", name: "task3", duedate: "05.01.2017", description: "something3", completed: false }
    ])
}));

beforeEach(angular.mock.inject(function ($controller, $rootScope, $http) {

    mockScope = $rootScope.$new();

    controller = $controller("taskCtrl", {
        $scope: mockScope,
        $http: $http
    });

    backend.flush();
}));

it("AJAX request", function () {
    backend.verifyNoOutstandingExpectation()
});

it("Data processing", function () {
    expect(mockScope.tasks).toBeDefined();
    expect(mockScope.tasks.length).toEqual(3);
});

it("Data sequence", function () {
    expect(mockScope.tasks[0].id).toEqual("aaa1");
    expect(mockScope.tasks[1].id).toEqual("bbb2");
    expect(mockScope.tasks[2].id).toEqual("ccc3");
});

})