CSS போலி விதி: CSS டெஸ்ட் டபுள்ஸ் மூலம் வலுவான சோதனை

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

CSS டெஸ்ட் டபுள்ஸ் என்றால் என்ன?

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

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

ஏன் CSS டெஸ்ட் டபுள்ஸ் பயன்படுத்த வேண்டும்?

உங்கள் சோதனை உத்தியில் CSS டெஸ்ட் டபுள்ஸை இணைப்பதன் மூலம் பல முக்கிய நன்மைகள் எழுகின்றன:

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

CSS டெஸ்ட் டபுள்ஸின் வகைகள்

"CSS போலி விதி" என்ற சொல் பரவலாகப் பயன்படுத்தப்பட்டாலும், CSS சோதனையில் பல்வேறு வகையான டெஸ்ட் டபுள்ஸ் பயன்படுத்தப்படலாம்:

• ஸ்டப்ஸ்: ஸ்டப்ஸ் சோதனையின் போது செய்யப்படும் அழைப்புகளுக்கு முன் வரையறுக்கப்பட்ட பதில்களை வழங்குகின்றன. CSS சோதனையில், ஒரு ஸ்டப் என்பது ஒரு தனிமத்தின் குறிப்பிட்ட CSS பண்பு மதிப்பைக் கேட்கும்போது அதைத் தரும் ஒரு செயல்பாடாக இருக்கலாம். உதாரணமாக, ஒரு தனிமத்தின் `margin-left` பண்புக்காகக் கேட்கும்போது ஒரு ஸ்டப் `20px` என்று திரும்பத் தரக்கூடும்.
• மாக்ஸ்: மாக்ஸ் ஸ்டப்ஸை விட நுட்பமானவை. அவை குறிப்பிட்ட முறைகள் குறிப்பிட்ட வாதங்களுடன் அழைக்கப்பட்டனவா என்பதைச் சரிபார்க்க உங்களை அனுமதிக்கின்றன. CSS சோதனையில், ஒரு பொத்தானைக் கிளிக் செய்யும்போது, ஒரு ஜாவாஸ்கிரிப்ட் செயல்பாடு ஒரு தனிமத்தின் `display` பண்பை `none` என சரியாக அமைக்கிறதா என்பதை சரிபார்க்க ஒரு மாக் பயன்படுத்தப்படலாம்.
• ஃபேக்ஸ்: ஃபேக்ஸ் வேலை செய்யும் செயலாக்கங்கள், ஆனால் பொதுவாக சில குறுக்குவழிகளை எடுக்கும், இது அவற்றை உற்பத்திக்கு பொருத்தமற்றதாக ஆக்குகிறது. CSS சோதனையில், இது CSS அம்சங்களின் ஒரு துணைக்குழுவை மட்டுமே கையாளும் ஒரு எளிமைப்படுத்தப்பட்ட CSS பாகுபடுத்தியாகவோ அல்லது CSS தளவமைப்பு நடத்தையை உருவகப்படுத்தும் ஒரு போலி தனிமமாகவோ இருக்கலாம்.
• ஸ்பைஸ்: ஸ்பைஸ் ஒரு செயல்பாடு அல்லது முறை எவ்வாறு அழைக்கப்படுகிறது என்பது பற்றிய தகவல்களைப் பதிவு செய்கின்றன. CSS சோதனையில், ஒரு சோதனையின் போது ஒரு குறிப்பிட்ட CSS பண்பு எத்தனை முறை அணுகப்பட்டது அல்லது மாற்றப்பட்டது என்பதைக் கண்காணிக்க ஒரு ஸ்பை பயன்படுத்தப்படலாம்.

செயல்படுத்தும் நுட்பங்கள்

உங்கள் சோதனை கட்டமைப்பு மற்றும் நீங்கள் சோதிக்கும் CSS இன் சிக்கலைப் பொறுத்து, CSS டெஸ்ட் டபுள்ஸைச் செயல்படுத்த பல நுட்பங்களைப் பயன்படுத்தலாம்.

1. ஜாவாஸ்கிரிப்ட்-அடிப்படையிலான மாக்ஸ்

இந்த அணுகுமுறை ஜாவாஸ்கிரிப்ட் மாகிங் நூலகங்களைப் (எ.கா., Jest, Mocha, Sinon.JS) பயன்படுத்தி CSS தொடர்பான செயல்பாடுகள் அல்லது முறைகளை இடைமறித்து கையாளுகிறது. உதாரணமாக, முன் வரையறுக்கப்பட்ட CSS பண்பு மதிப்புகளைத் திருப்பியளிக்க `getComputedStyle` முறையை நீங்கள் மாக் செய்யலாம். இந்த முறை பொதுவாக ஜாவாஸ்கிரிப்ட் குறியீட்டால் உலாவியில் ஸ்டைல்கள் பயன்படுத்தப்பட்ட பிறகு ஒரு தனிமத்தின் ஸ்டைல் மதிப்புகளைப் பெறப் பயன்படுத்தப்படுகிறது.

