வெப் காம்போனென்ட் டெஸ்டிங்: யூனிட் டெஸ்டிங் மற்றும் காம்போனென்ட் ஐசோலேஷன் ஒப்பீடு

வெப் காம்போனென்ட்கள், மீண்டும் பயன்படுத்தக்கூடிய மற்றும் ஒருங்கிணைக்கப்பட்ட UI கூறுகளை உருவாக்குவதற்கான ஒரு தரப்படுத்தப்பட்ட வழியை வழங்குவதன் மூலம் ஃபிரண்ட்-எண்ட் டெவலப்மென்ட்டில் ஒரு புரட்சியை ஏற்படுத்தியுள்ளன. நவீன வலைப் பயன்பாடுகளில் வெப் காம்போனென்ட்கள் பெருகிய முறையில் பரவலாகி வருவதால், கடுமையான சோதனை மூலம் அவற்றின் தரத்தை உறுதி செய்வது மிக முக்கியமானது. இந்தக் கட்டுரை வெப் காம்போனென்ட்களுக்கான இரண்டு முக்கிய சோதனை உத்திகளை ஆராய்கிறது: யூனிட் டெஸ்டிங் மற்றும் காம்போனென்ட் ஐசோலேஷன், அவற்றின் பலம், பலவீனங்கள் மற்றும் அவற்றை உங்கள் டெவலப்மென்ட் பணிப்பாய்வுக்குள் எவ்வாறு திறம்பட ஒருங்கிணைப்பது என்பதை ஆராய்கிறது.

வெப் காம்போனென்ட்களை ஏன் சோதிக்க வேண்டும்?

குறிப்பிட்ட சோதனை நுட்பங்களுக்குள் நுழைவதற்கு முன், வெப் காம்போனென்ட்களைச் சோதிப்பது ஏன் அவசியம் என்பதைப் புரிந்துகொள்வது முக்கியம்:

• நம்பகத்தன்மை: உங்கள் வெப் காம்போனென்ட்கள் வெவ்வேறு உலாவிகள் மற்றும் சூழல்களில் எதிர்பார்த்தபடி செயல்படுவதை சோதனை உறுதிசெய்கிறது, எதிர்பாராத நடத்தை மற்றும் பிழைகளைக் குறைக்கிறது.
• பராமரிப்புத்திறன்: நன்கு சோதிக்கப்பட்ட காம்போனென்ட்களைப் பராமரிப்பதும், மறுசீரமைப்பதும் எளிதானது, மாற்றங்களைச் செய்யும்போது பின்னடைவுகளை அறிமுகப்படுத்தும் அபாயத்தைக் குறைக்கிறது.
• மறுபயன்பாடு: முழுமையான சோதனை உங்கள் காம்போனென்ட்கள் உண்மையிலேயே மீண்டும் பயன்படுத்தக்கூடியவை என்பதைச் சரிபார்க்கிறது, மேலும் அவற்றை உங்கள் பயன்பாட்டின் வெவ்வேறு பகுதிகளிலோ அல்லது பல திட்டங்களிலோ நம்பிக்கையுடன் ஒருங்கிணைக்க முடியும்.
• குறைந்த மேம்பாட்டுச் செலவுகள்: டெவலப்மென்ட் செயல்முறையின் ஆரம்பத்தில் சோதனை மூலம் பிழைகளைக் கண்டறிவது, பின்னர் உற்பத்தியில் அவற்றைச் சரிசெய்வதை விட கணிசமாகக் குறைவான செலவாகும்.
• மேம்படுத்தப்பட்ட பயனர் அனுபவம்: உங்கள் வெப் காம்போனென்ட்களின் நிலைத்தன்மை மற்றும் செயல்பாட்டை உறுதி செய்வதன் மூலம், நீங்கள் ஒரு மென்மையான மற்றும் மகிழ்ச்சியான பயனர் அனுபவத்திற்கு பங்களிக்கிறீர்கள்.

வெப் காம்போனென்ட்களை யூனிட் டெஸ்டிங் செய்தல்

யூனிட் டெஸ்டிங் என்பது கோடின் தனிப்பட்ட அலகுகளைத் தனிமைப்படுத்தி சோதிப்பதில் கவனம் செலுத்துகிறது. வெப் காம்போனென்ட்களின் சூழலில், ஒரு யூனிட் என்பது பொதுவாக காம்போனென்ட் வகுப்பிற்குள் ஒரு குறிப்பிட்ட மெத்தட் அல்லது செயல்பாட்டைக் குறிக்கிறது. யூனிட் டெஸ்டிங்கின் குறிக்கோள், ஒவ்வொரு யூனிட்டும் அதன் நோக்கம் கொண்ட பணியை மற்ற காம்போனென்ட் அல்லது பயன்பாட்டின் பகுதிகளிலிருந்து சுயாதீனமாகச் சரியாகச் செய்கிறதா என்பதைச் சரிபார்ப்பதாகும்.

