Bagaimana untuk menguji javascript antara muka

Dalam pembangunan aplikasi web moden, ujian antara muka menjadi semakin penting. Oleh kerana penggunaannya yang meluas, bahasa JavaScript telah menjadi bahagian yang sangat diperlukan dalam ujian. Dalam artikel ini, kita akan melihat beberapa teknik JavaScript untuk menguji antara muka, daripada ujian unit mudah kepada ujian berfungsi dan ujian hujung ke hujung. Saya harap pembaca boleh memperoleh sedikit pengetahuan tentang ujian antara muka JavaScript dalam artikel ini.

1. Ujian unit

Ujian unit ialah ujian yang direka bentuk untuk menguji modul aplikasi tertentu. Dalam ujian unit JavaScript, kami menggunakan alat pihak ketiga Jasmine untuk menjalankan kes ujian.

Jasmine menyediakan peraturan sintaks yang mudah dibaca dan ditulis, sebagai contoh:

describe('Calculator', function() {

  beforeEach(function () {
    this.calculator = new Calculator();
  });

  it('addition should return the sum of two numbers', function() {
    expect(this.calculator.addition(1,2)).toBe(3);
  });

});

Dalam contoh ini, kami memastikan bahawa objek addition sememangnya dimulakan sebelum memanggil this.calculator kaedah . Selepas itu, kami menegaskan bahawa kaedah ini mengembalikan nilai jangkaan yang betul selepas menambah dua nombor. Jika kata kunci expect tidak memenuhi jangkaan kami, kes ujian tidak akan lulus.

2. Ujian hujung ke hujung

Ujian hujung ke hujung (atau ujian berfungsi) ialah ujian yang menguji keseluruhan proses aplikasi. Dalam JavaScript, kami menggunakan Cypress untuk menjalankan kes ujian.

Cypress ialah alat ujian yang direka untuk ujian hujung ke hujung, yang boleh menjalankan semua jenis aplikasi utama. Mari lihat contoh daripada Cypress:

describe('Add a new todo', function() {

  it('Visits the todo app', function() {
    cy.visit('http://localhost:3000');
  });

  it('Adds a new todo', function() {
    cy.get('.new-todo')
      .type('New todo')
      .type('{enter}');
  });

  it('Verifies the new todo was added', function() {
    cy.contains('New todo');
  });

});

Dalam contoh ini, kami akan mengakses aplikasi web kami melalui Cypress. Seterusnya, kami akan mensimulasikan memasukkan dan menyerahkan item tugasan baharu. Akhir sekali, kami mengesahkan sama ada item tugasan telah berjaya ditambahkan dengan memasukkan teks yang ditentukan.

3. Ujian rangka kerja

Pengujian rangka kerja ialah ujian untuk alat modular dan rangka kerja yang melaksanakan fungsi. Dalam JavaScript, kami menggunakan Jest untuk menguji rangka kerja.

Jest ialah rangka kerja ujian popular yang menggunakan format JSON sebagai fail konfigurasi ujian.

describe('Array', function() {

  let array;

  beforeEach(function () {
    array = [1, 2, 3];
  });

  it('has a length of 3', function() {
    expect(array.length).toBe(3);
  });

  it('should add a new item to the end of the array', function() {
    array.push(4); // 添加数字 4
    expect(array.length).toBe(4);
    expect(array[3]).toBe(4); // 索引从 0 开始
  });

});

Dalam contoh ini, kami mencipta kes ujian yang memastikan tatasusunan panjang 3 ditakrifkan dengan betul. Kami juga menyemak ketepatan menambah item baharu pada tatasusunan.

Ringkasan

Dalam artikel ini, kami mempelajari tentang kaedah berbeza untuk menguji antara muka dalam JavaScript. Daripada ujian unit, ujian hujung ke hujung kepada ujian rangka kerja, kami memberikan pandangan yang mendalam pada teknik ujian ini dan menunjukkan keupayaan untuk menjalankan kes ujian menggunakan alat pihak ketiga seperti Jasmine, Cypress dan Jest. Bidang ini sentiasa berkembang, jadi pembangun perlu terus mencuba perkara baharu untuk memastikan kualiti aplikasi mereka.

Atas ialah kandungan terperinci Bagaimana untuk menguji javascript antara muka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!