Debugging Utilities

function prettyDOM(
  dom?: Element | HTMLDocument,
  maxLength?: number,
  options?: PrettyDOMOptions
): string | false;

interface PrettyDOMOptions {
  filterNode?: (node: Node) => boolean;
  // Also includes all pretty-format options
}

import {prettyDOM, screen} from '@testing-library/dom';

// Pretty print entire body
console.log(prettyDOM());

// Specific element
const form = screen.getByRole('form');
console.log(prettyDOM(form));

// With custom filter
const output = prettyDOM(document.body, 10000, {
  filterNode: (node) => node.nodeType === 1  // Only elements
});

// In test assertions
const button = screen.queryByRole('button');
if (!button) {
  console.log('Current DOM:', prettyDOM());
  throw new Error('Button not found');
}

function logDOM(
  dom?: Element | HTMLDocument,
  maxLength?: number,
  options?: PrettyDOMOptions
): void;

import {logDOM} from '@testing-library/dom';

// Log entire body
logDOM();

// Specific element
const modal = screen.getByRole('dialog');
logDOM(modal);

// With filter
logDOM(document.body, 10000, {
  filterNode: (node) => node.nodeType === 1
});

interface Screen {
  debug(
    element?: Element | HTMLDocument | Array<Element | HTMLDocument>,
    maxLength?: number,
    options?: PrettyDOMOptions
  ): void;
}

import {screen} from '@testing-library/dom';

// Debug entire document
screen.debug();

// Debug specific element
const form = screen.getByRole('form');
screen.debug(form);

// Debug multiple elements
const buttons = screen.getAllByRole('button');
screen.debug(buttons);

// In test
test('form validation', () => {
  screen.debug();  // See initial state
  fireEvent.submit(form);
  screen.debug();  // See state after submit
});

interface Screen {
  logTestingPlaygroundURL(element?: Element | HTMLDocument): string;
}

// Get URL for entire document
const url = screen.logTestingPlaygroundURL();
console.log('Open in browser:', url);

// For specific element
const container = screen.getByTestId('app');
const url = screen.logTestingPlaygroundURL(container);

test('finds button', () => {
  try {
    screen.getByRole('button', {name: /submit/i});
  } catch (error) {
    screen.debug();  // Log current DOM
    throw error;
  }
});

const input = screen.getByLabelText('Email');

console.log('Initial state:');
screen.debug(input);

fireEvent.change(input, {target: {value: 'test@example.com'}});

console.log('After change:');
screen.debug(input);

fireEvent.click(screen.getByRole('button', {name: /load/i}));

console.log('After click:');
screen.debug();

await waitFor(() => {
  expect(screen.getByText('Loaded')).toBeInTheDocument();
});

console.log('After load:');
screen.debug();

function debugWithTime(element) {
  console.log(`[${new Date().toISOString()}]`);
  console.log(prettyDOM(element));
}