உதாரணம் (Jest பயன்படுத்தி):

const element = document.createElement('div'); const mockGetComputedStyle = jest.fn().mockReturnValue({ marginLeft: '20px', backgroundColor: 'red', }); global.getComputedStyle = mockGetComputedStyle; // இப்போது, ஜாவாஸ்கிரிப்ட் குறியீடு getComputedStyle(element) ஐ அழைக்கும்போது, அது மாக் செய்யப்பட்ட மதிப்புகளைப் பெறும். //சோதனை உதாரணம் expect(getComputedStyle(element).marginLeft).toBe('20px'); expect(getComputedStyle(element).backgroundColor).toBe('red');

விளக்கம்:

• `jest.fn()` ஐப் பயன்படுத்தி `mockGetComputedStyle` என்ற ஒரு மாக் செயல்பாட்டை உருவாக்குகிறோம்.
• மாக் செயல்பாடு அழைக்கப்படும்போது என்ன மதிப்புகளைத் திருப்பியளிக்க வேண்டும் என்பதைக் குறிப்பிட `mockReturnValue` ஐப் பயன்படுத்துகிறோம். இந்த நிலையில், இது `getComputedStyle` இன் திரும்பும் மதிப்பைப்போல் ஒரு பொருளைத் திருப்புகிறது, முன் வரையறுக்கப்பட்ட `marginLeft` மற்றும் `backgroundColor` பண்புகளுடன்.
• உலகளாவிய `getComputedStyle` செயல்பாட்டை நமது மாக் செயல்பாட்டுடன் மாற்றுகிறோம். இது சோதனையின் போது `getComputedStyle` ஐ அழைக்கும் எந்தவொரு ஜாவாஸ்கிரிப்ட் குறியீடும் உண்மையில் நமது மாக் செயல்பாட்டை அழைப்பதை உறுதி செய்கிறது.
• இறுதியாக, `getComputedStyle(element).marginLeft` மற்றும் `getComputedStyle(element).backgroundColor` ஐ அழைப்பது மாக் செய்யப்பட்ட மதிப்புகளைத் திருப்புகிறது என்று நாங்கள் உறுதிப்படுத்துகிறோம்.

2. CSS பாகுபடுத்தல் மற்றும் கையாளுதல் நூலகங்கள்

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

உதாரணம் (கருத்தியல்):

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

1. உங்கள் பாகத்துடன் தொடர்புடைய CSS ஸ்டைல்ஷீட்டை பாகுபடுத்தவும்.
2. மாற்றப்படும் CSS வகுப்புக்குரிய விதியைக் கண்டறியவும்.
3. ஸ்டைல்ஷீட்டின் நினைவகப் பிரதிநிதித்துவத்தை மாற்றுவதன் மூலம் அந்த வகுப்பைச் சேர்ப்பதையோ அல்லது அகற்றுவதையோ உருவகப்படுத்தவும்.
4. உருவகப்படுத்தப்பட்ட CSS நிலையின் அடிப்படையில் உங்கள் பாகத்தின் நடத்தை அதற்கேற்ப மாறுகிறதா என்பதைச் சரிபார்க்கவும்.

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

3. ஷேடோ டாம் மற்றும் தனிமைப்படுத்தப்பட்ட ஸ்டைல்கள்

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

4. CSS மாட்யூல்ஸ் மற்றும் அட்டாமிக் CSS

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

நடைமுறை உதாரணங்கள்

CSS டெஸ்ட் டபுள்ஸ் வெவ்வேறு சோதனை சூழ்நிலைகளில் எவ்வாறு பயன்படுத்தப்படலாம் என்பதற்கான சில நடைமுறை உதாரணங்களை ஆராய்வோம்.

உதாரணம் 1: ஒரு மோடல் பாகத்தை சோதித்தல்

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

இந்த பாகத்தைச் சோதிக்க, `show` வகுப்பின் நடத்தையை உருவகப்படுத்த நீங்கள் ஒரு மாக் ஐப் பயன்படுத்தலாம்:

