Karma এবং Jasmine এর সাথে Aurelia টেস্টিং

Aurelia ফ্রেমওয়ার্কে টেস্টিং একটি গুরুত্বপূর্ণ দিক। টেস্টিংয়ের জন্য Karma এবং Jasmine দুটি খুবই জনপ্রিয় টুল, যা আপনাকে আপনার অ্যাপ্লিকেশন বা কম্পোনেন্টের ইউনিট টেস্টিং করতে সহায়তা করে। Karma একটি টেস্ট রানার হিসেবে কাজ করে, এবং Jasmine একটি টেস্ট ফ্রেমওয়ার্ক যা টেস্ট কেস তৈরি এবং পরীক্ষণের জন্য ব্যবহৃত হয়।

এই টিউটোরিয়ালে, আমরা দেখব কিভাবে Karma এবং Jasmine এর সাথে Aurelia অ্যাপ্লিকেশন টেস্টিং করা যায়।

১. Karma এবং Jasmine ইনস্টল করা

Aurelia প্রকল্পে Karma এবং Jasmine সেটআপ করার জন্য প্রথমে কিছু নির্দিষ্ট প্যাকেজ ইন্সটল করতে হবে।

১.১. প্যাকেজ ইন্সটল করা

Karma এবং Jasmine সহ আরও কিছু প্যাকেজ ইন্সটল করতে, npm ব্যবহার করুন:

npm install --save-dev karma karma-jasmine karma-chrome-launcher jasmine-core aurelia-testing

এটি নিম্নলিখিত প্যাকেজগুলো ইনস্টল করবে:

• karma: টেস্ট রানার হিসেবে ব্যবহৃত হবে।
• karma-jasmine: Jasmine ফ্রেমওয়ার্কের জন্য Karma অ্যাডাপ্টার।
• karma-chrome-launcher: টেস্ট চালানোর জন্য Chrome ব্রাউজার ব্যবহার করা হবে।
• jasmine-core: Jasmine টেস্ট ফ্রেমওয়ার্ক।
• aurelia-testing: Aurelia অ্যাপ্লিকেশন টেস্টিংয়ের জন্য লাইব্রেরি।

২. Karma কনফিগারেশন ফাইল তৈরি করা

Karma টেস্ট রানার কনফিগারেশন করার জন্য একটি karma.conf.js ফাইল তৈরি করতে হবে।

২.১. karma.conf.js ফাইল কনফিগারেশন

module.exports = function(config) {
  config.set({
    basePath: '',

    frameworks: ['jasmine', 'aurelia-testing'], // Jasmine এবং Aurelia Testing ফ্রেমওয়ার্ক
    files: [
      'src/**/*.js',    // আপনার অ্যাপ্লিকেশনের সোর্স কোড
      'test/unit/**/*.js'  // টেস্ট ফাইল
    ],

    exclude: [],

    preprocessors: {
      'src/**/*.js': ['babel'],  // Babel ব্যবহারের জন্য
      'test/unit/**/*.js': ['babel']
    },

    babelPreprocessor: {
      options: {
        presets: ['es2015'],
        sourceMap: 'inline'
      }
    },

    reporters: ['progress'], // টেস্ট রিপোর্টিং
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'], // Chrome ব্রাউজারে টেস্ট চালানো
    singleRun: false
  });
};

এই কনফিগারেশন ফাইলে:

• frameworks এ jasmine এবং aurelia-testing উল্লেখ করা হয়েছে।
• files এর মধ্যে আপনি টেস্ট এবং সোর্স কোডের ফাইল পাথ উল্লেখ করবেন।
• preprocessors এর মাধ্যমে আপনি Babel প্রিপ্রসেসর ব্যবহার করছেন যাতে ES6 কোড ট্রান্সপাইল হতে পারে।

৩. Jasmine টেস্ট কেস তৈরি করা

