/*
  RTL's core philosophy prioritizes testing from the user's perspective.
  This means querying elements based on how a user would find them on the screen,
  rather than their internal implementation details (like class names or IDs).
  This approach leads to more stable, maintainable, and accessible tests.
*/

// MyComponent.jsx
import React from 'react';

const MyComponent = ({ title, description, onClick }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      <button onClick={onClick}>Activate Feature</button>
    </div>
  );
};

export default MyComponent;

// MyComponent.test.jsx (Basic setup - query selection will evolve)
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders MyComponent with title, description, and an interactive button',
  () => {
    render(
      <MyComponent
        title="Welcome Dashboard"
        description="Manage your account efficiently."
        onClick={() => {}}
      />
    );

    // We initially confirm elements are present based on user-perceivable text.
    // Subsequent sections refine this with ByRole for higher robustness.
    expect(screen.getByText(/welcome dashboard/i)).toBeInTheDocument();
    expect(screen.getByText(/manage your account efficiently/i)).toBeInTheDocument();
    expect(screen.getByText(/activate feature/i)).toBeInTheDocument();
  }
);

/*
  ByRole is the primary and most recommended query method in RTL.
  It queries elements based on their ARIA role, or implicit semantic HTML role.
  Using the 'name' option allows us to precisely target elements by their accessible name,
  which is how assistive technologies identify them.
*/

// LoginForm.jsx
import React from 'react';

const LoginForm = () => {
  return (
    <form>
      <h2>User Login</h2>
      <label htmlFor="username-input">Username</label>
      <input id="username-input" type="text" placeholder="Enter username" />
      <label htmlFor="password-input">Password</label>
      <input id="password-input" type="password" placeholder="Enter password" />
      <button type="submit" aria-label="Submit credentials">Log In</button>
      <a href="/reset-password">Forgot Password?</a>
    </form>
  );
};

export default LoginForm;

// LoginForm.test.jsx
import { render, screen } from '@testing-library/react';
import LoginForm from './LoginForm';

test('successfully identifies form elements by their role and accessible name',
  () => {
    render(<LoginForm />);

    // Querying the heading by role and accessible name (text content of h2)
    const pageHeading = screen.getByRole('heading', { name: /user login/i });
    expect(pageHeading).toBeInTheDocument();

    // Querying input fields by role ('textbox') and their associated label's text (accessible name)
    const usernameInput = screen.getByRole('textbox', { name: /username/i });
    expect(usernameInput).toBeInTheDocument();
    expect(usernameInput).toHaveAttribute('id', 'username-input');

    const passwordInput = screen.getByRole('textbox', { name: /password/i });
    expect(passwordInput).toBeInTheDocument();
    expect(passwordInput).toHaveAttribute('id', 'password-input');

    // Querying the button by role ('button') and its accessible name.
    // Note: The accessible name for this button comes from 'aria-label', not its text content, for demonstration.
    // If aria-label was absent, it would derive from 'Log In'.
    const loginButton = screen.getByRole('button', { name: /submit credentials/i });
    expect(loginButton).toBeInTheDocument();
    expect(loginButton).toHaveTextContent('Log In'); // Still has visible text content

    // Querying the link by role ('link') and its text content (accessible name)
    const forgotPasswordLink = screen.getByRole('link', { name: /forgot password/i });
    expect(forgotPasswordLink).toBeInTheDocument();
    expect(forgotPasswordLink).toHaveAttribute('href', '/reset-password');

    // We can also query for specific properties of roles, e.g., level for headings
    const h2Element = screen.getByRole('heading', { level: 2, name: /user login/i });
    expect(h2Element).toBeInTheDocument();
  }
);

/*
  While ByRole is paramount, ByText and ByLabelText serve as critical strategic fallbacks.
  ByText is ideal for static, non-interactive content like paragraphs or div-based messages.
  ByLabelText specifically targets form controls via their associated labels, offering
  a robust alternative to ByRole when explicit label association is present.
*/

// UserMessageBoard.jsx
import React from 'react';

const UserMessageBoard = () => {
  return (
    <div>
      <p>Welcome, Administrator!</p>
      <div aria-label="Important Notice">Your session expires in 5 minutes.</div>
      <label htmlFor="agree-terms">I agree to the terms and conditions</label>
      <input id="agree-terms" type="checkbox" />
      <button>Continue</button>
      <span>New messages available.</span>
    </div>
  );
};

export default UserMessageBoard;

// UserMessageBoard.test.jsx
import { render, screen } from '@testing-library/react';
import UserMessageBoard from './UserMessageBoard';

