Testing ​

Why Test? ​

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

এই নির্দেশিকায়, আমরা মৌলিক পরিভাষাগুলি কভার করব এবং আপনার Vue 3 অ্যাপ্লিকেশনের জন্য কোন সরঞ্জামগুলি বেছে নিতে হবে সে সম্পর্কে আমাদের সুপারিশগুলি প্রদান করব৷

কম্পোজেবল কভার করে একটি Vue-নির্দিষ্ট বিভাগ রয়েছে। আরও বিশদ বিবরণের জন্য নীচে টেস্টিং কম্পোজেবল দেখুন।

When to Test ​

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

Testing Types ​

আপনার Vue অ্যাপ্লিকেশনের পরীক্ষার কৌশল ডিজাইন করার সময়, আপনাকে নিম্নলিখিত পরীক্ষার ধরনগুলি ব্যবহার করা উচিত:

• Unit: প্রদত্ত ফাংশন, ক্লাস বা কম্পোজেবলের ইনপুটগুলি প্রত্যাশিত আউটপুট বা পার্শ্ব প্রতিক্রিয়া তৈরি করছে কিনা তা পরীক্ষা করে।
• Component: চেক করে যে আপনার কম্পোনেন্ট মাউন্ট হয়, রেন্ডার হয়, এর সাথে ইন্টারঅ্যাক্ট করা যায় এবং আশানুরূপ আচরণ করে। এই পরীক্ষাগুলি ইউনিট পরীক্ষার চেয়ে বেশি কোড আমদানি করে, আরও জটিল এবং কার্যকর করতে আরও সময় লাগে।
• End-to-end: একাধিক পৃষ্ঠা বিস্তৃত বৈশিষ্ট্যগুলি পরীক্ষা করে এবং আপনার প্রোডাকশন-নির্মিত Vue অ্যাপ্লিকেশনের বিরুদ্ধে বাস্তব নেটওয়ার্ক রিকোয়েস্ট করে। এই পরীক্ষাগুলি প্রায়ই একটি ডাটাবেস বা অন্যান্য ব্যাকএন্ড দাঁড়ানো জড়িত।

প্রতিটি পরীক্ষার ধরন আপনার অ্যাপ্লিকেশনের পরীক্ষার কৌশলে একটি ভূমিকা পালন করে এবং প্রতিটি আপনাকে বিভিন্ন ধরণের সমস্যা থেকে রক্ষা করবে।

Overview ​

আমরা সংক্ষিপ্তভাবে আলোচনা করব যে এইগুলির প্রতিটি কী, কীভাবে সেগুলি Vue অ্যাপ্লিকেশনগুলির জন্য প্রয়োগ করা যেতে পারে এবং কিছু সাধারণ সুপারিশ প্রদান করব৷

Unit Testing ​

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

সাধারণভাবে, ইউনিট পরীক্ষা একটি ফাংশনের ব্যবসায়িক যুক্তি এবং যৌক্তিক সঠিকতার সাথে সমস্যাগুলি ধরবে।

উদাহরণস্বরূপ এই increment ফাংশন নিন:

// helpers.js
export function increment(current, max = 10) {
  if (current < max) {
    return current + 1
  }
  return current
}

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

যদি এই দাবিগুলির মধ্যে কোনোটি ব্যর্থ হয়, তাহলে এটা পরিষ্কার যে সমস্যাটি increment ফাংশনের মধ্যে রয়েছে।

// helpers.spec.js
import { increment } from './helpers'

describe('increment', () => {
  test('increments the current number by 1', () => {
    expect(increment(0, 10)).toBe(1)
  })

  test('does not increment the current number over the max', () => {
    expect(increment(10, 10)).toBe(10)
  })

  test('has a default max of 10', () => {
    expect(increment(10)).toBe(10)
  })
})

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

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

দুটি দৃষ্টান্ত রয়েছে যেখানে আপনি ইউনিট পরীক্ষা করেন Vue-নির্দিষ্ট বৈশিষ্ট্য:

1. Composables
2. Components

Composables ​

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

Unit Testing Components ​

