How to use @leafygreen-ui/lib - 10 common examples

describe('packages/Syntax', () => {
  const { container } = render(
    
      {codeSnippet}
    ,
  );

  const code = container.firstChild as HTMLElement;

  if (!code || !typeIs.element(code)) {
    throw new Error('Code element not found');
  }

  test(`renders "${className}" in the code element's classList`, () => {
    expect(code.classList.contains(className)).toBe(true);
  });

  test("doesn't highlight code when language is 'none'", () => {
    // Text nodes in HTMLCollections are ignored since they are not considered "elements",
    // so we check that children is empty here since we expect a text node to be rendered.
    //
    // https://www.w3.org/TR/domcore/#concept-element
    expect(code.children.length).toBe(0);
  });

  test("highlights code when language is 'javascript'", () => {

export const Size = {
  Default: 'default',
  Small: 'small',
  XSmall: 'xsmall',
} as const;

export type Size = typeof Size[keyof typeof Size];

export const Variant = {
  Default: 'default',
  Dark: 'dark',
} as const;

export type Variant = typeof Variant[keyof typeof Variant];

const toggleInput = createDataProp('toggle-input');
const toggleGroove = createDataProp('toggle-groove');

const transitionInMS = 150;
const focusRing = 3;

const inputStyle = css`
  margin: 0;
  position: absolute;
  left: 100%;
  top: 100%;
  pointer-events: none;
  opacity: 0;
`;

// We use a div for the focus state rather than a pseudo-element
// because said pseudo-element would need to be on the label element

Default: 'default',
  Small: 'small',
  XSmall: 'xsmall',
} as const;

export type Size = typeof Size[keyof typeof Size];

export const Variant = {
  Default: 'default',
  Dark: 'dark',
} as const;

export type Variant = typeof Variant[keyof typeof Variant];

const toggleInput = createDataProp('toggle-input');
const toggleGroove = createDataProp('toggle-groove');

const transitionInMS = 150;
const focusRing = 3;

const inputStyle = css`
  margin: 0;
  position: absolute;
  left: 100%;
  top: 100%;
  pointer-events: none;
  opacity: 0;
`;

// We use a div for the focus state rather than a pseudo-element
// because said pseudo-element would need to be on the label element
// which can't use the contained input's focus pseudo-class.

describe('packages/Syntax', () => {
  const { container } = render(
    ,
  );

  const rootElement = container.firstChild as HTMLElement;

  if (!rootElement || !typeIs.element(rootElement)) {
    throw new Error('Code element not found');
  }

  test(`renders "${className}" in the root element's classList`, () => {
    expect(rootElement.classList.contains(className)).toBe(true);
  });

  test(`renders ${lineCount} line numbers`, () => {
    expect(rootElement.children.length).toBe(lineCount);
  });
});

describe('packages/RadioBoxGroup', () => {
  const { container } = render(
    
      Input 1
      <h1>Will Remain As Text</h1>
      Input 2
    ,
  );

  const radioBoxGroupContainer = container.firstChild;

  if (!typeIs.element(radioBoxGroupContainer)) {
    throw new Error('Could not find radio box group container element');
  }

  const text = radioBoxGroupContainer.children[1];

  test('renders children of Radio Box Group, that are not themselves Radio Boxes, as is, without converting them to RadioBoxes', () =&gt; {
    expect(text.tagName.toLowerCase()).toBe('h1');
  });

  describe('when controlled', () =&gt; {
    const controlledOnChange = jest.fn();

    render(
      
        Option 1
        Option 2

render(
      
        Option 1
      ,
      { container },
    );

    const radioBoxGroup = container.firstChild;

    if (!typeIs.element(radioBoxGroup)) {
      throw new Error('Could not find radio box group element');
    }

    const radioBoxLabel = radioBoxGroup.firstChild;

    if (!typeIs.element(radioBoxLabel)) {
      throw new Error('Could not find label element');
    }

    const radioBoxInput = radioBoxLabel.firstChild;

    if (!typeIs.input(radioBoxInput)) {
      throw new Error('Could not find radio box input element');
    }

    fireEvent.click(radioBoxLabel);

    test('onChange fires once when the label is clicked', () => {
      expect(uncontrolledOnChange.mock.calls.length).toBe(1);
    });

    test('radio box becomes checked when clicked', () => {

describe('when uncontrolled', () => {
    const uncontrolledOnClick = jest.fn();
    const uncontrolledOnChange = jest.fn();
    const uncontrolledContainer = render(
      ,
    ).container.firstChild;

    if (!typeIs.element(uncontrolledContainer)) {
      throw new Error('Could not find uncontrolled container element');
    }

    const uncontrolledCheckbox = uncontrolledContainer.children[0];

    if (!typeIs.input(uncontrolledCheckbox)) {
      throw new Error('Could not find uncontrolled checkbox input element');
    }

    fireEvent.click(uncontrolledContainer);

    test('onClick fires once when the label is clicked', () => {
      expect(uncontrolledOnClick.mock.calls.length).toBe(1);
    });

    test('onChange fires once when the label is clicked', () => {

test('renders as disabled, when the disabled prop is set', () => {
    const { container } = render(
      
        Input 2
      ,
    );

    const radioBoxContainer = container.firstChild;

    if (!typeIs.element(radioBoxContainer)) {
      throw new Error('Could not find radio box container element');
    }

    const radioBox = radioBoxContainer.firstChild;

    if (!typeIs.input(radioBox)) {
      throw new Error('Could not find radio box input element');
    }

    expect(radioBox.getAttribute('aria-disabled')).toBe('true');
  });
});

Option 1
        Option 2
      ,
      { container },
    );

    const radioBoxGroup = container.firstChild;

    if (!typeIs.element(radioBoxGroup)) {
      throw new Error('Could not find radio box group element');
    }

    const firstRadioBoxLabel = radioBoxGroup.firstChild;

    if (!typeIs.element(firstRadioBoxLabel)) {
      throw new Error('Could not find label element');
    }

    const firstRadioBoxInput = firstRadioBoxLabel.firstChild;
    const secondRadioBoxInput = radioBoxGroup.children[1].firstChild;

    if (
      !typeIs.input(firstRadioBoxInput) ||
      !typeIs.input(secondRadioBoxInput)
    ) {
      throw new Error('Could not find input element');
    }

    fireEvent.click(secondRadioBoxInput);

    test('initial value set by radio box group when prop provided', () => {

describe('packages/Radio', () => {
  const className = 'radio-test-class';
  const { container } = render(
    
      Radio 1
    ,
  );

  const radio = container.firstChild;

  if (!typeIs.element(radio)) {
    throw new Error('Could not find controlled container component');
  }

  const input = radio.firstChild;

  if (!typeIs.input(input)) {
    throw new Error('Could not find input element');
  }

  test(`renders "${className}" in the labels's class list`, () => {
    expect(radio.classList.contains(className)).toBe(true);
  });

  test(`renders disabled radio when disabled prop is set`, () => {
    expect(input.disabled).toBe(true);
    expect(input.getAttribute('aria-disabled')).toBe('true');