Rumah > Artikel > hujung hadapan web > Ujian Javascript automatik dengan Mocha.js

Ujian Javascript automatik dengan Mocha.js

WBOYke hadapan: 2023-09-14 10:41:021269semak imbas

使用 Mocha.js 进行自动化 Javascript 测试

Kita semua tahu bahawa kod terdedah kepada ralat, dan kadangkala walaupun kita tahu bahawa aliran kerja tertentu akan berfungsi dengan baik dalam sesetengah kes, kita lebih cenderung untuk melupakan yang lain.

Secara mudah, boleh dikatakan apabila kita menguji kod secara manual, kita mungkin terlepas sesuatu. Sebagai contoh, katakan kita mempunyai dua fungsi, func1() dan func2(), dan kita tahu bahawa func1() berfungsi apabila kita telah mentakrifkannya dalam ujian, tetapi kita mendapati bahawa func2() berfungsi bukan sepak masuk. Kemudian kami membetulkan func2() tetapi kemudian terlupa untuk menyemak sama ada func1() digunakan pada keseluruhan proses selepas kami membuat perubahan dalam func2() . Proses ini boleh membawa kepada ralat, dan ini biasanya akan berlaku beberapa kali.

Kini, kami tahu bahawa menjalankan ujian secara manual bukanlah pilihan yang sangat ideal, jadi disyorkan untuk menjalankan ujian bertulis secara berasingan sebagai tambahan kepada kod yang mungkin telah kami tulis. Ini dipanggil ujian automatik.

Dalam tutorial ini, kami akan meneroka cara menggunakan Mocha dalam JavaScript untuk ujian automatik.

Langkah pertama ialah boleh menggunakan Mocha secara serentak dalam kod kami. Untuk melakukan ini, kami boleh memanfaatkan pautan CDN yang diberikan oleh mocha.js kepada kami. Dalam tutorial ini, kami juga akan menggunakan Chai.js dan Expect.js yang berfungsi dengan baik dengan Mocha apabila kami ingin menyemak kelakuan tepat bagi kemungkinan fungsi kami yang berbeza. Ditulis.

Berikut ialah semua CDN yang anda perlu import dalam fail index.html anda.

Expect.js

https://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js

Chai.js

https://cdn.rawgit.com/chaijs/chai/3.5.0/chai.js

Mocha.js

https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js

Langkah seterusnya ialah mencipta tiga fail dalam direktori projek ringkas IDE kegemaran anda atau editor kod.

index.html
index.js
test.js

Anda juga boleh menggunakan perintah yang ditunjukkan di bawah.

touch index.html index.js tests.js

NOTA - Arahan touch mungkin tidak dijalankan pada mesin tempatan anda, dalam kes ini sila gunakan arahan vi sebagai ganti.

index.html

Sekarang kami telah mencipta semua fail, tiba masanya untuk menulis kod. Buka fail index.html dan tampal baris berikut.

Contoh

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Automated Testing With Mocha</title>
   <link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
</head>
<body>
   <div id="mocha"></div>
   <script src="https://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js"></script>
   <script src="https://cdn.rawgit.com/chaijs/chai/3.5.0/chai.js"></script>
   <script src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
   <script src="index.js"></script>
   <script>
      const mocha = window.mocha;
      mocha.setup('bdd');
   </script>
   <script src="tests.js"></script>
   <script>
      mocha.checkLeaks();
      mocha.run();
   </script>
</body>
</html>

Arahan

Dalam kod HTML di atas, saya mengimport semua kebergantungan melalui CDN seperti Mocha, Chai dan Expect.

Saya kemudian mengimport dua fail js berbeza dalam susunan segerak, iaitu index.js dan tests.js, bermakna, mula-mula fail index.js dijalankan, kemudian skrip yang I Which sets window.mocha () dan bdd.

Pertimbangkan coretan kod yang ditunjukkan di bawah.

const mocha = window.mocha;
mocha.setup('bdd');

Selepas kod di atas, saya memanggil fail tests.js dan kemudian memanggil kaedah Mocha yang berbeza. Pertimbangkan coretan kod yang ditunjukkan di bawah.

mocha.checkLeaks();
mocha.run();

Kini tiba masanya untuk kami menulis beberapa fungsi untuk mengujinya secara automatik menggunakan Mocha. Pertimbangkan kod index.js yang ditunjukkan di bawah.

function addNumbers(a, b) {
   return a + b;
}

Fungsi di atas adalah fungsi yang sangat mudah di mana kita mengambil dua parameter dan kemudian hanya mengembalikan jumlah dua nombor ini dalam respons.

test.js

Kini tiba bahagian yang menyeronokkan, kami akan menguji sama ada fungsi di atas berfungsi seperti yang diharapkan dengan bantuan ujian automatik. Pertimbangkan kod tests.js yang ditunjukkan di bawah.

