Pembangunan Sambungan Pelayar (Chrome & Edge) · Pelajaran

Menulis Ujian Unit untuk Sambungan

Laksanakan ujian unit bagi logik sambungan anda menggunakan rangka kerja ujian JavaScript yang popular untuk memastikan kebolehpercayaan.

Pelajaran 2 daripada 411 langkah

Menulis Ujian Unit untuk Sambungan ialah pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) 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 Sambungan Pelayar (Chrome & Edge), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Pengenalan kepada Ujian Unit

Selamat datang! Dalam pelajaran ini, kita akan mendalami ujian unit untuk sambungan pelayar. Ujian unit ialah cara untuk menguji bahagian kecil kod anda yang terasing, yang sering dipanggil "unit".

Bagi sambungan, ini bermaksud menguji fungsi atau modul individu tanpa perlu menjalankan keseluruhan persekitaran pelayar. Tujuannya adalah untuk memastikan setiap bahagian berfungsi dengan betul secara tersendiri.

Mengapa Menguji Sambungan?

Pengujian amat penting untuk membina sambungan pelayar yang kukuh. Inilah sebabnya:

Kebolehpercayaan: Mengesan pepijat lebih awal dan memastikan sambungan anda berfungsi seperti yang dijangkakan.
Kebolehselenggaraan: Menjadikan perubahan akan datang lebih selamat serta mengelakkan kerosakan tidak sengaja (regresi).
Perubahan API: Membantu menyesuaikan diri dengan kemas kini API pelayar (seperti perubahan Manifest V3).
Logik Kompleks: Memastikan logik latar belakang atau skrip kandungan yang rumit berfungsi dengan betul.

Pilih Rangka Kerja Ujian Anda

Beberapa rangka kerja JavaScript membantu anda menulis dan menjalankan ujian. Pilihan popular termasuk:

Jest: Penyelesaian pengujian lengkap daripada Facebook yang terkenal kerana mudah digunakan dan mempunyai pemalsuan terbina dalam.
Mocha: Pelaksana ujian yang fleksibel, sering digandingkan dengan pustaka penegasan seperti Chai.
Vitest: Alternatif moden yang pantas dan dibina pada Vite.

Untuk pelajaran ini, kita akan menggunakan Jest kerana populariti dan cirinya yang menyeluruh.

Sediakan Jest untuk Pengujian

Untuk bermula, cipta folder projek dan mulakannya dengan npm. Kemudian, pasang Jest sebagai kebergantungan pembangunan:

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

Seterusnya, tambahkan skrip ujian pada fail package.json supaya anda boleh menjalankan ujian dengan mudah:

{
  "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
  }
}

Uji Logik JavaScript Tulen

Mari tulis fungsi utiliti ringkas yang mungkin menjadi sebahagian daripada logik sambungan anda. Cipta fail bernama 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 };

Menulis Ujian Pertama Anda

Sekarang, cipta fail ujian bernama utils.test.js. Jest mencari fail yang berakhir dengan .test.js atau .spec.js secara automatik.

Kita akan mengimport fungsi kita dan menggunakan sintaks test (atau it) serta expect milik Jest untuk mentakrifkan dan menyemak ujian kita. Cuba jalankan contoh ini!

// 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

Cabaran API Chrome

Sambungan pelayar sangat bergantung pada API chrome.* (contohnya, chrome.storage, chrome.tabs). API ini hanya tersedia dalam persekitaran pelayar.

Apabila menjalankan ujian unit di luar pelayar (seperti dengan Jest berasaskan Node.js), objek chrome akan tidak ditakrifkan. Untuk menguji logik yang menggunakan API ini, kita perlu memalsukannya.

Pemalsuan bermaksud mencipta versi simulasi bagi objek atau fungsi untuk mengawal tingkah lakunya semasa ujian.

Memalsukan chrome.storage

Mari cipta utiliti yang menggunakan chrome.storage.local. Fungsi ini biasanya berada dalam skrip latar belakang atau modul lain.

Mula-mula, fungsi utiliti kita (contohnya, dalam 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 };

Menguji dengan API yang Dipalsukan

Sekarang, mari tulis ujian untuk storageUtils.js kita. Kita akan mencipta pemalsuan untuk chrome.storage.local sebelum setiap ujian bagi mensimulasikan tingkah lakunya.

jest.fn() milik Jest amat sesuai untuk mencipta fungsi palsu dan menjejaki panggilannya. Cuba jalankan ujian ini!

// 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

Semakan Pantas: Ujian Unit

Anda telah mempelajari tentang ujian unit dan cara memalsukan API pelayar. Antara pernyataan berikut, yang manakah BENAR tentang pengujian logik sambungan pelayar?

Jawab dalam pelajaran interaktif

Imbas Kembali: Ujian Unit

Dalam pelajaran ini, anda telah mempelajari:

Kepentingan ujian unit untuk sambungan pelayar.
Cara menyediakan persekitaran pengujian menggunakan Jest.
Cara menulis ujian unit untuk fungsi JavaScript tulen.
Konsep dan amalan memalsukan API chrome.* untuk menguji logik sambungan di luar pelayar.

Ujian unit ialah kemahiran penting untuk membina sambungan yang kukuh dan mudah diselenggara. Teruskan berlatih untuk memastikan logik teras sambungan anda sentiasa mantap!

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: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menulis Ujian Unit untuk Sambungan” percuma?

Ya — teks penuh “Menulis Ujian Unit untuk Sambungan” 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 Sambungan Pelayar (Chrome & Edge), tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Sambungan Pelayar (Chrome & Edge) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menulis Ujian Unit untuk Sambungan”?

Laksanakan ujian unit bagi logik sambungan anda menggunakan rangka kerja ujian JavaScript yang popular untuk memastikan kebolehpercayaan. Anda berlatih Pembangunan Sambungan Pelayar (Chrome & Edge) 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 Sambungan Pelayar (Chrome & Edge)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) 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 “Menulis Ujian Unit untuk Sambungan” 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 Sambungan Pelayar (Chrome & Edge) ini?

Ya. Setiap pelajaran Pembangunan Sambungan Pelayar (Chrome & Edge) 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

Menyahpepijat Komponen Sambungan
Menulis Ujian Unit untuk Sambungan
Strategi Pengoptimuman Prestasi
Pembalakan, Pelaporan Ralat dan Diagnostik

← Kembali ke Pembangunan Sambungan Pelayar (Chrome & Edge)