// மோடல் தனிமத்தில் "show" வகுப்பை மாற்றும் ஒரு செயல்பாடு இருப்பதாகக் கொள்வோம் function toggleModal(modalElement) { modalElement.classList.toggle('show'); } // சோதனை describe('Modal Component', () => { it('should display the modal when the show class is added', () => { const modalElement = document.createElement('div'); modalElement.id = 'myModal'; // "show" வகுப்பு இருக்கும்போது குறிப்பிட்ட மதிப்புகளைத் திருப்பியளிக்க getComputedStyle ஐ மாக் செய்யவும் const mockGetComputedStyle = jest.fn((element) => { if (element.classList.contains('show')) { return { display: 'block', position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', }; } else { return { display: 'none', }; } }); global.getComputedStyle = mockGetComputedStyle; // ஆரம்பத்தில், மோடல் மறைக்கப்பட்டிருக்க வேண்டும் expect(getComputedStyle(modalElement).display).toBe('none'); // "show" வகுப்பை மாற்றவும் toggleModal(modalElement); // இப்போது, மோடல் காட்டப்பட வேண்டும் expect(getComputedStyle(modalElement).display).toBe('block'); expect(getComputedStyle(modalElement).position).toBe('fixed'); expect(getComputedStyle(modalElement).top).toBe('50%'); expect(getComputedStyle(modalElement).left).toBe('50%'); expect(getComputedStyle(modalElement).transform).toBe('translate(-50%, -50%)'); }); });

விளக்கம்:

• `show` வகுப்பு தனிமத்தில் உள்ளதா என்பதைப் பொறுத்து வெவ்வேறு மதிப்புகளைத் திருப்பியளிக்கும் `getComputedStyle` இன் ஒரு மாக் செயலாக்கத்தை உருவாக்குகிறோம்.
• ஒரு கற்பனையான `toggleModal` செயல்பாட்டைப் பயன்படுத்தி மோடல் தனிமத்தில் `show` வகுப்பை மாற்றுகிறோம்.
• `show` வகுப்பு சேர்க்கப்படும்போது மோடலின் `display` பண்பு `none` இலிருந்து `block` ஆக மாறுவதை நாங்கள் உறுதிப்படுத்துகிறோம். மோடல் சரியாக மையப்படுத்தப்பட்டுள்ளதா என்பதை உறுதிப்படுத்த நிலைப்படுத்தலையும் சரிபார்க்கிறோம்.

உதாரணம் 2: ஒரு ரெஸ்பான்சிவ் நேவிகேஷன் மெனுவை சோதித்தல்

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

இந்த பாகத்தைச் சோதிக்க, வெவ்வேறு திரை அளவுகளை உருவகப்படுத்தவும் மெனு சரியாக நடந்துகொள்கிறதா என்பதைச் சரிபார்க்கவும் நீங்கள் ஒரு மாக் ஐப் பயன்படுத்தலாம்:

// வெவ்வேறு திரை அளவுகளை உருவகப்படுத்த window.innerWidth பண்பை மாக் செய்யவும் const mockWindowInnerWidth = (width) => { global.innerWidth = width; global.dispatchEvent(new Event('resize')); // resize நிகழ்வைத் தூண்டவும் }; describe('Responsive Navigation Menu', () => { it('should display the mobile menu when the screen size is small', () => { // ஒரு சிறிய திரை அளவை உருவகப்படுத்தவும் mockWindowInnerWidth(600); const menuButton = document.createElement('button'); menuButton.id = 'menuButton'; document.body.appendChild(menuButton); const mobileMenu = document.createElement('div'); mobileMenu.id = 'mobileMenu'; document.body.appendChild(mobileMenu); const mockGetComputedStyle = jest.fn((element) => { if(element.id === 'mobileMenu'){ return { display: (global.innerWidth <= 768) ? 'block' : 'none' }; } else { return {}; } }); global.getComputedStyle = mockGetComputedStyle; // மொபைல் மெனு ஆரம்பத்தில் காட்டப்படுவதை உறுதிப்படுத்தவும் (ஆரம்ப css 768px க்கு மேல் none ஆக அமைக்கிறது என்று கருதி) expect(getComputedStyle(mobileMenu).display).toBe('block'); }); it('should hide the mobile menu when the screen size is large', () => { // ஒரு பெரிய திரை அளவை உருவகப்படுத்தவும் mockWindowInnerWidth(1200); const menuButton = document.createElement('button'); menuButton.id = 'menuButton'; document.body.appendChild(menuButton); const mobileMenu = document.createElement('div'); mobileMenu.id = 'mobileMenu'; document.body.appendChild(mobileMenu); const mockGetComputedStyle = jest.fn((element) => { if(element.id === 'mobileMenu'){ return { display: (global.innerWidth <= 768) ? 'block' : 'none' }; } else { return {}; } }); global.getComputedStyle = mockGetComputedStyle; // மொபைல் மெனு மறைக்கப்பட்டுள்ளதை உறுதிப்படுத்தவும் expect(getComputedStyle(mobileMenu).display).toBe('none'); }); });