একটি কম্পোনেন্ট দুটি উপায়ে পরীক্ষা করা যেতে পারে:

1. হোয়াইটবক্স: ইউনিট টেস্টিং

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

2. ব্ল্যাকবক্স: কম্পোনেন্ট টেস্টিং

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

Recommendation ​

• Vitest

  যেহেতু create-vue দ্বারা তৈরি করা অফিসিয়াল সেটআপটি Vite এর উপর ভিত্তি করে তৈরি করা হয়েছে, তাই আমরা একটি ইউনিট টেস্টিং ফ্রেমওয়ার্ক ব্যবহার করার পরামর্শ দিই যা একই কনফিগারেশনের সুবিধা নিতে পারে এবং সরাসরি Vite থেকে পাইপলাইন রূপান্তর করতে পারে। Vitest হল একটি ইউনিট টেস্টিং ফ্রেমওয়ার্ক যা বিশেষভাবে এই উদ্দেশ্যে ডিজাইন করা হয়েছে, Vue / Vite টিমের সদস্যরা তৈরি এবং রক্ষণাবেক্ষণ করে। এটি ন্যূনতম প্রচেষ্টার সাথে Vite-ভিত্তিক প্রকল্পগুলির সাথে সংহত করে এবং দ্রুত জ্বলছে।

Other Options ​

• Jest একটি জনপ্রিয় ইউনিট টেস্টিং ফ্রেমওয়ার্ক। যাইহোক, আমরা কেবল তখনই জেস্টের সুপারিশ করি যদি আপনার কাছে একটি বিদ্যমান জেস্ট টেস্ট স্যুট থাকে যেটিকে ভিটে-ভিত্তিক প্রকল্পে স্থানান্তরিত করতে হবে, কারণ Vitest একটি আরও নিরবচ্ছিন্ন ইন্টিগ্রেশন এবং আরও ভাল পারফরম্যান্স অফার করে।

Component Testing ​

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

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

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

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

DO

• Visual যুক্তির জন্য: ইনপুট করা প্রপস এবং স্লটের উপর ভিত্তি করে সঠিক রেন্ডার আউটপুট দাবি করুন।

• আচরণমূলক যুক্তির জন্য: ব্যবহারকারীর ইনপুট ইভেন্টের প্রতিক্রিয়া হিসাবে সঠিক রেন্ডার আপডেট বা নির্গত ইভেন্টগুলি দাবি করুন।

  নীচের উদাহরণে, আমরা একটি স্টেপার কম্পোনেন্ট দেখাই যেটিতে "বৃদ্ধি" লেবেলযুক্ত একটি DOM কম্পোনেন্ট রয়েছে এবং ক্লিক করা যেতে পারে। আমরা max নামক একটি প্রপ পাস করি যা স্টেপারকে 2 এর আগে বর্ধিত হতে বাধা দেয়, তাই যদি আমরা বোতামটি 3 বার ক্লিক করি, UI-কে এখনও 2 বলতে হবে।

  আমরা Stepper বাস্তবায়ন সম্পর্কে কিছুই জানি না, শুধুমাত্র "ইনপুট" হল max প্রপ এবং "আউটপুট" হল DOM-এর অবস্থা যেভাবে ব্যবহারকারী এটি দেখতে পাবে।

const valueSelector = '[data-testid=stepper-value]'
const buttonSelector = '[data-testid=increment]'

const wrapper = mount(Stepper, {
  props: {
    max: 1
  }
})

expect(wrapper.find(valueSelector).text()).toContain('0')

await wrapper.find(buttonSelector).trigger('click')

expect(wrapper.find(valueSelector).text()).toContain('1')

const valueSelector = '[data-testid=stepper-value]'
const buttonSelector = '[data-testid=increment]'

mount(Stepper, {
  props: {
    max: 1
  }
})

cy.get(valueSelector).should('be.visible').and('contain.text', '0')
  .get(buttonSelector).click()
  .get(valueSelector).should('contain.text', '1')

const { getByText } = render(Stepper, {
  props: {
    max: 1
  }
})

getByText('0') // Implicit assertion that "0" is within the component

const button = getByRole('button', { name: /increment/i })