வெப் காம்போனென்ட்களை யூனிட் டெஸ்டிங் செய்வதன் நன்மைகள்

• நுண்ணிய சோதனை: யூனிட் சோதனைகள் சோதனை செயல்முறையின் மீது சிறந்த கட்டுப்பாட்டை வழங்குகின்றன, உங்கள் காம்போனென்டின் செயல்பாட்டின் குறிப்பிட்ட அம்சங்களைத் தனிமைப்படுத்தி சோதிக்க உங்களை அனுமதிக்கிறது.
• வேகமான செயலாக்கம்: யூனிட் சோதனைகள் பொதுவாக மிக வேகமாகச் செயல்படுத்தப்படுகின்றன, இது டெவலப்மென்ட்டின் போது விரைவான பின்னூட்டத்தை செயல்படுத்துகிறது.
• எளிதான பிழைத்திருத்தம்: ஒரு யூனிட் சோதனை தோல்வியடையும் போது, ​​பிரச்சனையின் மூலத்தைக் கண்டறிவது பொதுவாக எளிதானது, ஏனெனில் நீங்கள் ஒரு சிறிய, தனிமைப்படுத்தப்பட்ட கோட் பகுதியை மட்டுமே சோதிக்கிறீர்கள்.
• கோட் கவரேஜ்: யூனிட் டெஸ்டிங் அதிக கோட் கவரேஜை அடைய உதவும், இது உங்கள் காம்போனென்டின் கோடின் ஒரு பெரிய சதவீதம் சோதிக்கப்படுவதை உறுதி செய்கிறது.

வெப் காம்போனென்ட்களை யூனிட் டெஸ்டிங் செய்வதில் உள்ள சவால்கள்

• ஷேடோ DOM உடன் சிக்கலானது: யூனிட் சோதனைகளில் ஷேடோ DOM உடன் தொடர்புகொள்வது சவாலானது, ஏனெனில் இது காம்போனென்டின் உள் கட்டமைப்பு மற்றும் ஸ்டைலிங்கை ஒருங்கிணைக்கிறது.
• சார்புகளை மாக் செய்தல் (Mocking Dependencies): சோதனையின் கீழ் உள்ள யூனிட்டைத் தனிமைப்படுத்த நீங்கள் சார்புகளை மாக் செய்ய வேண்டியிருக்கலாம், இது உங்கள் சோதனைகளுக்கு சிக்கலைச் சேர்க்கலாம்.
• செயல்படுத்தல் விவரங்களில் கவனம்: உங்கள் காம்போனென்டின் உள் செயலாக்கத்தை நீங்கள் மறுசீரமைக்கும்போது, ​​மிகவும் குறிப்பிட்ட யூனிட் சோதனைகள் பலவீனமாகவும் உடைந்து போகக்கூடியதாகவும் இருக்கலாம்.

வெப் காம்போனென்ட்களை யூனிட் டெஸ்டிங் செய்வதற்கான கருவிகள் மற்றும் பிரேம்வொர்க்குகள்

பல பிரபலமான ஜாவாஸ்கிரிப்ட் டெஸ்டிங் பிரேம்வொர்க்குகளை வெப் காம்போனென்ட்களை யூனிட் டெஸ்டிங் செய்யப் பயன்படுத்தலாம்:

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

இந்த எடுத்துக்காட்டு, <my-counter> காம்போனென்ட்டின் increment மெத்தட் மற்றும் ஆரம்ப எண்ணிக்கை மதிப்பைச் சோதிக்க ஜெஸ்டை எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது. இது `shadowRoot` ஐப் பயன்படுத்தி ஷேடோ DOM-க்குள் உள்ள கூறுகளை அணுகுவதை வலியுறுத்துகிறது.

காம்போனென்ட் ஐசோலேஷன் டெஸ்டிங்

காம்போனென்ட் ஐசோலேஷன் டெஸ்டிங், காம்போனென்ட் டெஸ்டிங் அல்லது விஷுவல் டெஸ்டிங் என்றும் அழைக்கப்படுகிறது, இது வெப் காம்போனென்ட்களை ஒரு யதார்த்தமான சூழலில் சோதிப்பதில் கவனம் செலுத்துகிறது, பொதுவாக பயன்பாட்டின் மற்ற பகுதிகளிலிருந்து தனிமைப்படுத்தப்படுகிறது. இந்த அணுகுமுறை, சுற்றியுள்ள பயன்பாட்டின் சிக்கல்களால் பாதிக்கப்படாமல், காம்போனென்டின் நடத்தை, தோற்றம் மற்றும் பயனர்களுடனான தொடர்புகளைச் சரிபார்க்க உங்களை அனுமதிக்கிறது.

