Pembangunan Aplikasi Desktop Electron · Pelajaran

Pengujian Unit dengan Spectron

Pelajari cara menulis ujian unit yang berkesan untuk aplikasi Electron menggunakan Spectron, iaitu rangka kerja yang direka khusus untuk pengujian Electron.

Pelajaran 2 daripada 411 langkah

Pengujian Unit dengan Spectron ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Desktop Electron, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Mengapa Menguji Unit Aplikasi Electron?

Membina aplikasi desktop dengan Electron membawa kuasa teknologi web ke desktop pengguna anda. Seperti mana-mana perisian, aplikasi ini perlu boleh dipercayai dan bebas pepijat.

Pengujian unit membantu memastikan komponen individu aplikasi anda berfungsi seperti yang dijangka. Dalam Electron, ini bermakna menguji proses utama (Node.js) dan proses pemapar (Chromium), serta interaksi antara kedua-duanya.

Kenali Spectron: Alat Pengujian Electron

Spectron ialah rangka kerja pengujian yang direka khusus untuk aplikasi Electron. Ia dibina berasaskan WebDriver (seperti ChromeDriver), yang membolehkan anda mengawal aplikasi Electron secara berprogram seperti yang dilakukan oleh pengguna.

Ia melancarkan aplikasi Electron anda dalam proses berasingan.
Ia menyediakan API untuk berinteraksi dengan proses utama dan proses pemapar.
Anda boleh mensimulasikan tindakan pengguna seperti klik, menaip dan navigasi.

Spectron tidak menggantikan pelaksana ujian anda (seperti Mocha atau Jest); ia berfungsi bersama pelaksana tersebut!

Menyediakan Persekitaran Pengujian

Sebelum menulis ujian dengan Spectron, anda memerlukan beberapa perkara:

Node.js & npm: Sudah dipasang untuk pembangunan Electron.
Aplikasi Electron: Aplikasi yang ingin anda uji.
Pelaksana ujian: Kita akan menggunakan Mocha kerana kesederhanaan dan penggunaannya yang meluas.
Pustaka penegasan: Chai ialah pilihan popular untuk membuat penegasan.

Alat ini akan membantu anda menstrukturkan ujian dan mengesahkan hasilnya.

Memasang Spectron, Mocha & Chai

Mari pasang pakej yang diperlukan sebagai kebergantungan pembangunan menggunakan npm:

spectron: Rangka kerja pengujian Electron.
mocha: Pelaksana ujian kita.
chai: Pustaka penegasan kita.

Jalankan perintah berikut dalam direktori akar projek anda:

npm install --save-dev spectron mocha chai

Struktur Asas Ujian Spectron

Fail ujian Spectron biasa menggunakan blok describe dan it Mocha. Perkara penting ialah mencipta tika kelas Application Spectron dan mengurus kitar hayatnya dengan cangkuk beforeEach dan afterEach.

Ini memastikan aplikasi anda dimulakan sebelum setiap ujian dan dihentikan selepasnya.

const { Application } = require('spectron');
const path = require('path');
const assert = require('assert'); // Using Node's built-in assert for simplicity

describe('Application launch', function () {
  this.timeout(10000); // Give Electron app time to start
  let app;

  beforeEach(async function () {
    app = new Application({
      path: path.join(__dirname, '..', 'node_modules', '.bin', 'electron'),
      args: [path.join(__dirname, '..', 'main.js')], // Path to your app's main file
    });
    await app.start();
  });

  afterEach(async function () {
    if (app && app.isRunning()) {
      await app.stop();
    }
  });

  it('shows an initial window', async function () {
    const count = await app.client.getWindowHandles().then(handles => handles.length);
    assert.strictEqual(count, 1);
  });
});

Berinteraksi dengan Proses Pemapar

Objek app.client Spectron memberi anda akses kepada API WebDriver Chromium. Ini membolehkan anda berinteraksi dengan kandungan web dalam proses pemapar anda.

Gunakan pemilih CSS untuk mencari unsur.
Dapatkan kandungan teks dan nilai atribut, atau semak keterlihatan unsur.
Laksanakan JavaScript secara terus dalam proses pemapar.

Ia seolah-olah anda mempunyai alat pembangun pelayar dalam ujian anda!

// Get text from an element with ID 'my-heading'
const headingText = await app.client.element('#my-heading').then(el => el.getText());
assert.strictEqual(headingText, 'Welcome!');

