প্রতিক্রিয়াতে উপাদান পরীক্ষা: জাস্ট এবং এনজাইম দিয়ে কী এবং কীভাবে পরীক্ষা করা হয়?

প্রতিক্রিয়া উপাদানগুলির পরীক্ষার বিষয়ে এই নিবন্ধটি অ্যালোনা পাইসরেনকো লিখেছিলেন - জ্যাঙ্গো স্টার্সের ফ্রন্টএন্ড ইঞ্জিনিয়ার।
জাজানো তারার ব্লগে মূল নিবন্ধটি পড়ুন।

ইতিমধ্যে পরীক্ষাগুলি নিয়ে কাজ করা প্রবর্তক এবং অভিজ্ঞ বিকাশকারী উভয়েরই জন্য প্রতিক্রিয়া প্রতিক্রিয়া উপাদান হতে পারে। আমরা আমাদের প্রকল্পে যেটি ব্যবহার করি তার সাথে আপনার নিজস্ব পদ্ধতির তুলনা করা আকর্ষণীয় হতে পারে। কোড বেসটি কভার করার জন্য, আপনাকে জানতে হবে যে উপাদানগুলির মধ্যে কোন উপাদানগুলির পরীক্ষা করা দরকার এবং কোন কোডটি ঠিক সেই উপাদানটিতে beাকা উচিত।

এই নিবন্ধে, আমি নিম্নলিখিত বিষয়গুলি কভার করব:

  • প্রকল্পের কাঠামোর ভিত্তিতে ইউনিট পরীক্ষার সঠিক ক্রম সংজ্ঞা দিন
  • পরীক্ষার কভারেজ থেকে কী বেরোতে হবে তা পরীক্ষা করুন (কী পরীক্ষা করবেন না)
  • স্ন্যাপশট পরীক্ষার প্রয়োজনীয়তা নির্ধারণ করুন
  • উপাদান এবং কোন ক্রমে পরীক্ষা করতে হবে তা নির্ধারণ করুন
  • বিস্তারিত কাস্টম কোড উদাহরণ সরবরাহ করুন

নিবন্ধটি ধরে নেওয়া হয়েছে যে কীভাবে জেস্ট এবং এনজাইম সেট আপ করবেন সে সম্পর্কে আপনার কিছু জ্ঞান রয়েছে। ইনস্টলেশন এবং কনফিগারেশন সম্পর্কিত তথ্যের জন্য দয়া করে অফিসিয়াল ওয়েবসাইটগুলি দেখুন।

নিম্নলিখিত কেসটি ধরুন: আপনাকে পরীক্ষার সাথে প্রজেক্ট কোড বেসটি আবরণ করা দরকার। আপনার কী শুরু করা উচিত এবং পরীক্ষা শেষে আপনার কী পাওয়া উচিত? 100% পরীক্ষার কভারেজ? এটিই লক্ষ্য নির্ধারণের মানদণ্ড, তবে বেশিরভাগ পরিস্থিতিতে আপনি এটি অর্জন করতে পারবেন না।

কেন? কারণ আপনার সমস্ত কোড পরীক্ষা করা উচিত নয়। কেন এবং কী পরীক্ষা করা উচিত নয় তা আমরা খুঁজে বের করব। এছাড়াও, 100% পরীক্ষার কভারেজ সর্বদা গ্যারান্টি দেয় না যে উপাদানটি পুরোপুরি পরীক্ষা করা হয়েছে। কোনও কিছু পরিবর্তিত হলে আপনাকে অবহিত করা হবে এমন কোনও গ্যারান্টিও নেই। শতাংশ নিয়ে বিরক্ত করবেন না, ভুল পরীক্ষাগুলি লেখা এড়িয়ে চলুন, কেবল প্রধান উপাদানগুলির বিশদটি হারাতে চেষ্টা করবেন না।

প্রকল্পের কাঠামোর ভিত্তিতে ইউনিট পরীক্ষার সঠিক ক্রম সংজ্ঞা দিন

প্রকল্প কাঠামোর পরবর্তী অংশে এই প্রশ্নটি আলোচনা করা যাক:

আমি ভাগ করা ডিরেক্টরিটি গ্রহণ করেছি কারণ এটি সবচেয়ে গুরুত্বপূর্ণ। এতে প্রকল্পের বিভিন্ন দিকে ব্যবহৃত উপাদানগুলি রয়েছে consists এগুলি পুনরায় ব্যবহারযোগ্য এবং সাধারণত ছোট এবং জটিল নয়। যদি এক বা অন্য উপাদান ব্যর্থ হয় তবে এটি অন্য জায়গায় ব্যর্থতার দিকে পরিচালিত করে। সুতরাং আমাদের আত্মবিশ্বাস থাকা উচিত যে সেগুলি সঠিকভাবে বানান হয়েছিল। এই ডিরেক্টরিটির কাঠামোটি কয়েকটি ফোল্ডারে বিভক্ত, যার প্রতিটিটিতে উপাদান রয়েছে।

ভাগ করা ডিরেক্টরিতে ইউনিট পরীক্ষার সঠিক ক্রমটি সংজ্ঞায়িত করতে:

  • সর্বদা সরল থেকে জটিল দিকে যাওয়ার নিয়মটি অনুসরণ করুন। প্রতিটি ডিরেক্টরি বিশ্লেষণ করুন এবং কোন উপাদানগুলি স্বতন্ত্র তা নির্ধারণ করুন। রেন্ডারিং অন্যান্য উপাদানগুলির উপর নির্ভর করে না। এগুলি নিজের দ্বারা সম্পন্ন হয় এবং একক হিসাবে পৃথকভাবে ব্যবহার করা যেতে পারে। উপরের কাঠামোর মধ্যে, এটি ফর্ম ফোল্ডারের ইনপুট ডিরেক্টরি। এতে রেডাক্স ফর্ম যেমন টেক্সট ইনপুট, সিলেক্ট ইনপুট, চেকবক্সইনপুট, ডেটইনপুট ইত্যাদি অন্তর্ভুক্ত রয়েছে
  • এরপরে আমাদের সহায়ক উপাদানগুলি সংজ্ঞায়িত করতে হবে যা সাধারণত ইনপুট উপাদানগুলিতে ব্যবহৃত হয়, তবে যা আলাদাভাবে পরীক্ষা করা উচিত। এটি ইউস ডিরেক্টরি। এই ফোল্ডারে উপাদানগুলি জটিল নয়, তবে সেগুলি খুব গুরুত্বপূর্ণ। এগুলি প্রায়শই পুনরায় ব্যবহারযোগ্য এবং বারবার ক্রিয়াকলাপে সহায়তা করে।
  • পরবর্তী পদক্ষেপে আপনি সংজ্ঞায়িত করুন যে কোন উপাদানগুলি একে অপরের থেকে স্বতন্ত্রভাবেও ব্যবহৃত হতে পারে। যদি উপলভ্য থাকে তবে পরীক্ষার জন্য এটি আপনার সাথে নিয়ে যান। আমাদের কাঠামো থেকে এটি উইজেটগুলি, সাধারণ কার্যকারিতা সহ ছোট উপাদান। আপনি পরীক্ষার কভারেজের জন্য সারিতে থাকা তৃতীয় আইটেম।
  • এছাড়াও, অন্যান্য ডিরেক্টরিগুলি বিশ্লেষণ করুন এবং আরও জটিল উপাদানগুলি নির্ধারণ করুন যা স্বতন্ত্রভাবে বা অন্যান্য উপাদানগুলির সাথে একত্রে ব্যবহার করা যেতে পারে। আমাদের ক্ষেত্রে এটি মডেল ডিরেক্টরি। এই উপাদানগুলি নীচে বিস্তারিত আলোচনা করা হয়।
  • সবচেয়ে জটিল উপাদান শেষ অবধি থাকে। এগুলি হ'ল ডিরেক্টরি এবং ফর্ম ফোল্ডার থেকে ক্ষেত্র। প্রথমে কোনটি পরীক্ষা করা উচিত তা আপনি কীভাবে নির্ধারণ করবেন? আমি সেই ডিরেক্টরিটি নিয়ে যাব যা থেকে পরীক্ষাগুলি উপাদানগুলিতে ইতিমধ্যে উপাদানগুলি ব্যবহার করা হয়েছে। এইচকের ডিরেক্টরি থেকে উপাদানটি উইজেটগুলির উপাদানগুলিতে উপলব্ধ ছিল। সুতরাং আমি ইতিমধ্যে জানি কোথায় এবং কী উদ্দেশ্যে এই ডিরেক্টরি এবং এর উপাদানটি ব্যবহৃত হয়।
  • শেষটি হল ক্ষেত্র ফোল্ডার। এতে রেডাক্স ফর্মগুলির সাথে যুক্ত উপাদান রয়েছে।