காம்போனென்ட் ஐசோலேஷன் டெஸ்டிங்கின் நன்மைகள்

• யதார்த்தமான சோதனைச் சூழல்: காம்போனென்ட் ஐசோலேஷன் டெஸ்டிங், யூனிட் டெஸ்டிங்கை விட யதார்த்தமான சோதனைச் சூழலை வழங்குகிறது, இது காம்போனென்டின் நடத்தையை அது பயன்பாட்டில் எவ்வாறு பயன்படுத்தப்படும் என்பதைப் போன்ற ஒரு சூழலில் சோதிக்க உங்களை அனுமதிக்கிறது.
• விஷுவல் ரிக்ரெஷன் டெஸ்டிங்: காம்போனென்ட் ஐசோலேஷன் டெஸ்டிங், விஷுவல் ரிக்ரெஷன் டெஸ்டிங்கை செயல்படுத்துகிறது, இதன் மூலம் நீங்கள் வெவ்வேறு பில்டுகளில் காம்போனென்டின் ஸ்கிரீன் ஷாட்களை ஒப்பிட்டு எதிர்பாராத காட்சி மாற்றங்களைக் கண்டறியலாம்.
• மேம்படுத்தப்பட்ட ஒத்துழைப்பு: காம்போனென்ட் ஐசோலேஷன் கருவிகள் பெரும்பாலும் ஒரு காட்சி இடைமுகத்தை வழங்குகின்றன, இது டெவலப்பர்கள், வடிவமைப்பாளர்கள் மற்றும் பங்குதாரர்கள் காம்போனென்ட்களை எளிதாக மதிப்பாய்வு செய்யவும் கருத்துக்களை வழங்கவும் அனுமதிக்கிறது.
• அணுகல்தன்மை சோதனை (Accessibility Testing): தனிமைப்படுத்தப்பட்ட காம்போனென்ட்களில் அணுகல்தன்மை சோதனையைச் செய்வது எளிது, அவை அணுகல்தன்மை தரநிலைகளைப் பூர்த்தி செய்கின்றனவா என்பதை உறுதிசெய்கிறது.

காம்போனென்ட் ஐசோலேஷன் டெஸ்டிங்கில் உள்ள சவால்கள்

• மெதுவான செயலாக்கம்: காம்போனென்ட் ஐசோலேஷன் சோதனைகள் யூனிட் சோதனைகளை விட மெதுவாகச் செயல்படுத்தப்படலாம், ஏனெனில் அவை ஒரு உலாவி சூழலில் காம்போனென்டை ரெண்டரிங் செய்வதை உள்ளடக்குகின்றன.
• மிகவும் சிக்கலான அமைப்பு: ஒரு காம்போனென்ட் ஐசோலேஷன் டெஸ்டிங் சூழலை அமைப்பது ஒரு யூனிட் டெஸ்டிங் சூழலை அமைப்பதை விட மிகவும் சிக்கலானதாக இருக்கும்.
• நம்பகத்தன்மையற்ற தன்மைக்கான சாத்தியம்: நெட்வொர்க் தாமதம் மற்றும் உலாவி முரண்பாடுகள் போன்ற காரணிகளால் காம்போனென்ட் ஐசோலேஷன் சோதனைகள் நம்பகத்தன்மையற்றதாக இருக்க வாய்ப்புள்ளது.

காம்போனென்ட் ஐசோலேஷன் டெஸ்டிங்கிற்கான கருவிகள் மற்றும் பிரேம்வொர்க்குகள்

காம்போனென்ட் ஐசோலேஷன் டெஸ்டிங்கிற்கு பல கருவிகள் மற்றும் பிரேம்வொர்க்குகள் உள்ளன:

• Storybook: தனிமைப்படுத்தப்பட்ட UI காம்போனென்ட்களை உருவாக்குவதற்கும் சோதிப்பதற்கும் ஒரு பிரபலமான ஓப்பன் சோர்ஸ் கருவி. ஸ்டோரிபுக் ஒரு காட்சி சூழலை வழங்குகிறது, அங்கு நீங்கள் காம்போனென்ட்களை உலாவலாம், அவற்றுடன் தொடர்பு கொள்ளலாம் மற்றும் அவற்றின் ஆவணங்களைப் பார்க்கலாம்.
• Cypress: ஒரு எண்ட்-டு-எண்ட் டெஸ்டிங் பிரேம்வொர்க், இது காம்போனென்ட் டெஸ்டிங்கிற்கும் பயன்படுத்தப்படலாம். சைப்ரஸ் காம்போனென்ட்களுடன் தொடர்புகொள்வதற்கும் அவற்றின் நடத்தையை உறுதிப்படுத்துவதற்கும் ஒரு சக்திவாய்ந்த API ஐ வழங்குகிறது.
• 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) பைப்லைனில் ஒருங்கிணைத்து, அவை ஒவ்வொரு கமிட்டிலும் தானாக இயக்கப்படுவதை உறுதிசெய்யவும்.
• சோதனை முடிவுகளைத் தவறாமல் மதிப்பாய்வு செய்யவும்: தோல்வியுற்ற சோதனைகளைக் கண்டறிந்து சரிசெய்ய சோதனை முடிவுகளைத் தவறாமல் மதிப்பாய்வு செய்யவும்.
• உங்கள் சோதனைகளை ஆவணப்படுத்தவும்: உங்கள் சோதனைகளின் நோக்கத்தையும் அவை எவ்வாறு செயல்படுகின்றன என்பதையும் விளக்க அவற்றை ஆவணப்படுத்தவும்.
• குறுக்கு-உலாவி சோதனையைக் கவனியுங்கள்: இணக்கத்தன்மையை உறுதிசெய்ய உங்கள் காம்போனென்ட்களை வெவ்வேறு உலாவிகளில் (குரோம், பயர்பாக்ஸ், சஃபாரி, எட்ஜ்) சோதிக்கவும். BrowserStack மற்றும் Sauce Labs போன்ற சேவைகள் இதற்கு உதவலாம்.
• அணுகல்தன்மை சோதனை: 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 (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!');
  });
});

இந்த எடுத்துக்காட்டு ஒரு சர்வதேசமயமாக்கல் காம்போனென்டை எவ்வாறு யூனிட் டெஸ்ட் செய்வது என்பதைக் காட்டுகிறது, தேர்ந்தெடுக்கப்பட்ட மொழியின் அடிப்படையில் சரியான உரையைக் காண்பிப்பதையும், தேவைப்பட்டால் ஒரு இயல்புநிலை மொழிக்குத் திரும்புவதையும் உறுதி செய்கிறது. இந்தக் காம்போனென்ட் வலை மேம்பாட்டில் உலகளாவிய பார்வையாளர்களைக் கருத்தில் கொள்வதன் முக்கியத்துவத்தைக் காட்டுகிறது.

வெப் காம்போனென்ட்களுக்கான அணுகல்தன்மை சோதனை

ஊனமுற்ற பயனர்களுக்கு வெப் காம்போனென்ட்கள் அணுகக்கூடியதாக இருப்பதை உறுதி செய்வது முக்கியம். அணுகல்தன்மை சோதனை உங்கள் சோதனை பணிப்பாய்வில் ஒருங்கிணைக்கப்பட வேண்டும்.

அணுகல்தன்மை சோதனைக்கான கருவிகள்:

• 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-ஐ ஜெஸ்டுடன் எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது. `toHaveNoViolations` என்பது காம்போனென்டில் அணுகல்தன்மை மீறல்கள் இல்லை என்பதை உறுதிப்படுத்தும் ஒரு தனிப்பயன் ஜெஸ்ட் மேட்சர் ஆகும். இது உங்கள் வலைப் பயன்பாட்டின் உள்ளடக்கத்தை கணிசமாக மேம்படுத்துகிறது.

முடிவுரை

வலுவான, பராமரிக்கக்கூடிய மற்றும் மீண்டும் பயன்படுத்தக்கூடிய UI கூறுகளை உருவாக்குவதற்கு வெப் காம்போனென்ட்களைச் சோதிப்பது முக்கியமானது. யூனிட் டெஸ்டிங் மற்றும் காம்போனென்ட் ஐசோலேஷன் டெஸ்டிங் ஆகிய இரண்டும் உங்கள் காம்போனென்ட்களின் தரத்தை உறுதி செய்வதில் முக்கிய பங்கு வகிக்கின்றன. இந்த உத்திகளை ஒருங்கிணைத்து சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், நீங்கள் நம்பகமான, அணுகக்கூடிய மற்றும் உலகளாவிய பார்வையாளர்களுக்கு சிறந்த பயனர் அனுபவத்தை வழங்கும் வெப் காம்போனென்ட்களை உருவாக்கலாம். உங்கள் காம்போனென்ட்கள் அனைவரையும் உள்ளடக்கியதாகவும் பரந்த பார்வையாளர்களைச் சென்றடைவதையும் உறுதிசெய்ய உங்கள் சோதனைச் செயல்பாட்டில் சர்வதேசமயமாக்கல் மற்றும் அணுகல்தன்மை அம்சங்களைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள்.