விளக்கம்:

• `window.innerWidth` பண்பை அமைப்பதன் மூலமும் `resize` நிகழ்வை அனுப்புவதன் மூலமும் வெவ்வேறு திரை அளவுகளை உருவகப்படுத்த `mockWindowInnerWidth` என்ற செயல்பாட்டை வரையறுக்கிறோம்.
• ஒவ்வொரு சோதனை வழக்கிலும், `mockWindowInnerWidth` ஐப் பயன்படுத்தி ஒரு குறிப்பிட்ட திரை அளவை உருவகப்படுத்துகிறோம்.
• பின்னர் உருவகப்படுத்தப்பட்ட திரை அளவின் அடிப்படையில் மெனு காட்டப்படுகிறதா அல்லது மறைக்கப்படுகிறதா என்பதை நாங்கள் உறுதிப்படுத்துகிறோம், மீடியா குவரிகள் சரியாக வேலை செய்கின்றனவா என்பதை சரிபார்க்கிறோம்.

சிறந்த நடைமுறைகள்

CSS டெஸ்ட் டபுள்ஸின் செயல்திறனை அதிகரிக்க, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

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

சரியான கருவிகளைத் தேர்ந்தெடுத்தல்

CSS டெஸ்ட் டபுள்ஸைச் செயல்படுத்த பல சோதனை கட்டமைப்புகள் மற்றும் நூலகங்களைப் பயன்படுத்தலாம். சில பிரபலமான விருப்பங்கள் பின்வருமாறு:

• Jest: உள்ளமைக்கப்பட்ட மாகிங் திறன்களைக் கொண்ட ஒரு பிரபலமான ஜாவாஸ்கிரிப்ட் சோதனை கட்டமைப்பு.
• Mocha: பல்வேறு உறுதிப்படுத்தல் நூலகங்கள் மற்றும் மாகிங் கருவிகளுடன் பயன்படுத்தக்கூடிய ஒரு நெகிழ்வான ஜாவாஸ்கிரிப்ட் சோதனை கட்டமைப்பு.
• Sinon.JS: எந்தவொரு ஜாவாஸ்கிரிப்ட் சோதனை கட்டமைப்புடனும் பயன்படுத்தக்கூடிய ஒரு முழுமையான மாகிங் நூலகம்.
• PostCSS: உங்கள் சோதனைகளில் CSS ஸ்டைல்ஷீட்களைக் கையாளப் பயன்படுத்தக்கூடிய ஒரு சக்திவாய்ந்த CSS பாகுபடுத்தல் மற்றும் உருமாற்றக் கருவி.
• CSSOM: CSS ஸ்டைல்ஷீட்களின் CSS ஆப்ஜெக்ட் மாடல் (CSSOM) பிரதிநிதித்துவங்களுடன் வேலை செய்வதற்கான ஒரு ஜாவாஸ்கிரிப்ட் நூலகம்.
• Cypress: உங்கள் பயன்பாட்டின் ஒட்டுமொத்த காட்சித் தோற்றம் மற்றும் நடத்தையைச் சரிபார்க்கப் பயன்படுத்தக்கூடிய ஒரு முழுமையான சோதனை கட்டமைப்பு.
• Selenium: விஷுவல் ரிக்ரஷன் சோதனைக்கு அடிக்கடி பயன்படுத்தப்படும் ஒரு பிரபலமான உலாவி ஆட்டோமேஷன் கட்டமைப்பு.

முடிவுரை

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

இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள நுட்பங்கள் மற்றும் சிறந்த நடைமுறைகளை ஏற்றுக்கொள்வதன் மூலம், நீங்கள் ஒரு வலுவான மற்றும் பராமரிக்கக்கூடிய குறியீட்டுத் தளத்தை உருவாக்கலாம், உங்கள் CSS ஸ்டைல்கள் வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் சரியாக வேலை செய்வதை உறுதிசெய்து, உங்கள் முன்பக்கக் குறியீடு CSS உடன் எதிர்பார்த்தபடி தொடர்பு கொள்கிறது என்பதை உறுதிசெய்யலாம். இணைய மேம்பாடு தொடர்ந்து विकसितமடைந்து வருவதால், CSS சோதனை மேலும் முக்கியத்துவம் பெறும், மேலும் CSS டெஸ்ட் டபுள்ஸ் கலையில் தேர்ச்சி பெறுவது எந்தவொரு முன்பக்க டெவலப்பருக்கும் ஒரு மதிப்புமிக்க திறமையாக இருக்கும்.