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

  • 12 Просмотры
  • Последний пост 04 января 2017
Maxim Shulga разместил пост 04 января 2017

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

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

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

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

 

Код
<!--Add1.html-->
<!DOCTYPE html>
<html ng-app="calc">
<head>
    <title>Дополнительное задание 1</title>

    <script src="../Libraries/angular.js"></script>
    <script src="Add1.js"></script>

</head>
<body ng-controller="calcCtrl">

    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}}

</body>
</html>



//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); }); })

 

Maxim Shulga разместил пост 04 января 2017

Задание 1

 

Код
<!--Task.html-->
<!DOCTYPE html>
<html ng-app="task">
<head>
    <title>Задание 1</title>

    <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>

</head>
<body ng-controller="taskCtrl">

    <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>
</body>
</html>



//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"); }); })

 

 

Close