Question

我正在学习为angularJS应用程序编写测试用例。作为一个新手，试图找到一些示例工作演示。我在网上找到的以下示例是使用Jasmine插件测试angularJS应用程序，但该应用程序似乎无法正常工作。

    <html ng-app="testingApp">

  <head>
    <!-- Add Jasmine -->
    <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>
    <!-- Add AngularJS -->
    <script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
    <!-- AngularJS testing helpers -->
    <script data-require="angular-mocks@*" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular-mocks.js"></script>
  </head>

  <body ng-controller="calculatorController as vm">
    <!-- display our message from the controller -->
    <h1>{{vm.message}}</h1>
    <!-- Setup number inputs and a button for our calculator -->
    <form>
      <input id="firstNumber" type="number" ng-model="vm.firstNumber" />
      <span>+</span>
      <input id="secondNumber" type="number" ng-model="vm.secondNumber" />
      <button ng-click="vm.addNumber()">Do it</button>
    </form>
    <!-- Display the result -->
    <span>{{vm.result}}</span>
    <!-- This is our Angular app, keeping it simple -->
    <script type="text/javascript">
      angular
        .module('testingApp',[])
        .controller('calculatorController', calculatorController);

        function calculatorController(){
          var vm = this;
          vm.message = 'I am a simple calculator';
          vm.result = 0;
          vm.firstNumber = 0;
          vm.secondNumber = 0;
          vm.addNumber = addNumber;

          function addNumber(){
            vm.result = vm.firstNumber + vm.secondNumber;
          }

        };
    </script>
    <!-- This is our test spec -->
    <script type="text/javascript">

      describe("Unit: calculatorController tests", function() {

        // setup code for testing this unit
        var controller;
        beforeEach(function(){
          module('testingApp');

          inject(function ($controller){
            controller = $controller('calculatorController');  
          });

        });

        it("PASSING TEST - should be able to display a title", function() {
          expect(controller.message).toBe('I am a simple calculator');
        });

        it("FAILING TEST - should be able to display a title", function() {
          expect(controller.message).toBe('fail fail fail');
        });

        it("PASSING TEST - should add 2+2 and get result of 4", function() {
          controller.firstNumber = 2;
          controller.secondNumber = 2;
          controller.result = 0;
          controller.addNumber()
          expect(controller.result).toEqual(4);
        });

      });

    </script>
  </body>

</html>

使这个示例有效的任何建议都会非常有用。另请使用jasmine，karma或任何用于angularJS应用程序的测试插件建议任何好的示例链接。

Answer 1

以下测试用例导致失败。

 it("FAILING TEST - should be able to display a title", function() {
              expect(controller.message).toBe('fail fail fail');
 });

这个测试用例应该是这样的，因为你想测试负面情况

it("FAILING TEST - should be able to display a title", function() {
          expect(controller.message).not.toBe('fail fail fail');
});

如果您想通过测试用例而不进行否定测试。请使用.not.toBe

controller.message='fail fail fail';
    it("FAILING TEST - should be able to display a title", function() {

                     expect(controller.message).toBe('fail fail fail');
         });

Plunker

使用jasmine插件测试angularJS应用程序失败

1 个答案: