How to write unit tests for an angularjs application?

M

mikykonst2018-01-02 18:26:41

JavaScript

mikykonst, 2018-01-02 18:26:41

How to write unit tests with karma and jasmine.

<!DOCTYPE html>
<html>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/angular-mocks/angular-mocks.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">

<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
    <h1 class="page-header">ARDAS TEST</h1>
    <div ng-view></div>
</div>
</body>
</html>

<div ng-controller="infoCtrl">
    <div ng-switch="isEdit">
        <div ng-switch-when="false" id="header-info">
            <h1 class="page-header">{{fullDet.name}}<span id="edit" class="glyphicon glyphicon-pencil" ng-click="edit()"></span></h1>
        </div>
        <div ng-switch-when="true">
            <form id="form" ng-submit="updateRequest()">
                <input type="text" class="form-control" placeholder="{{fullDet.name}}" ng-model="title" required>
                <input id="form-submit" type="submit" value="Edit" class="btn btn-info">
            </form>
        </div>
    </div>

    <blockquote>
        <p>{{fullDet.description}}</p>
    </blockquote>
    <a href="#/!"><input type="button" class="btn btn-success" value="Назад"></a>
</div>

<table class="table table-responsive">
    <thead>
    <td>Name</td>
    <td>Tag</td>
    <td>Used time</td>
    <td>Estimated effort</td>
    <td>Due date</td>
    </thead>
    <tbody>
    <tr ng-class="{'strong': task.is_high_priority === true}" id={{task.id}} ng-click="foo($event)" ng-repeat="task in tasks">
        <td>{{task.name}}</td>
        <td><p ng-repeat="tag in task.tags | uppercase">{{ tag }}</p></td>
        <td>{{task.actual_effort}}</td>
        <td>{{task.estimated_effort}}</td>
        <td>{{task.due_date | date}}</td>
    </tr>
    </tbody>
</table>

var app = angular.module("myApp", ["ngRoute"]);


app.controller('myCtrl', function ($scope, $http, $location, $rootScope) {
    $http.get('tasks.json').then(function (data) {
        $scope.tasks = [];
        for (let i = 0; i < data.data.length; i++) {
            if (data.data[i]['obj_status'] === 'active') {
                $scope.tasks.push(data.data[i]);
            }
        }
    });
    $scope.foo = function ($event) {
        $rootScope.name = (angular.element($event.target)[0].innerHTML);
        $location.url('/info');
    }

});

app.controller('infoCtrl', function ($scope, $http, $rootScope) {
    $scope.fullDet = {name:'', description:''};
    $scope.isEdit = false;
    $http.get('tasks.json').then(function (data) {
        for (let i = 0; i < data.data.length; i++) {
            if($rootScope.name === data.data[i]['name']) {
                $scope.fullDet.name = data.data[i]['name'];
                $scope.fullDet.description = data.data[i]['description'];
            }
        }
    });
    $scope.edit = function () {
        $scope.isEdit = true;
    };
    $scope.selectAll = function (elem) {
            event.target.select();
    };
    $scope.updateRequest = function () {
      var data = $.param({
          title: $scope.title
      });

      $http.put('someUrl?', data).then(function (data, status, headers) {
          $scope.ServerResponse = data;
      });
    };
});

app.config(function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'table.html'
    }).when('/info', {
        templateUrl: 'info.html'
    })
});

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Aleksei Podgaev, 2018-01-12
@alexiusp

https://docs.angularjs.org/guide/unit-testing