// Dispatch a click event to our increment button.
await fireEvent.click(button)

getByText('1')

await fireEvent.click(button)

DON'T

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

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

  স্ন্যাপশট পরীক্ষার উপর একচেটিয়াভাবে নির্ভর করবেন না। HTML স্ট্রিং জাহির করা সঠিকতা বর্ণনা করে না। ইচ্ছাকৃতভাবে পরীক্ষা লিখুন।

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

Recommendation ​

• Vitest fঅথবা কম্পোনেন্ট বা কম্পোজেবল যা হেডলেস রেন্ডার করে (e.g. the useFavicon function in VueUse). কম্পোনেন্ট এবং DOM ব্যবহার করে পরীক্ষা করা যেতে পারে@vue/test-utils.

• Cypress Component Testing কম্পোনেন্টগুলির জন্য যাদের প্রত্যাশিত আচরণ সঠিকভাবে স্টাইল রেন্ডার করা বা নেটিভ DOM ইভেন্ট ট্রিগার করার উপর নির্ভর করে। এটি @testing-library/cypress এর মাধ্যমে টেস্টিং লাইব্রেরির সাথে ব্যবহার করা যেতে পারে।

ভিটেস্ট এবং ব্রাউজার-ভিত্তিক রানারদের মধ্যে প্রধান পার্থক্য হল গতি এবং কার্যকর করার প্রসঙ্গ। সংক্ষেপে, সাইপ্রেসের মতো ব্রাউজার-ভিত্তিক রানাররা এমন সমস্যাগুলি ধরতে পারে যা ভিটেস্টের মতো নোড-ভিত্তিক রানাররা পারে না (যেমন স্টাইলর সমস্যা, আসল স্থানীয় DOM ইভেন্ট, কুকি, স্থানীয় স্টোরেজ এবং নেটওয়ার্ক ব্যর্থতা), কিন্তু ব্রাউজার-ভিত্তিক রানাররা orders of magnitude slower than Vitest কারণ তারা একটি ব্রাউজার খোলে, আপনার স্টাইলশীট কম্পাইল করে এবং আরও অনেক কিছু করে। সাইপ্রেস একটি ব্রাউজার-ভিত্তিক রানার যা কম্পোনেন্ট পরীক্ষা সমর্থন করে। দয়া করে পড়ুন Vitest's comparison page Vitest এবং Cypress তুলনা সর্বশেষ তথ্যের জন্য.

Mounting Libraries ​

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

• @vue/test-utils হল অফিসিয়াল নিম্ন-স্তরের কম্পোনেন্ট টেস্টিং লাইব্রেরি যা ব্যবহারকারীদের Vue নির্দিষ্ট API-এ অ্যাক্সেস দেওয়ার জন্য লেখা হয়েছিল। এছাড়াও এটি নিম্ন-স্তরের লাইব্রেরি @testing-library/vue এর উপরে নির্মিত।

• @testing-library/vue একটি Vue টেস্টিং লাইব্রেরি যা বাস্তবায়নের বিবরণের উপর নির্ভর না করে কম্পোনেন্ট পরীক্ষা করার উপর দৃষ্টি নিবদ্ধ করে। এর গাইডিং নীতি হল যে যত বেশি পরীক্ষা সফ্টওয়্যার ব্যবহার করা হয় তার সাথে সাদৃশ্যপূর্ণ, তারা তত বেশি আত্মবিশ্বাস প্রদান করতে পারে।

আমরা অ্যাপ্লিকেশানগুলিতে কম্পোনেন্ট পরীক্ষা করার জন্য @vue/test-utils ব্যবহার করার পরামর্শ দিই। @testing-library/vue এর সাসপেন্সের সাথে অ্যাসিঙ্ক্রোনাস কম্পোনেন্ট পরীক্ষা করতে সমস্যা আছে, তাই এটি সতর্কতার সাথে ব্যবহার করা উচিত।

Other Options ​

• Nightwatch Vue কম্পোনেন্ট টেস্টিং সমর্থন সহ একটি E2E পরীক্ষা রানার। (উদাহরণ project)

