വെബ് കമ്പോണന്റ് ടെസ്റ്റിംഗ്: യൂണിറ്റ് ടെസ്റ്റിംഗും കമ്പോണന്റ് ഐസൊലേഷനും

വീണ്ടും ഉപയോഗിക്കാവുന്നതും എൻക്യാപ്‌സുലേറ്റ് ചെയ്തതുമായ യുഐ ഘടകങ്ങൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു സ്റ്റാൻഡേർഡ് മാർഗ്ഗം നൽകിക്കൊണ്ട് വെബ് കമ്പോണന്റുകൾ ഫ്രണ്ട്-എൻഡ് ഡെവലപ്‌മെന്റിൽ വിപ്ലവം സൃഷ്ടിച്ചു. ആധുനിക വെബ് ആപ്ലിക്കേഷനുകളിൽ വെബ് കമ്പോണന്റുകൾക്ക് പ്രാധാന്യം ഏറിവരുമ്പോൾ, കർശനമായ ടെസ്റ്റിംഗിലൂടെ അവയുടെ ഗുണനിലവാരം ഉറപ്പാക്കേണ്ടത് അത്യാവശ്യമാണ്. ഈ ലേഖനം വെബ് കമ്പോണന്റുകൾക്കായുള്ള രണ്ട് പ്രധാന ടെസ്റ്റിംഗ് രീതികൾ പരിശോധിക്കുന്നു: യൂണിറ്റ് ടെസ്റ്റിംഗും കമ്പോണന്റ് ഐസൊലേഷനും. അവയുടെ ഗുണങ്ങൾ, ദോഷങ്ങൾ, നിങ്ങളുടെ ഡെവലപ്‌മെന്റ് വർക്ക്ഫ്ലോയിൽ അവ എങ്ങനെ ഫലപ്രദമായി സംയോജിപ്പിക്കാം എന്നിവയും ഇവിടെ ചർച്ചചെയ്യുന്നു.

എന്തുകൊണ്ട് വെബ് കമ്പോണന്റുകൾ ടെസ്റ്റ് ചെയ്യണം?

നിർദ്ദിഷ്ട ടെസ്റ്റിംഗ് ടെക്നിക്കുകളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, വെബ് കമ്പോണന്റുകൾ ടെസ്റ്റ് ചെയ്യേണ്ടത് എന്തുകൊണ്ട് അത്യാവശ്യമാണെന്ന് മനസ്സിലാക്കേണ്ടതുണ്ട്:

• വിശ്വസനീയത: നിങ്ങളുടെ വെബ് കമ്പോണന്റുകൾ വിവിധ ബ്രൗസറുകളിലും സാഹചര്യങ്ങളിലും പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ടെസ്റ്റിംഗ് ഉറപ്പാക്കുന്നു, ഇത് അപ്രതീക്ഷിത പ്രശ്നങ്ങളും ബഗുകളും കുറയ്ക്കുന്നു.
• പരിപാലനം (Maintainability): നന്നായി ടെസ്റ്റ് ചെയ്ത കമ്പോണന്റുകൾ പരിപാലിക്കാനും റീഫാക്ടർ ചെയ്യാനും എളുപ്പമാണ്, മാറ്റങ്ങൾ വരുത്തുമ്പോൾ റിഗ്രഷനുകൾ ഉണ്ടാകാനുള്ള സാധ്യത കുറയ്ക്കുന്നു.
• പുനരുപയോഗം (Reusability): നിങ്ങളുടെ കമ്പോണന്റുകൾ യഥാർത്ഥത്തിൽ പുനരുപയോഗിക്കാവുന്നതാണെന്നും നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വിവിധ ഭാഗങ്ങളിലോ ഒന്നിലധികം പ്രോജക്റ്റുകളിലോ ആത്മവിശ്വാസത്തോടെ സംയോജിപ്പിക്കാൻ കഴിയുമെന്നും സമഗ്രമായ ടെസ്റ്റിംഗ് ഉറപ്പാക്കുന്നു.
• കുറഞ്ഞ വികസനച്ചെലവ്: ഡെവലപ്‌മെന്റ് പ്രക്രിയയുടെ തുടക്കത്തിൽ തന്നെ ടെസ്റ്റിംഗിലൂടെ ബഗുകൾ കണ്ടെത്തുന്നത്, പിന്നീട് പ്രൊഡക്ഷനിൽ അവ പരിഹരിക്കുന്നതിനേക്കാൾ വളരെ ചെലവ് കുറഞ്ഞതാണ്.
• മെച്ചപ്പെട്ട ഉപയോക്തൃ അനുഭവം: നിങ്ങളുടെ വെബ് കമ്പോണന്റുകളുടെ സ്ഥിരതയും പ്രവർത്തനക്ഷമതയും ഉറപ്പാക്കുന്നതിലൂടെ, നിങ്ങൾ സുഗമവും ആസ്വാദ്യകരവുമായ ഒരു ഉപയോക്തൃ അനുഭവത്തിന് സംഭാവന നൽകുന്നു.

