Tinklalapio komponentų testavimas: vienetų testavimas ir komponentų izoliavimas

Tinklalapio komponentai sukėlė revoliuciją „front-end“ kūrime, suteikdami standartizuotą būdą kurti daugkartinio naudojimo ir inkapsuliuotus UI elementus. Kadangi tinklalapio komponentai vis labiau paplinta šiuolaikinėse tinklalapio programose, jų kokybės užtikrinimas kruopščiu testavimu yra svarbiausias. Šiame straipsnyje nagrinėjamos dvi pagrindinės tinklalapio komponentų testavimo strategijos: vienetų testavimas ir komponentų izoliavimas, analizuojant jų stipriąsias, silpnąsias puses ir tai, kaip jas efektyviai integruoti į savo kūrimo eigą.

Kodėl reikia testuoti tinklalapio komponentus?

Prieš pradedant gilintis į konkrečias testavimo technikas, labai svarbu suprasti, kodėl tinklalapio komponentų testavimas yra būtinas:

• Patikimumas: Testavimas užtikrina, kad jūsų tinklalapio komponentai veiktų kaip tikėtasi skirtingose naršyklėse ir aplinkose, sumažinant netikėtą elgseną ir klaidas.
• Palaikomumas: Gerai ištestuotus komponentus lengviau prižiūrėti ir pertvarkyti, sumažinant regresijų atsiradimo riziką atliekant pakeitimus.
• Panaudojamumas: Kruopštus testavimas patvirtina, kad jūsų komponentai yra tikrai daugkartinio naudojimo ir gali būti užtikrintai integruoti į skirtingas jūsų programos dalis ar net į kelis projektus.
• Sumažėjusios kūrimo išlaidos: Klaidų fiksavimas ankstyvoje kūrimo stadijoje testuojant yra žymiai pigesnis nei jų taisymas vėliau produkcinėje aplinkoje.
• Pagerinta vartotojo patirtis: Užtikrindami savo tinklalapio komponentų stabilumą ir funkcionalumą, prisidedate prie sklandesnės ir malonesnės vartotojo patirties.

Tinklalapio komponentų vienetų testavimas

Vienetų testavimas sutelktas į atskirų kodo vienetų testavimą izoliuotai. Tinklalapio komponentų kontekste vienetas paprastai reiškia konkretų metodą ar funkciją komponento klasėje. Vienetų testavimo tikslas – patikrinti, ar kiekvienas vienetas teisingai atlieka numatytą užduotį, nepriklausomai nuo kitų komponento ar programos dalių.

Tinklalapio komponentų vienetų testavimo privalumai

• Smulkus testavimas: Vienetų testai suteikia smulkią testavimo proceso kontrolę, leidžiančią išskirti ir išbandyti konkrečius jūsų komponento funkcionalumo aspektus.
• Greitas vykdymas: Vienetų testai paprastai vykdomi labai greitai, todėl kūrimo metu gaunamas greitas grįžtamasis ryšys.
• Lengvas derinimas: Kai vieneto testas nepavyksta, paprastai nesunku nustatyti problemos šaltinį, nes testuojama tik maža, izoliuota kodo dalis.
• Kodo padengimas: Vienetų testavimas gali padėti pasiekti aukštą kodo padengimą, užtikrinant, kad būtų išbandytas didelis jūsų komponento kodo procentas.

Tinklalapio komponentų vienetų testavimo iššūkiai

• Sudėtingumas su „Shadow DOM“: Sąveika su „shadow DOM“ vienetų testuose gali būti sudėtinga, nes jis inkapsuliuoja komponento vidinę struktūrą ir stilių.
• Priklausomybių imitavimas („mocking“): Gali tekti imituoti priklausomybes, kad būtų galima išskirti testuojamą vienetą, o tai gali padidinti testų sudėtingumą.
• Dėmesys įgyvendinimo detalėms: Pernelyg specifiniai vienetų testai gali būti trapūs ir sugesti, kai pertvarkote komponento vidinį įgyvendinimą.

Įrankiai ir karkasai tinklalapio komponentų vienetų testavimui

Tinklalapio komponentų vienetų testavimui galima naudoti kelis populiarius „JavaScript“ testavimo karkasus:

• Jest: Plačiai naudojamas testavimo karkasas, sukurtas „Facebook“, žinomas dėl savo paprastumo, greičio ir integruotų imitavimo galimybių.
• Mocha: Lankstus testavimo karkasas, leidžiantis pasirinkti tvirtinimo biblioteką (pvz., „Chai“, „Assert“) ir imitavimo biblioteką (pvz., „Sinon“).
• Jasmine: Dar vienas populiarus testavimo karkasas su švaria ir lengvai išmokstama sintakse.