এখন, আপনি Jasmine ফ্রেমওয়ার্ক ব্যবহার করে টেস্ট কেস লিখতে পারেন।

৩.১. একটি সাধারণ Jasmine টেস্ট কেস

ধরা যাক, আমাদের একটি কম্পোনেন্ট আছে যার মধ্যে একটি মেথড রয়েছে যেটি দুটি নম্বর যোগ করে।

1. app.js (কম্পোনেন্ট)

export class App {
  add(a, b) {
    return a + b;
  }
}

2. app.spec.js (টেস্ট ফাইল)

import { App } from 'src/app';
import { StageComponent } from 'aurelia-testing';

describe('App component', () => {
  let component;

  beforeEach(() => {
    component = StageComponent.withResources('src/app')
      .inView('<template><button click.delegate="add(1, 2)">Add</button></template>');
  });

  it('should add two numbers', () => {
    component.create().then(() => {
      const result = component.viewModel.add(1, 2);  // মেথড টেস্ট করা
      expect(result).toBe(3);  // Jasmine assertion
    });
  });
});

এখানে:

• StageComponent এর মাধ্যমে আপনি অ্যাপ্লিকেশন বা কম্পোনেন্ট ইন্সট্যান্স তৈরি করতে পারেন।
• beforeEach() ব্লক ব্যবহার করে টেস্ট শুরু হওয়ার আগে প্রস্তুতি নেওয়া হয়।
• expect(result).toBe(3) হল Jasmine এর assertion যা টেস্টের ফলাফল যাচাই করে।

৪. কোম্পোনেন্ট টেস্টিং (Aurelia Testing Library)

Aurelia Testing লাইব্রেরি ব্যবহার করে আপনি কম্পোনেন্ট বা ভিউ টেস্ট করতে পারেন। এই লাইব্রেরি StageComponent ব্যবহার করে ইউআই কম্পোনেন্ট রেন্ডারিং এবং ইন্টারঅ্যাকশন টেস্ট করতে সাহায্য করে।

৪.১. StageComponent ব্যবহার করে টেস্ট করা

import { StageComponent } from 'aurelia-testing';
import { App } from 'src/app';

describe('App component', () => {
  let component;

  beforeEach(() => {
    component = StageComponent.withResources('src/app')
      .inView('<template><button click.delegate="add(1, 2)">Add</button></template>');
  });

  it('should display the correct result when add button is clicked', () => {
    component.create().then(() => {
      const button = component.shadowRoot.querySelector('button');
      button.click();  // ক্লিক ইভেন্ট ট্রিগার করা
      expect(component.viewModel.result).toBe(3);  // ফলাফল যাচাই করা
    });
  });
});

এখানে StageComponent ব্যবহার করে একটি কম্পোনেন্ট তৈরি করা হয়েছে এবং একটি বাটনে ক্লিক করার পর ভিউমডেলের result যাচাই করা হয়েছে।

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

এখন, আপনি karma টেস্ট রানার ব্যবহার করে টেস্টগুলি চালাতে পারেন।

৫.১. Karma চালানো

karma start

এই কমান্ডটি চালানোর পর, Karma আপনার টেস্ট ফাইলগুলোকে প্রসেস করবে এবং টেস্ট রেজাল্ট দেখাবে।

উপসংহার

Aurelia-তে Karma এবং Jasmine এর সাহায্যে টেস্টিং সেটআপ করা খুবই সহজ। Karma আপনার টেস্ট চালানোর জন্য প্রয়োজনীয় রানার হিসেবে কাজ করে, আর Jasmine টেস্ট কেস লিখতে এবং টেস্ট রেজাল্ট যাচাই করতে ব্যবহৃত হয়। Aurelia Testing লাইব্রেরি কম্পোনেন্ট টেস্টিং আরও সহজ করে তোলে, যেখানে আপনি UI ইন্টারঅ্যাকশন এবং ফাংশনালিটি চেক করতে পারেন।