വെബ് കമ്പോണന്റുകളുടെ യൂണിറ്റ് ടെസ്റ്റിംഗ്

യൂണിറ്റ് ടെസ്റ്റിംഗ് കോഡിന്റെ ഓരോ യൂണിറ്റുകളെയും ഒറ്റയ്ക്ക് ടെസ്റ്റ് ചെയ്യുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. വെബ് കമ്പോണന്റുകളുടെ പശ്ചാത്തലത്തിൽ, ഒരു യൂണിറ്റ് എന്നത് സാധാരണയായി കമ്പോണന്റിന്റെ ക്ലാസിനുള്ളിലെ ഒരു നിർദ്ദിഷ്ട മെത്തേഡ് അല്ലെങ്കിൽ ഫംഗ്ഷനെ സൂചിപ്പിക്കുന്നു. ഓരോ യൂണിറ്റും അതിന്റെ ഉദ്ദേശിച്ച ചുമതല ശരിയായി നിർവഹിക്കുന്നുണ്ടോ എന്ന് പരിശോധിക്കുക എന്നതാണ് യൂണിറ്റ് ടെസ്റ്റിംഗിന്റെ ലക്ഷ്യം, ഇത് കമ്പോണന്റിന്റെയോ ആപ്ലിക്കേഷന്റെയോ മറ്റ് ഭാഗങ്ങളിൽ നിന്ന് സ്വതന്ത്രമായിരിക്കും.

വെബ് കമ്പോണന്റുകളുടെ യൂണിറ്റ് ടെസ്റ്റിംഗിന്റെ പ്രയോജനങ്ങൾ

• സൂക്ഷ്മമായ ടെസ്റ്റിംഗ്: യൂണിറ്റ് ടെസ്റ്റുകൾ ടെസ്റ്റിംഗ് പ്രക്രിയയിൽ സൂക്ഷ്മമായ നിയന്ത്രണം നൽകുന്നു, നിങ്ങളുടെ കമ്പോണന്റിന്റെ പ്രവർത്തനത്തിന്റെ നിർദ്ദിഷ്ട വശങ്ങൾ വേർതിരിച്ച് ടെസ്റ്റ് ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.
• വേഗതയേറിയ നിർവ്വഹണം: യൂണിറ്റ് ടെസ്റ്റുകൾ സാധാരണയായി വളരെ വേഗത്തിൽ പ്രവർത്തിക്കുന്നു, ഇത് ഡെവലപ്‌മെന്റ് സമയത്ത് പെട്ടെന്നുള്ള ഫീഡ്‌ബ্যাক നൽകുന്നു.
• എളുപ്പമുള്ള ഡീബഗ്ഗിംഗ്: ഒരു യൂണിറ്റ് ടെസ്റ്റ് പരാജയപ്പെടുമ്പോൾ, പ്രശ്നത്തിന്റെ ഉറവിടം കണ്ടെത്തുന്നത് സാധാരണയായി എളുപ്പമാണ്, കാരണം നിങ്ങൾ കോഡിന്റെ ഒരു ചെറിയ, ഒറ്റപ്പെട്ട ഭാഗം മാത്രമാണ് ടെസ്റ്റ് ചെയ്യുന്നത്.
• കോഡ് കവറേജ്: ഉയർന്ന കോഡ് കവറേജ് നേടാൻ യൂണിറ്റ് ടെസ്റ്റിംഗ് നിങ്ങളെ സഹായിക്കും, നിങ്ങളുടെ കമ്പോണന്റിന്റെ കോഡിന്റെ വലിയൊരു ശതമാനം ടെസ്റ്റ് ചെയ്യപ്പെടുന്നുവെന്ന് ഇത് ഉറപ്പാക്കുന്നു.

വെബ് കമ്പോണന്റുകളുടെ യൂണിറ്റ് ടെസ്റ്റിംഗിലെ വെല്ലുവിളികൾ

