??? ?? ??(TDD)? ????? ?? ? ?? ??? ???? ??? ??? ??? ?? ??? ????. TDD? ??? ? API ???? ?????? ????? ????? ??? ?????. ??? ???? ?? ???? ?????? ??? ?? ???? ??? ??? ???? ??? ??? ??? ???? ?? ?? ????? ? ????. ? ????? ????? ??? ???? TDD? ????, ? ??? ?? ????, React? JavaScript? ??? ??? ???????.

????? ??? TDD? ???? ??? ??????

????? ???? ??? ?? ??, ?? ?? ???, ??? ??? ?? ?? ? ??? ??? ????. TDD? ???? ?? ???? ??, ?? ?? ? UI ??? ??? ? ??? ?????. ??????? TDD? ??? ??? ????.

? ?? ?? ??: ???? ?? ???? ???? ???? ???? ?? ?? ??? ??? ??? ? ????.

??? ??? ??: ??? ????? ???? ?? ????? ??? ???? ?? ??? ????.

? ?? ??? ??: TDD? ?? ??? ?? ??? ??? ?? ????? ???? ?? ??? UX? ?????.

???? ???: ???? ???? ?? ??? ?? ??? ?? ????? ? ??? ???? ?????.

??????? TDD? ???? ??: ?-?-???? ??

TDD ????? Red, Green, Refactor? ??? 3?? ??? ????.

??? - ??? ??? ?? ???? ?????. ?? ??? ???? ????? ? ???? ???? ?????.

?? - ???? ???? ? ??? ?? ??? ?????.
???? - ??? ???? ?? ??? ???? ????? ???? ?? ????? ???.

React?? ??? ?? ????? ???? ?? ?? TDD? ??? ?????.

?: React?? ?? ?? ??? ?? TDD ??
1??: ??? ?? ??

????? ??? ?????.

UI ???? ??? ?? React
??? ?? ? ??? ?? Jest ? React ??? ?????

# Install dependencies
npx create-react-app tdd-search-component
cd tdd-search-component
npm install @testing-library/react

2??: ??? ?? – ??? ??? ??

??? ??? ???? ?? ??? ????? ?? ?? ??? ????? ??? ?????. ?? ??? ??? ???? ?????? ???? ???? ???? ??? ???????.

// Search.test.js
import { render, screen, fireEvent } from "@testing-library/react";
import Search from "./Search";

test("filters items based on the search query", () => {
  const items = ["apple", "banana", "cherry"];
  render(<Search items={items} />);

  // Ensure all items are rendered initially
  items.forEach(item => {
    expect(screen.getByText(item)).toBeInTheDocument();
  });

  // Type in the search box
  fireEvent.change(screen.getByRole("textbox"), { target: { value: "a" } });

  // Check that only items containing "a" are displayed
  expect(screen.getByText("apple")).toBeInTheDocument();
  expect(screen.getByText("banana")).toBeInTheDocument();
  expect(screen.queryByText("cherry")).not.toBeInTheDocument();
});

??? ?? ?? ??? ????.

?? ??? ?? ?? ??? ??????.
???? "a"? ???? ?????.
???? ??? ????? ?????.

?? ?? ?? ??? ???? ??? ??? ?? ???? ???? ???? ???. '??' ?????.

3??: ??? ?? – ??? ??? ?? ?? ?? ??

?? ?? ?? ??? ??? ???? ???? ? ??? ???? ??? ??? ?????.

# Install dependencies
npx create-react-app tdd-search-component
cd tdd-search-component
npm install @testing-library/react

? ?????:

useState? ???? ???? ?????.
??? ???? ?? ??? ??????.
??? ???? ??? ??????.

?? ???? ???? ??? ??? ?? '??' ??? ???.

4??: ???? – ?? ?? ? ??? ??

???? ???? ?? ?? ??? ??? ? ????. ?? ?????? ??? ??? ??? ??? ???? ?? ??? ?? ????? ??? ??? ? ????.

// Search.test.js
import { render, screen, fireEvent } from "@testing-library/react";
import Search from "./Search";

test("filters items based on the search query", () => {
  const items = ["apple", "banana", "cherry"];
  render(<Search items={items} />);

  // Ensure all items are rendered initially
  items.forEach(item => {
    expect(screen.getByText(item)).toBeInTheDocument();
  });

  // Type in the search box
  fireEvent.change(screen.getByRole("textbox"), { target: { value: "a" } });

  // Check that only items containing "a" are displayed
  expect(screen.getByText("apple")).toBeInTheDocument();
  expect(screen.getByText("banana")).toBeInTheDocument();
  expect(screen.queryByText("cherry")).not.toBeInTheDocument();
});

????? ???? ??? ? ????? ??? ??? ???? ? ??????. ???? ???? ?? ??? ??? ???? ????? ??? ? ????.

Edge Case ??? ?? TDD

TDD??? ???? ??? ???? ?? ?????. ???? ? ?? ???? ???? ??? ?? ???? ?? ??? ???? ?? ???? ??? ? ????.
?: ?? ??? ???

// Search.js
import React, { useState } from "react";

function Search({ items }) {
  const [query, setQuery] = useState("");

  const filteredItems = items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {filteredItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default Search;

??? ???? ?? ?? ??? ????? ????? ?? ?? ??? ? ??? ?????.

??? ????? ??? TDD

????? ??????? API?? ??? ????? ?? ??? ??? ???? ??? ????. ???? TDD? ??? ? ??? ????? ??? ??? ???? ???.
?: ??? ?? ?? ?? ???

?? ?? ??? ???? ???? ?? ?? API?? ????? ??? ?????.

// Refactored Search.js
import React, { useState } from "react";

function filterItems(items, query) {
  return items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );
}

function Search({ items }) {
  const [query, setQuery] = useState("");
  const filteredItems = filterItems(items, query);

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <ul>
        {filteredItems.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default Search;

????? jest.fn()? ???? API ??? ??? ? ????.

test("displays no items if the search query doesn't match any items", () => {
  const items = ["apple", "banana", "cherry"];
  render(<Search items={items} />);

  // Type a query that doesn't match any items
  fireEvent.change(screen.getByRole("textbox"), { target: { value: "z" } });

  // Verify no items are displayed
  items.forEach(item => {
    expect(screen.queryByText(item)).not.toBeInTheDocument();
  });
});

test("renders correctly with an empty items array", () => {
  render(<Search items={[]} />);

  // Expect no list items to be displayed
  expect(screen.queryByRole("listitem")).not.toBeInTheDocument();
});

????? TDD ?? ??

?? ??: ?? ??? ???? ????? ???? ?????.
??? ??? ??: ???? ???? ?? ??? ????? ????? ???.
??? ?? ?? ???: ??? ??, ?? ? ?? ?? ??? ?????.
Cover Edge Cases: ??????? ????? ???? ??? ???? ????? ?????.
??? ???? ?? API: ??? ?? ?? ???? ?? ???? ??? ?? ?? API ??.

??

??? ?? ??? ?? ?? ??, ?? ??, ??? ?? ? ????? ??? ??? ??? ?????. TDD?? ????? ??? ??? ????? ?? ??? ??? ?? ??? ??? ??? ??? ??? ? ??? ??? ???. TDD ????(Red, Green, Refactor)? ??? ????? ?? ????? ???? ?? ????? ?? ??? ???? ??? ???? ??? ?? ??????? ??? ? ??? ???.

? ??? ?????? ??? ?? ??(TDD).? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!