Vue Test Utils ব্যবহার করে ইউনিট টেস্টিং

Vue Test Utils হল Vue.js এর জন্য একটি অফিসিয়াল টেস্টিং লাইব্রেরি, যা Vue কম্পোনেন্টগুলোর ইউনিট টেস্টিংয়ের জন্য ব্যবহৃত হয়। এই লাইব্রেরি আপনাকে Vue কম্পোনেন্টের ইন্টারঅ্যাকশন, ডোম রেন্ডারিং, ডেটা বাইন্ডিং এবং অন্যান্য বৈশিষ্ট্যগুলো টেস্ট করার সুবিধা দেয়। Vue Test Utils এর মাধ্যমে আপনি Vue অ্যাপ্লিকেশন এবং কম্পোনেন্টগুলোর কার্যকারিতা এবং অ্যালগরিদম চেক করতে পারেন, যা আপনার কোডের গুণগতমান নিশ্চিত করে।

১. Vue Test Utils সেটআপ

Vue Test Utils ব্যবহার করতে হলে প্রথমে কিছু টুলস ইনস্টল করতে হবে, যেমন @vue/test-utils, jest বা mocha টেস্টিং ফ্রেমওয়ার্ক এবং vue-jest (যদি আপনি Jest ব্যবহার করেন)।

টুলস ইনস্টল করা:

npm install --save-dev @vue/test-utils jest vue-jest

এটি @vue/test-utils, jest এবং vue-jest ইনস্টল করবে, যা Vue কম্পোনেন্ট টেস্টিংয়ের জন্য প্রয়োজনীয় টুলস।

২. Jest কনফিগারেশন

Jest হচ্ছে একটি জনপ্রিয় টেস্টিং ফ্রেমওয়ার্ক যা Vue Test Utils এর সাথে ব্যবহৃত হয়। Jest এর কনফিগারেশন ফাইল (jest.config.js) তৈরি করতে হবে যাতে Vue কম্পোনেন্টগুলোর টেস্ট সঠিকভাবে রান হয়।

jest.config.js ফাইল:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
};

এখানে @vue/cli-plugin-unit-jest পpreset এবং vue-jest ট্রান্সফর্মার ব্যবহার করা হয়েছে।

৩. ইউনিট টেস্টিং উদাহরণ

এখন Vue কম্পোনেন্ট তৈরি করে এবং Vue Test Utils দিয়ে তার ইউনিট টেস্টিং করা যাক।

Vue কম্পোনেন্ট (HelloWorld.vue):

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="changeMessage">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello, Vue!'
    };
  },
  methods: {
    changeMessage() {
      this.msg = 'Hello, World!';
    }
  }
};
</script>

এটি একটি সিম্পল Vue কম্পোনেন্ট, যেখানে একটি msg ডেটা প্রপার্টি এবং একটি changeMessage মেথড রয়েছে যা msg এর মান পরিবর্তন করে।

টেস্ট ফাইল (HelloWorld.spec.js):

import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders the correct message', () => {
    const wrapper = mount(HelloWorld);
    expect(wrapper.text()).toContain('Hello, Vue!');
  });

  it('changes the message when the button is clicked', async () => {
    const wrapper = mount(HelloWorld);
    await wrapper.find('button').trigger('click');
    expect(wrapper.text()).toContain('Hello, World!');
  });
});

ব্যাখ্যা:

1. রেন্ডারিং টেস্ট:

   expect(wrapper.text()).toContain('Hello, Vue!');
   

   এখানে, mount ফাংশন ব্যবহার করে HelloWorld কম্পোনেন্টটি মাউন্ট করা হয়েছে এবং wrapper.text() ব্যবহার করে কম্পোনেন্টের টেক্সট চেক করা হয়েছে। এটি নিশ্চিত করে যে কম্পোনেন্টে সঠিক msg রেন্ডার হচ্ছে।

2. ইভেন্ট ট্রিগার টেস্ট:

   await wrapper.find('button').trigger('click');
   expect(wrapper.text()).toContain('Hello, World!');
   

   এখানে, find('button') ব্যবহার করে বাটনটি খুঁজে বের করা হয়েছে এবং trigger('click') দিয়ে বাটনে ক্লিক ইভেন্ট ট্রিগার করা হয়েছে। এরপর, msg পরিবর্তন হওয়ার পরে সঠিক টেক্সট রেন্ডার হচ্ছে কিনা, তা যাচাই করা হয়েছে।

৪. টেস্ট চালানো

jest টেস্ট রানার ব্যবহার করে আপনি টেস্ট চালাতে পারেন। নিচের কমান্ডটি চালিয়ে টেস্টগুলো রান করুন:

npm run test:unit

এটি আপনার টেস্ট ফাইলগুলি চালাবে এবং টেস্টের ফলাফল কনসোলে প্রদর্শন করবে।

৫. Vue Test Utils এর অন্যান্য ফিচার

Vue Test Utils এর মধ্যে বেশ কিছু শক্তিশালী ফিচার রয়েছে, যা টেস্টিং আরও সহজ এবং কার্যকরী করে তোলে:

• mount এবং shallowMount: mount সম্পূর্ণ Vue কম্পোনেন্টটি মাউন্ট করে, যখন shallowMount শুধুমাত্র কম্পোনেন্টের গভীর অংশ ছাড়া উপরের অংশটিকে মাউন্ট করে। এটি ইন্টারফেস টেস্টিংয়ের জন্য উপযোগী।

  const wrapper = shallowMount(HelloWorld);
  

• find এবং findAll: DOM এলিমেন্ট খুঁজে পেতে find এবং একাধিক এলিমেন্ট খুঁজে পেতে findAll ব্যবহার করা যায়।

  const button = wrapper.find('button');
  

• trigger: DOM ইভেন্ট ট্রিগার করার জন্য ব্যবহার করা হয়, যেমন click, input ইত্যাদি।

  await wrapper.find('button').trigger('click');
  

• setData: কম্পোনেন্টের ডেটা পরিবর্তন করতে ব্যবহৃত হয়।

  wrapper.setData({ msg: 'New message' });
  

• computed এবং methods টেস্ট করা: Vue কম্পোনেন্টের মেথড বা কম্পিউটেড প্রপার্টি টেস্ট করা।

সারাংশ

• Vue Test Utils হল Vue.js কম্পোনেন্টের জন্য একটি শক্তিশালী টেস্টিং টুল যা আপনাকে Vue অ্যাপ্লিকেশনগুলির ইউনিট টেস্টিং করতে সহায়তা করে।
• Jest টেস্টিং ফ্রেমওয়ার্ক Vue Test Utils এর সাথে ব্যবহার করা হয়, যা Vue কম্পোনেন্টগুলোর কার্যকারিতা পরীক্ষা করতে সাহায্য করে।
• Vue Test Utils ব্যবহার করে, আপনি Vue কম্পোনেন্টগুলির ইন্টারঅ্যাকশন, ডেটা বাইন্ডিং, DOM রেন্ডারিং এবং অন্যান্য বৈশিষ্ট্যগুলো সহজে টেস্ট করতে পারেন।

এটি Vue অ্যাপ্লিকেশন ডেভেলপমেন্টের প্রক্রিয়াকে আরও বিশ্বাসযোগ্য এবং কার্যকরী করে তোলে, কারণ আপনি কোডে যে পরিবর্তন আনছেন, তা আগে থেকেই টেস্ট করে নিশ্চিত করতে পারবেন।