Tinklalapio komponento vienetų testavimo pavyzdys su „Jest“

Panagrinėkime paprastą tinklalapio komponentą, pavadintą <my-counter>, kuris rodo skaitiklį ir leidžia vartotojams jį didinti.

my-counter.js

class MyCounter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  increment() {
    this._count++;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      <p>Count: ${this._count}</p>
      <button id="incrementBtn">Increment</button>
    `;

    this.shadow.getElementById('incrementBtn').addEventListener('click', () => this.increment());
  }
}

customElements.define('my-counter', MyCounter);

my-counter.test.js (Jest)

import './my-counter.js';

describe('MyCounter', () => {
  let element;

  beforeEach(() => {
    element = document.createElement('my-counter');
    document.body.appendChild(element);
  });

  afterEach(() => {
    document.body.removeChild(element);
  });

  it('should increment the count when the button is clicked', () => {
    const incrementBtn = element.shadowRoot.getElementById('incrementBtn');
    incrementBtn.click();
    expect(element.shadowRoot.querySelector('p').textContent).toBe('Count: 1');
  });

  it('should initialize the count to 0', () => {
    expect(element.shadowRoot.querySelector('p').textContent).toBe('Count: 0');
  });
});

Šis pavyzdys parodo, kaip naudojant „Jest“ testuoti increment metodą ir pradinę <my-counter> komponento skaitiklio reikšmę. Jame pabrėžiama prieiga prie elementų „shadow DOM“ viduje naudojant `shadowRoot`.

Komponentų izoliavimo testavimas

Komponentų izoliavimo testavimas, taip pat žinomas kaip komponentų testavimas arba vizualinis testavimas, sutelktas į tinklalapio komponentų testavimą realistiškesnėje aplinkoje, paprastai izoliuotoje nuo likusios programos dalies. Šis metodas leidžia patikrinti komponento elgseną, išvaizdą ir sąveiką su vartotojais, neįtakojant aplinkinės programos sudėtingumo.

Komponentų izoliavimo testavimo privalumai

• Realistiška testavimo aplinka: Komponentų izoliavimo testavimas suteikia realistiškesnę testavimo aplinką, palyginti su vienetų testavimu, leidžiančią išbandyti komponento elgseną kontekste, kuris labiau primena, kaip jis bus naudojamas programoje.
• Vizualinės regresijos testavimas: Komponentų izoliavimo testavimas leidžia atlikti vizualinės regresijos testavimą, kai galite palyginti komponento ekrano kopijas skirtingose versijose, kad aptiktumėte nenumatytus vizualinius pokyčius.
• Geresnis bendradarbiavimas: Komponentų izoliavimo įrankiai dažnai suteikia vizualinę sąsają, kuri leidžia kūrėjams, dizaineriams ir suinteresuotosioms šalims lengvai peržiūrėti komponentus ir pateikti atsiliepimus.
• Prieinamumo testavimas: Lengviau atlikti prieinamumo testavimą izoliuotiems komponentams, užtikrinant, kad jie atitiktų prieinamumo standartus.

Komponentų izoliavimo testavimo iššūkiai

• Lėtesnis vykdymas: Komponentų izoliavimo testai gali būti vykdomi lėčiau nei vienetų testai, nes jie apima komponento atvaizdavimą naršyklės aplinkoje.
• Sudėtingesnis paruošimas: Komponentų izoliavimo testavimo aplinkos paruošimas gali būti sudėtingesnis nei vienetų testavimo aplinkos paruošimas.
• Nestabilumo potencialas: Komponentų izoliavimo testai gali būti labiau linkę į nestabilumą dėl tokių veiksnių kaip tinklo delsos ir naršyklių neatitikimų.

Įrankiai ir karkasai komponentų izoliavimo testavimui

Komponentų izoliavimo testavimui yra keletas įrankių ir karkasų:

• Storybook: Populiarus atvirojo kodo įrankis, skirtas kurti ir testuoti UI komponentus izoliuotai. „Storybook“ suteikia vizualinę aplinką, kurioje galite naršyti komponentus, su jais sąveikauti ir peržiūrėti jų dokumentaciją.
• Cypress: „End-to-end“ testavimo karkasas, kuris taip pat gali būti naudojamas komponentų testavimui. „Cypress“ suteikia galingą API sąveikai su komponentais ir jų elgsenos tvirtinimui.
• Chromatic: Vizualinio testavimo platforma, integruojama su „Storybook“, siekiant suteikti vizualinės regresijos testavimo ir bendradarbiavimo funkcijas.
• Bit: Komponentų platforma, skirta kurti, dokumentuoti ir organizuoti daugkartinio naudojimo komponentus.

Komponentų izoliavimo testavimo pavyzdys su „Storybook“

Naudodami tą patį <my-counter> komponentą iš vienetų testavimo pavyzdžio, pažiūrėkime, kaip jį išbandyti naudojant „Storybook“.

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions'
  ],
  framework: '@storybook/web-components',
  core: {
    builder: '@storybook/builder-webpack5'
  },
};

src/my-counter.stories.js

import './my-counter.js';

export default {
  title: 'MyCounter',
  component: 'my-counter',
};

const Template = () => '<my-counter></my-counter>';

export const Default = Template.bind({});

Šis pavyzdys parodo, kaip sukurti „Storybook“ istoriją <my-counter> komponentui. Tada galite naudoti „Storybook“ interaktyvią sąsają, kad rankiniu būdu išbandytumėte komponentą arba integruotumėte jį su vizualinio testavimo įrankiu, pavyzdžiui, „Chromatic“.

Tinkamos testavimo strategijos pasirinkimas

Vienetų testavimas ir komponentų izoliavimo testavimas nėra vienas kitą paneigiantys; atvirkščiai, jie papildo vienas kitą ir turėtų būti naudojami kartu, kad būtų užtikrintas išsamus jūsų tinklalapio komponentų testavimo padengimas.

Kada naudoti vienetų testavimą:

• Norint testuoti atskirus metodus ar funkcijas jūsų komponento klasėje.
• Norint patikrinti komponento vidinę logiką ir skaičiavimus.
• Kai reikia greito grįžtamojo ryšio kūrimo metu.
• Kai norite pasiekti aukštą kodo padengimą.

Kada naudoti komponentų izoliavimo testavimą:

• Norint testuoti komponento elgseną ir išvaizdą realistiškoje aplinkoje.
• Norint atlikti vizualinės regresijos testavimą.
• Norint pagerinti bendradarbiavimą tarp kūrėjų, dizainerių ir suinteresuotųjų šalių.
• Norint atlikti prieinamumo testavimą.

Geroji praktika testuojant tinklalapio komponentus

Štai keletas gerosios praktikos pavyzdžių, kurių reikėtų laikytis testuojant tinklalapio komponentus:

• Rašykite testus anksti ir dažnai: Integruokite testavimą į savo kūrimo eigą nuo pat projekto pradžios. Apsvarstykite Test-Driven Development (TDD) arba Behavior-Driven Development (BDD) metodus.
• Testuokite visus savo komponento aspektus: Testuokite komponento funkcionalumą, išvaizdą, prieinamumą ir sąveiką su vartotojais.
• Naudokite aiškius ir glaustus testų pavadinimus: Naudokite aprašomuosius testų pavadinimus, kurie aiškiai nurodo, ką kiekvienas testas tikrina.
• Laikykite testus izoliuotus: Užtikrinkite, kad kiekvienas testas būtų nepriklausomas nuo kitų testų ir nesiremtų išorine būsena.
• Naudokite imitavimą apgalvotai: Imituokite priklausomybes tik tada, kai tai būtina norint išskirti testuojamą vienetą.
• Automatizuokite savo testus: Integruokite savo testus į nuolatinės integracijos (CI) konvejerį, kad užtikrintumėte, jog jie būtų vykdomi automatiškai po kiekvieno pakeitimo.
• Reguliariai peržiūrėkite testų rezultatus: Reguliariai peržiūrėkite testų rezultatus, kad nustatytumėte ir ištaisytumėte bet kokius nepavykusius testus.
• Dokumentuokite savo testus: Dokumentuokite savo testus, kad paaiškintumėte jų tikslą ir veikimo principą.
• Apsvarstykite kelių naršyklių testavimą: Testuokite savo komponentus skirtingose naršyklėse („Chrome“, „Firefox“, „Safari“, „Edge“), kad užtikrintumėte suderinamumą. Šiam tikslui gali padėti tokios paslaugos kaip „BrowserStack“ ir „Sauce Labs“.
• Prieinamumo testavimas: Įgyvendinkite automatizuotą prieinamumo testavimą kaip savo komponentų testavimo strategijos dalį, naudodami įrankius, tokius kaip „axe-core“.

Pavyzdys: internacionalizavimo (i18n) tinklalapio komponento įgyvendinimas ir testavimas

Panagrinėkime tinklalapio komponentą, kuris tvarko internacionalizavimą. Tai labai svarbu programoms, skirtoms pasaulinei auditorijai.

i18n-component.js

class I18nComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.language = 'en'; // Default language
    this.translations = {
      en: {
        greeting: 'Hello, world!',
        buttonText: 'Click me',
      },
      fr: {
        greeting: 'Bonjour le monde !',
        buttonText: 'Cliquez ici',
      },
      es: {
        greeting: '¡Hola Mundo!',
        buttonText: 'Haz clic aquí',
      },
    };
    this.render();
  }

  setLanguage(lang) {
    this.language = lang;
    this.render();
  }

  render() {
    const translation = this.translations[this.language] || this.translations['en']; // Fallback to English
    this.shadow.innerHTML = `
      <p>${translation.greeting}</p>
      <button>${translation.buttonText}</button>
    `;
  }
}

customElements.define('i18n-component', I18nComponent);

i18n-component.test.js (Jest)

import './i18n-component.js';

describe('I18nComponent', () => {
  let element;

  beforeEach(() => {
    element = document.createElement('i18n-component');
    document.body.appendChild(element);
  });

  afterEach(() => {
    document.body.removeChild(element);
  });

  it('should display the English greeting by default', () => {
    expect(element.shadowRoot.querySelector('p').textContent).toBe('Hello, world!');
  });

  it('should display the French greeting when the language is set to fr', () => {
    element.setLanguage('fr');
    expect(element.shadowRoot.querySelector('p').textContent).toBe('Bonjour le monde !');
  });

  it('should display the Spanish greeting when the language is set to es', () => {
    element.setLanguage('es');
    expect(element.shadowRoot.querySelector('p').textContent).toBe('¡Hola Mundo!');
  });

  it('should fallback to English if the language is not supported', () => {
    element.setLanguage('de'); // German is not supported
    expect(element.shadowRoot.querySelector('p').textContent).toBe('Hello, world!');
  });
});

Šis pavyzdys parodo, kaip atlikti internacionalizavimo komponento vienetų testavimą, užtikrinant, kad jis rodytų teisingą tekstą, atsižvelgiant į pasirinktą kalbą, ir prireikus grįžtų prie numatytosios kalbos. Šis komponentas parodo, kaip svarbu atsižvelgti į pasaulinę auditoriją tinklalapių kūrime.

Tinklalapio komponentų prieinamumo testavimas

Užtikrinti, kad tinklalapio komponentai būtų prieinami vartotojams su negalia, yra labai svarbu. Prieinamumo testavimas turėtų būti integruotas į jūsų testavimo eigą.

Įrankiai prieinamumo testavimui:

• axe-core: Atvirojo kodo prieinamumo testavimo variklis.
• Lighthouse: „Google Chrome“ plėtinys ir „Node.js“ modulis, skirtas tinklalapių auditui, įskaitant prieinamumą.

Pavyzdys: Prieinamumo testavimas su „axe-core“ ir „Jest“

import { axe, toHaveNoViolations } from 'jest-axe';
import './my-component.js';

expect.extend(toHaveNoViolations);

describe('MyComponent Accessibility', () => {
  let element;

  beforeEach(async () => {
    element = document.createElement('my-component');
    document.body.appendChild(element);
    await element.updateComplete; // Wait for the component to render
  });

  afterEach(() => {
    document.body.removeChild(element);
  });

  it('should pass accessibility checks', async () => {
    const results = await axe(element.shadowRoot);
    expect(results).toHaveNoViolations();
  });
});

Šis pavyzdys rodo, kaip naudoti „axe-core“ su „Jest“ automatizuotam prieinamumo testavimui tinklalapio komponente. `toHaveNoViolations` yra pasirinktinis „Jest“ derintuvas, kuris patvirtina, kad komponentas neturi prieinamumo pažeidimų. Tai ženkliai pagerina jūsų tinklalapio programos įtraukumą.

Išvada

Tinklalapio komponentų testavimas yra labai svarbus kuriant tvirtus, palaikomus ir daugkartinio naudojimo UI elementus. Tiek vienetų testavimas, tiek komponentų izoliavimo testavimas atlieka svarbų vaidmenį užtikrinant jūsų komponentų kokybę. Derindami šias strategijas ir laikydamiesi gerosios praktikos, galite sukurti tinklalapio komponentus, kurie yra patikimi, prieinami ir suteikia puikią vartotojo patirtį pasaulinei auditorijai. Nepamirškite atsižvelgti į internacionalizavimo ir prieinamumo aspektus savo testavimo procese, kad užtikrintumėte, jog jūsų komponentai būtų įtraukūs ir pasiektų platesnę auditoriją.