test('verifies text content and interacts with labeled form elements',
  () => {
    render(<UserMessageBoard />);

    // Using ByText for non-interactive text content.
    // This is useful for paragraphs, spans, or generic divs that carry important textual information.
    const welcomeMessage = screen.getByText(/welcome, administrator!/i);
    expect(welcomeMessage).toBeInTheDocument();

    const newMessagesInfo = screen.getByText(/new messages available/i);
    expect(newMessagesInfo).toBeInTheDocument();

    // Using ByLabelText for a form control. It finds the label first, then its associated input.
    const termsCheckbox = screen.getByLabelText(/i agree to the terms and conditions/i);
    expect(termsCheckbox).toBeInTheDocument();
    expect(termsCheckbox).toHaveAttribute('type', 'checkbox');

    // Demonstrating that an element with aria-label can still be found by its accessible name,
    // even if it's a generic div, using ByRole or a combination if a role is implied.
    // For this generic div with aria-label, ByRole 'generic' might work in some browsers/versions,
    // but a more robust approach is often ByText or ByLabelText if applicable to form controls.
    // In this specific case, 'getByText' would match the visible content, and 'getByLabelText' is not applicable.
    // If this div had an implicit role (e.g., role='status'), ByRole would be the first choice.
    // Since it's a generic div with an aria-label but no semantic role, we'd typically rely on text or a data-testid if text is too generic.
    // For demonstration, let's assume we expect the content to be visible.
    const sessionNoticeText = screen.getByText(/your session expires in 5 minutes./i);
    expect(sessionNoticeText).toBeInTheDocument();

    // The 'Continue' button can still be found by role as it's an interactive element.
    const continueButton = screen.getByRole('button', { name: /continue/i });
    expect(continueButton).toBeInTheDocument();
  }
);

/*
  We engineer maximum robustness into our tests by understanding advanced query strategies
  and consciously avoiding common pitfalls. This includes the judicious use of data-testid,
  comprehending query variants (get, query, find), and managing multiple elements.
*/

// ProductGrid.jsx
import React from 'react';

const ProductCard = ({ product }) => (
  <div data-testid="product-card" aria-label={`Product: ${product.name}`}>
    <img src={product.image} alt={product.name} />
    <h3>{product.name}</h3>
    <p>{product.price}</p>
    <button aria-labelledby={`add-to-cart-${product.id}`}>Add to Cart</button>
  </div>
);

const ProductGrid = ({ products }) => {
  return (
    <section aria-labelledby="products-heading">
      <h2 id="products-heading">Our Products</h2>
      <div className="product-list">
        {products.map(product => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
      <button>Load More</button>
    </section>
  );
};

export default ProductGrid;

// ProductGrid.test.jsx
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import ProductGrid from './ProductGrid';

const mockProducts = [
  { id: '1', name: 'Laptop Pro', price: '$1200', image: '/laptop.jpg' },
  { id: '2', name: 'Keyboard Max', price: '$150', image: '/keyboard.jpg' },
];

test('displays a grid of products and handles interactions', async () => {
  const user = userEvent.setup();
  render(<ProductGrid products={mockProducts} />);

  // Using ByRole for the main heading and buttons
  const heading = screen.getByRole('heading', { name: /our products/i, level: 2 });
  expect(heading).toBeInTheDocument();

  // Querying multiple product cards using getAllByRole for generic elements with accessible names.
  // This queries the div with aria-label, effectively treating it as a 'generic' role by default
  // when no more specific role is present, and matching its accessible name.
  const productCards = screen.getAllByRole('generic', { name: /product:/i });
  expect(productCards).toHaveLength(2);
  expect(productCards[0]).toHaveAttribute('aria-label', 'Product: Laptop Pro');

  // Querying specific product images by alt text
  const laptopImage = screen.getByAltText(/laptop pro/i);
  expect(laptopImage).toBeInTheDocument();

  // Querying all 'Add to Cart' buttons using getAllByRole
  const addToCartButtons = screen.getAllByRole('button', { name: /add to cart/i });
  expect(addToCartButtons).toHaveLength(2);

  // Simulating interaction with a specific button
  await user.click(addToCartButtons[0]);
  // In a real scenario, we'd assert some state change or API call here.

  // Using queryByRole for an element that might not be present initially (e.g., dynamic content)
  const nonExistentElement = screen.queryByRole('alert');
  expect(nonExistentElement).toBeNull(); // Confirms it's not present without throwing

  // Example of using findBy for async elements (e.g., after data fetch)
  // If 'Load More' button appears after an async operation
  const loadMoreButton = screen.getByRole('button', { name: /load more/i });
  expect(loadMoreButton).toBeInTheDocument();
  // A real scenario would involve awaiting data load after clicking 'Load More'.

  // Last resort: using data-testid for an internal element if no other query works.
  // This is generally discouraged but provided for completeness.
  const firstProductCardById = screen.getAllByTestId('product-card')[0];
  expect(firstProductCardById).toBeInTheDocument();
});