Selainlaajennusten kehittäminen (Chrome ja Edge) · Oppitunti

Laajennusten yksikkötestien kirjoittaminen

Toteuttakaa laajennuksen logiikalle yksikkötestejä suosittujen JavaScript-testauskehysten avulla luotettavuuden varmistamiseksi.

Oppitunti 2/411 vaihetta

Laajennusten yksikkötestien kirjoittaminen on ilmainen Selainlaajennusten kehittäminen (Chrome ja Edge)-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Selainlaajennusten kehittäminen (Chrome ja Edge)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Selainlaajennusten kehittäminen (Chrome ja Edge)-kurssilla on yhteensä 4 oppituntia.

Yksikkötestauksen perusteet

Tervetuloa! Tässä oppitunnissa perehdytään selainlaajennusten yksikkötestaukseen. Yksikkötestaus on tapa testata koodin pieniä, toisistaan eristettyjä osia, joita kutsutaan usein yksiköiksi.

Laajennusten tapauksessa tämä tarkoittaa yksittäisten funktioiden tai moduulien testaamista ilman koko selainympäristön suorittamista. Tavoitteena on varmistaa, että jokainen osa toimii oikein itsenäisesti.

Miksi laajennuksia kannattaa testata?

Testaus on olennaista vakaiden selainlaajennusten rakentamisessa. Tässä syitä:

Luotettavuus: Löytää virheet aikaisessa vaiheessa ja varmistaa, että laajennus toimii odotetulla tavalla.
Ylläpidettävyys: Tekee tulevista muutoksista turvallisempia ja estää tahattomat rikkoutumiset eli regressiot.
API-muutokset: Auttaa mukautumaan selain-APIen päivityksiin, kuten Manifest V3:n muutoksiin.
Monimutkainen logiikka: Varmistaa, että haastava tausta- tai sisällön komentosarjan logiikka toimii oikein.

Valitse testauskehys

Useat JavaScript-kehykset auttavat testien kirjoittamisessa ja suorittamisessa. Suosittuja vaihtoehtoja ovat:

Jest: Facebookin kattava testausratkaisu, joka tunnetaan helppokäyttöisyydestään ja sisäänrakennetusta mockauksesta.
Mocha: Joustava testien suorittaja, jota käytetään usein Chai-tyyppisen assertiokirjaston kanssa.
Vitest: Viten pohjalle rakennettu nopea ja moderni vaihtoehto.

Tässä oppitunnissa käytämme Jestiä sen suosion ja kattavien ominaisuuksien vuoksi.

Määritä Jest testausta varten

Aloita luomalla projektikansio ja alustamalla se npm:llä. Asenna sitten Jest kehitysriippuvuutena:

npm init -y
npm install --save-dev jest

Lisää seuraavaksi testikomento package.json-tiedostoon, jotta voit suorittaa testit helposti:

{
  "name": "my-extension-tests",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^29.0.0" // Version may vary
  }
}

Testaa puhdasta JavaScript-logiikkaa

Kirjoitetaan yksinkertainen apufunktio, joka voisi olla osa laajennuksesi logiikkaa. Luo tiedosto nimeltä utils.js:

// utils.js
function sum(a, b) {
  return a + b;
}

function capitalize(str) {
  if (!str) return '';
  return str.charAt(0).toUpperCase() + str.slice(1);
}

module.exports = { sum, capitalize };

Ensimmäisen testin kirjoittaminen

Luo nyt testitiedosto nimeltä utils.test.js. Jest löytää automaattisesti tiedostot, joiden nimessä on pääte .test.js tai .spec.js.

Tuomme funktiomme ja käytämme Jestin test- (tai it-) ja expect-syntaksia testien määrittämiseen ja tarkistamiseen. Kokeile suorittaa tämä esimerkki!

// utils.test.js
const { sum, capitalize } = require('./utils');

test('sums two numbers correctly', () => {
  expect(sum(1, 2)).toBe(3);
  expect(sum(-1, 1)).toBe(0);
});

test('capitalizes a string', () => {
  expect(capitalize('hello')).toBe('Hello');
  expect(capitalize('world')).toBe('World');
  expect(capitalize('')).toBe('');
});

// To run these tests, execute: npm test

Chrome-APIen haaste

Selainlaajennukset hyödyntävät voimakkaasti chrome.*-APIa (esim. chrome.storage ja chrome.tabs). Nämä API:t ovat käytettävissä vain selainympäristössä.

Kun yksikkötestejä suoritetaan selaimen ulkopuolella, esimerkiksi Node.js-pohjaisella Jestillä, chrome-olio on määrittelemätön. Näitä APIa käyttävän logiikan testaamiseksi ne on mockattava.

Mockaus tarkoittaa simuloidun olion tai funktion luomista, jotta sen toimintaa voidaan hallita testin aikana.

