import { describe, test, render, expect } from 'react-native-harness';
import { screen } from '@react-native-harness/ui';
import { View, Text } from 'react-native';

describe('Element Queries', () => {
  test('find elements by testID', async () => {
    await render(
      <View>
        <Text testID="welcome-text">Welcome!</Text>
        <Text testID="subtitle">This is a test</Text>
      </View>
    );

    // These methods wait for the element and reject if it does not appear
    const welcomeText = await screen.findByTestId('welcome-text');
    const subtitle = await screen.findByTestId('subtitle');

    // These methods return null if no element is found
    const welcomeTextSafe = screen.queryByTestId('welcome-text');
    const allSubtitles = screen.queryAllByTestId('subtitle');
  });

  test('find elements by accessibility label', async () => {
    await render(
      <View>
        <Text accessibilityLabel="Main heading">Hello World</Text>
      </View>
    );

    const heading = await screen.findByAccessibilityLabel('Main heading');
  });
});

import { describe, test, render, expect } from 'react-native-harness';
import { screen } from '@react-native-harness/ui';
import { View, Text } from 'react-native';

describe('Screenshot Testing', () => {
  test('should match visual snapshot', async () => {
    await render(
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <View
          style={{
            width: 100,
            height: 100,
            backgroundColor: 'blue',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={{ color: 'white' }}>Hello, world!</Text>
        </View>
      </View>
    );

    const screenshot = await screen.screenshot();
    await expect(screenshot).toMatchImageSnapshot({ name: 'blue-square' });
  });
});

test('screenshot with custom options', async () => {
  await render(/* your component */);
  const screenshot = await screen.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    name: 'custom-screenshot',
    threshold: 0.05, // More sensitive comparison (0-1)
    failureThreshold: 0.01, // Minimum difference to trigger failure
    failureThresholdType: 'percent', // 'pixel' or 'percent'
    comparisonMethod: 'ssim', // 'pixelmatch' or 'ssim'
    ssimThreshold: 0.95, // SSIM similarity threshold (0-1)
    diffColor: [255, 0, 0], // RGB color for diff visualization
    ignoreRegions: [
      { x: 10, y: 10, width: 50, height: 50 }, // Ignore specific regions
    ],
  });
});

test('capture specific element', async () => {
  await render(
    <View>
      <View testID="header" style={{ backgroundColor: 'red', padding: 20 }}>
        <Text>Header</Text>
      </View>
      <View testID="content" style={{ backgroundColor: 'blue', padding: 20 }}>
        <Text>Content</Text>
      </View>
    </View>
  );

  const headerElement = await screen.findByTestId('header');
  const headerScreenshot = await screen.screenshot(headerElement);

  await expect(headerScreenshot).toMatchImageSnapshot({
    name: 'header-element',
  });
});

test('multiple screenshots', async () => {
  // Initial render
  await render(<MyComponent color="blue" />);
  const screenshot1 = await screen.screenshot();
  await expect(screenshot1).toMatchImageSnapshot({ name: 'blue-state' });

  // Update component
  await render(<MyComponent color="red" />);
  const screenshot2 = await screen.screenshot();
  await expect(screenshot2).toMatchImageSnapshot({ name: 'red-state' });
});

import { describe, test, render, expect, fn } from 'react-native-harness';
import { screen, userEvent } from '@react-native-harness/ui';

describe('User Interactions', () => {
  test('button press', async () => {
    const onPress = fn();

    await render(
      <TouchableOpacity testID="my-button" onPress={onPress}>
        <Text>Press me</Text>
      </TouchableOpacity>
    );

    const button = await screen.findByTestId('my-button');
    await userEvent.press(button);

    expect(onPress).toHaveBeenCalled();
  });

  test('text input', async () => {
    const onChangeText = fn();

    await render(
      <TextInput testID="username-input" onChangeText={onChangeText} />
    );

    const input = await screen.findByTestId('username-input');
    await userEvent.type(input, 'testuser');

    // onChangeText fires for each character, so the last call has the full text
    expect(onChangeText).toHaveBeenLastCalledWith('testuser');
  });
});

## Web Support

React Native Harness supports UI testing on the web using Playwright. When running tests on the web platform, the interaction logic is handled by a Playwright bridge that simulates real user events at the browser level.

### Interaction logic

- **Pressing**: Simulates a real mouse click at the element's coordinates using Playwright's mouse API.
- **Typing**: Simulates real keyboard input using Playwright's keyboard API. This ensures that all browser events (keydown, keypress, input, keyup) are fired correctly and picked up by React Native Web.
- **Blurring**: Supports blurring the active element, with an option to trigger "Submit" (Enter key) before blurring.

### Configuration

To use UI testing on web, make sure you have the `@react-native-harness/platform-web` package installed and configured in your `rn-harness.config.mjs`.

```javascript
import { webPlatform, chromium } from '@react-native-harness/platform-web';

export default {
  // ...
  runners: [
    webPlatform({
      name: 'web',
      browser: chromium('http://localhost:3000'),
    }),
  ],
};