React অ্যাপে ইউজার কী করছে, সেটা কীভাবে টেস্ট করবেন

এগুলো থাকলে আমরা ইউজারের মতো করে অ্যাপ টেস্ট করতে পারব।

---

## ধাপ ১: কম্পোনেন্টটা টেস্টে দেখানো (Render করা)

ধরুন আপনার একটা কম্পোনেন্ট আছে—`YourComponent`।
টেস্ট ফাইলে প্রথম কাজ হলো এটাকে রেন্ডার করা।

```javascript
import { render, screen } from "@testing-library/react";
import YourComponent from "../YourComponent";

test("কম্পোনেন্টটি ঠিকভাবে রেন্ডার হয়", () => {
  render(<YourComponent />);
});
```

এখানে আসলে হচ্ছে কী?
👉 আমরা ব্রাউজারে যেভাবে কম্পোনেন্ট দেখি, ঠিক সেভাবেই টেস্টের ভেতরে দেখাচ্ছি।

---

## ধাপ ২: ইউজার যেটায় হাত দেয়, সেটাকে খুঁজে বের করা

ইউজার সরাসরি কোড ধরে না—
সে দেখে **বাটন**, **টেক্সট**, **ইনপুট**।

তাই React Testing Library-ও আমাদের সেভাবেই এলিমেন্ট ধরতে বলে।

```javascript
const button = screen.getByRole("button");
const text = screen.getByText("Initial Text");
```

এটা অনেক বেশি বাস্তবসম্মত, কারণ আমরা CSS বা ভিতরের স্ট্রাকচার নিয়ে মাথা ঘামাচ্ছি না।

---

## ধাপ ৩: বাটনে ক্লিক করলে কী হয়, সেটা টেস্ট করা

ধরুন—

- শুরুতে লেখা আছে: `Initial Text`
- বাটনে ক্লিক করলে লেখা বদলে যাবে

এটা টেস্ট করি 👇

```javascript
import { fireEvent } from "@testing-library/react";

test("বাটনে ক্লিক করলে লেখা পরিবর্তন হয়", () => {
  render(<YourComponent />);

  const button = screen.getByRole("button");
  const text = screen.getByText("Initial Text");

  // শুরুতে কী আছে
  expect(text.textContent).toBe("Initial Text");

  // ইউজার ক্লিক করল
  fireEvent.click(button);

  // ক্লিকের পরে কী হলো
  expect(text.textContent).toBe("Updated Text");
});
```

এখানে একদম পরিষ্কার—
👉 ইউজার কী করল
👉 তার ফলে কী বদলালো

---

## ধাপ ৪: ইনপুটে টাইপ করা টেস্ট করা

ইনপুট ফিল্ড ছাড়া অ্যাপ হয় না।
ইউজার টাইপ করলে ভ্যালু বদলাচ্ছে কিনা, সেটা খুব গুরুত্বপূর্ণ।

```javascript
test("ইনপুটে টাইপ করলে ভ্যালু আপডেট হয়", () => {
  render(<YourComponent />);

  const input = screen.getByTestId("input-element");

  fireEvent.change(input, {
    target: { value: "Hello World" },
  });

  expect(input.value).toBe("Hello World");
});
```

এটা ঠিক এমন—
👉 ইউজার কীবোর্ডে লিখল
👉 আমরা চেক করলাম অ্যাপ সেটা ধরতে পারছে কিনা

---

## ধাপ ৫: চেকবক্স অন–অফ হচ্ছে কিনা দেখা

চেকবক্স খুবই সাধারণ জিনিস, কিন্তু এখানেও বাগ হয়।

```javascript
test("চেকবক্স ক্লিক করলে অন এবং অফ হয়", () => {
  render(<YourComponent />);

  const checkbox = screen.getByRole("checkbox");

  fireEvent.click(checkbox);
  expect(checkbox.checked).toBe(true);

  fireEvent.click(checkbox);
  expect(checkbox.checked).toBe(false);
});
```

একদম মানুষের মতো—
ক্লিক → অন
আবার ক্লিক → অফ

---

## ধাপ ৬: সব টেস্ট চালানো

সব লেখা শেষ?
এখন শুধু কমান্ড দিন—

```bash
npm test
```

এবং দেখুন—
আপনার অ্যাপ ইউজারের আচরণ ঠিকভাবে সামলাতে পারছে কিনা।

---

## শেষ কথা

ইউজার ইন্টারঅ্যাকশন টেস্ট মানে হলো নিজেকে প্রশ্ন করা—

> “আমি যদি ইউজার হতাম, তাহলে এটা কাজ করত তো?”

React Testing Library আপনাকে ঠিক সেই জায়গাতেই টেস্ট করতে সাহায্য করে।
UI কেমন বানানো হয়েছে সেটা না দেখে,
**ইউজার কী পাচ্ছে সেটার উপর ফোকাস করে।**

এই অভ্যাসটা গড়ে তুললে—

- কম বাগ হবে
- বেশি আত্মবিশ্বাস আসবে
- প্রোডাকশনে চমক কমবে