chrome.storage-mockauksen luominen

Luodaan apuohjelma, joka käyttää chrome.storage.local-ominaisuutta. Tämä funktio voisi yleensä olla taustakomentosarjassa tai toisessa moduulissa.

Ensin apufunktio (esimerkiksi tiedostossa storageUtils.js):

// storageUtils.js
async function saveSetting(key, value) {
  if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
    await chrome.storage.local.set({ [key]: value });
    return true;
  }
  // Fallback for non-browser environments or missing API
  console.warn('chrome.storage.local not available');
  return false;
}

async function getSetting(key) {
  if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.local) {
    const result = await chrome.storage.local.get(key);
    return result[key];
  }
  // Fallback
  console.warn('chrome.storage.local not available');
  return undefined;
}

module.exports = { saveSetting, getSetting };

Testaus mockatuilla APIlla

Kirjoitetaan nyt testi tiedostolle storageUtils.js. Luomme ennen jokaista testiä mockin ominaisuudelle chrome.storage.local sen toiminnan simuloimiseksi.

Jestin jest.fn() sopii erinomaisesti mock-funktioiden luomiseen ja niiden kutsujen seuraamiseen. Kokeile suorittaa tämä testi!

// storageUtils.test.js
const { saveSetting, getSetting } = require('./storageUtils');

// Mock chrome.storage.local globally for tests
const mockStorage = {};
global.chrome = {
  storage: {
    local: {
      set: jest.fn(async (obj) => {
        Object.assign(mockStorage, obj);
        return Promise.resolve();
      }),
      get: jest.fn(async (key) => {
        return Promise.resolve({ [key]: mockStorage[key] });
      }),
    },
  },
};

beforeEach(() => {
  // Reset mock storage and clear Jest mock calls before each test
  for (const key in mockStorage) { delete mockStorage[key]; }
  chrome.storage.local.set.mockClear();
  chrome.storage.local.get.mockClear();
});

test('saveSetting saves data to chrome.storage.local', async () => {
  await saveSetting('username', 'CoddyKit');
  expect(chrome.storage.local.set).toHaveBeenCalledWith({ username: 'CoddyKit' });
  expect(mockStorage.username).toBe('CoddyKit');
});

test('getSetting retrieves data from chrome.storage.local', async () => {
  mockStorage.username = 'CoddyKit'; // Pre-set mock storage
  const username = await getSetting('username');
  expect(chrome.storage.local.get).toHaveBeenCalledWith('username');
  expect(username).toBe('CoddyKit');
});

// To run these tests, execute: npm test

Pikatarkistus: yksikkötestaus

Olet oppinut yksikkötestauksesta ja selain-APIen mockauksesta. Mikä seuraavista väitteistä pitää paikkansa selainlaajennuksen logiikan yksikkötestauksesta?

Vastaa interaktiivisessa oppitunnissa

Kertaus: yksikkötestaus

Tässä oppitunnissa opit:

Yksikkötestauksen merkityksen selainlaajennuksille.
Testausympäristön määrittämisen Jestillä.
Yksikkötestien kirjoittamisen puhtaille JavaScript-funktioille.
chrome.*-APIen mockauksen käsitteen ja käytännön, jotta laajennuksen logiikkaa voidaan testata selaimen ulkopuolella.

Yksikkötestaus on tärkeä taito vakaiden ja ylläpidettävien laajennusten rakentamisessa. Jatka harjoittelua, jotta laajennuksesi ydellogiikka pysyy aina luotettavana!

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Laajennusten yksikkötestien kirjoittaminen” ilmainen?

Kyllä – oppitunnin ”Laajennusten yksikkötestien kirjoittaminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Selainlaajennusten kehittäminen (Chrome ja Edge)-kurssin, päivitä CoddyKit PROhon. Selainlaajennusten kehittäminen (Chrome ja Edge)-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Laajennusten yksikkötestien kirjoittaminen”?

Toteuttakaa laajennuksen logiikalle yksikkötestejä suosittujen JavaScript-testauskehysten avulla luotettavuuden varmistamiseksi. Harjoittelet Selainlaajennusten kehittäminen (Chrome ja Edge)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Selainlaajennusten kehittäminen (Chrome ja Edge)-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Selainlaajennusten kehittäminen (Chrome ja Edge)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Laajennusten yksikkötestien kirjoittaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Selainlaajennusten kehittäminen (Chrome ja Edge)-oppitunnilla?

Kyllä. Jokainen Selainlaajennusten kehittäminen (Chrome ja Edge)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Laajennuksen komponenttien virheenkorjaus
Laajennusten yksikkötestien kirjoittaminen
Suorituskyvyn optimointistrategiat
Lokitus, virheraportointi ja diagnostiikka

← Takaisin: Selainlaajennusten kehittäminen (Chrome ja Edge)