চূড়ান্ত উপাদান অর্ডার (আমাদের উদাহরণের ভিত্তিতে) এর মতো দেখাচ্ছে:

এই অর্ডার দেওয়ার পরে, আপনি ধীরে ধীরে পরীক্ষিত উপাদানগুলির জটিলতা বাড়িয়ে তোলেন। সুতরাং আপনি যখন আরও জটিল উপাদানগুলির সাথে কাজ করেন, আপনি ইতিমধ্যে জানেন যে ক্ষুদ্রতম কীভাবে আচরণ করে।

উদাহরণস্বরূপ, পাঠ্য ক্ষেত্রটি কীভাবে পরীক্ষা করতে হবে তা আপনি যদি অনিশ্চিত থাকেন তবে অ্যারে ক্ষেত্রটি পরীক্ষা করবেন না। আপনি নিজেরাই "ফর্ম" ফিল্ডটি পরীক্ষা না করে রেডাক্স ফর্ম দিয়ে সজ্জিত কোনও উপাদান ব্যবহার করবেন না।

আপনার সিদ্ধান্তগুলিতে সামঞ্জস্য বজায় রাখুন, মনে করুন এবং যুক্তিতে স্যুইচ করুন এমন প্রথম উপাদানটি গ্রহণ করবেন না। অবশ্যই, আপনার প্রকল্পের কাঠামো আলাদা হতে পারে। এটির বিভিন্ন ডিরেক্টরি নাম বা অতিরিক্ত উপাদান, ক্রিয়া এবং হ্রাস থাকতে পারে তবে উপাদানগুলি পরীক্ষা করার ক্রমটি নির্ধারণের জন্য যুক্তিটি একই।

আসুন পরীক্ষার কভারেজের বাইরে কী রাখবেন তা সংজ্ঞায়িত করা যাক:

  • তৃতীয় পক্ষের গ্রন্থাগারসমূহ। অন্য লাইব্রেরি থেকে আসা কোনও কার্য পরীক্ষা করবেন না। আপনি এই কোডটির জন্য দায়বদ্ধ নন। আপনার কোড পরীক্ষা করার প্রয়োজন হলে এটি এড়িয়ে যান বা বাস্তবায়নটি নকল করুন।
  • ধ্রুবক। নামটি নিজের পক্ষে কথা বলে। সেগুলি পরিবর্তন করা যায় না। এগুলি স্থিতিশীল কোড সেট যা আলাদা করার উদ্দেশ্যে নয়।
  • ইনলাইন শৈলী (আপনি যদি তাদের উপাদানগুলিতে ব্যবহার করেন)। ইনলাইন শৈলীর পরীক্ষা করতে, আপনাকে আপনার পরীক্ষার শৈলীর সাথে অবজেক্টটির সদৃশ করতে হবে। যদি বস্তুর শৈলীর পরিবর্তন হয় তবে আপনাকে অবশ্যই পরীক্ষায় সেগুলি পরিবর্তন করতে হবে। পরীক্ষায় কোনও উপাদানটির কোড অনুলিপি করবেন না। আপনি কখনই এটি পরীক্ষায় পরিবর্তন করার কথা ভাবেন না। তদ্ব্যতীত, আপনার সহকর্মী কখনই লক্ষ্য করবেন না যে এখানে সদৃশ হয়েছে। বেশিরভাগ ক্ষেত্রে, ইনলাইন স্টাইলগুলি উপাদানটির আচরণ পরিবর্তন করে না। সুতরাং, তাদের পরীক্ষা করা উচিত নয়। আপনার স্টাইলগুলি পরিবর্তনশীলভাবে পরিবর্তিত হলে সেখানে ব্যতিক্রম হতে পারে।
  • যে বিষয়গুলির পরীক্ষিত উপাদানটির সাথে কোনও সম্পর্ক নেই। পরীক্ষিত উপাদানটিতে আমদানি করা পরীক্ষার উপাদানগুলি সহ কভারেজটি এড়িয়ে যান। এটি অন্যটি জড়িয়ে থাকলে সতর্কতা অবলম্বন করুন। মোড়কের পরীক্ষা না করে বিশ্লেষণ করুন এবং আলাদাভাবে এটি পরীক্ষা করুন।

আপনি কীভাবে পরীক্ষাগুলি লিখবেন? আমি দুটি পরীক্ষার পদ্ধতির সমন্বয় করি:

  • স্নাপশট পরীক্ষা
  • উপাদান যুক্তি পরীক্ষা করা হচ্ছে

আমি এখনই তাদের উভয় নিয়ে আলোচনা করব।

স্ন্যাপশট দিয়ে কীভাবে পরীক্ষা করবেন

যখন আপনি নিশ্চিত করতে চান যে ব্যবহারকারীর ইন্টারফেসটি পরিবর্তিত হয়নি তা স্ন্যাপশট পরীক্ষণ একটি দরকারী পরীক্ষামূলক সরঞ্জাম। আপনি এই পরীক্ষার সরঞ্জামটি প্রথমবার ব্যবহার করার পরে আপনার কাছে স্ন্যাপশটগুলি পরিচালনা এবং পরিচালনা সম্পর্কে প্রশ্ন থাকতে পারে। নীতিটি খুব সহজ, তবে দুর্ভাগ্যক্রমে এটি কোথাও পুরোপুরি বর্ণিত হয়নি।

পদক্ষেপ 1. উপাদানটির জন্য পরীক্ষা লিখুন এবং প্রত্যাশিত ব্লকে .toMatchSnapshot () পদ্ধতিটি ব্যবহার করুন, যা স্ন্যাপশট নিজে তৈরি করতে ব্যবহৃত হয়:

এটি ('পাঠ্যের উপাদানটি সঠিকভাবে রেন্ডার করুন'), () => {পাঠ্য ইনপুটকম্পোনেন্ট = রেন্ডার ক্রেইট ( )। toJSON (); প্রত্যাশা (টেক্সটইনপুট কম্পোনেন্ট)। টোম্যাচস্ন্যাপশট (); });

পদক্ষেপ ২. প্রথমবার আপনি যখন কোনও স্তরে পরীক্ষাটি পরিচালনা করেন, __snapshots__ নামে একটি ডিরেক্টরি পরীক্ষা দিয়ে তৈরি করা হয় এবং .snap এক্সটেনশান সহ স্বয়ংক্রিয়ভাবে উত্পন্ন ফাইল থাকে।

স্ন্যাপশটটি এমন দেখাচ্ছে:

