Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script>
    <!-- Jasmine html & css for reporting -->
    <link data-require="jasmine@*" data-semver="2.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" />
    <script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js"></script>
    <script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/boot.js"></script>
    <script data-require="angularjs@1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-mocks/1.6.10/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-mocks/1.6.10/angular-mocks.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="tests.js"></script>
  </head>

  <body ng-app="app" ng-init="input=25">
    <input type="text" percentage ng-model="input">
    <pre>{{input}}</pre>
  </body>

</html>

angular.module('app', [])
.directive('percentage', function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, element, attr, ngModel) {

                function fromUser(value) {
                    return value / 100;
                }

                function toUser(value) {
                    return Math.round(value * 100);
                }
                ngModel.$parsers.push(fromUser);
                ngModel.$formatters.push(toUser);
            }
        };
    });

/* Styles go here */

describe('percentageDirective', function() {
  beforeEach(module('app'));

      // Inject $rootScope and $compile
      var scope, element;
      beforeEach(inject(function($rootScope, $compile) {
        // Set up the scope with test data
        scope = $rootScope.$new();

        scope.value = 0;

        // Create an element
        element = angular.element('<input type="number" percentage ng-model="value"></input>');

        // Compile that element with your scope
        element = $compile(element)(scope);

        // Run the digest cycle to compile the element
        $rootScope.$digest();

        // Find the input control: 
        var dirElementInput = element[0];

        // Set some text
        angular.element(dirElementInput).val('25').triggerHandler('input');

        scope.$apply();
      }));

      it("should display the decimal value", function() {
        expect(scope.value).toEqual(0.25);
      });
});