اگر آپ جاننا چاہتے ہیں کہ کس طرح رد عمل کی جانچ پڑتال کریں، آپ صحیح جگہ میں ہیں. کیا آپ واقعی آپ کا کوڈ جانتا ہے کہ یہ کیا کرنا ہے؟ کیا آپ نے اسے براؤزر میں تجربہ کیا ہے؟ کیا آپ کے پاس نہیں ہے، یا آپ سب کچھ ٹیسٹ نہیں کر سکتے ہیں، اور یہ پیداوار میں ٹوٹ جاتا ہے؟
ایک ٹیسٹنگ لائبریری افادیت کے ایک گروپ ہے جو درخواستوں کے اجزاء پر انفرادی ٹیسٹ لکھنے کے لئے استعمال کرتا ہے. ایک ٹیسٹ کے کچھ اصول حصوں میں ہیں:
تفصیل:
وضاحت کرتا ہے کہ ٹیسٹ کیا ہے
استعمال / رینڈر:
ایک ماحول میں جزو کا استعمال کرتا ہے جہاں اسے ٹیسٹ کیا جا سکتا ہے
مذاق:
افعال کو پیش کرتا ہے، تاکہ آپ اپنے مفکوم کو چیک کرسکیں
اس آرٹیکل کے دوران، میں آپ کے کوڈ آؤٹ پٹ کی مضبوطی کو بہتر بنانے کے اس قیمتی طریقہ کے ساتھ شروع کرنے میں مدد کرنے کے لئے آپ کو اپنے کوڈ آؤٹ پٹ کی مضبوطی کو بہتر بنانے کے اس قابل قدر طریقہ کے ساتھ شروع کرنے میں مدد کرنے کے لئے میں کچھ مثالیں تلاش کرنے کے لئے جا رہا ہوں. ایک بار جب یہ پیداوار میں جاتا ہے تو کسی گندی حیرت.
زیادہ مفید وسائل چاہتے ہیں؟ یہاں بہترین کا ایک بہت اچھا ہے
ویب ڈیزائن کے اوزار
اس کے ارد گرد آپ کو زبردست کام کرنے میں مدد ملے گی. یا اگر آپ کو ایک نئی مشین کی ضرورت ہے تو، اس راؤنڈ اپ کی کوشش کریں
پروگرامنگ کے لئے بہترین لیپ ٹاپ
. یا اگر آپ ایک نئی سائٹ کی تعمیر کر رہے ہیں، تو آپ کو ایک عظیم ضرورت ہوسکتی ہے
ویب سائٹ بلڈر
.
01. رد عمل کی لائبریری کے ساتھ شروع کرو
میں اس ڈیمو کے لئے تخلیق-رد عمل ایپ استعمال کرنے جا رہا ہوں کیونکہ یہ پہلے سے ہی ٹیسٹنگ لائبریری کے ساتھ پہلے ہی آتا ہے. اگر آپ Gatsby یا اپنی مرضی کے سیٹ اپ کا استعمال کر رہے ہیں تو، کچھ ترتیبات ہوسکتی ہے کہ آپ ٹیسٹنگ لائبریری کا استعمال کرتے ہوئے شروع کرنے سے پہلے آپ کو چلانے کی ضرورت ہے.
شروع کرنے کے لئے، ایک نیا اپلی کیشن بنائیں. اگر آپ کے پاس پہلے سے ہی node.js کا حالیہ ورژن ہے، تو آپ عالمی سطح پر کسی اور کو انسٹال کرنے کے بغیر مندرجہ ذیل کمانڈ چل سکتے ہیں:
npx create-react-app netmag-javascript-testing
02. فیصلہ کرنے کا فیصلہ کریں
تصور کریں کہ ہمارے پاس ایک سادہ جزو ہے، کچھ ریاست کے ساتھ ایک بٹن کا کہنا ہے. کچھ ایسی چیزیں کیا ہیں جو اس طرح کے ایک جز میں ٹیسٹنگ کی ضرورت ہے؟
●.
اجزاء کی ظاہری شکل:
ہم نے اپنے اجزاء کو لکھا ہے کے بعد غیر متوقع طور پر تبدیل کرنے کے لئے کچھ بھی نہیں چاہتے ہیں. لہذا ہم اس پر قبضہ کرنے کے لئے ایک سنیپ شاٹ ٹیسٹ لکھ رہے ہیں. پھر، اگر کچھ بھی تبدیل ہوجاتا ہے، تو ہم اسے دستی یا بصری ٹیسٹ کے بغیر جلدی دیکھیں گے. یہ اجزاء کے لئے بہت اچھا ہے جو بہت سے چھوٹے اجزاء پر مشتمل ہیں: آپ جلدی دیکھ سکتے ہیں جب (اور جہاں) اس کی ظاہری شکل متاثر ہوئی ہے.
●.
مختلف شاخیں جو فراہم کرتے ہیں:
کیونکہ ہم دو یا زیادہ مختلف پیداوار ہوسکتے ہیں، ہمیں ان سب کو صحیح طریقے سے انجام دینے کی ضرورت ہے، ان میں سے صرف ایک ہی نہیں. لہذا ہمیں ایک کلک ایونٹ کی سماعت کرنے کی ضرورت ہے اور اس کوڈ کو چلانے کے بعد یہ ایک اور سنیپ شاٹ ٹیسٹ کرنے کی ضرورت ہے.
●.
یہ افعال متوقع طور پر کہا جاتا ہے:
ہم اس بات کو یقینی بنانا چاہتے ہیں کہ ہم نے ایک اور فنکشن کاموں کو کال کرنے کے لئے لکھا ہے جیسا کہ ہم سمجھتے ہیں. لیکن اس تقریب کے بعد سے بیرونی انحصار ہے، ہم یہاں اس کی آزمائش نہیں کرنا چاہتے ہیں. ہمارے ٹیسٹ صرف اس فعالیت کو ختم کرنا چاہئے جو ہم چاہتے ہیں.
چلو ہمارے پہلے ٹیسٹ لکھیں. ایک نئی فائل بنائیں
mycomponent.unit.test.js.
اسی فولڈر میں جزو کے طور پر. آخر میں test.js شامل کرکے، یہ خود کار طریقے سے ٹیسٹنگ لائبریری کی طرف سے اٹھایا جائے گا. اس فائل کے مواد ذیل میں ہیں:
'ردعمل' سے درآمد ردعمل
@ ٹیسٹنگ لائبریری / رد عمل سے {رینڈر} درآمد کریں
'./mycomponent' سے میرا کام درآمد کریں
بیان کریں ('& lt؛ mycomponent / & gt؛'، () = & gt؛ {
// ٹیسٹ یہاں جائیں
})
پہلی چیز جس میں میں آپ کی توجہ کو اپنی طرف متوجہ کرنا چاہتا ہوں
بیان کریں ()
فنکشن، جو دو دلائل لیتا ہے: سب سے پہلے ایک تار ہے جسے آپ بہتر بیان کرنے کے لئے استعمال کرسکتے ہیں - متن کی ایک تار کے طور پر - آپ کا ٹیسٹ کیا کرنا ہے. ہمارے معاملے میں ہم نے صرف یہ کہا ہے کہ یہ پیش کرنا چاہئے. یہ بہت مفید ہے جب کسی اور کو آپ کے کوڈ پر نظر آتا ہے یا آپ کو یاد رکھنا پڑے گا کہ آپ نے بعد میں اس مرحلے میں کیا کیا. اچھی وضاحت لکھنا بیانات کوڈ دستاویزات کا ایک شکل اور تحریری ٹیسٹ کے لئے ایک اور اچھی وجہ ہے.
دوسرا دلیل آپ کے ٹیسٹ ہے. The.
بیان کریں ()
فنکشن دوسرے کے بعد ایک ٹیسٹ کے تمام ٹیسٹ چلائیں گے.
04. صفائی کی تقریب کا استعمال کریں
چلو ایک مددگار فنکشن متعارف کرایا ہے
پہلے سے ہی ()
. ہمیں اس کا استعمال کرنے کی ضرورت ہے کیونکہ ہر بار جب ہم جزو کے ساتھ کچھ کرتے ہیں، تو ہم ایک تازہ کاپی چاہتے ہیں جو ہم نے پہلے ہی اس کے اجزاء میں موجود ہیں. یا ہمیں اجزاء کو دوبارہ پیش کرنے کی ضرورت ہوسکتی ہے:
پہلے سے ہی ()
کیا یہ ہمارے لئے ہے اور ہم اسے صاف کرنے کی تقریب کو منتقل کر سکتے ہیں.
'@ ٹیسٹنگ لائبریری / رد عمل سے درآمد {رینڈر، صفائی}
...
بیان کریں ('اجزاء کو دینا چاہئے'، () = & gt؛ {
پہلے سے ہی (صفائی)
}
اس مرحلے میں، ہم اپنے اجزاء کو 'پہاڑ' جا رہے ہیں (یا اسے فراہم کرتے ہیں).
بیان کریں ('اجزاء کو پیش کرنا چاہئے'، () = & gt؛ {
پہلے سے ہی (صفائی)
یہ ('بنیادی پروپس' کے ساتھ رینڈرز، () = & gt؛ {
رینڈر (& lt؛ mycomponent / & gt؛)
})
}
یہ رینڈر ہمیں مرتب شدہ اجزاء کے تمام فراہم کردہ خصوصیات تک رسائی فراہم کرتا ہے. یہ اس میں چھوڑنے کے لئے اچھا ہو سکتا ہے
کنسول .log ()
لہذا آپ مزید واضح طور پر دیکھ سکتے ہیں جو یہ کرتا ہے.
اگر آپ ایسا کرتے ہیں تو آپ دیکھیں گے کہ ہم یہاں کچھ مفید خصوصیات ہیں جو ہم یہاں سے فائدہ اٹھا سکتے ہیں. میں ایک دعوی کرنے جا رہا ہوں (ایک قابل تجدید اعلان) اور کنٹینر کو نکالنے کے ذریعے اسے آزمائیں. کنٹینر 'پر مشتمل ہے' ڈوم نوڈس (تمام ایچ ٹی ایم ایل) جزو کے ساتھ منسلک ہے.
یہ ('بنیادی پروپس کے ساتھ رینڈر، () = & gt؛ {
const {کنٹینر} = رینڈر (& lt؛ mycomponent / & gt؛)
})
اب ہم کنٹینر تک رسائی حاصل کرتے ہیں، میں کیسے کہہ سکتا ہوں کہ یہ میرے دعوی کے مطابق کیا گیا ہے؟ سنیپ شاٹ ٹیسٹ کو شامل کرکے.
ایک تصویر کی طرح ہونے کے طور پر ایک سنیپ شاٹ کے بارے میں سوچو. یہ وقت میں ایک مخصوص نقطہ پر ہمارے جزو کا ایک سنیپ شاٹ لیتا ہے. پھر جب ہم کوڈ میں تبدیلی کرتے ہیں تو ہم دیکھ سکتے ہیں کہ یہ اب بھی اصل سنیپ شاٹ سے ملتا ہے. اگر ایسا ہوتا ہے تو، ہم اس بات پر اعتماد رکھ سکتے ہیں کہ کچھ بھی جزو میں تبدیل نہیں ہوا ہے. تاہم، اگر ایسا نہیں ہوتا تو، ہم کسی ایسے مسئلے کو بے نقاب کر سکتے ہیں جو کسی دوسرے جزو میں پیدا ہوئے ہیں، جو ہم نے پہلے ہی نہیں دیکھا تھا:
06. ٹیسٹ کی خصوصیات
ایک اجزاء، ایک جزو کے ساتھ ساتھ، ایک جزو کے ساتھ ٹیسٹ کیا جا سکتا ہے. آپ کے اجزاء کو فراہم کردہ مختلف پروپس کو جانچ کرنا آپ کو زیادہ کوریج اور اعتماد فراہم کرے گا. آپ کبھی نہیں جانتے کہ جب ضرورت ہو تو اس کا مطلب یہ ہے کہ آپ کے اجزاء کے پروپس کو ریفریجریٹر کیا جاتا ہے اور حتمی پیداوار بدل جائے گی.
مندرجہ ذیل اعتراض کو اپنی فائل کے سب سے اوپر میں شامل کریں:
ہم کسی چیز میں خصوصیات کی وضاحت کرتے ہیں اور پھر پھیلاؤ آپریٹر استعمال کرتے ہیں (اعتراض نام کے بعد تین نقطے:
... lightproperties)
کیونکہ جب ہم اس طرح سے پیش کرتے ہیں تو ہم صرف ایک دلیل کو منتقل کر سکتے ہیں. یہ دیکھنے کے لئے یہ بھی مفید ہے کہ آپ کو تنقید میں کیا خصوصیات ہیں:
یہ ('بنیادی پروپس کے ساتھ رینڈر، () = & gt؛ {
const {کنٹینر} = رینڈر (& lt؛ mycomponent / & gt؛
)
توقع (کنٹینر) .TOMACHSNAPSHOT ()
})
یہ ('روشنی ورژن پروپس' کے ساتھ رینڈر کرتا ہے، () = & gt؛ {
Const {کنٹینر} = رینڈر (
& lt؛ mycomponent {... lightproperties} / & gt؛
)
توقع (کنٹینر) .TOMACHSNAPSHOT ()
})
07. UI میں ٹیسٹ کی تبدیلی
تصور کریں کہ ہمارے جزو میں ایک بٹن ہے اور آپ اس بات کو یقینی بنانا چاہتے ہیں کہ بٹن پر کلک ہونے پر کچھ ہوتا ہے. آپ شاید یہ سوچ سکتے ہیں کہ آپ درخواست کی حالت کی جانچ کرنا چاہتے ہیں؛ مثال کے طور پر، آپ کو آزمائش کی جا سکتی ہے کہ ریاست کو اپ ڈیٹ کیا گیا ہے. تاہم، یہ ان ٹیسٹوں کا اعتراض نہیں ہے.
یہ ایک ٹیسٹنگ لائبریری کا استعمال کرتے ہوئے ہمیں ایک اہم تصور میں متعارف کرایا ہے: ہم یہاں ریاست کی آزمائش یا ہمارے اجزاء کا کام کرنے کے لئے یہاں نہیں ہیں. ہم یہاں آزمائیں گے کہ لوگ کس طرح اجزاء کا استعمال کرتے ہیں اور ان کی توقعات کو پورا کرتے ہیں.
لہذا ریاست کو اپ ڈیٹ کیا ہے یا نہیں، غیر موثر ہے؛ ہم کیا ٹیسٹ کرنا چاہتے ہیں وہ اس بٹن پریس کا نتیجہ ہے.
چلو تصور کریں کہ ہم ایک فنکشن کے نتائج کی جانچ کر رہے ہیں جو UI کو سیاہ موڈ سے روشنی موڈ سے تبدیل کرتی ہے. یہاں اجزاء ہے:
کیا آپ نے محسوس کیا کہ ہم نے نئی خصوصیت شامل کی
ڈیٹا ٹیسٹڈ
بٹن پر؟ یہاں یہ ہے کہ آپ اس کی جانچ کر سکتے ہیں. سب سے پہلے، ایک نئی تقریب درآمد، ٹیسٹنگ لائبریری سے فائرنٹین:
درآمد {صفائی،
Fireevent،
فراہم
} '@ ٹیسٹنگ لائبریری / رد عمل سے
ہم اس کام کو استعمال کرنے کے لئے استعمال کر سکتے ہیں وہاں UI میں تبدیلیاں ہیں اور ان تبدیلیوں کو مستقل طور پر موجود ہیں:
یہ بہت اچھا ہے: ہمیں دستی طور پر سائٹ پر جانے کی ضرورت نہیں ہے اور اس کے ارد گرد نظر آتے ہیں، پھر بٹن پر کلک کریں اور ایک دوسرے کے ارد گرد نظر آتے ہیں - جس کے دوران، آپ کو تسلیم کر سکتے ہیں، آپ کو کچھ بھی بھول جائے گا یا یاد آو! اب ہم اس اعتماد کو پورا کرسکتے ہیں کہ، اسی ان پٹ کو دیئے گئے، ہم اپنے اجزاء میں اسی پیداوار کی توقع کر سکتے ہیں.
جب یہ IDS ٹیسٹ کرنے کے لئے آتا ہے، میں ذاتی طور پر استعمال کرتے ہوئے ناپسند کرتا ہوں
ڈیٹا ٹیسٹڈ
ڈوم میں کچھ تلاش کرنے کے لئے. سب کے بعد، ٹیسٹ کا مقصد یہ ہے کہ صارف کیا کر رہا ہے اور اس کی جانچ کرنے کے لۓ کیا ہوتا ہے جب وہ کرتے ہیں.
ڈیٹا ٹیسٹڈ
تھوڑا سا دھوکہ دہی کی طرح محسوس ہوتا ہے - اگرچہ ڈیٹا ٹیسٹنگ آپ کے QA انجینئر کے لئے ممکنہ طور پر آ جائیں گے (معیار کی یقین دہانی کے انجینئرز کے کردار کو باکس آؤٹ دیکھیں).
اس کے بجائے، ہم استعمال کر سکتے ہیں
GetByText ()
اور ہمارے بٹن کے متن میں منتقل. یہ طریقہ بہت زیادہ رویے مخصوص ہوگا.
08. مذاق اور جاسوسی تقریب
کبھی کبھی ہمیں ایک تقریب میں کال کی جانچ کرنے کی ضرورت ہوسکتی ہے لیکن یہ کام ٹیسٹ کے گنجائش سے باہر ہے. مثال کے طور پر، میرے پاس ایک علیحدہ ماڈیول ہے جس میں ایک فنکشن ہے جس میں ایک مخصوص تعداد میں پی آئی کی قیمت کا حساب ہوتا ہے.
مجھے اس ماڈیول کا نتیجہ کیا ٹیسٹ کرنے کی ضرورت نہیں ہے. مجھے اس کی جانچ کرنے کی ضرورت ہے کہ میرا کام توقع ہے. اس بارے میں مزید معلومات کے بارے میں کیوں ہے، براہ کرم باکس یونٹ اور انضمام ٹیسٹ دیکھیں. اس صورت میں، ہم اس کام کی مذاق کر سکتے ہیں:
COST GetPivalue = jest.fn ()
یہ ('پر کلک پر کام کرتا ہے'، () = & gt؛ {
const {کنٹینر، getbytestid} = رینڈر (& lt؛ togglebutton / & gt؛)
Fireevent.Click (GetByTestiD ('موڈ ٹوگل'))
توقع ہے (GetPivalue) .ایوزبینکلڈ ٹائمز (1)
)
})
تقریب
tohavebeencalledtimes ()
ٹیسٹنگ لائبریری میں بہت سے مددگار افعال میں سے ایک ہے جو ہمیں فعال کرتی ہے
افعال کی پیداوار کی جانچ پڑتال کرنے کے لئے. اس سے ہم صرف اپنے ٹیسٹ کو صرف ماڈیول کے لئے گنجائش نہیں دیتے ہیں جو ہم آزمائشی کرنا چاہتے ہیں بلکہ اس کا مطلب یہ ہے کہ ہم 'جاسوس' کرسکتے ہیں یا دیکھیں گے کہ جب یہ کام کرتا ہے تو کیا یہ کام کرتا ہے.
تحریری ٹیسٹنگ کے ساتھ شروع کرنے کے لئے تھوڑا سا مشکل لگ رہا ہے. مجھے امید ہے کہ اس ٹیوٹوریل نے آپ کو اس کی کوشش کرنے کے لئے تھوڑا سا اعتماد دیا ہے. چونکہ میں نے اپنے ایپلی کیشنز کے لئے ٹیسٹ لکھنا شروع کر دیا، میں واقعی میں واپس نہیں جا سکتا: میں آسان آرام کر سکتا ہوں، جانتا ہوں کہ میں ان لوگوں کے لئے بہت بہتر میراث چھوڑ رہا ہوں جو مستقبل میں اپنے کام کا استعمال کریں گے.
یاد رکھیں، اگر آپ ایک پیچیدہ سائٹ کی تعمیر کر رہے ہیں، تو آپ اپنا حاصل کرنا چاہتے ہیں
ویب میزبانی
سروس کی جگہ پر. اور اگر اس سائٹ کو بہت سے اثاثوں پر مشتمل ہونے کا امکان ہے، تو انہیں قابل اعتماد میں ذخیرہ کرنے کا امکان ہے
کلاؤڈ اسٹوریج
اہم ہے.
یہ مواد اصل میں شائع ہوا
نیٹ میگزین
. ہمارے مزید پڑھیں
ویب ڈیزائن مضامین یہاں
.