// জাস্ট স্ন্যাপশট ভি 1, https://goo.gl/fbAQLP
রফতানি [`টেক্সটইনপুট সঠিকভাবে উপাদান 1nder] রেন্ডার করে =` `;

পদক্ষেপ 3. স্ন্যাপশটটি সংগ্রহস্থলে সরান এবং পরীক্ষার মাধ্যমে এটি সংরক্ষণ করুন।

যদি উপাদানটি পরিবর্তিত হয়, আপনাকে কেবলমাত্র-আপডেটস্ন্যাপশট পতাকা সহ স্ন্যাপশট আপডেট করতে হবে বা শর্ট-ফর্ম ইউ পতাকা ব্যবহার করতে হবে।

এভাবেই স্ন্যাপশট তৈরি হয় - এটি কীভাবে কাজ করে?

আসুন দুটি ক্ষেত্রে বিবেচনা করা যাক:

1. উপাদান পরিবর্তন হয়েছে

  • পরীক্ষা চালান
  • একটি নতুন স্ন্যাপশট তৈরি করা হয় এবং স্বয়ংক্রিয়ভাবে উত্পন্ন স্ন্যাপশটের সাথে তুলনা করা হয় যা __snapouts__ ডিরেক্টরিতে সঞ্চিত থাকে।
  • পরীক্ষা ব্যর্থ হয়েছে কারণ স্ন্যাপশটটি আলাদা

২. উপাদানটি পরিবর্তন হয়নি

  • পরীক্ষা চালান
  • একটি নতুন স্ন্যাপশট তৈরি করা হয় এবং স্বয়ংক্রিয়ভাবে উত্পন্ন স্ন্যাপশটের সাথে তুলনা করা হয় যা __snapouts__ ডিরেক্টরিতে সঞ্চিত থাকে।
  • স্ন্যাপশট অভিন্ন হিসাবে পরীক্ষাগুলি পাস করেছে

কোনও লজিক (কেবলমাত্র ইউআই রেন্ডারিং) ছাড়াই যদি আমরা একটি ছোট উপাদান পরীক্ষা করি তবে সবকিছু ঠিক আছে। তবে অনুশীলন শো হিসাবে, বাস্তব প্রকল্পগুলিতে এমন কোনও উপাদান নেই। যদি তাদের অস্তিত্ব থাকে তবে অল্প কিছু আছে।

পূর্ণ উপাদান পরীক্ষার জন্য পর্যাপ্ত স্ন্যাপশট আছে?

উপাদান পরীক্ষার জন্য প্রধান নির্দেশাবলী

1. একটি উপাদান কেবল একটি স্ন্যাপশট থাকা উচিত।

যদি একটি স্ন্যাপশট ব্যর্থ হয়, সম্ভবত অন্যরাও ব্যর্থ হবে। আপনার পরে আপনার পরীক্ষাগুলি পড়ে এমন বিকাশকারীদের বিভ্রান্ত করে এমন অপ্রয়োজনীয় স্ন্যাপশটগুলি গ্রহণ এবং সংরক্ষণ করবেন না।

অবশ্যই দুটি ব্যুষ্ট্রে আপনার যদি কোনও উপাদানটির আচরণ পরীক্ষা করতে হয় তবে ব্যতিক্রমগুলি রয়েছে: উদাহরণস্বরূপ, পপআপ খোলার আগে এবং খোলার আগে উপাদানটির অবস্থায়।

এই জাতীয় রূপটি সর্বদা এটির মাধ্যমে প্রতিস্থাপন করা যেতে পারে: প্রথম পরীক্ষাটি স্ন্যাপশটে পপআপ ছাড়াই উপাদানটির মানক অবস্থানটি সংরক্ষণ করে এবং দ্বিতীয় পরীক্ষাটি ইভেন্টটির অনুকরণ করে এবং একটি নির্দিষ্ট শ্রেণীর অস্তিত্ব পরীক্ষা করে। এইভাবে, আপনি একাধিক স্ন্যাপশট গ্রহণ করে সহজেই বাইপাস করতে পারেন।

২. পরীক্ষার প্রপস

আমি সাধারণত প্রোপ টেস্টিংকে দুটি পরীক্ষায় ভাগ করি:

  • প্রথমে ডিফল্ট প্রোপ মানগুলির রেন্ডারিং পরীক্ষা করুন। যখন উপাদানটি রেন্ডার করা হয়, আমি আশা করি যে মানটি ডিফল্টপ্রপস থাকলে ডিফল্ট ডিফল্টের সমান হবে।
  • দ্বিতীয়ত, প্রাপের কাস্টম মানটি পরীক্ষা করুন। আমি আমার নিজস্ব মান নির্ধারণ করেছি এবং উপাদানটি সরবরাহ করার পরে এটি প্রাপ্ত হওয়ার প্রত্যাশা করছি।

৩. ডেটা ধরণের পরীক্ষা করা

প্রপসে কোন ধরণের ডেটা রয়েছে তা পরীক্ষা করার জন্য, বা নির্দিষ্ট ক্রিয়াকলাপের পরে কী ধরণের ডেটা পাওয়া যাবে, আমরা বিশেষ জাস্ট-এক্সটেন্ডড (অতিরিক্ত জাস্ট ম্যাচচার্স) লাইব্রেরিটি ব্যবহার করতে পারি, এতে মেলগুলির একটি বর্ধিত সেট রয়েছে যা এতে রয়েছে কৌতুক অনুপস্থিত এই লাইব্রেরির সাথে, ডেটা ধরণের পরীক্ষা করা অনেক সহজ এবং আরও উপভোগযোগ্য।

অন্যদিকে প্রপস টেস্টিং একটি বিরোধী প্রশ্ন। কিছু বিকাশকারী পরীক্ষার প্রপসের বিরুদ্ধে তর্ক করতে পারে কারণ এটি তৃতীয় পক্ষের প্যাকেজ যা পরীক্ষা করা উচিত নয়। তবে আমি নিজে প্যাকেজের কার্যকারিতা পরীক্ষা করছি না বলে আমি উপাদানগুলির প্রপস পরীক্ষা করার জন্য জোর দিয়েছি। পরিবর্তে, আমি কেবল প্রপসগুলি সঠিক কিনা তা নিশ্চিত করি। ডেটা টাইপ প্রোগ্রামিংয়ের একটি খুব গুরুত্বপূর্ণ অংশ এবং এড়িয়ে যাওয়া উচিত নয়।

৪. ইভেন্টের পরীক্ষা করা

আপনি পরীক্ষাগুলির সাথে স্ন্যাপশট এবং প্রপসগুলি Afterেকে দেওয়ার পরে, আপনি নিশ্চিত হতে পারেন যে উপাদানটি সঠিকভাবে রেন্ডার হবে। তবে উপাদানটিতে ইভেন্টগুলি থাকলে পুরো কভারেজের জন্য এটি পর্যাপ্ত নয়।

ইভেন্টটি পর্যালোচনা করার বিভিন্ন উপায় রয়েছে। সর্বাধিক ব্যবহৃত হয়:

  • মক ইভেন্ট => অনুকরণ এটি => প্রত্যাশিত ইভেন্ট বলা হয়েছিল
  • মক ইভেন্ট => প্যারামের সাথে ইভেন্ট সিমুলেট করুন => প্রত্যাশিত ইভেন্টটি পাস হওয়া প্যারামগুলির সাথে ডাকা হয়েছিল
  • প্রয়োজনীয় প্রপসগুলি হস্তান্তর করুন => উপাদান সরবরাহ করুন => ইভেন্টের অনুকরণ করুন>> ইভেন্টটি ডাকা হলে একটি নির্দিষ্ট আচরণের প্রত্যাশা করুন

5. পরীক্ষার শর্ত

খুব প্রায়শই, আপনার একটি নির্দিষ্ট শ্রেণীর আউটপুট সম্পর্কিত শর্ত থাকতে পারে, কোডের একটি নির্দিষ্ট বিভাগ রেন্ডার করতে পারেন, প্রয়োজনীয় প্রপসগুলি স্থানান্তর করতে পারেন ইত্যাদি। এটি ভুলে যাবেন না কারণ ডিফল্ট মানগুলির সাথে কেবল একটি শাখা পরীক্ষায় উত্তীর্ণ হবে এবং দ্বিতীয়টি পরীক্ষা করা হবে না।

গণনা এবং অনেক শর্তযুক্ত জটিল উপাদানগুলিতে কিছু শাখা অনুপস্থিত হতে পারে। সমস্ত কোডের টুকরো পরীক্ষার মাধ্যমে আচ্ছাদিত হয়েছে তা নিশ্চিত করার জন্য, একটি পরীক্ষা কভারেজ সরঞ্জামটি ব্যবহার করুন এবং কোন শাখাটি আচ্ছাদিত এবং কোনটি নয় তা চাক্ষুষ করে দেখুন check

6. পরীক্ষার শর্ত

বেশিরভাগ ক্ষেত্রে, স্থিতি পরীক্ষা করতে দুটি পরীক্ষা অবশ্যই লিখতে হবে:

  • প্রথমটি বর্তমান অবস্থা পরীক্ষা করে।
  • দ্বিতীয় কোনও ইভেন্ট বলার পরে স্থিতি পরীক্ষা করে। উপাদানটি রেন্ডার করুন>> পরীক্ষায় সরাসরি কল ফাংশন => রাষ্ট্র কীভাবে পরিবর্তন হয়েছে তা পরীক্ষা করুন। উপাদানটির ক্রিয়াকলাপটি কল করার জন্য, আপনাকে উপাদানটির একটি উদাহরণ পেতে হবে এবং তারপরে তার পদ্ধতিগুলি কল করতে হবে (উদাহরণটি পরবর্তী পরীক্ষায় দেখানো হয়েছে)।

আপনি নির্দেশাবলীর এই তালিকার মাধ্যমে কাজ করার পরে, আপনার উপাদানটি 90 থেকে 100% কভার করা হবে। আমি বিশেষ ক্ষেত্রে ক্ষেত্রে 10% রেখেছি যা নিবন্ধে বর্ণিত হয়নি তবে কোডটিতে উপস্থিত হতে পারে।

পরীক্ষার উদাহরণ

উপরের ধাপে ধাপে বর্ণিত হিসাবে এখন উদাহরণগুলিতে এগিয়ে যাওয়া যাক এবং পরীক্ষাগুলির সাহায্যে উপাদানগুলি আচরণ করুন।

1. ফর্ম / ইনপুট থেকে কোনও উপাদান পরীক্ষা করা।

ফর্ম / ইনপুট ডিরেক্টরি থেকে একটি উপাদান নিন। তারিখ চয়নকারীর উপাদান, ডেটইনপুট.জেগুলি যাক।

পরীক্ষিত উপাদানগুলির জন্য কোড তালিকা: তারিখের ইনপুট.জেগুলি দেখে মনে হচ্ছে:

ডেটইনপুট উপাদানটি দুটি ইউটিলিটি সহ প্রতিক্রিয়া-তারিখ-পিকার লাইব্রেরি ব্যবহার করে:

  • মান টুডেট (মানকে তারিখে রূপান্তর করে)
  • ডেট টুভ্যালু (তারিখে মানকে রূপান্তর করে)

প্যাকেজটি প্রতিক্রিয়ার প্রপসগুলি পরীক্ষা করার জন্য তারিখ এবং প্রোপটাইপস সহ সম্পাদনা করার জন্য ব্যবহৃত হয়।

উপাদান কোড অনুসারে, আমরা স্ট্যান্ডার্ড প্রপসের তালিকা দেখতে পাই যা উপাদানটি রেন্ডার করা যায়:

default

একটি ছাড়া সমস্ত প্রপস: মিনিট তারিখ: মুহুর্ত () স্ন্যাপশট নেওয়ার জন্য উপযুক্ত। প্রতিবার পরীক্ষা চালানো হলে, মুহূর্তটি () বর্তমান তারিখটি প্রদর্শন করে এবং স্ন্যাপশট ব্যর্থ হয় কারণ তারিখের বাইরে থাকা তারিখটি সংরক্ষণ করা হয়। সমাধানটি এই মানটিকে উপহাস করা:

কনস্টલ્ટ ডিফল্ট = {মিনিট তারিখ: মুহূর্ত (0)

আমাদের প্রতিটি রেন্ডার করা উপাদানগুলিতে মিনিডেট প্রপস দরকার। প্রপিকে সদৃশকরণ এড়াতে, আমি এমন একটি এইচওসি তৈরি করব যা ডিফল্টপ্রোপগুলি গ্রহণ করবে এবং একটি সুন্দর উপাদান ফিরে আসবে:

'../DateInput' থেকে টেস্টডেট ইনপুট আমদানি করুন; কনস্ট ডেট ইনপুট = (প্রপস) => ;

সময় অঞ্চলটি ভুলে যাবেন না, বিশেষত যদি অন্য টেস্ট অঞ্চলটি অন্য দেশ থেকে বিকাশকারীরা ভিন্ন টাইম জোনে করছেন। আপনি উপহাস মান পাবেন তবে একটি সময় অঞ্চল শিফট সহ। সমাধানটি একটি ডিফল্ট সময় অঞ্চল নির্ধারণ করা হয়:

স্থির মুহূর্ত = প্রয়োজনীয়.requireActual ('মুহূর্ত-সময় অঞ্চল')। tz.setDefault ('আমেরিকা / লস_এঞ্জেলস')

এখন তারিখ ইনপুট উপাদান পরীক্ষা করা যেতে পারে:

1. প্রথমে একটি স্ন্যাপশট নিন:

এটি ('সঠিকভাবে তারিখের উপাদানটি রেন্ডার করুন'), () => {তারিখের ইনপুটকম্পোনেন্ট = রেন্ডার ক্রেইট ( )। toJSON (); প্রত্যাশা (ডেটইনপুট কম্পোনেন্ট)। টোম্যাচস্ন্যাপশট (); });

2. পরীক্ষার প্রপস:

প্রপসগুলি দেখুন এবং গুরুত্বপূর্ণগুলি সন্ধান করুন। পরীক্ষার জন্য প্রথম প্রস্তাবটি হ'ল শোমনথসড্রপডাউনস। সত্য হিসাবে সেট করা হলে, মাস এবং বছর ড্রপ-ডাউন তালিকা প্রদর্শিত হয়:

এটি ('মাস এবং বছরের জন্য প্রদর্শিত ড্রপডাউনগুলি চেক করুন'), () => {কনস্ট প্রপস = {শোমোনথসড্রপডাউনস: সত্য}, ডেটইনপুট কম্পোনেন্ট = মাউন্ট ( ) .ফাইন্ড ('। ডেটপিকার'); প্রত্যাশা করুন (ডেটইনপুট কম্পোনেন্ট.হ্যাস ক্লাস ('রিঅ্যাক্ট-ডেটপিকার-হাইড-মাস') to টোকুয়াল (সত্য);});

শূন্য প্রপ মানটি পরীক্ষা করুন। সংজ্ঞায়িত মান ব্যতীত উপাদানটি রেন্ডার হচ্ছে তা নিশ্চিত করার জন্য এই চেকটি প্রয়োজনীয়:

এটি ('নাল মান সহ সঠিকভাবে তারিখের ইনপুট রেন্ডার করুন'), () => {কনস্ট প্রপস = {মান: নাল}, ডেটইনপুট কম্পোনেন্ট = মাউন্ট ( ); প্রত্যাশা ((ডেটইনপুট কম্পোনেন্ট)। পপ ('মান')। টুএকুয়াল (নাল);});

৩. মান এবং তারিখের জন্য স্ট্রিংয়ের প্রত্যাশার জন্য বৈশিষ্ট্যগুলি পরীক্ষা করুন:

এটি ('মানের ধরণটি পরীক্ষা করুন', () => {কনস্ট প্রোপস = {মান: '10 .03.2018 '}, ডেটইনপুট কম্পোনেন্ট = মাউন্ট ( ); প্রত্যাশা (তারিখের ইনপুট কম্পোনেন্ট.প্রপ ('মান'))। টু বিস্ট্রিং (); });

৪. পরীক্ষার ইভেন্ট:

প্রথমে, অন চেঞ্জ ইভেন্টটি পরীক্ষা করুন।

  • মক অন চেঞ্জ কলব্যাক
  • অ্যাপয়েন্টমেন্ট ইনপুট উপাদান রেন্ডার
  • নতুন টার্গেট মান সহ পরিবর্তন ইভেন্টের অনুকরণ করুন
  • অবশেষে, অন চেঞ্জ ইভেন্টটি একটি নতুন মান সহ ডাকা হয়েছিল কিনা তা পরীক্ষা করুন।
এটি ('onChange কলব্যাক চেক করুন'), () => {কনট onChange = jest.fn (), প্রপস = {মান: '20 .01.2018 ', যদি পরিবর্তন হয় Date, ডেটইনপুট কম্পোনেন্ট = মাউন্ট ( ) .ফাইন্ড ('ইনপুট'); ডেটইনপুট কম্পোনেন্ট.সিমুলেট ('পরিবর্তন', {লক্ষ্য: {মান: মুহূর্ত ('2018-01-22')}}); প্রত্যাশা (অন চেঞ্জ)। টু হ্যাভবিনক্লাড উইথ ('22 .01.2018 '); });

পরবর্তী, তারিখ ইনপুট ক্লিক করার পরে তারিখ পিকার পপ-আপ খোলার বিষয়টি নিশ্চিত করুন। এটি করার জন্য, তারিখ ইনপুটটি অনুসন্ধান করুন>> ক্লিক ইভেন্ট => সিমুলেট করুন এবং যখন বাস্তব-তারিখ-পিকার শ্রেণি উপলব্ধ থাকে তখন একটি পপআপের প্রত্যাশা করুন।

এটি ('ওপেন ডেটপিকার-পপআপ'), () => {তারিখের প্রতিযোগিতা = মাউন্ট ( ), তারিখ ইনপুট = তারিখের উপাদান.ফাইন্ড ("ইনপুট [টাইপ = 'পাঠ্য']"); ডেটইনপুট.সিমুলেট ('ক্লিক'); প্রত্যাশা (ডেটকম্পোনেন্ট.ফিন্ড ('। রিঅ্যাক্ট-ডেটপিকার')। টু হ্যাভেলথ (1);});

সম্পূর্ণ পরীক্ষার তালিকা: তারিখ-ইনপুট.টাস্ট.জেএস

2. ব্যবহার পরীক্ষা:

ইউটিলিটি পরীক্ষার জন্য কোড তালিকা: মানToDate.js

এই ইউটিলিটি কাস্টম ফর্ম্যাট সহ একটি মানকে একটি তারিখে রূপান্তর করে।

প্রথমে প্রদত্ত ইউটিলিটিটি বিশ্লেষণ করুন এবং পরীক্ষার জন্য প্রধান কেসগুলি সংজ্ঞায়িত করুন:

  1. এটি এই ইউটিলিটির উদ্দেশ্য অনুযায়ী মানকে রূপান্তর করে। সুতরাং আমাদের এই মানটি পরীক্ষা করা দরকার:
  • মানটি সংজ্ঞায়িত না হলে: আমাদের নিশ্চিত করতে হবে যে ইউটিলিটি কোনও ব্যতিক্রম (ত্রুটি) ফেরত না।
  • একটি মান সংজ্ঞায়িত করার সাথে আমাদের পরীক্ষা করে নেওয়া দরকার যে ইউটিলিটি বর্তমান তারিখটি ফিরিয়ে দেয়।

২. প্রত্যাবর্তিত মানটি মুহুর্তের শ্রেণীর অন্তর্গত। সুতরাং এটি একটি মুহূর্ত হওয়া উচিত।

৩. দ্বিতীয় আর্গুমেন্টটি ডেটফর্ম্যাট। পরীক্ষার আগে ধ্রুবক হিসাবে সেট করুন। এ কারণে এটি প্রতিটি পরীক্ষায় উত্তীর্ণ হবে এবং তারিখের ফর্ম্যাট অনুযায়ী মানটি ফিরিয়ে দেবে। আমাদের আলাদাভাবে ডেটফর্ম্যাট পরীক্ষা করা উচিত? আমি মনে করি না। এই যুক্তি alচ্ছিক। আপনি যদি ডেটফর্ম্যাটটি সেট না করেন তবে ইউটিলিটি বাধাগ্রস্ত হবে না এবং কেবলমাত্র ডিফল্ট ফর্ম্যাটে তারিখটি ফিরিয়ে দেবে। এটি একটি মুহুর্তের কাজ, আমাদের তৃতীয় পক্ষের লাইব্রেরিগুলি পরীক্ষা করা উচিত নয়। যেমনটি আমি আগে উল্লেখ করেছি, আসুন সময় অঞ্চলটি ভুলে যাবেন না। এটি একটি খুব গুরুত্বপূর্ণ পয়েন্ট, বিশেষত বিভিন্ন সময় অঞ্চল থেকে বিকাশকারীদের জন্য।

কোড:

  1. প্রথম মামলার জন্য পরীক্ষা লিখুন। আমাদের যদি কোনও মূল্য না থাকে তবে এটি খালি।
কনস্ট ফর্ম্যাট = 'DD.MM.YYYY';
এটি ('শূন্য মানের সাথে মান টিউডেট ইউটিলিটি উপস্থাপন করুন'), () => {কনট মান = মান টোডেট ('', ফর্ম্যাট); আশা (মান) .toEqual (নাল);});

2. যাচাই করুন যে কোনও মান সংজ্ঞায়িত হয়েছে।

কনস্টের তারিখ = '21 .11.2015 ', ফর্ম্যাট = "ডিডি.এমএম.ওয়াইওয়াইওয়াই";
এটি ('ইউটিলিটি' সংজ্ঞাযুক্ত মান সহ 'মান টিউডেট' উপস্থাপন করে ', () => {কনট মান = মান টোডেট (তারিখ, ফর্ম্যাট); প্রত্যাশা (মান) .toqual (মুহূর্ত (তারিখ, ফর্ম্যাট));});

3. মানটি মুহুর্তের শ্রেণীর অন্তর্ভুক্ত যাচাই করুন।

কনস্টের তারিখ = '21 .11.2015 ', ফর্ম্যাট =' ডিডি.এমএম.ওয়াইওয়াইওয়াই ';
এটি ('চেক মানটি হ'ল উদাহরণস্বরূপ', () => {কনট মান = মান টোডেট (তারিখ, ফর্ম্যাট); প্রত্যাশা (মুহুর্তের মান উদাহরণ) .toBeTruthy ();});

সম্পূর্ণ পরীক্ষার তালিকা: valueToDate.test.js

৩. টেস্ট উইজেট

উইজেটগুলি পরীক্ষা করতে আমি একটি স্পিনার উপাদান নিয়েছি।

পরীক্ষিত উইজেটের জন্য কোড তালিকা: Spinner.js

এটা এমন দেখতে:

প্রায় সমস্ত ওয়েব সংস্থার এই উপাদান রয়েছে বলে ব্যাখ্যাটিতে স্পিনারটির প্রয়োজন নেই।

সুতরাং যখন আমরা পরীক্ষা লিখতে যাই:

  1. প্রথম পদক্ষেপ - একটি স্ন্যাপশট নিন:
এটি ('স্পিনার উপাদানটি সঠিকভাবে রেন্ডার করুন'), () => {কনস্ট স্পিনার কম্পোনেন্ট = মাউন্ট ( ); প্রত্যাশা (স্পিনার কম্পোনেন্ট) .toMatchSnaphot (); });

2. পরীক্ষার প্রপস:

প্রথমে ডিফল্ট প্রোপ শিরোনামটি একবার দেখে নেওয়া যাক এবং এটি সঠিকভাবে উপস্থাপন করছে কিনা।

এটি ('ডিফল্ট অনুসারে প্রোপ শিরোনামটি পরীক্ষা করুন'), () => {কনস্ট স্পিনার কম্পোনেন্ট = মাউন্ট ( ); প্রত্যাশা করুন (SpinnerComponent.find ('p')। পাঠ্য ())। টুএকুয়াল ('দয়া করে অপেক্ষা করুন'); });

তারপরে আমরা কাস্টম প্রোপ শিরোনামটি পরীক্ষা করি। আমাদের যাচাই করা দরকার যে সঠিকভাবে সংজ্ঞায়িত প্রপ ফিরে এসেছে। কোডটি একবার দেখুন, শিরোনামটি কাঁচামার্কআপ ব্যবহারে আবদ্ধ এবং বিপজ্জনকভাবে সেটআইনার এইচটিএমএল সম্পত্তি ব্যবহার করে আউটপুট।

RawMarkup ব্যবহারের জন্য কোড তালিকা:

রফতানির স্ট্যান্ডার্ড ফাংশন কাঁচামার্কআপ (টেমপ্লেট) {রিটার্ন {__html: টেমপ্লেট}; }

আমাদের কি স্পিনার উপাদানটিতে কাঁচামার্কআপের জন্য পরীক্ষা অন্তর্ভুক্ত করতে হবে? না, এটি একটি পৃথক ইউটিলিটি যা স্পিনার পাশাপাশি পরীক্ষা করা উচিত। এটি কীভাবে কাজ করে তা আমাদের যত্নশীল নয় - আমাদের কেবল এটি জানতে হবে যে শিরোনাম সমর্থক সঠিক ফলাফল প্রদান করে।

ব্যাখ্যা: বিপজ্জনকভাবে সেটআইনার এইচটিএমএল সম্পত্তিটি ব্যবহার করার কারণ নিম্নরূপ। আমাদের ওয়েবসাইটটি বহুভাষিক এবং অনুবাদ বিপণন দলটি এর জন্য দায়ী। আপনি এটি সহজেই শব্দের সংমিশ্রণ বা এমনকী এইচটিএমএল ট্যাগগুলির সাথে অনুবাদ করতে পারেন ,,, এমনকি তালিকার সাথে পাঠ্যও , টুকরো টুকরো। আমরা টেক্সটটি কীভাবে অনুবাদ এবং সজ্জিত করি ঠিক তা আমরা জানি না। আমাদের কেবল সমস্ত জিনিস সঠিকভাবে রেন্ডার করতে হবে।

আমি একটি পরীক্ষায় দুটি প্রধান পরীক্ষার সংক্ষিপ্তসার করেছি:

  • সঠিক কাস্টম প্রোপ শিরোনাম প্রদান করে
  • HTML ট্যাগ ব্যবহার করে প্রোপ শিরোনামটি সঠিকভাবে রেন্ডার করুন
Bitte warten এটি ('এইচটিএমএল ট্যাগ সহ প্রপ শিরোনাম পরীক্ষা করুন', () => {কনস্ট প্রপস = {শিরোনাম: ' দয়া করে অপেক্ষা করুন '         },         SpinnerComponent = mount ( '}, স্পিনার কম্পোনেন্ট = মাউন্ট ( ); ); expect (SpinnerComponent.find ('p'). text ()). প্রত্যাশা করুন (SpinnerComponent.find ('p')। পাঠ্য ())। toEqual ('Bitte warten'); টুএকুয়াল ('দয়া করে অপেক্ষা করুন'); }); });

পরবর্তী সাবটাইটেল নিন। এটি isচ্ছিক এবং এর কারণে কোনও স্ট্যান্ডার্ড প্রোপ নেই। স্ট্যান্ডার্ড প্রপসের সাহায্যে পদক্ষেপটি এড়িয়ে যান এবং কাস্টম প্রপস ব্যবহার করে দেখুন:

  • সাবটাইটেল বৈশিষ্ট্যের পাঠ্যটি সঠিকভাবে প্রদর্শিত হয়েছে তা পরীক্ষা করুন:
কনস্ট প্রপস = {উপশিরোনাম: 'বাম 1 মিনিট'}, স্পিনারকম্পোনেন্ট = মাউন্ট ( );
এটি ('সঠিক পাঠ্য রেন্ডার করুন', () => {প্রত্যাশা (স্পিনার কম্পোনেন্ট.ফাইন্ড ('পি')। (1)। টেক্সট ()) এ টু এক্যুয়াল (প্রপস.সুব টাইটেল);})

আমরা জানি সাবটাইটেলগুলি alচ্ছিক। এ কারণে, আমাদের এটি খতিয়ে দেখা দরকার যে কাটা মার্কআপ অনুসারে এটি স্ট্যান্ডার্ড প্রপস ব্যবহার করে রেন্ডার করা হয়নি। কেবল ট্যাগের সংখ্যা পরীক্ষা করুন :

এটি ('চেক সাবটাইটেলগুলি রেন্ডার হবে না'), () => {কনস্ট স্পিনার কম্পোনেন্ট = মাউন্ট ( ); প্রত্যাশা করুন (স্পিনারকম্পোনেন্ট.ফাইন্ড ('পি') দৈর্ঘ্য)। টু একুয়াল (1); });

3. টেস্ট প্রোপ ধরনের:

  • শিরোনাম প্রোপের জন্য, যা স্ট্রিং হিসাবে প্রত্যাশিত:
এটি ('শিরোনামের জন্য প্রোপের প্রকারটি স্ট্রিং হয়'), () => {কনস্ট প্রপস = {শিরোনাম: 'অপেক্ষা'}, স্পিনারকম্পোনেন্ট = মাউন্ট ( ); প্রত্যাশা করুন (SpinnerComponent.find ('p')। পাঠ্য ())। টু বিস্ট্রিং (); });
  • সাবটাইটেল প্রোপের জন্য একটি স্ট্রিংও আশা করা যায়:
কনস্ট প্রপস = {উপশিরোনাম: 'বাম 1 মিনিট'}, স্পিনারকম্পোনেন্ট = মাউন্ট ( );
এটি ('উপ-শিরোনামের জন্য টাইপ স্ট্রিং'), () => {প্রত্যাশা (স্পিনারকম্পোনেন্ট.ফাইন্ড ('পি')। (1) .text ()) টু বিস্ট্রিং ();});

সম্পূর্ণ পরীক্ষার তালিকা: Spinner.test.js

৪. মডেল পরীক্ষা (ModalWrapper.js এবং ModalTrigger.js)

দেখতে:

মডেলগুলি কীভাবে পরীক্ষা করবেন

প্রথমে আমি ব্যাখ্যা করতে চাই যে কীভাবে আমাদের প্রকল্পে রূপগুলি সংগঠিত হয়। আমাদের দুটি উপাদান রয়েছে: ModalWrapper.js এবং ModalTrigger.js।

প্যাডআপ লেআউটটির জন্য মোডাল র্যাপার দায়বদ্ধ। এটিতে মডেল ধারক, "ক্লোজ" বোতাম, মডেল শিরোনাম এবং পাঠ্য রয়েছে।

মোডালট্রিগার মডেল হ্যান্ডলিংয়ের জন্য দায়ী। এটিতে মডেলওয়ার্পার লেআউট রয়েছে এবং এতে মডেলের লেআউট নিয়ন্ত্রণের ইভেন্টগুলি রয়েছে (খোলার এবং বন্ধ করার ক্রিয়া)।

আমি প্রতিটি উপাদান পৃথকভাবে যেতে:

1. পরীক্ষিত উপাদানগুলির জন্য কোডের তালিকা: ModalWrapper.js

কোড:

প্রথমত, মোডাল্র্যাপার উপাদানটি গ্রহণ করে এবং এটি এতে রেন্ডার করে। প্রথমে নিশ্চিত হয়ে নিন যে মোডাল্র্যাপার উপাদান ছাড়া ব্যর্থ হয় না। স্ট্যান্ডার্ড প্রপস ব্যবহার করে একটি স্ন্যাপশট নিন:

এটি ('উপাদান ছাড়াই', () => {কনডম মডেলওয়ার্পার কম্পোনেন্ট = অগভীর ( ); প্রত্যাশা (ModalWrapperComp घटक) .toMatchSnaphot (); });

পরবর্তী পদক্ষেপ হ'ল প্রকৃত অবস্থা অনুকরণ করা, উপাদানগুলির রেন্ডারিং প্রপসের মাধ্যমে করা সহ:

এটি ('কম্পোনেন্ট সহ', () => {কনস্ট প্রপস = {উপাদান: () => {} Mod, মোডালরাপারকম্পোনেন্ট = অগভীর ( ); প্রত্যাশা (ModalWrapperComp घटक) .toMatchSnaphot (); });

পরীক্ষার প্রপস

একটি কাস্টম শ্রেণীর নাম প্রাপক প্রাপ্ত:

এটি ('সঠিক শ্রেণীর নাম রেন্ডার করুন'), () => {কনস্ট প্রপস = {মডেলক্লাসনাম: 'কাস্টম শ্রেণীর নাম'}, মোডালগ্র্যাপারকম্পোনেন্ট = অগভীর ( ) .ফাইন্ড ('মডেল'); প্রত্যাশা করুন (ModalWrapperComponent.hasClass ('কাস্টম শ্রেণীর নাম')। টু একুয়াল (সত্য);});

একটি কাস্টম শিরোনাম প্রাপ প্রাপ্ত:

এটি ('সঠিক শিরোনাম উপস্থাপন করুন', () => {কনস্ট প্রপস = {শিরোনাম: 'মডেল শিরোনাম'}, মোডালরাপারকম্পোনেন্ট = অগভীর ( ) .ফাইন্ড ('মডেলটাইটেল'); প্রত্যাশা (ModalWrapperComp घटक.prop ()। শিশু)। toEqual ('মডেল শিরোনাম'); });

সঠিক শো প্রাপকের প্রাপ্তি:

এটি ('প্রোপ মানটি পরীক্ষা করুন', () => {কনস্ট প্রপস = {দেখান: সত্য}, মোডালর্যাপারকম্পোনেন্ট = অগভীর ( ) .ফাইন্ড ('মডেল'); প্রত্যাশা (ModalWrapperComp घटक.prop ()। প্রদর্শন)। toEqual (সত্য); });

পরীক্ষার প্রপস

  • শো সমর্থন জন্য
এটি ('প্রোপ প্রকারের পরীক্ষা করুন', () => {কনস্ট প্রপস = {দেখান: সত্য}, মোডালর্যাপারকম্পোনেন্ট = অগভীর ( ) .ফাইন্ড ('মডেল'); প্রত্যাশা (ModalWrapperComponent.prop ()। প্রদর্শন)। toBeBoolean (); });
  • অন ​​হাইড প্রোপ জন্য
এটি ('হাইড প্রোপ টাইপটি সঠিকভাবে রেন্ডার করুন'), () => {কনস্ট প্রপস = {অন হাইড: () => {}}, মোডালর্যাপারকম্পোনেন্ট = অগভীর ( ) .ফাইন্ড ('মডেল'); প্রত্যাশা (ModalWrapperComp घटक.prop ()। onHide) .toBeFunction (); });
  • উপাদান সমর্থন জন্য
এটি ('সঠিক উপাদান উপস্থাপনের প্রকারটি উপস্থাপন করুন'), () => {কনস্ট প্রপস = {উপাদান: () => {}}, মোডালরাপারকম্পোনেন্ট = মাউন্ট ( ); প্রত্যাশা (ModalWrapperComponent.prop ()। উপাদান)। toBeFunction (); });

সম্পূর্ণ পরীক্ষার তালিকা: ModalWrapper.test.js

2. পরীক্ষিত উপাদানগুলির জন্য কোডের তালিকা: ModalTrigger.js

মডেল শেলটি একটি পরীক্ষা দিয়ে আচ্ছাদিত ছিল। দ্বিতীয় অংশটি মডেল ট্রিগার উপাদানটির সাথে সম্পর্কিত।

উপাদান সংক্ষিপ্ত বিবরণ: এটি মডালওয়ার্পারের দৃশ্যমানতা দেখানোর স্থিতির উপর ভিত্তি করে। যদি সক্রিয় করা হয়: মিথ্যা, পপআপটি লুকানো থাকবে, অন্যথায় এটি প্রদর্শিত হবে। ওপেন () ফাংশনটি শিশু উপাদানটির জন্য পপআপ খুলবে। ক্লিক ইভেন্ট এবং ক্লোজ () ফাংশনটি মোডাল্র্যাপারে রেন্ডার করা বোতামের পপআপটিকে আড়াল করে।

স্ন্যাপশট তৈরি:

এটি ('মডেলট্রিগার উপাদানটি সঠিকভাবে রেন্ডার করুন'), () => {কনড মডেলট্রিগারকম্পোনেন্ট = অগভীর ( ); প্রত্যাশা (ModalTriggerComp घटक) .toMatchSnaphot (); });

উপাদানগুলির প্রসেস রেন্ডারিং দিয়ে আমাদের মডেলট্রিগার পরীক্ষা করা উচিত? না, কারণ উপাদানটি মোডাল্র্যাপার উপাদানটিতে রেন্ডার করা হচ্ছে। এটি পরীক্ষিত উপাদানটির উপর নির্ভর করে না। এটি ইতিমধ্যে মডালওয়ার্পার পরীক্ষায় পরীক্ষা করা হয়েছে।

পরীক্ষার প্রসেস:

আমাদের প্রপ বাচ্চা রয়েছে এবং আমরা নিশ্চিত হতে চাই যে আমাদের কেবল একটি সন্তান রয়েছে।

এটি ('নিশ্চিত করুন যে কেবলমাত্র একটি শিশু উপাদান রয়েছে (নিয়ন্ত্রণ)', () => {আশা করুন (ModalTriggerComp घटक.findWhere (নোড => নোড.কি () === 'মডেল-নিয়ন্ত্রণ') দৈর্ঘ্য)) .toEqual (1);});

পরীক্ষার প্রসেস:

শিশু সমর্থন একটি অবজেক্ট হওয়া উচিত, পরের পরীক্ষায় এটি পরীক্ষা করে দেখুন:

কনড মডালট্রিগারকম্পোনেন্ট = মাউন্ট ( );
এটি ('বাচ্চাদের প্রোপ প্রকারটি পরীক্ষা করুন', () => {প্রত্যাশা (মডেলট্রিজার কম্পোনেন্ট.পড়গুলি ()। শিশু)। টোবজেক্ট ();});

মোডালট্রিগার উপাদানটির একটি গুরুত্বপূর্ণ অংশ স্থিতি পরীক্ষা করছে।

আমাদের দুটি রাষ্ট্র রয়েছে:

  • পপআপ খুলবে। মডেলটি উন্মুক্ত রয়েছে তা জানতে, আমাদের এটির অবস্থা পরীক্ষা করা দরকার। এটি করতে, উপাদানটির উদাহরণ থেকে ওপেন ফাংশনটি কল করুন এবং প্রত্যাশা করুন যে স্যুইচড অন অবস্থাটি সত্য হওয়া উচিত।
এটি ('মডেলটি খোলা আছে কিনা তা পরীক্ষা করে দেখুন'), () => event কনস্টেন্ট ইভেন্ট = {প্রতিরোধক ডিফল্ট: ())>> {}, স্টপপ্রোপেশন: () => {}}; মোডাল ট্রাইগারকম্পোন্ট। ; প্রত্যাশা (ModalTriggerComponent.state ()। toggled)। toBeTruthy ();});
  • পপআপ বন্ধ রয়েছে। এটি অন্যদিকে পরীক্ষা করা হয়, যখন স্যুইচ করা থাকে ভুল হওয়া উচিত।
এস ('মডেলটি বন্ধ আছে কিনা তা পরীক্ষা করুন', () => {মডেলট্রিগারকম্পোনেন্ট.ইনট্যান্স ()। বন্ধ (); প্রত্যাশা (মোডালট্রিগারকম্পোনেন্ট.স্টেট ()। টগলড)। টো বিফলসি ();});

সম্পূর্ণ পরীক্ষার তালিকা: ModalTrigger.test.js

এখন রূপগুলি পুরোপুরি পরীক্ষিত। পারস্পরিক নির্ভরশীল উপাদানগুলির পরীক্ষার জন্য একটি পরামর্শ: প্রথমে উপাদানগুলি দেখুন এবং পরীক্ষা পরিকল্পনাটি লিখুন, প্রতিটি উপাদানে আপনাকে কী পরীক্ষা করতে হবে তা নির্ধারণ করুন, প্রতিটি উপাদানগুলির জন্য পরীক্ষার কেসগুলি পর্যালোচনা করুন এবং নিশ্চিত করুন যে আপনি কী করছেন না উভয় উপাদান একই পরীক্ষার কেস পুনরাবৃত্তি। পরীক্ষা কভারেজের জন্য সম্ভাব্য এবং সর্বোত্তম রূপগুলি সাবধানতার সাথে বিশ্লেষণ করুন।

৫. এইচওসি পরীক্ষা (উচ্চ-স্তরের উপাদান)

শেষ দুটি অংশ (এইচওসি এবং ফর্ম ক্ষেত্র যাচাইকরণ) লিঙ্কযুক্ত। আমি কীভাবে এইচওসি-র সাথে মাঠের বিন্যাসটি পরীক্ষা করতে পারি তা আপনার সাথে ভাগ করতে চাই।

বেসফিল্ড লেআউটটি কী, কেন আমাদের এই উপাদানটি প্রয়োজন এবং যেখানে আমরা এটি ব্যবহার করি তা নীচে ব্যাখ্যা করা হয়েছে:

  • বেসফিল্ডলাইআউট.জেএস হ'ল ফর্ম ইনপুট উপাদান যেমন টেক্সট ইনপুট, চেকবক্স ইনপুট, ডেটইনপুট, সিলেক্ট ইনপুট ইত্যাদির জন্য মোড়ক Their
  • আমাদের ফর্ম ক্ষেত্রের উপাদানগুলি নির্ধারণের জন্য বেসফিল্ড লেআউট দরকার, যেমন লেবেল, সরঞ্জামদণ্ড, উপসর্গ (মুদ্রা, বর্গ মিটার সংক্ষেপণ, ইত্যাদি), চিহ্ন, ত্রুটি ইত্যাদি রেন্ডার করতে
  • আমরা ইনপুট কম্পোনেন্টটিকে ক্ষেত্র বিন্যাসে সংহত করতে এবং এর সাহায্যে বেসফিল্ডএইচসিএসজে এটি ব্যবহার করি - Redux ফর্মের সাথে উপাদান সংযোগ করুন।

পরীক্ষিত উপাদানগুলির জন্য কোডের তালিকা: বেসফিল্ডহোক.জেএস s

এটি এমন একটি এইচওসি যা ফর্ম ইনপুট উপাদানটি গ্রহণ করে এবং রিডেক্স-ফর্মের সাথে যুক্ত উপাদানটি ফেরত দেয়।

এইচওসি বিশ্লেষণ:

  • এই উপাদানটি কেবল একটি প্রোপ, উপাদান গ্রহণ করে। প্রথমে আমাকে এই উপাদানটি তৈরি করতে হবে এবং এটি বেসফিল্ডহোকের মধ্যে অন্তর্ভুক্ত করতে হবে।
  • এরপরে ক্ষেত্রটি রেডাক্স-ফর্মের সাথে সংযোগ করতে আমাকে রেডাক্স-ফর্মের সাথে প্যাকেজড এইচওসিটি সাজাতে হবে।
  • প্রতিক্রিয়া রেডাক্স উপাদানটিতে এই ক্ষেত্রটি রেন্ডার করুন পরীক্ষিত উপাদান জন্য মেমরি উপলব্ধ করতে। স্টোরকে উপহাস করার জন্য কেবল করুন:
কনস্টোর স্টোর = createStore (() => ({}));

এখন প্রতিটি পরীক্ষার আগে আমাকে নিম্নলিখিতগুলি করতে হবে:

বেসফিল্ডএইচসিসিপোম্পোনটি যাক;
এর আগেই (() => {কনটেক্সট টেক্সট ইনপুট = () => {'টেক্সট ইনপুট'; Base, বেসফিল্ড হোল্ডওয়্যার্পার = বেসফিল্ড হুক (টেক্সটইনপুট), টেক্সটফিল্ড = রিডাক্সফর্ম ({ফর্ম: 'টেস্টফর্ম'}) (বেসফিল্ডহোক রাইডার); বেসফিল্ডওসিসিপিআরএন্ট্রেন্ডার = রেন্ডারার ( ) .toJSON (); });

তারপরে উপাদানটি পরীক্ষার জন্য প্রস্তুত:

  1. একটি স্ন্যাপশট নিন:
এটি ('উপাদান সঠিকভাবে রেন্ডার করুন'), () => {প্রত্যাশা (বেসফিল্ডএইচসিসিপোম্পোনটি)। টোম্যাচস্ন্যাপশট ();});

2. নিশ্চিত হয়ে নিন যে ইনপুট উপাদানটি রেসেন্ডিংয়ের পরে বেসফিল্ডলায়াউটে আবদ্ধ রয়েছে:

এটি ('ইনপুট উপাদানটি বেসফিল্ডলাইআউটে অন্তর্ভুক্ত করা হয়েছে কিনা তা পরীক্ষা করুন'), () => (প্রত্যাশা (বেসফিল্ডহোডিসিপোমোয়েন্টি.পিপোস.ক্লাসনাম) .toEqual ('ফর্ম-গ্রুপ');});

সবই, এইচওসি সুরক্ষিত। রেডাক্স-ফর্মের সাথে সংযুক্ত পরীক্ষার উপাদানগুলির সবচেয়ে জটিল অংশটি ক্ষেত্রটি প্রস্তুত করছে (রেডাক্স-ফর্মের সাথে সজ্জিত করা এবং মেমরি সেটআপ করা)। বাকিগুলি সহজ, কেবল নির্দেশাবলী এবং অন্য কিছুই অনুসরণ করুন।

সম্পূর্ণ পরীক্ষার তালিকা: বেসফিল্ডএইচসি.এস.এস.এস.এস

6. পরীক্ষার ফর্ম / ক্ষেত্র

এইচওসি ক্ষেত্রটি পরীক্ষাগুলির সাথে আচ্ছাদিত রয়েছে যাতে আমরা বেসফিল্ডলাইআউট উপাদানটিতে চলে যেতে পারি।

পরীক্ষিত উপাদানটির জন্য কোডের তালিকা: বেসফিল্ডলাইআউট.জেএস

আসুন বেসফিল্ডলায়আউট.জেএস কোড দিন এবং উপরের নির্দেশাবলী অনুসারে পরীক্ষাগুলি লিখুন:

  1. প্রথমে একটি স্ন্যাপশট নিন।

এই উপাদানটি ডিফল্টপ্রপস ছাড়াই রেন্ডার হয় না:

  • ইনপুট কম্পোনেন্ট
  • রেডাক্স-ফর্মের প্রপস: ইনপুট এবং মেটা অবজেক্টস। সম্পত্তির নাম এবং মেটা সম্পত্তি ত্রুটিযুক্ত এবং স্পর্শ সহ ইনপুট করুন:
const defaultProp = default meta: {স্পর্শ: নাল, ত্রুটি: নাল}, ইনপুট: {নাম: 'ক্ষেত্রের নাম'}, ইনপুট কম্পোনেন্ট: () => '' পরীক্ষার কেস 'রিটার্ন করুন; }}

প্রতিটি পরীক্ষিত মোড়কে ডিফল্টপ্রপস ব্যবহার করতে, নিম্নলিখিতটি করুন:

'../BaseFieldLayout' থেকে টেস্টবেসফিল্ড লেআউট আমদানি করুন;
কনস্ট বেসফিল্ডলয়আউট = (প্রপস) => ;

এখন আমরা একটি স্ন্যাপশট নিতে পারি:

এটি ('বেসফিল্ড লেআউট উপাদানটি সঠিকভাবে রেন্ডার করুন'), () => {বেসফিল্ডলয়েটকম্পোনেন্ট = রেন্ডার ক্রেইট ( )। toJSON (); প্রত্যাশা (বেসফিল্ডলয়আউটকম্পোনেন্ট)। টোম্যাচস্ন্যাপশট (); });

2. পরীক্ষার প্রপস:

এই উপাদানটির অনেকগুলি প্রপস রয়েছে। আমি বেশিরভাগের উদাহরণ দেখাব এবং বাকী অংশগুলি পরীক্ষিত হবে।

  • প্রতীক প্রপ ঠিকভাবে রেন্ডার করা হয়েছে তা নিশ্চিত করুন
এস ('সঠিকভাবে আইকন প্রোপ রেন্ডার করুন', () => { কনস্ট প্রপস = {আইকন: }, বেসফিল্ডলয়েটকম্পোনেন্ট = মাউন্ট ( ); প্রত্যাশা (বেসফিল্ডলয়আউটকম্পোনেন্ট.ফাইন্ড ('স্প্যান')। ToBeTruthy (); });
  • টুলটিপ সামগ্রীটি লেবেলের পাশে উপস্থিত রয়েছে তা নিশ্চিত করুন
কনস্ট প্রপস = {লেবেলটুলিপ কনটেন্ট: 'লেবেলের জন্য টুলটিপ'}, বেসফিল্ডলাইআউটকম্পোনেন্ট = মাউন্ট ( );
এটি ('প্রয়োজনীয়তা রেন্ডার করা হচ্ছে', () => {প্রত্যাশা (বেসফিল্ডলয়েটকম্পোনেন্ট.ফাইন্ড ('স্প্যান')। হ্যাশ ক্লাস ('টুলটিপ-আইকন'))।
  • ফিল্ডলিঙ্ক প্রোপ পরীক্ষা করা
  • নিশ্চিত করুন ফিল্ডলিঙ্কটি ডিফল্টরূপে নাল
এটি ('চেক প্রোপটি ডিফল্টরূপে নাল হয়'), () => {বেসফিল্ডলয়েটকম্পোনেন্ট = অগভীর ( ); প্রত্যাশা (বেসফিল্ডলয়আউটকম্পোনেন্ট.পড়গুলি ()। ফিল্ডলিংক)। টুবি (নাল); });
  • নিশ্চিত করুন যে ফিল্ডলিঙ্কটি একটি কাস্টম মানের সাথে সঠিকভাবে রেন্ডার হয়েছে

3. পরীক্ষার ব্যর্থতা:

এটি ('ক্ষেত্রটিতে ত্রুটি আছে কিনা তা পরীক্ষা করুন', () => {কনস্ট প্রপস = {মেটা: {স্পর্শ করা হয়েছে: সত্য, ত্রুটি: 'এই ক্ষেত্রটি প্রয়োজন'}}, বেসফিল্ডলাইউটকম্পোনেন্ট = মাউন্ট ( ); প্রত্যাশা (বেসফিল্ডলয়আউটকম্পোনেন্ট.ফাইন্ড ('। ত্রুটি'))। toHaveLength (1); });

সম্পূর্ণ পরীক্ষার তালিকা: বেসফিল্ডলয়আউট.টেস্ট.জেএস

শেষের সারি

এখন আপনি কীভাবে বিস্তৃত উপাদান পরীক্ষা করতে প্রকল্প কাঠামোটি ব্যবহার করবেন তা জানেন। আমার নিজের অভিজ্ঞতা থেকে আমি ব্যাখ্যা করার চেষ্টা করেছি যে কোন ক্রমে কী পরীক্ষা করতে হবে এবং পরীক্ষার আওতায় আপনি কী রেখে যেতে পারেন। আমি বিভিন্ন পরীক্ষার উপাদানগুলির উদাহরণও দেখিয়েছি এবং কোড বেস কভারেজের ক্রমটি প্রতিষ্ঠা করেছি।

আশা করি আপনি এই নিবন্ধটি দরকারী এবং আপনার উত্তরগুলি ভাগ করে নেবেন। পড়ার জন্য আপনাকে ধন্যবাদ.

আপনি যদি এই পোস্টটিকে দরকারী মনে করেন তবে দয়া করে নীচে tap এ আলতো চাপুন :)