ЯсноПонятно24

// src/components/product-list.test.tsx

import { render, fireEvent } from '@testing-library/react';
import ProductList from './product-list';

const products = [
  { id: 1, name: 'Product 1' },
  { id: 2, name: 'Product 2' },
  { id: 3, name: 'Product 3' },
];

const generateProductText = (product) => `Product: ${product.name}`;

describe('ProductList', () => {
  it('renders the correct number of products with correct text', () => {
    const { getAllByTestId } = render(<ProductList products={products} onDelete={() => {}} />);
    
    const productElements = getAllByTestId('product-item');
    
    expect(productElements.length).toBe(products.length);
    
    productElements.forEach((element, index) => {
      expect(element.textContent).toBe(generateProductText(products[index]));
    });
  });

  it('changes font size when slider value changes', () => {
    const { getByTestId, getAllByTestId } = render(<ProductList products={products} onDelete={() => {}} />);
    
    const slider = getByTestId('font-size-slider');
    fireEvent.change(slider, { target: { value: '20' } });
    
    const productElements = getAllByTestId('product-item');
    
    productElements.forEach((element) => {
      expect(element.style.fontSize).toBe('20px');
    });
  });

  it('deletes the last product when delete button is clicked', () => {
    const onDelete = jest.fn();
    const { getByTestId } = render(<ProductList products={products} onDelete={onDelete} />);
    
    const deleteButton = getByTestId('delete-button');
    fireEvent.click(deleteButton);
    
    expect(onDelete).toHaveBeenCalledTimes(1);
    expect(onDelete).toHaveBeenCalledWith(products[products.length - 1]);
  });
});