Utvikling av Electron-skrivebordsapper · leksjon

Enhetstesting med Spectron

Lær å skrive effektive enhetstester for Electron-applikasjonene Deres ved hjelp av Spectron, et rammeverk som er spesielt utviklet for testing av Electron.

Leksjon 2 av 411 trinn

Enhetstesting med Spectron er en gratis leksjon i Utvikling av Electron-skrivebordsapper på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av Electron-skrivebordsapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Hvorfor enhetsteste Electron-apper?

Utvikling av skrivebordsapplikasjoner med Electron gir brukerne Deres webteknologi på skrivebordet. Akkurat som all annen programvare må disse appene være pålitelige og fri for feil.

Enhetstesting bidrar til å sikre at de enkelte komponentene i applikasjonen fungerer som forventet. For Electron betyr dette testing av både main- (Node.js) og renderer-prosessene (Chromium), samt samspillet mellom dem.

Møt Spectron: Electron-verktøyet for testing

Spectron er et testrammeverk som er spesielt utviklet for Electron-applikasjoner. Det er bygget oppå WebDriver (for eksempel ChromeDriver), slik at De kan styre en Electron-app programmatisk, akkurat som en bruker ville gjort.

Det starter Electron-appen i en separat prosess.
Det tilbyr API-er for samhandling med både main- og renderer-prosessene.
De kan simulere brukerhandlinger som klikk, skriving og navigering.

Spectron erstatter ikke testrammeverket Deres (for eksempel Mocha eller Jest); det fungerer sammen med dem!

Sette opp testmiljøet

Før De skriver tester med Spectron, trenger De noen få ting:

Node.js og npm: Allerede installert for Electron-utvikling.
En Electron-applikasjon: Appen De vil teste.
Et testrammeverk: Vi bruker Mocha fordi det er enkelt og utbredt.
Et bibliotek for påstander: Chai er et populært valg for å skrive påstander.

Disse verktøyene hjelper Dem med å strukturere testene og kontrollere resultatene.

Installere Spectron, Mocha og Chai

La oss installere de nødvendige pakkene som utviklingsavhengigheter ved hjelp av npm:

spectron: Testrammeverket for Electron.
mocha: Testrammeverket vårt.
chai: Biblioteket vårt for påstander.

Kjør følgende kommando i rotmappen til prosjektet:

npm install --save-dev spectron mocha chai

Grunnleggende Spectron-teststruktur

En typisk Spectron-testfil bruker Mocha-blokkene describe og it. Det viktigste er å opprette en instans av Spectrons Application-klasse og håndtere livssyklusen med krokene beforeEach og afterEach.

Dette sikrer at appen starter før hver test og stopper etterpå.

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);
  });
});

Samhandle med Renderer Process

Spectrons app.client-objekt gir Dem tilgang til Chromium WebDriver-API-et. Dette lar Dem samhandle med webinnholdet i renderer-prosessen.

Bruk CSS-selektorer for å finne elementer.
Hent tekstinnhold og attributtverdier, eller kontroller om elementer er synlige.
Kjør JavaScript direkte i renderer-prosessen.

Det er som å ha utviklerverktøyene i nettleseren tilgjengelig i testen!

// 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');

Eksempel: Kontrollere vindustittel

La oss skrive en komplett test for å sikre at hovedvinduet i Electron-applikasjonen Deres har riktig tittel etter oppstart. Dette kontrollerer et grunnleggende aspekt ved initialiseringen av appen.

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');
  });
});

Simulere brukerhandlinger

Spectron lar Dem etterligne brukerinteraksjoner. Dette er avgjørende når De skal teste interaktive elementer og brukerflyter i applikasjonen.

click(selector): Simulerer et klikk på et element.
setValue(selector, value): Skriver tekst i et inndatafelt.

Deretter kan De kontrollere den resulterende tilstanden til brukergrensesnittet eller dataene.

// 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');

Få tilgang til Main Process

Spectron tilbyr også måter å samhandle med main process på, som er stedet der Node.js-koden Deres kjører. Dette er nyttig for testing av backendlogikk eller Electron sine opprinnelige API-er.

app.client.electron: Gir tilgang til Electrons innebygde moduler (for eksempel app og dialog).
app.client.mainProcess: Gjør det mulig å kalle funksjoner direkte på det globale objektet i main process.

Husk at direkte tilgang av sikkerhetshensyn ofte begrenses av kontekstisolasjon og preload-skript.

// 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');

Hurtigsjekk for Spectron

La oss teste hvor godt De forstår hva Spectron kan gjøre!

Besvar den i den interaktive leksjonen

Oppsummering: Enhetstesting med Spectron

I denne leksjonen har De lært hvordan Spectron hjelper Dem med å enhetsteste Electron-applikasjoner effektivt.

Spectron bruker WebDriver til å starte og styre Electron-appen Deres.
Det lar Dem samhandle med både renderer-prosessen (UI-elementer og kjøring av JavaScript) og main process (Electron-API-er og Node.js-funksjoner).
Sammen med testrammeverk som Mocha og biblioteker for påstander som Chai tilbyr Spectron en robust måte å sikre at Electron-appen oppfører seg som forventet.

Fortsett å øve for å lage pålitelige skrivebordsopplevelser!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 47

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Enhetstesting med Spectron» gratis?

Ja – hele teksten i «Enhetstesting med Spectron» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av Electron-skrivebordsapper-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Enhetstesting med Spectron»?

Lær å skrive effektive enhetstester for Electron-applikasjonene Deres ved hjelp av Spectron, et rammeverk som er spesielt utviklet for testing av Electron. Du øver på Utvikling av Electron-skrivebordsapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av Electron-skrivebordsapper?

Ingen tidligere erfaring er nødvendig. Utvikling av Electron-skrivebordsapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Enhetstesting med Spectron»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av Electron-skrivebordsapper-leksjonen?

Ja. Alle Utvikling av Electron-skrivebordsapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Utvikling av Electron-skrivebordsapper