• ഷാഡോ ഡോമുമായുള്ള സങ്കീർണ്ണത: യൂണിറ്റ് ടെസ്റ്റുകളിൽ ഷാഡോ ഡോമുമായി സംവദിക്കുന്നത് വെല്ലുവിളി നിറഞ്ഞതാണ്, കാരണം ഇത് കമ്പോണന്റിന്റെ ആന്തരിക ഘടനയെയും സ്റ്റൈലിംഗിനെയും ഉൾക്കൊള്ളുന്നു.
• ഡിപൻഡൻസികൾ മോക്ക് ചെയ്യൽ: ടെസ്റ്റ് ചെയ്യേണ്ട യൂണിറ്റിനെ വേർതിരിക്കുന്നതിന് നിങ്ങൾ ഡിപൻഡൻസികൾ മോക്ക് ചെയ്യേണ്ടി വന്നേക്കാം, ഇത് നിങ്ങളുടെ ടെസ്റ്റുകൾക്ക് സങ്കീർണ്ണത വർദ്ധിപ്പിക്കും.
• നടപ്പാക്കൽ വിശദാംശങ്ങളിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു: അമിതമായി നിർദ്ദിഷ്ടമായ യൂണിറ്റ് ടെസ്റ്റുകൾ ദുർബലമാകാനും നിങ്ങളുടെ കമ്പോണന്റിന്റെ ആന്തരിക ഘടന റീഫാക്ടർ ചെയ്യുമ്പോൾ പരാജയപ്പെടാനും സാധ്യതയുണ്ട്.

വെബ് കമ്പോണന്റുകളുടെ യൂണിറ്റ് ടെസ്റ്റിംഗിനുള്ള ടൂളുകളും ഫ്രെയിംവർക്കുകളും

വെബ് കമ്പോണന്റുകളുടെ യൂണിറ്റ് ടെസ്റ്റിംഗിനായി നിരവധി പ്രശസ്തമായ ജാവാസ്ക്രിപ്റ്റ് ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്കുകൾ ഉപയോഗിക്കാം:

• ജസ്റ്റ് (Jest): ഫേസ്ബുക്ക് വികസിപ്പിച്ചെടുത്ത, വ്യാപകമായി ഉപയോഗിക്കുന്ന ഒരു ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക്. അതിന്റെ ലാളിത്യം, വേഗത, ഇൻ-ബിൽറ്റ് മോക്കിംഗ് കഴിവുകൾ എന്നിവയ്ക്ക് പേരുകേട്ടതാണ്.
• മോക്ക (Mocha): നിങ്ങളുടെ അസേർഷൻ ലൈബ്രറിയും (ഉദാഹരണത്തിന്, Chai, Assert) മോക്കിംഗ് ലൈബ്രറിയും (ഉദാഹരണത്തിന്, Sinon) തിരഞ്ഞെടുക്കാൻ അനുവദിക്കുന്ന ഒരു ഫ്ലെക്സിബിൾ ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക്.
• ജാസ്മിൻ (Jasmine): വൃത്തിയുള്ളതും എളുപ്പത്തിൽ പഠിക്കാൻ കഴിയുന്നതുമായ സിന്റാക്സുള്ള മറ്റൊരു ജനപ്രിയ ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക്.

ജസ്റ്റ് ഉപയോഗിച്ച് ഒരു വെബ് കമ്പോണന്റ് യൂണിറ്റ് ടെസ്റ്റ് ചെയ്യുന്നതിന്റെ ഉദാഹരണം

ഒരു കൗണ്ടർ പ്രദർശിപ്പിക്കുകയും ഉപയോക്താക്കൾക്ക് അത് വർദ്ധിപ്പിക്കാൻ അനുവദിക്കുകയും ചെയ്യുന്ന <my-counter> എന്ന ലളിതമായ ഒരു വെബ് കമ്പോണന്റ് പരിഗണിക്കാം.

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 (ജസ്റ്റ്)

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

ഈ ഉദാഹരണം, <my-counter> കമ്പോണന്റിന്റെ increment മെത്തേഡും പ്രാരംഭ കൗണ്ട് മൂല്യവും ടെസ്റ്റ് ചെയ്യാൻ ജസ്റ്റ് എങ്ങനെ ഉപയോഗിക്കാമെന്ന് കാണിക്കുന്നു. shadowRoot ഉപയോഗിച്ച് ഷാഡോ ഡോമിനുള്ളിലെ ഘടകങ്ങളെ ആക്‌സസ് ചെയ്യുന്നതിന് ഇത് ഊന്നൽ നൽകുന്നു.

കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗ്

കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗ്, കമ്പോണന്റ് ടെസ്റ്റിംഗ് അല്ലെങ്കിൽ വിഷ്വൽ ടെസ്റ്റിംഗ് എന്നും അറിയപ്പെടുന്നു. ഇത് ആപ്ലിക്കേഷന്റെ മറ്റ് ഭാഗങ്ങളിൽ നിന്ന് വേർതിരിച്ച്, കൂടുതൽ യാഥാർത്ഥ്യബോധമുള്ള ഒരു പരിതസ്ഥിതിയിൽ വെബ് കമ്പോണന്റുകൾ ടെസ്റ്റ് ചെയ്യുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. ഈ സമീപനം, ചുറ്റുമുള്ള ആപ്ലിക്കേഷന്റെ സങ്കീർണ്ണതകളാൽ സ്വാധീനിക്കപ്പെടാതെ കമ്പോണന്റിന്റെ പെരുമാറ്റം, രൂപം, ഉപയോക്താക്കളുമായുള്ള ഇടപെടലുകൾ എന്നിവ പരിശോധിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗിന്റെ പ്രയോജനങ്ങൾ

• യാഥാർത്ഥ്യബോധമുള്ള ടെസ്റ്റിംഗ് പരിതസ്ഥിതി: കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗ്, യൂണിറ്റ് ടെസ്റ്റിംഗുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ കൂടുതൽ യാഥാർത്ഥ്യബോധമുള്ള ഒരു ടെസ്റ്റിംഗ് പരിതസ്ഥിതി നൽകുന്നു. ഇത് ആപ്ലിക്കേഷനിൽ എങ്ങനെ ഉപയോഗിക്കുമെന്നതിനോട് കൂടുതൽ സാമ്യമുള്ള ഒരു പശ്ചാത്തലത്തിൽ കമ്പോണന്റിന്റെ പെരുമാറ്റം ടെസ്റ്റ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
• വിഷ്വൽ റിഗ്രഷൻ ടെസ്റ്റിംഗ്: കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗ്, വിഷ്വൽ റിഗ്രഷൻ ടെസ്റ്റിംഗ് സാധ്യമാക്കുന്നു. ഇതിലൂടെ, ഉദ്ദേശിക്കാത്ത ദൃശ്യപരമായ മാറ്റങ്ങൾ കണ്ടെത്താൻ വിവിധ ബിൽഡുകളിലുടനീളം കമ്പോണന്റിന്റെ സ്ക്രീൻഷോട്ടുകൾ താരതമ്യം ചെയ്യാൻ നിങ്ങൾക്ക് കഴിയും.
• മെച്ചപ്പെട്ട സഹകരണം: കമ്പോണന്റ് ഐസൊലേഷൻ ടൂളുകൾ പലപ്പോഴും ഒരു വിഷ്വൽ ഇന്റർഫേസ് നൽകുന്നു. ഇത് ഡെവലപ്പർമാർക്കും ഡിസൈനർമാർക്കും സ്റ്റേക്ക്‌ഹോൾഡർമാർക്കും കമ്പോണന്റുകൾ എളുപ്പത്തിൽ അവലോകനം ചെയ്യാനും ഫീഡ്‌ബ্যাক നൽകാനും അവസരം നൽകുന്നു.
• അക്സെസ്സിബിലിറ്റി ടെസ്റ്റിംഗ്: ഒറ്റപ്പെട്ട കമ്പോണന്റുകളിൽ അക്സെസ്സിബിലിറ്റി ടെസ്റ്റിംഗ് നടത്തുന്നത് എളുപ്പമാണ്, അവ അക്സെസ്സിബിലിറ്റി മാനദണ്ഡങ്ങൾ പാലിക്കുന്നുണ്ടെന്ന് ഇത് ഉറപ്പാക്കുന്നു.

കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗിലെ വെല്ലുവിളികൾ

• വേഗത കുറഞ്ഞ നിർവ്വഹണം: കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റുകൾക്ക് യൂണിറ്റ് ടെസ്റ്റുകളേക്കാൾ വേഗത കുറവായിരിക്കാം, കാരണം അവ ഒരു ബ്രൗസർ പരിതസ്ഥിതിയിൽ കമ്പോണന്റ് റെൻഡർ ചെയ്യുന്നത് ഉൾപ്പെടുന്നു.
• കൂടുതൽ സങ്കീർണ്ണമായ സജ്ജീകരണം: ഒരു കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗ് പരിതസ്ഥിതി സജ്ജീകരിക്കുന്നത് യൂണിറ്റ് ടെസ്റ്റിംഗ് പരിതസ്ഥിതി സജ്ജീകരിക്കുന്നതിനേക്കാൾ സങ്കീർണ്ണമായിരിക്കും.
• ഫ്ലേക്കിനസ്സിനുള്ള സാധ്യത: നെറ്റ്‌വർക്ക് ലേറ്റൻസി, ബ്രൗസർ പൊരുത്തക്കേടുകൾ തുടങ്ങിയ ഘടകങ്ങൾ കാരണം കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റുകൾ ഫ്ലേക്കി ആകാൻ സാധ്യതയുണ്ട്.

കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗിനുള്ള ടൂളുകളും ഫ്രെയിംവർക്കുകളും

കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗിനായി നിരവധി ടൂളുകളും ഫ്രെയിംവർക്കുകളും ലഭ്യമാണ്:

• സ്റ്റോറിബുക്ക് (Storybook): യുഐ കമ്പോണന്റുകൾ ഒറ്റയ്ക്ക് വികസിപ്പിക്കുന്നതിനും ടെസ്റ്റ് ചെയ്യുന്നതിനുമുള്ള ഒരു ജനപ്രിയ ഓപ്പൺ സോഴ്‌സ് ടൂൾ. സ്റ്റോറിബുക്ക് ഒരു വിഷ്വൽ പരിതസ്ഥിതി നൽകുന്നു, അവിടെ നിങ്ങൾക്ക് കമ്പോണന്റുകൾ ബ്രൗസ് ചെയ്യാനും അവയുമായി സംവദിക്കാനും അവയുടെ ഡോക്യുമെന്റേഷൻ കാണാനും കഴിയും.
• സൈപ്രസ് (Cypress): ഒരു എൻഡ്-ടു-എൻഡ് ടെസ്റ്റിംഗ് ഫ്രെയിംവർക്ക്, ഇത് കമ്പോണന്റ് ടെസ്റ്റിംഗിനും ഉപയോഗിക്കാം. കമ്പോണന്റുകളുമായി സംവദിക്കുന്നതിനും അവയുടെ പെരുമാറ്റം ഉറപ്പാക്കുന്നതിനും സൈപ്രസ് ശക്തമായ ഒരു എപിഐ നൽകുന്നു.
• ക്രോമാറ്റിക് (Chromatic): വിഷ്വൽ റിഗ്രഷൻ ടെസ്റ്റിംഗും സഹകരണ സവിശേഷതകളും നൽകുന്നതിന് സ്റ്റോറിബുക്കുമായി സംയോജിപ്പിക്കുന്ന ഒരു വിഷ്വൽ ടെസ്റ്റിംഗ് പ്ലാറ്റ്ഫോം.
• ബിറ്റ് (Bit): പുനരുപയോഗിക്കാവുന്ന കമ്പോണന്റുകൾ നിർമ്മിക്കുന്നതിനും ഡോക്യുമെന്റ് ചെയ്യുന്നതിനും ഓർഗനൈസുചെയ്യുന്നതിനുമുള്ള ഒരു കമ്പോണന്റ് പ്ലാറ്റ്ഫോം.

സ്റ്റോറിബുക്ക് ഉപയോഗിച്ച് കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗ് നടത്തുന്നതിന്റെ ഉദാഹരണം

യൂണിറ്റ് ടെസ്റ്റിംഗ് ഉദാഹരണത്തിൽ നിന്ന് അതേ <my-counter> കമ്പോണന്റ് ഉപയോഗിച്ച്, സ്റ്റോറിബുക്ക് ഉപയോഗിച്ച് ഇത് എങ്ങനെ ടെസ്റ്റ് ചെയ്യാമെന്ന് നോക്കാം.

.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({});

ഈ ഉദാഹരണം <my-counter> കമ്പോണന്റിനായി ഒരു സ്റ്റോറിബുക്ക് സ്റ്റോറി എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് കാണിക്കുന്നു. തുടർന്ന് നിങ്ങൾക്ക് സ്റ്റോറിബുക്കിന്റെ ഇന്ററാക്ടീവ് ഇന്റർഫേസ് ഉപയോഗിച്ച് കമ്പോണന്റ് നേരിട്ട് ടെസ്റ്റ് ചെയ്യാനോ അല്ലെങ്കിൽ ക്രോമാറ്റിക് പോലുള്ള ഒരു വിഷ്വൽ ടെസ്റ്റിംഗ് ടൂളുമായി സംയോജിപ്പിക്കാനോ കഴിയും.