// Execute JavaScript to get the document title
const title = await app.client.webContents.executeJavaScript('document.title');
assert.strictEqual(title, 'My Electron App');

Contoh: Mengesahkan Tajuk Tetingkap

Mari tulis ujian lengkap untuk memastikan tetingkap utama aplikasi Electron kita mempunyai tajuk yang betul selepas dilancarkan. Ini mengesahkan aspek asas pemulaan aplikasi anda.

const { Application } = require('spectron');
const path = require('path');
const assert = require('assert');

describe('Window Title Verification', function () {
  this.timeout(10000);
  let app;

  beforeEach(async function () {
    app = new Application({
      path: path.join(__dirname, '..', 'node_modules', '.bin', 'electron'),
      args: [path.join(__dirname, '..', 'main.js')],
    });
    await app.start();
  });

  afterEach(async function () {
    if (app && app.isRunning()) {
      await app.stop();
    }
  });

  it('should have the title "My Electron App"', async function () {
    const title = await app.client.webContents.getTitle();
    assert.strictEqual(title, 'My Electron App');
  });
});

Mensimulasikan Tindakan Pengguna

Spectron membolehkan anda meniru interaksi pengguna. Ini penting untuk menguji unsur interaktif dan aliran pengguna dalam aplikasi anda.

click(selector): Mensimulasikan klik pada sesuatu unsur.
setValue(selector, value): Menaip teks ke dalam medan input.

Seterusnya, anda boleh membuat penegasan terhadap keadaan antara muka pengguna atau data yang terhasil.

// Assuming an HTML button with ID 'increment-btn'
// and a display element with ID 'counter-display'

await app.client.click('#increment-btn');

const counterValue = await app.client.getText('#counter-display');
assert.strictEqual(counterValue, '1');

// Assuming an input field with ID 'username-input'
await app.client.setValue('#username-input', 'testuser');

const username = await app.client.getValue('#username-input');
assert.strictEqual(username, 'testuser');

Mengakses Proses Utama

Spectron turut menyediakan cara untuk berinteraksi dengan proses utama, iaitu tempat kod Node.js anda berjalan. Ini berguna untuk menguji logik bahagian belakang atau API asli Electron.

app.client.electron: Mengakses modul terbina dalam Electron (contohnya, app dan dialog).
app.client.mainProcess: Membolehkan anda memanggil fungsi secara terus pada objek global proses utama.

Ingat, demi keselamatan, akses terus sering dihadkan oleh pengasingan konteks dan skrip pramuat.

// Get the Electron app version from the main process
const version = await app.client.electron.app.getVersion();
console.log(`Electron App Version: ${version}`);

// Example: Call a custom function exposed by the main process
// (Requires 'main.js' to expose 'myCustomFunction' globally or via contextBridge)
// const mainProcessResult = await app.client.mainProcess.myCustomFunction('data');
// assert.strictEqual(mainProcessResult, 'processed-data');

Semakan Pantas Spectron

Mari uji pemahaman anda tentang keupayaan Spectron!

Jawab dalam pelajaran interaktif

Imbas Kembali: Pengujian Unit dengan Spectron

Dalam pelajaran ini, anda telah mempelajari cara Spectron membantu anda menguji unit aplikasi Electron dengan berkesan.

Spectron menggunakan WebDriver untuk melancarkan dan mengawal aplikasi Electron anda.
Ia membolehkan anda berinteraksi dengan proses pemapar (unsur antara muka pengguna dan pelaksanaan JS) serta proses utama (API Electron dan fungsi Node.js).
Digabungkan dengan pelaksana ujian seperti Mocha dan pustaka penegasan seperti Chai, Spectron menyediakan cara yang kukuh untuk memastikan aplikasi Electron anda berfungsi seperti yang dijangka.

Teruskan berlatih untuk membina pengalaman desktop yang boleh dipercayai!

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 47

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pengujian Unit dengan Spectron” percuma?

Ya — teks penuh “Pengujian Unit dengan Spectron” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Aplikasi Desktop Electron, tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pengujian Unit dengan Spectron”?

Pelajari cara menulis ujian unit yang berkesan untuk aplikasi Electron menggunakan Spectron, iaitu rangka kerja yang direka khusus untuk pengujian Electron. Anda berlatih Pembangunan Aplikasi Desktop Electron menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Desktop Electron?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Desktop Electron di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Pengujian Unit dengan Spectron” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Desktop Electron ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Desktop Electron menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Aplikasi Desktop Electron