Web Development Automated Testing এবং Test Coverage গাইড ও নোট

Automated Testing এবং Test Coverage সফটওয়্যার ডেভেলপমেন্টের গুরুত্বপূর্ণ অংশ। এগুলি নিশ্চিত করে যে আপনার অ্যাপ্লিকেশন নির্ভরযোগ্য, বাগমুক্ত এবং প্রত্যাশিতভাবে কাজ করছে। Framework7 ব্যবহার করে মোবাইল এবং ওয়েব অ্যাপ্লিকেশন ডেভেলপ করার সময় এই দুটি উপাদান বিশেষভাবে প্রয়োজনীয় হয়ে ওঠে।

Automated Testing কী?

Automated Testing হলো একটি প্রক্রিয়া যেখানে সফটওয়্যার টেস্টিং স্বয়ংক্রিয় টুলস এবং স্ক্রিপ্ট ব্যবহার করে করা হয়। এটি ম্যানুয়াল টেস্টিংয়ের তুলনায় দ্রুত এবং দক্ষ হয়, বিশেষ করে বড় এবং জটিল প্রকল্পগুলির ক্ষেত্রে।

Test Coverage কী?

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

Framework7 এ Automated Testing এবং Test Coverage কিভাবে করবেন

Framework7 সাধারণত Vue.js বা React এর সাথে ব্যবহৃত হয়। তাই, Automated Testing এবং Test Coverage সেটআপ করতে হলে আপনাকে সেই ফ্রেমওয়ার্কগুলোর টেস্টিং টুলস ব্যবহার করতে হবে। নিচে Vue.js এবং React এর সাথে Framework7 এর Automated Testing এবং Test Coverage সেটআপের ধাপগুলো তুলে ধরা হলো।

Vue.js এর সাথে Framework7 এ Automated Testing

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

Jest হলো একটি জনপ্রিয় JavaScript টেস্টিং ফ্রেমওয়ার্ক যা Vue.js এর সাথে ভালোভাবে কাজ করে। Vue Test Utils হলো Vue.js এর অফিসিয়াল টেস্টিং ইউটিলিটি লাইব্রেরি।

ইনস্টলেশন:

প্রথমে প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করুন:

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

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

jest.config.js ফাইল তৈরি করুন এবং নিচের কনফিগারেশন যোগ করুন:

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  },
  moduleFileExtensions: ['js', 'vue'],
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,vue}', '!src/main.js'],
};

একটি ইউনিট টেস্ট উদাহরণ:

ধরি, আপনার একটি HelloWorld.vue কম্পোনেন্ট আছে:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

এই কম্পোনেন্টের জন্য একটি টেস্ট ফাইল HelloWorld.spec.js তৈরি করুন:

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

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello Framework7 with Vue!';
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

টেস্ট রান করা:

npm run test:unit

২. Cypress ব্যবহার করে End-to-End (E2E) টেস্টিং

Cypress একটি শক্তিশালী টুল যা ব্রাউজার ভিত্তিক E2E টেস্টিং করার জন্য ব্যবহৃত হয়।

ইনস্টলেশন:

npm install --save-dev cypress

Cypress সেটআপ:

package.json এ একটি স্ক্রিপ্ট যোগ করুন:

"scripts": {
  "cypress:open": "cypress open"
}

একটি E2E টেস্ট উদাহরণ:

cypress/integration/sample_spec.js ফাইল তৈরি করুন:

describe('Framework7 App', () => {
  it('Visits the app root url', () => {
    cy.visit('http://localhost:8080');
    cy.contains('Hello, Framework7 with Vue!');
  });
});

টেস্ট রান করা:

npm run cypress:open

React এর সাথে Framework7 এ Automated Testing

১. Jest এবং React Testing Library ব্যবহার করে ইউনিট টেস্টিং

Jest এবং React Testing Library React কম্পোনেন্ট টেস্টিংয়ের জন্য আদর্শ।

ইনস্টলেশন:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

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

jest.config.js ফাইল তৈরি করুন এবং নিচের কনফিগারেশন যোগ করুন:

module.exports = {
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  testEnvironment: 'jsdom',
};

একটি ইউনিট টেস্ট উদাহরণ:

ধরি, আপনার একটি HelloWorld.jsx কম্পোনেন্ট আছে:

import React from 'react';

const HelloWorld = ({ msg }) => {
  return (
    <div className="hello">
      <h1>{msg}</h1>
    </div>
  );
};

export default HelloWorld;

এই কম্পোনেন্টের জন্য একটি টেস্ট ফাইল HelloWorld.test.jsx তৈরি করুন:

import React from 'react';
import { render } from '@testing-library/react';
import HelloWorld from './HelloWorld';

test('renders props.msg when passed', () => {
  const msg = 'Hello Framework7 with React!';
  const { getByText } = render(<HelloWorld msg={msg} />);
  expect(getByText(msg)).toBeInTheDocument();
});

টেস্ট রান করা:

npm run test

২. Cypress ব্যবহার করে End-to-End (E2E) টেস্টিং

Cypress React অ্যাপের E2E টেস্টিংয়ের জন্যও ব্যবহার করা যায়।

ইনস্টলেশন:

npm install --save-dev cypress

Cypress সেটআপ:

package.json এ একটি স্ক্রিপ্ট যোগ করুন:

"scripts": {
  "cypress:open": "cypress open"
}

একটি E2E টেস্ট উদাহরণ:

cypress/integration/sample_spec.js ফাইল তৈরি করুন:

describe('Framework7 React App', () => {
  it('Visits the app root url', () => {
    cy.visit('http://localhost:8080');
    cy.contains('Hello, Framework7 with React!');
  });
});

টেস্ট রান করা:

npm run cypress:open

Test Coverage রিপোর্টিং

Test Coverage নিশ্চিত করে যে আপনার কোডের কতটা অংশ টেস্ট কেস দ্বারা কভার করা হয়েছে। Jest এবং Cypress উভয়েরই বিল্ট-ইন সাপোর্ট আছে।

Jest এ Test Coverage:

jest.config.js ফাইলে collectCoverage এবং collectCoverageFrom যুক্ত করুন:

module.exports = {
  // অন্যান্য কনফিগারেশন
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,jsx,vue}', '!src/main.js'],
};

Test Coverage রিপোর্ট রান করা:

npm run test -- --coverage

এই কমান্ডটি চালানোর পর, একটি coverage ফোল্ডার তৈরি হবে যেখানে HTML, LCOV এবং অন্যান্য ফরম্যাটে রিপোর্ট থাকবে।

Cypress এ Test Coverage:

Cypress এর জন্য istanbul ব্যবহার করে test coverage রিপোর্ট করা যায়।

ইনস্টলেশন:

npm install --save-dev @cypress/code-coverage

সেটআপ:

cypress/plugins/index.js ফাইলে নিচের কোড যোগ করুন:

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);
  return config;
};

cypress/support/index.js ফাইলে নিচের কোড যোগ করুন:

import '@cypress/code-coverage/support';

Test Coverage রিপোর্ট রান করা:

Cypress চালানোর পর, কোড কভারেজ রিপোর্ট স্বয়ংক্রিয়ভাবে তৈরি হবে।

সারাংশ

Framework7 এর সাথে Automated Testing এবং Test Coverage সেটআপ করা খুবই গুরুত্বপূর্ণ যাতে আপনার অ্যাপ্লিকেশন নির্ভরযোগ্য এবং বাগমুক্ত থাকে। Vue.js এবং React এর সাথে Framework7 ব্যবহার করলে, Jest, Vue Test Utils, React Testing Library, এবং Cypress এর মত শক্তিশালী টুলস ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের ইউনিট এবং E2E টেস্টিং সম্পন্ন করতে পারেন। এছাড়াও, Jest এবং Cypress এর বিল্ট-ইন কভারেজ রিপোর্টিং ফিচারগুলি আপনাকে আপনার টেস্ট কভারেজ পর্যবেক্ষণ এবং উন্নত করতে সাহায্য করবে।

টিপস:

1. বিগ্নেস শোনা: Automated Testing শুরু করার আগে আপনার প্রজেক্টের স্ট্রাকচার এবং কম্পোনেন্টগুলো বুঝে নিন।
2. রেগুলার টেস্ট লিখুন: প্রতিটি নতুন ফিচার যোগ করার সময় টেস্ট লিখতে অভ্যাস করুন।
3. কভারেজ লক্ষ্য করুন: শুধুমাত্র টেস্ট লিখুন না, বরং নিশ্চিত করুন যে আপনার কোডের যথেষ্ট অংশ টেস্ট দ্বারা কভার হয়েছে।
4. টেস্ট রানের নিয়মিত সময় নির্ধারণ করুন: CI/CD পাইলাইনে টেস্ট রান করা নিশ্চিত করুন যাতে প্রতিটি কমিটের সাথে টেস্ট চলে।

Automated Testing এবং Test Coverage আপনার Framework7 অ্যাপ্লিকেশনকে আরও মজবুত, নির্ভরযোগ্য এবং উন্নত করতে অপরিহার্য ভূমিকা পালন করে।