• WebdriverIO ক্রস-ব্রাউজার কম্পোনেন্ট পরীক্ষার জন্য যা স্ট্যান্ডার্ডাইজড অটোমেশনের উপর ভিত্তি করে স্থানীয় ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর নির্ভর করে। এটি টেস্টিং লাইব্রেরির সাথেও ব্যবহার করা যেতে পারে।

E2E Testing ​

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

এন্ড-টু-এন্ড পরীক্ষাগুলি বহু-পৃষ্ঠা অ্যাপ্লিকেশন আচরণের উপর ফোকাস করে যা আপনার উত্পাদন-নির্মিত Vue অ্যাপ্লিকেশনের বিরুদ্ধে নেটওয়ার্ক রিকোয়েস্ট করে। তারা প্রায়ই একটি ডাটাবেস বা অন্যান্য ব্যাকএন্ড দাঁড়ানো জড়িত এবং এমনকি একটি লাইভ স্টেজিং পরিবেশের বিরুদ্ধে চালানো হতে পারে।

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

এন্ড-টু-এন্ড পরীক্ষাগুলি আপনার Vue অ্যাপ্লিকেশনের কোনো কোড আমদানি করে না বরং একটি বাস্তব ব্রাউজারে সমগ্র পৃষ্ঠাগুলিতে নেভিগেট করে আপনার অ্যাপ্লিকেশন পরীক্ষা করার উপর সম্পূর্ণ নির্ভর করে।

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

আপনার পরীক্ষাগুলি আপনার সফ্টওয়্যার কীভাবে ব্যবহার করা হয় তার সাথে সাদৃশ্যপূর্ণ, তারা আপনাকে তত বেশি আত্মবিশ্বাস দিতে পারে। - কেন্ট সি. ডডস - টেস্টিং লাইব্রেরির লেখক

ব্যবহারকারীর ক্রিয়াগুলি কীভাবে আপনার অ্যাপ্লিকেশনকে প্রভাবিত করে তা পরীক্ষা করে, E2E পরীক্ষাগুলি প্রায়শই একটি অ্যাপ্লিকেশন সঠিকভাবে কাজ করছে কিনা সে সম্পর্কে উচ্চ আত্মবিশ্বাসের চাবিকাঠি।

Choosing an E2E Testing Solution ​

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

Cross-browser testing ​

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

Faster feedback loops ​

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

First-class debugging experience ​

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

Visibility in headless mode ​

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

Recommendation ​

• Playwright একটি দুর্দান্ত E2E পরীক্ষার সমাধান যা Chromium, WebKit এবং Firefox সমর্থন করে। Windows, Linux, এবং macOS-এ স্থানীয়ভাবে বা CI-তে, হেডলেস বা Android এবং মোবাইল Safari-এর জন্য Google Chrome-এর নেটিভ মোবাইল এমুলেশনের সাহায্যে পরীক্ষা করুন। এটিতে একটি তথ্যপূর্ণ UI, চমৎকার ডিবাগবিলিটি, অন্তর্নির্মিত দাবি, সমান্তরালকরণ, ট্রেস রয়েছে এবং ফ্লেকি পরীক্ষাগুলি দূর করার জন্য ডিজাইন করা হয়েছে। কম্পোনেন্ট টেস্টিং এর জন্য সমর্থন উপলব্ধ, কিন্তু পরীক্ষামূলক হিসেবে চিহ্নিত। নাট্যকার ওপেন সোর্স এবং মাইক্রোসফট দ্বারা রক্ষণাবেক্ষণ করা হয়।

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

Other Options ​

• Nightwatch হল একটি E2E টেস্টিং সলিউশন যা Selenium WebDriver এর উপর ভিত্তি করে। এটি দেশীয় মোবাইল টেস্টিং সহ বিস্তৃত ব্রাউজার সমর্থন পরিসর দেয়। সেলেনিয়াম-ভিত্তিক সমাধানগুলি নাট্যকার বা সাইপ্রেসের চেয়ে ধীর হবে।

• WebdriverIO ওয়েবড্রাইভার প্রোটোকলের উপর ভিত্তি করে ওয়েব এবং মোবাইল কোডের জন্য একটি পরীক্ষা অটোমেশন ফ্রেমওয়ার্ক।