ശരിയായ ടെസ്റ്റിംഗ് രീതി തിരഞ്ഞെടുക്കുന്നു

യൂണിറ്റ് ടെസ്റ്റിംഗും കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗും പരസ്പരം ഒഴിവാക്കുന്നവയല്ല; മറിച്ച്, അവ പരസ്പരം പൂരകമാണ്, നിങ്ങളുടെ വെബ് കമ്പോണന്റുകൾക്ക് സമഗ്രമായ ടെസ്റ്റ് കവറേജ് നൽകുന്നതിന് ഇവ രണ്ടും ഒരുമിച്ച് ഉപയോഗിക്കണം.

എപ്പോൾ യൂണിറ്റ് ടെസ്റ്റിംഗ് ഉപയോഗിക്കണം:

• നിങ്ങളുടെ കമ്പോണന്റിന്റെ ക്ലാസിനുള്ളിലെ ഓരോ മെത്തേഡുകളോ ഫംഗ്ഷനുകളോ ടെസ്റ്റ് ചെയ്യാൻ.
• കമ്പോണന്റിന്റെ ആന്തരിക ലോജിക്കും കണക്കുകൂട്ടലുകളും പരിശോധിക്കാൻ.
• ഡെവലപ്‌മെന്റ് സമയത്ത് വേഗത്തിലുള്ള ഫീഡ്‌ബ্যাক ആവശ്യമുള്ളപ്പോൾ.
• ഉയർന്ന കോഡ് കവറേജ് നേടാൻ ആഗ്രഹിക്കുമ്പോൾ.

എപ്പോൾ കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗ് ഉപയോഗിക്കണം:

• യാഥാർത്ഥ്യബോധമുള്ള ഒരു പരിതസ്ഥിതിയിൽ കമ്പോണന്റിന്റെ പെരുമാറ്റവും രൂപവും ടെസ്റ്റ് ചെയ്യാൻ.
• വിഷ്വൽ റിഗ്രഷൻ ടെസ്റ്റിംഗ് നടത്താൻ.
• ഡെവലപ്പർമാർ, ഡിസൈനർമാർ, സ്റ്റേക്ക്‌ഹോൾഡർമാർ എന്നിവർ തമ്മിലുള്ള സഹകരണം മെച്ചപ്പെടുത്താൻ.
• അക്സെസ്സിബിലിറ്റി ടെസ്റ്റിംഗ് നടത്താൻ.

വെബ് കമ്പോണന്റുകൾ ടെസ്റ്റ് ചെയ്യുന്നതിനുള്ള മികച്ച രീതികൾ

വെബ് കമ്പോണന്റുകൾ ടെസ്റ്റ് ചെയ്യുമ്പോൾ പിന്തുടരേണ്ട ചില മികച്ച രീതികൾ താഴെ നൽകുന്നു:

• നേരത്തെയും ഇടയ്ക്കിടെയും ടെസ്റ്റുകൾ എഴുതുക: പ്രോജക്റ്റിന്റെ തുടക്കം മുതൽ നിങ്ങളുടെ ഡെവലപ്‌മെന്റ് വർക്ക്ഫ്ലോയിൽ ടെസ്റ്റിംഗ് സംയോജിപ്പിക്കുക. ടെസ്റ്റ്-ഡ്രിവൺ ഡെവലപ്‌മെന്റ് (TDD) അല്ലെങ്കിൽ ബിഹേവിയർ-ഡ്രിവൺ ഡെവലപ്‌മെന്റ് (BDD) സമീപനങ്ങൾ പരിഗണിക്കുക.
• നിങ്ങളുടെ കമ്പോണന്റിന്റെ എല്ലാ വശങ്ങളും ടെസ്റ്റ് ചെയ്യുക: കമ്പോണന്റിന്റെ പ്രവർത്തനം, രൂപം, അക്സെസ്സിബിലിറ്റി, ഉപയോക്താക്കളുമായുള്ള ഇടപെടലുകൾ എന്നിവ ടെസ്റ്റ് ചെയ്യുക.
• വ്യക്തവും സംക്ഷിപ്തവുമായ ടെസ്റ്റ് പേരുകൾ ഉപയോഗിക്കുക: ഓരോ ടെസ്റ്റും എന്താണ് പരിശോധിക്കുന്നതെന്ന് വ്യക്തമായി സൂചിപ്പിക്കുന്ന വിവരണാത്മക ടെസ്റ്റ് പേരുകൾ ഉപയോഗിക്കുക.
• ടെസ്റ്റുകൾ ഒറ്റപ്പെട്ടതായി സൂക്ഷിക്കുക: ഓരോ ടെസ്റ്റും മറ്റ് ടെസ്റ്റുകളിൽ നിന്ന് സ്വതന്ത്രമാണെന്നും ബാഹ്യ സ്റ്റേറ്റിനെ ആശ്രയിക്കുന്നില്ലെന്നും ഉറപ്പാക്കുക.
• വിവേകത്തോടെ മോക്കിംഗ് ഉപയോഗിക്കുക: ടെസ്റ്റ് ചെയ്യേണ്ട യൂണിറ്റിനെ വേർതിരിക്കാൻ ആവശ്യമുള്ളപ്പോൾ മാത്രം ഡിപൻഡൻസികൾ മോക്ക് ചെയ്യുക.
• നിങ്ങളുടെ ടെസ്റ്റുകൾ ഓട്ടോമേറ്റ് ചെയ്യുക: ഓരോ കമ്മിറ്റിലും അവ യാന്ത്രികമായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ ടെസ്റ്റുകളെ നിങ്ങളുടെ കണ്ടിന്യൂവസ് ഇന്റഗ്രേഷൻ (CI) പൈപ്പ്‌ലൈനിൽ സംയോജിപ്പിക്കുക.
• ടെസ്റ്റ് ഫലങ്ങൾ പതിവായി അവലോകനം ചെയ്യുക: പരാജയപ്പെടുന്ന ടെസ്റ്റുകൾ തിരിച്ചറിയാനും പരിഹരിക്കാനും ടെസ്റ്റ് ഫലങ്ങൾ പതിവായി അവലോകനം ചെയ്യുക.
• നിങ്ങളുടെ ടെസ്റ്റുകൾ ഡോക്യുമെന്റ് ചെയ്യുക: നിങ്ങളുടെ ടെസ്റ്റുകളുടെ ഉദ്ദേശ്യവും അവ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്നും വിശദീകരിക്കാൻ അവയെ ഡോക്യുമെന്റ് ചെയ്യുക.
• ക്രോസ്-ബ്രൗസർ ടെസ്റ്റിംഗ് പരിഗണിക്കുക: അനുയോജ്യത ഉറപ്പാക്കാൻ നിങ്ങളുടെ കമ്പോണന്റുകൾ വിവിധ ബ്രൗസറുകളിൽ (ക്രോം, ഫയർഫോക്സ്, സഫാരി, എഡ്ജ്) ടെസ്റ്റ് ചെയ്യുക. ബ്രൗസർസ്റ്റാക്ക്, സോസ് ലാബ്സ് പോലുള്ള സേവനങ്ങൾ ഇതിന് സഹായിക്കും.
• അക്സെസ്സിബിലിറ്റി ടെസ്റ്റിംഗ്: axe-core പോലുള്ള ടൂളുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ കമ്പോണന്റ് ടെസ്റ്റിംഗ് തന്ത്രത്തിന്റെ ഭാഗമായി ഓട്ടോമേറ്റഡ് അക്സെസ്സിബിലിറ്റി ടെസ്റ്റിംഗ് നടപ്പിലാക്കുക.

ഉദാഹരണം: ഒരു ഇന്റർനാഷണലൈസേഷൻ (i18n) വെബ് കമ്പോണന്റ് നടപ്പിലാക്കുകയും ടെസ്റ്റ് ചെയ്യുകയും ചെയ്യുക

ഇന്റർനാഷണലൈസേഷൻ കൈകാര്യം ചെയ്യുന്ന ഒരു വെബ് കമ്പോണന്റ് പരിഗണിക്കാം. ആഗോള പ്രേക്ഷകരെ ലക്ഷ്യം വയ്ക്കുന്ന ആപ്ലിക്കേഷനുകൾക്ക് ഇത് നിർണായകമാണ്.

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 (ജസ്റ്റ്)

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

ഈ ഉദാഹരണം ഒരു ഇന്റർനാഷണലൈസേഷൻ കമ്പോണന്റ് എങ്ങനെ യൂണിറ്റ് ടെസ്റ്റ് ചെയ്യാമെന്ന് കാണിക്കുന്നു. തിരഞ്ഞെടുത്ത ഭാഷയെ അടിസ്ഥാനമാക്കി ശരിയായ വാചകം പ്രദർശിപ്പിക്കുന്നുണ്ടെന്നും ആവശ്യമെങ്കിൽ ഒരു ഡിഫോൾട്ട് ഭാഷയിലേക്ക് മാറുന്നുണ്ടെന്നും ഇത് ഉറപ്പാക്കുന്നു. വെബ് ഡെവലപ്‌മെന്റിൽ ആഗോള പ്രേക്ഷകരെ പരിഗണിക്കേണ്ടതിന്റെ പ്രാധാന്യം ഈ കമ്പോണന്റ് വ്യക്തമാക്കുന്നു.

