Testing utilities reference

import { createRenderer } from '@hubspot/ui-extensions/testing';

import { Button } from "@hubspot/ui-extensions";
import { createRenderer } from '@hubspot/ui-extensions/testing';

const { render } = createRenderer('crm.record.tab');
render(<Button variant="primary">Click me</Button>);

const { render, findByTestId } = createRenderer('crm.record.tab');
render(
  <>
    <Button variant="primary" testId="submit-button">Submit</Button>
    <Button variant="secondary" testId="cancel-button">Cancel</Button>
  </>
);

const submitButton = findByTestId(Button, 'submit-button');
expect(submitButton.props.variant).toEqual('primary');

const { render, maybeFindByTestId } = createRenderer('crm.record.tab');
render(<Alert title="My Alert" testId="my-alert" />);

const button = maybeFindByTestId(Button, 'submit-button'); // Returns null
expect(button).toBeNull();

const alert = maybeFindByTestId(Alert, 'my-alert');
expect(alert?.props.title).toEqual('My Alert');

const renderer = createRenderer('crm.record.tab');

// Mock return value
renderer.mocks.useCrmProperties().nextResult({
  propertyName: { value: 'Test Value' }
});

// Check if called
expect(renderer.mocks.useCrmProperties().called).toBe(true);
expect(renderer.mocks.useCrmProperties().callCount).toBe(1);

// Check arguments
const [propertyNames] = renderer.mocks.useCrmProperties().calls[0];
expect(propertyNames).toEqual(['firstName', 'lastName']);

import { Alert, Button, Text, Box, Flex, /* etc. */ } from '@hubspot/ui-extensions';

const renderer = createRenderer('crm.record.tab');
renderer.render(<Button variant="primary">Click me</Button>);

const button = renderer.find(Button);
expect(button.props.variant).toBe('primary');

type RenderedNode =
  | RenderedElementNode<any>
  | RenderedRootNode
  | RenderedFragmentNode
  | RenderedTextNode;

enum RenderedNodeType {
  Root = 'root',
  Fragment = 'fragment',
  Element = 'element',
  Text = 'text',
}

// Match by partial props
const primaryButton = renderer.find(Button, { variant: 'primary' });

// Match using predicate function
const disabledButtons = renderer.findAll(
  Button,
  (node) => node.props.disabled === true
);

// Match by multiple props
const specificText = renderer.find(Text, {
  format: 'bold',
  variant: 'microcopy'
});

type ExtensionPointLocation =
  | 'crm.preview'
  | 'crm.record.sidebar'
  | 'crm.record.tab'
  | 'helpdesk.sidebar'
  | 'settings'
  | 'home';

// Creating a renderer for a CRM record tab extension
const renderer = createRenderer('crm.record.tab');

// Creating a renderer for a settings page extension
const settingsRenderer = createRenderer('settings');

// Creating a renderer for an app home extension
const homeRenderer = createRenderer('home');

import {
  isRenderedElementNode,
  isRenderedTextNode,
  isRenderedRootNode,
  isRenderedFragmentNode,
  isMatch
} from '@hubspot/ui-extensions/testing';

const nodes = renderer.getRootNode().childNodes;

for (const node of nodes) {
  if (isRenderedElementNode(node)) {
    // TypeScript knows node is RenderedElementNode here
    console.log(node.name, node.props);
  } else if (isRenderedTextNode(node)) {
    // TypeScript knows node is RenderedTextNode here
    console.log(node.text);
  }
}

// Using isMatch for component-specific type narrowing
const maybeButton = renderer.maybeFind(Button);
if (isMatch(maybeButton, Button, { variant: 'primary' })) {
  // TypeScript knows maybeButton is RenderedElementNode<ButtonProps>
  console.log(maybeButton.props.variant); // 'primary'
}