Testing Libraries এবং Tools (Jest, Mocha) ইন্টিগ্রেশন

Riot.js-এ টেস্টিং লাইব্রেরি এবং টুলস ইন্টিগ্রেশন (যেমন Jest, Mocha) করার জন্য আপনি কিছু সাধারণ পদ্ধতি অনুসরণ করতে পারেন। Riot.js নিজে কোনো টেস্টিং টুলস অন্তর্ভুক্ত করে না, তবে এটি JavaScript ফ্রেমওয়ার্কের মতো কাজ করে, যার ফলে আপনি সাধারণভাবে Jest এবং Mocha এর মতো টেস্টিং লাইব্রেরিগুলি ব্যবহার করতে পারেন।

এখানে আমরা Jest এবং Mocha এর সাথে Riot.js এর ইন্টিগ্রেশন সম্পর্কিত কিছু উদাহরণ দেখাবো।

১. Jest দিয়ে Riot.js টেস্টিং

Jest হল Facebook এর তৈরি একটি শক্তিশালী টেস্টিং ফ্রেমওয়ার্ক, যা ইউনিট টেস্টিং এবং ইন্টিগ্রেশন টেস্টিংয়ের জন্য খুবই জনপ্রিয়। Riot.js কম্পোনেন্টের জন্য Jest এর সাথে ইন্টিগ্রেশন করা খুবই সহজ।

Step 1: Jest এবং প্রয়োজনীয় প্যাকেজ ইনস্টল করা

npm install --save-dev jest riot riot-test-utils babel-jest @babel/core @babel/preset-env

• riot-test-utils: Riot.js কম্পোনেন্ট টেস্ট করার জন্য একটি ইউটিলিটি।
• babel-jest: Jest এর সাথে Babel ব্যবহার করার জন্য।
• @babel/core, @babel/preset-env: ES6+ কোডকে ট্রান্সপাইল করতে।

Step 2: Babel কনফিগারেশন সেটআপ করা

babel.config.js ফাইল তৈরি করুন:

module.exports = {
  presets: ['@babel/preset-env']
};

Step 3: Jest কনফিগারেশন

Jest এর কনফিগারেশন ফাইল (যেমন jest.config.js) তৈরি করুন:

module.exports = {
  transform: {
    '^.+\\.riot$': 'riot-jest-transformer'
  },
  moduleFileExtensions: ['js', 'riot'],
  testEnvironment: 'jsdom'
};

এখানে, riot-jest-transformer ব্যবহার করে আমরা Riot.js ট্যাগগুলোকে ট্রান্সপাইল করছি।

Step 4: টেস্টিং কম্পোনেন্ট তৈরি করা

এখন একটি টেস্টিং কম্পোনেন্ট তৈরি করি। ধরুন আমাদের কাছে একটি কম্পোনেন্ট MyComponent.riot:

<!-- MyComponent.riot -->
<my-component>
  <button onclick={changeMessage}>Click Me</button>
  <p>{message}</p>

  <script>
    export default {
      onMounted() {
        this.message = "Hello, World!";
      },

      changeMessage() {
        this.message = "Hello, Jest!";
      }
    }
  </script>
</my-component>

এখন, আমরা এই কম্পোনেন্টটির জন্য Jest টেস্ট লিখতে পারি:

// MyComponent.test.js
import riot from 'riot';
import { mount } from 'riot-test-utils';
import MyComponent from './MyComponent.riot';

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

  beforeEach(() => {
    component = mount(MyComponent);
  });

  it('should display initial message', () => {
    expect(component.root.querySelector('p').textContent).toBe('Hello, World!');
  });

  it('should change message on button click', () => {
    component.root.querySelector('button').click();
    expect(component.root.querySelector('p').textContent).toBe('Hello, Jest!');
  });
});

Step 5: টেস্ট চালানো

npx jest

এখন, Jest টেস্ট রান করবে এবং আপনার MyComponent কম্পোনেন্টের ইন্টারঅ্যাকশন চেক করবে।

২. Mocha দিয়ে Riot.js টেস্টিং

Mocha হল আরেকটি জনপ্রিয় টেস্টিং ফ্রেমওয়ার্ক, যা টেস্ট লিখতে এবং চালাতে ব্যবহৃত হয়। Mocha, Chai (assertion library) এবং Sinon (spying/stubbing/mocking library) এর সাথে খুবই জনপ্রিয়। Riot.js এর সাথে Mocha ব্যবহার করা অনেকটা একইরকম।

Step 1: Mocha, Chai, এবং Riot Test Utils ইনস্টল করা

npm install --save-dev mocha chai riot riot-test-utils

Step 2: Mocha কনফিগারেশন

Mocha-কে chai এবং riot-test-utils এর সাথে সেটআপ করা যায়। Mocha টেস্ট চলানোর জন্য একটি ফোল্ডার তৈরি করুন, যেমন test/।

Step 3: টেস্ট কম্পোনেন্ট তৈরি করা

ধরা যাক, আমাদের MyComponent.riot কম্পোনেন্ট আছে। এখন, আমরা Mocha দিয়ে সেই কম্পোনেন্টের টেস্ট লিখব।

<!-- MyComponent.riot -->
<my-component>
  <button onclick={changeMessage}>Click Me</button>
  <p>{message}</p>

  <script>
    export default {
      onMounted() {
        this.message = "Hello, World!";
      },

      changeMessage() {
        this.message = "Hello, Mocha!";
      }
    }
  </script>
</my-component>

এখন, Mocha এবং Chai ব্যবহার করে টেস্ট লিখুন:

// test/MyComponent.test.js
import { expect } from 'chai';
import riot from 'riot';
import { mount } from 'riot-test-utils';
import MyComponent from '../MyComponent.riot';

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

  beforeEach(() => {
    component = mount(MyComponent);
  });

  it('should display initial message', () => {
    expect(component.root.querySelector('p').textContent).to.equal('Hello, World!');
  });

  it('should change message on button click', () => {
    component.root.querySelector('button').click();
    expect(component.root.querySelector('p').textContent).to.equal('Hello, Mocha!');
  });
});

Step 4: Mocha টেস্ট চালানো

npx mocha

এখন Mocha আপনার টেস্ট চালাবে এবং MyComponent কম্পোনেন্টটির কার্যকারিতা পরীক্ষা করবে।

সারাংশ:

• Jest এবং Mocha দুটি শক্তিশালী টেস্টিং ফ্রেমওয়ার্ক এবং আপনি Riot.js এর সাথে সেগুলিকে ব্যবহার করতে পারেন।
• Jest এর সাথে riot-test-utils ব্যবহার করা এবং Mocha এর সাথে chai ও riot-test-utils ব্যবহার করা যেতে পারে।
• টেস্টের মাধ্যমে আপনি কম্পোনেন্টের ইন্টারঅ্যাকশন, UI রেন্ডারিং, এবং লজিক্যাল আচরণ পরীক্ষা করতে পারেন।

এই টেস্টিং টুলগুলির সাথে ইন্টিগ্রেশন আপনি খুব সহজেই করতে পারেন Riot.js এর কম্পোনেন্টের জন্য।