Recipes ​

Adding Vitest to a Project ​

একটি Vite-ভিত্তিক Vue প্রকল্পে, চালান:

> npm install -D vitest happy-dom @testing-library/vue

পরবর্তী, test বিকল্প ব্লক যোগ করতে Vite কনফিগারেশন আপডেট করুন:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  test: {
    // enable jest-like global test APIs
    globals: true,
    // simulate DOM with happy-dom
    // (requires installing happy-dom as a peer dependency)
    environment: 'happy-dom'
  }
})

// tsconfig.json

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

তারপর, আপনার প্রজেক্টে *.test.js এ শেষ হওয়া একটি ফাইল তৈরি করুন। আপনি প্রোজেক্ট রুটে বা আপনার সোর্স ফাইলের পাশে টেস্ট ডিরেক্টরিতে একটি টেস্ট ডিরেক্টরিতে সমস্ত টেস্ট ফাইল রাখতে পারেন। Vitest স্বয়ংক্রিয়ভাবে নামকরণ পদ্ধতি ব্যবহার করে তাদের জন্য অনুসন্ধান করবে।

// MyComponent.test.js
import { render } from '@testing-library/vue'
import MyComponent from './MyComponent.vue'

test('it should work', () => {
  const { getByText } = render(MyComponent, {
    props: {
      /* ... */
    }
  })

  // assert output
  getByText('...')
})

অবশেষে, পরীক্ষা স্ক্রিপ্ট যোগ করতে package.json আপডেট করুন এবং এটি চালান:

{
  // ...
  "scripts": {
    "test": "vitest"
  }
}

> npm test

Testing Composables ​

এই বিভাগটি ধরে নেয় যে আপনি Composables বিভাগটি পড়েছেন।

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

একটি কম্পোজেবল একটি হোস্ট কম্পোনেন্ট উদাহরণের উপর নির্ভর করে যখন এটি নিম্নলিখিত API ব্যবহার করে:

• Lifecycle hooks
• Provide / Inject

যদি একটি কম্পোজেবল শুধুমাত্র রিঅ্যাকটিভিটি এপিআই ব্যবহার করে, তাহলে এটি সরাসরি এটিকে আহ্বান করে এবং তার প্রত্যাবর্তিত অবস্থা/পদ্ধতি জাহির করে পরীক্ষা করা যেতে পারে:

// counter.js
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++

  return {
    count,
    increment
  }
}

// counter.test.js
import { useCounter } from './counter.js'

test('useCounter', () => {
  const { count, increment } = useCounter()
  expect(count.value).toBe(0)

  increment()
  expect(count.value).toBe(1)
})

একটি কম্পোজেবল যা লাইফসাইকেল হুকের উপর নির্ভর করে বা প্রোভাইড/ইনজেক্টকে পরীক্ষা করার জন্য হোস্ট কম্পোনেন্টে মোড়ানো প্রয়োজন। আমরা নিম্নলিখিত মত একটি সাহায্যকারী তৈরি করতে পারেন:

// test-utils.js
import { createApp } from 'vue'

export function withSetup(composable) {
  let result
  const app = createApp({
    setup() {
      result = composable()
      // suppress missing template warning
      return () => {}
    }
  })
  app.mount(document.createElement('div'))
  // return the result and the app instance
  // for testing provide/unmount
  return [result, app]
}

import { withSetup } from './test-utils'
import { useFoo } from './foo'

test('useFoo', () => {
  const [result, app] = withSetup(() => useFoo(123))
  // mock provide for testing injections
  app.provide(...)
  // run assertions
  expect(result.foo.value).toBe(1)
  // trigger onUnmounted hook if needed
  app.unmount()
})

আরও জটিল কম্পোজেবলের জন্য, [ কম্পোনেন্ট টেস্টিং](# কম্পোনেন্ট-টেস্টিং) কৌশল ব্যবহার করে র্যাপার কম্পোনেন্টের বিরুদ্ধে পরীক্ষা লিখে পরীক্ষা করাও সহজ হতে পারে।