വെബ് കമ്പോണന്റുകൾക്കുള്ള അക്സെസ്സിബിലിറ്റി ടെസ്റ്റിംഗ്

വെബ് കമ്പോണന്റുകൾ ഭിന്നശേഷിയുള്ള ഉപയോക്താക്കൾക്ക് ഉപയോഗിക്കാൻ കഴിയുന്നതാണെന്ന് ഉറപ്പാക്കുന്നത് നിർണായകമാണ്. അക്സെസ്സിബിലിറ്റി ടെസ്റ്റിംഗ് നിങ്ങളുടെ ടെസ്റ്റിംഗ് വർക്ക്ഫ്ലോയിൽ സംയോജിപ്പിക്കണം.

അക്സെസ്സിബിലിറ്റി ടെസ്റ്റിംഗിനുള്ള ടൂളുകൾ:

• axe-core: ഒരു ഓപ്പൺ സോഴ്‌സ് അക്സെസ്സിബിലിറ്റി ടെസ്റ്റിംഗ് എഞ്ചിൻ.
• Lighthouse: വെബ് പേജുകൾ ഓഡിറ്റ് ചെയ്യുന്നതിനുള്ള ഒരു ഗൂഗിൾ ക്രോം എക്സ്റ്റൻഷനും Node.js മൊഡ്യൂളും, അക്സെസ്സിബിലിറ്റിയും ഇതിൽ ഉൾപ്പെടുന്നു.

ഉദാഹരണം: axe-core, 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();
  });
});

ഒരു വെബ് കമ്പോണന്റിൽ ഓട്ടോമേറ്റഡ് അക്സെസ്സിബിലിറ്റി ടെസ്റ്റിംഗ് നടത്താൻ axe-core, Jest എന്നിവ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ഈ ഉദാഹരണം കാണിക്കുന്നു. toHaveNoViolations എന്നത് ഒരു കസ്റ്റം ജസ്റ്റ് മാച്ചറാണ്, ഇത് കമ്പോണന്റിന് അക്സെസ്സിബിലിറ്റി ലംഘനങ്ങളൊന്നുമില്ലെന്ന് ഉറപ്പാക്കുന്നു. ഇത് നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷന്റെ ഇൻക്ലൂസിവിറ്റി ഗണ്യമായി മെച്ചപ്പെടുത്തുന്നു.

ഉപസംഹാരം

കരുത്തുറ്റതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതും പുനരുപയോഗിക്കാവുന്നതുമായ യുഐ ഘടകങ്ങൾ നിർമ്മിക്കുന്നതിന് വെബ് കമ്പോണന്റുകൾ ടെസ്റ്റ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്. നിങ്ങളുടെ കമ്പോണന്റുകളുടെ ഗുണനിലവാരം ഉറപ്പാക്കുന്നതിൽ യൂണിറ്റ് ടെസ്റ്റിംഗും കമ്പോണന്റ് ഐസൊലേഷൻ ടെസ്റ്റിംഗും പ്രധാന പങ്ക് വഹിക്കുന്നു. ഈ രീതികൾ സംയോജിപ്പിച്ച് മികച്ച കീഴ്വഴക്കങ്ങൾ പിന്തുടരുന്നതിലൂടെ, നിങ്ങൾക്ക് വിശ്വസനീയവും അക്സെസ്സിബിളുമായ, ആഗോള പ്രേക്ഷകർക്ക് മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്ന വെബ് കമ്പോണന്റുകൾ നിർമ്മിക്കാൻ കഴിയും. നിങ്ങളുടെ കമ്പോണന്റുകൾ കൂടുതൽ ആളുകളിലേക്ക് എത്തുന്നതിനും എല്ലാവരെയും ഉൾക്കൊള്ളുന്നതിനും വേണ്ടി നിങ്ങളുടെ ടെസ്റ്റിംഗ് പ്രക്രിയയിൽ ഇന്റർനാഷണലൈസേഷൻ, അക്സെസ്സിബിലിറ്റി എന്നീ വശങ്ങൾ പരിഗണിക്കാൻ ഓർമ്മിക്കുക.