Angular Academy · पाठ

सिग्नल और असिंक्रोनस कोड का परीक्षण

रिएक्टिव और असिंक्रोनस व्यवहार का परीक्षण करें

पाठ 4, कुल 4 में से13 चरण

सिग्नल और असिंक्रोनस कोड का परीक्षण, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

परीक्षण का कठिन भाग एसिंक्रोनस काम है

वास्तविक कंपोनेंट एसिंक्रोनस काम करते हैं: टाइमर, प्रॉमिस, HTTP और विलंबित इनपुट। परीक्षणों को समय पर नियंत्रण रखना चाहिए, ताकि अभिकथन एसिंक्रोनस काम पूरा होने के बाद चलें। Angular आपको नियतात्मक समय-नियंत्रण के लिए fakeAsync, tick और flush देता है।

सिग्नल का परीक्षण

एक सिग्नल को फ़ंक्शन की तरह पढ़ा जाता है। इसका परीक्षण सीधा है: सिग्नल को कॉल करें और मान की पुष्टि करें; फिर उसे अपडेट करके दोबारा पुष्टि करें।

it('increments the count signal', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const c = fixture.componentInstance;
  expect(c.count()).toBe(0);
  c.increment();
  expect(c.count()).toBe(1);
});

कम्प्यूटेड सिग्नल अपने-आप अपडेट होते हैं

computed अपनी निर्भरताएँ बदलने पर दोबारा गणना करता है। परीक्षण में स्रोत सिग्नल बदलें और फिर कम्प्यूटेड सिग्नल पढ़ें; मैन्युअल रूप से दोबारा गणना करने की आवश्यकता नहीं है।

expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)

सिग्नल और DOM

टेम्पलेट में सिग्नल का बदलाव देखने के लिए उसे अपडेट करने के बाद detectChanges() कॉल करें, ठीक वैसे ही जैसे किसी अन्य स्थिति के साथ करते हैं।

c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');

fakeAsync का परिचय

नकली समय-क्षेत्र में प्रवेश करने के लिए परीक्षण को fakeAsync में रैप करें। टाइमर और माइक्रोटास्क चलने के बजाय कतार में लगते हैं, और आप उन्हें मैन्युअल रूप से आगे बढ़ाते हैं। इससे एसिंक्रोनस परीक्षण सिंक्रोनस और विश्वसनीय बन जाते हैं।

import { fakeAsync, tick } from '@angular/core/testing';

it('loads after delay', fakeAsync(() => {
  // timers are now under your control
}));

tick से समय आगे बढ़ाना

tick(ms) वर्चुअल घड़ी को आगे बढ़ाता है और उस अवधि के भीतर निर्धारित सभी टाइमर चलाता है।

it('fires after 1s', fakeAsync(() => {
  let done = false;
  setTimeout(() => (done = true), 1000);
  expect(done).toBe(false);
  tick(1000);
  expect(done).toBe(true);
}));

सभी लंबित टाइमर के लिए flush

जब आपको सटीक विलंब का पता न हो, तो flush() कतार खाली होने तक हर लंबित मैक्रोटास्क को पूरा करता है।

import { fakeAsync, flush } from '@angular/core/testing';

it('completes debounced search', fakeAsync(() => {
  component.search('ang');
  flush(); // run all timers (e.g. debounceTime)
  expect(component.results().length).toBeGreaterThan(0);
}));

fakeAsync से प्रॉमिस का परीक्षण

प्रॉमिस माइक्रोटास्क के रूप में हल होते हैं। fakeAsync के अंदर, अभिकथन से पहले उन्हें पूरा करने के लिए flushMicrotasks() (या tick()) कॉल करें।

import { fakeAsync, flushMicrotasks } from '@angular/core/testing';

it('resolves promise', fakeAsync(() => {
  let v: number | undefined;
  Promise.resolve(42).then((n) => (v = n));
  flushMicrotasks();
  expect(v).toBe(42);
}));

async / waitForAsync सहायक

वास्तविक एसिंक्रोनस काम के लिए समय को नियंत्रित किए बिना प्रतीक्षा करनी हो, तो बॉडी को waitForAsync में रैप करें और fixture.whenStable() का उपयोग करें।

import { waitForAsync } from '@angular/core/testing';

it('settles', waitForAsync(() => {
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(fixture.componentInstance.ready()).toBe(true);
  });
}));

effect() का परीक्षण

effect अपने द्वारा पढ़े जाने वाले सिग्नलों में बदलाव के बाद एसिंक्रोनस रूप से चलता है। इसका परिणाम देखने के लिए चेंज डिटेक्शन चलाएँ (या flush करें), ताकि इफ़ेक्ट निष्पादित हो जाए; फिर साइड इफ़ेक्ट की पुष्टि करें।

c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);

सामान्य समस्या: बचे हुए टाइमर

यदि कोई fakeAsync परीक्षण टाइमरों के कतार में बने रहने के साथ समाप्त होता है, तो Angular एक त्रुटि उत्पन्न करता है। हमेशा उन्हें tick/flush करें या ngOnDestroy में इंटरवल साफ़ करें, ताकि परीक्षण समाप्त होने पर वर्चुअल घड़ी खाली हो।

त्वरित जाँच

ज्ञात विलंब के लिए सही टूल चुनें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

सिग्नलों का परीक्षण सरल फ़ंक्शनों की तरह करें (पढ़ने के लिए कॉल, अपडेट करने के लिए set, DOM के लिए detectChanges)। एसिंक्रोनस काम के लिए fakeAsync एक वर्चुअल घड़ी देता है, जिसे आप tick से आगे बढ़ाते हैं, flush से खाली करते हैं और flushMicrotasks से प्रॉमिस पूरे करते हैं। टाइमरों को कभी लंबित न छोड़ें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “सिग्नल और असिंक्रोनस कोड का परीक्षण” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “सिग्नल और असिंक्रोनस कोड का परीक्षण” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“सिग्नल और असिंक्रोनस कोड का परीक्षण” में मैं क्या सीखूँगा?

रिएक्टिव और असिंक्रोनस व्यवहार का परीक्षण करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“सिग्नल और असिंक्रोनस कोड का परीक्षण” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