const chai = window.chai
const expect = chai.expect
describe('addNumbers', () => {
   it('should be able to add two numbers and give proper result', () => {
      expect(addNumbers(1, 3)).to.deep.equal(4)
      expect(addNumbers(1, 5)).to.deep.equal(6)
      expect(addNumbers(-9, -10)).to.deep.equal(-19)
   })
})

Dalam kod di atas, saya mengimport pakej Chai dan Expect melalui fail index.html.

Selain itu, kami menggunakan fungsi describe di mana hujah pertama yang kami berikan adalah rentetan pilihan kami. Seterusnya, kami mencipta fungsi tanpa nama di mana kami memanggil fungsi it(), yang seterusnya mengambil rentetan sebagai parameter pertama dan fungsi anak panah tanpa nama sebagai parameter kedua.

Kami menggunakan fungsi expect di mana kami memanggil fungsi sebenar yang ingin kami uji sebagai parameter dan kemudian menyemak kesamaan menggunakan kaedah deep.equal().

Output

Selepas menjalankan kod HTML dan membuka kod dalam penyemak imbas anda, semuanya akan berfungsi seperti yang diharapkan. Anda sepatutnya melihat teks yang dicetak dalam penyemak imbas anda, agak serupa dengan apa yang ditunjukkan di bawah.

>addNumbers
should be able to add two numbers and give proper result

Jom tambah fungsi kedua

Dalam contoh di atas, kami menguji fungsi JavaScript ringkas yang dipanggil addNumbers. Sekarang, mari cuba tambah fungsi lain, tetapi kali ini, kita akan menggunakan fungsi anak panah. Pertimbangkan kod yang ditunjukkan di bawah.

index.js

let multiplyNumber = (a, b) => {
   return a * b;
}

test.js

Sekarang, mari tulis ujian automatik untuk fungsi di atas dalam fail tests.js. Pertimbangkan coretan kod yang ditunjukkan di bawah.

describe('multiplyNumber', () => {
   it('should be able to multiply two numbers and give proper result',() => {
       expect(multiplyNumber(1, 3)).to.deep.equal(3)
      expect(multiplyNumber(1, 5)).to.deep.equal(5)
      expect(multiplyNumber(-9, -10)).to.deep.equal(90)
   })
})

Output

Jalankan kod HTML dan kali ini anda akan mendapat nama kedua-dua fungsi ini dalam pelayar.

addNumbers
should be able to add two numbers and give proper result‣
multiplyNumber
should be able to multiply two numbers and give proper result

Bagaimana jika fungsi tidak mengembalikan output yang dijangkakan?

Dalam dua fungsi yang kami tulis ujian automatik, kami sebenarnya menjangkakan untuk mendapatkan nilai yang betul. Bagaimana jika kita menukar logik teras fungsi untuk mengembalikan nilai ralat?

考虑 index.js 文件中存在一个名为 multiplyNumber 的函数。让我们对函数进行更改，以便它不会给出我们预期的输出。

乘数

let multiplyNumber = (a, b) => {
   return a * b;
}

输出

现在，如果我们在浏览器中运行 HTML 代码，我们将在浏览器中得到以下输出。

multiplyNumber
should be able to multiply two numbers and give proper result‣
AssertionError: expected 0.3333333333333333 to deeply equal 3

使用多个描述函数进行自动化测试

在上面的两个示例中，我们使用了单个 describe 函数和简单函数。现在假设我们想要使用一个函数来计算数字的幂。

考虑下面所示的index.js代码

function power(x, n) {
   let res = 1;
   for (let i = 0; i < n; i++) {
      res *= x;
   }
   return res;
}

在上面的函数中，我们采用两个参数，然后将一个数字的幂提高到 n 倍。

测试.js

现在让我们为此函数编写一个自动化测试。

describe("power", function () {
   describe("raises x to power 2", function () {
      function checkPower(x) {
         let expected = x * x;
         it(`${x} in the power 2 is ${expected}`, function () {
            expect(power(x, 2)).to.deep.equal(expected);
         });
      }
      for (let x = 1; x <= 5; x++) {
         checkPower(x);
      }
   });
});

我们可以看到，在自动化测试函数中，我们使用了嵌套的describe函数。在这里，我们检查在 index.js 中编写的 power() 函数是否按预期工作。

输出

power
raises x to power 2
1 in the power 2 is 1‣
2 in the power 2 is 4‣
3 in the power 2 is 9‣
4 in the power 2 is 16‣
5 in the power 2 is 25

结论

在本教程中，我们通过示例解释了如何使用 Mocha.js 与 Chai.js 和 Expect.js 在 JavaScript 中执行自动化测试。

Atas ialah kandungan terperinci Ujian Javascript automatik dengan Mocha.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html 字符串 JS ide 自动化

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bina aplikasi GUI desktop menggunakan JavaScript dan Electron.jsArtikel seterusnya：Bina aplikasi GUI desktop menggunakan JavaScript dan Electron.js

Artikel berkaitan

Lihat lagi