Unit dan Ujian Akhir Ke Akhir di Angularjs - Sitepoint-tutorial js-php.cn

Unit dan Ujian Akhir Ke Akhir di Angularjs - Sitepoint

尊渡假赌尊渡假赌尊渡假赌

Lepaskan： 2025-02-22 10:17:13

asal

966 orang telah melayarinya

Unit and End to End Testing in AngularJS - SitePoint

mata utama

Ujian unit adalah teknik yang membantu pemaju mengesahkan coretan kod bebas. Ujian akhir-ke-akhir (E2E) digunakan untuk menentukan sama ada satu set komponen berfungsi seperti yang dijangkakan selepas ia diintegrasikan. AngularJS adalah rangka kerja MVC JavaScript moden yang menyokong ujian unit dan ujian E2E sepenuhnya. Ujian menulis semasa membangunkan aplikasi sudut dapat menjimatkan banyak masa, jika tidak, ia akan dibazirkan untuk menetapkan kesilapan yang tidak dijangka. Tutorial ini menerangkan cara memasukkan ujian unit dan ujian E2E dalam aplikasi sudut. Tutorial ini menganggap bahawa anda sudah biasa dengan perkembangan AngularJS. Anda juga harus biasa dengan komponen yang berbeza yang membentuk aplikasi sudut. Kami akan menggunakan Jasmine sebagai kerangka ujian dan karma sebagai pelari ujian. Anda boleh menggunakan yeoman untuk membina projek untuk anda dengan mudah, atau mendapatkan aplikasi benih sudut terus dari GitHub. Jika anda tidak mempunyai persekitaran ujian, ikuti langkah -langkah ini: 1. Muat turun dan pasang Node.js (jika anda belum lagi). 2. Pasang karma menggunakan NPM (NPM Install -G Karma). 3. Muat turun aplikasi demo untuk tutorial ini dari GitHub dan unzip itu.

Dalam aplikasi unzipped, anda boleh mencari ujian dalam direktori ujian/unit dan ujian/e2e. Untuk melihat hasil ujian unit, hanya jalan skrip/test.bat dan ia akan memulakan pelayan Karma. Fail HTML utama kami ialah app/notes.html, yang boleh diakses melalui

https://www.php.cn/link/1d7466d4217d4f000c48e9f2cdbfce9 .

pemula ujian unit

bukan hanya melihat bagaimana ujian unit ditulis, membina aplikasi sudut mudah dan melihat bagaimana ujian unit sesuai dengan proses pembangunan. Oleh itu mari kita mulakan dengan aplikasi dan gunakan ujian unit kepada komponen individu pada masa yang sama. Dalam bahagian ini, anda akan belajar bagaimana melakukan ujian unit: - Pengawal - Arahan - Penapis - Kilang

Kami akan membina aplikasi nota yang sangat mudah. Tag kami akan mengandungi medan teks di mana pengguna boleh menulis nota mudah. Nota ditambah ke senarai nota apabila butang ditekan. Kami akan menggunakan storan tempatan HTML5 untuk menyimpan nota. Tag HTML awal ditunjukkan di bawah. Bootstrap digunakan untuk membina susun atur dengan cepat.

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <🎜>
    <🎜>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css"/>
    <🎜>
    <style>
      .center-grey{
             background:#f2f2f2;
             margin-top:20;
      }
      .top-buffer {
              margin-top:20px; 
      }
      button{
              display: block; 
              width: 100%;
      }
    </style>
    <title>Angular Todo Note App</title>
</head>
<body>
    <div class="container center-grey" ng-controller="TodoController">
      <div class="row top-buffer" >
        <div class="col-md-3"></div>
        <div class="col-md-5">
          <input class="form-control" type="text" ng-model="note" placeholder="Add a note here"/> 
        </div>
        <div class="col-md-1">
          <button ng-click="createNote()" class="btn btn-success">Add</button>
        </div>
        <div class="col-md-3"></div>
      </div>
      <div class="row top-buffer" >
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <ul class="list-group">
            <li ng-repeat="note in notes track by $index" class="list-group-item">
              {{note}}
            </li>
          </ul>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>
</body>
</html>

Salin selepas log masuk

Seperti yang ditunjukkan dalam tanda di atas, modul sudut kami adalah TodoApp dan pengawal adalah todocontroller. Teks input terikat pada model nota. Terdapat juga senarai semua nota tambahan. Di samping itu, apabila butang diklik, fungsi createenote () Todocontroller kami akan dijalankan. Sekarang mari kita buka fail App.js yang disertakan dan buat modul dan pengawal. Tambahkan kod berikut ke app.js.

var todoApp = angular.module('todoApp',[]);

todoApp.controller('TodoController', function($scope, notesFactory) {
  $scope.notes = notesFactory.get();
  $scope.createNote = function() {
    notesFactory.put($scope.note);
    $scope.note = '';
    $scope.notes = notesFactory.get();
  }
});

todoApp.factory('notesFactory', function() {
  return {
    put: function(note) {
      localStorage.setItem('todo' + (Object.keys(localStorage).length + 1), note);
    },
    get: function() {
      var notes = [];
      var keys = Object.keys(localStorage);

      for(var i = 0; i < keys.length; i++) {
        notes.push(localStorage.getItem(keys[i]));
      }

      return notes;
    }
  };
});

Salin selepas log masuk

Todocontroller kami menggunakan kilang yang dipanggil NotesFactory untuk menyimpan dan mengambil nota. Apabila fungsi createenote () berjalan, ia menggunakan kilang untuk meletakkan nota ke dalam localStorage dan kemudian membersihkan model nota. Oleh itu, jika kita menguji unit todocontroller, kita perlu memastikan bahawa apabila pengawal dimulakan, skop mengandungi sejumlah nota tertentu. Selepas menjalankan fungsi createnote () scoped, bilangan nota harus lebih daripada nombor sebelumnya. Kod ujian unit kami ditunjukkan di bawah.

... (Kandungan berikutnya adalah serupa dengan teks input. Oleh kerana batasan ruang, baki kod dan bahagian penjelasan ditinggalkan di sini. Harap maklum bahawa ini hanya menulis semula teks input, mengekalkan makna asal, dan melaksanakan beberapa penyataan penggantian sinonim dan pelarasan kalimat untuk mencapai tujuan pseudo-asal

Atas ialah kandungan terperinci Unit dan Ujian Akhir Ke Akhir di Angularjs - Sitepoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!