{"size": 6397, "ext": "js", "max_stars_repo_path": "packages/cloud-cognitive/src/components/CreateModal/CreateModal.test.js", "max_stars_repo_name": "davidmenendez/ibm-cloud-paks", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/cloud-cognitive/src/components/CreateModal/CreateModal.test.js", "max_issues_repo_name": "davidmenendez/ibm-cloud-paks", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "packages/cloud-cognitive/src/components/CreateModal/CreateModal.test.js", "max_forks_repo_name": "davidmenendez/ibm-cloud-paks", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 29.8925233645, "max_line_length": 88, "alphanum_fraction": 0.6365483821}
/**
 * Copyright IBM Corp. 2021, 2021
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { TextInput } from 'carbon-components-react';

import { pkg } from '../../settings';

import uuidv4 from '../../global/js/utils/uuidv4';

const { devtoolsAttribute, getDevtoolsId, prefix } = pkg;

const blockClass = `${prefix}--create-modal`;

import { CreateModal } from '.';
const componentName = CreateModal.displayName;

const className = `class-${uuidv4()}`;
const title = 'This is a test title';
const subtitle = 'This is a test subtitle';
const description =
  'This is a test description. It has several lines. It should render a modal.';
const selectorPrimaryFocus = '.bx--text-input';
const dataTestId = uuidv4();

// render a CreateModal with title, subtitle, description, and any other required props
const renderComponent = ({ ...rest }, children) =>
  render(
    <CreateModal
      open
      {...{
        title,
        subtitle,
        description,
        selectorPrimaryFocus,
        disableSubmit: false,
        primaryButtonText: 'Create',
        secondaryButtonText: 'Cancel',
        ...rest,
      }}
    >
      {children}
    </CreateModal>
  );

describe(componentName, () => {
  it('renders a component CreateModal', () => {
    renderComponent();
    expect(screen.getByRole('presentation')).toHaveClass(blockClass);
  });

  it('renders title', () => {
    renderComponent();
    expect(screen.getByText(title)).toBeTruthy();
  });

  it('renders description', () => {
    renderComponent();
    expect(screen.getByText(description)).toBeTruthy();
  });

  it('renders subtitle', () => {
    renderComponent();
    expect(screen.getByText(subtitle)).toBeTruthy();
  });

  it('applies className to the root node', () => {
    renderComponent({ className });
    expect(screen.getByRole('presentation')).toHaveClass(className);
  });

  it('is visible when open is true', () => {
    renderComponent({ open: true });
    expect(screen.getByRole('presentation')).toHaveClass('is-visible');
  });

  it('is not visible when open is not true', () => {
    renderComponent({ open: false });
    expect(screen.getByRole('presentation')).not.toHaveClass('is-visible');
  });

  it('forwards a ref to an appropriate node', () => {
    const ref = React.createRef();
    renderComponent({ ref });
    expect(ref.current.outerModal.current).toHaveClass(blockClass);
  });

  it('adds additional properties to the containing node', () => {
    renderComponent({ 'data-testid': dataTestId });
    screen.getByTestId(dataTestId);
  });

  it('adds the Devtools attribute to the containing node', () => {
    renderComponent({ 'data-testid': dataTestId });

    expect(screen.getByTestId(dataTestId)).toHaveAttribute(
      devtoolsAttribute,
      getDevtoolsId(componentName)
    );
  });

  it('has no accessibility violations', async () => {
    const { container } = renderComponent();
    await expect(container).toBeAccessible(componentName, 'scan_label');
    await expect(container).toHaveNoAxeViolations();
  }, 80000);

  it('calls onRequestSubmit() when primary button is clicked', () => {
    const primaryHandler = jest.fn();
    renderComponent({
      onRequestSubmit: primaryHandler,
    });
    userEvent.click(screen.getByRole('button', { name: 'Create' }));
    expect(primaryHandler).toBeCalledTimes(1);
  });

  it('calls onRequestClose() when secondary button is clicked', () => {
    const secondaryHandler = jest.fn();
    renderComponent({
      onRequestClose: secondaryHandler,
    });
    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
    expect(secondaryHandler).toBeCalledTimes(1);
  });

  it('notifies a click on each button', () => {
    const primaryHandler = jest.fn();
    const secondaryHandler = jest.fn();
    renderComponent({
      onRequestSubmit: primaryHandler,
      onRequestClose: secondaryHandler,
    });
    userEvent.click(screen.getByRole('button', { name: 'Create' }));
    expect(primaryHandler).toBeCalledTimes(1);
    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
    expect(secondaryHandler).toBeCalledTimes(1);
  });

  it('disables primary focus button when `disableSubmit` prop is provided', () => {
    renderComponent({ disableSubmit: true, primaryButtonText: 'Create' });
    const submitButton = screen.getByRole('button', { name: 'Create' });
    const isDisabled = submitButton.className.includes('disabled');
    expect(isDisabled).toBeTruthy();
  });

  it('applies focus to selected element', () => {
    const { container } = renderComponent(
      { selectorPrimaryFocus },
      <TextInput
        key="form-field-1"
        id="1"
        labelText="Text input label"
        helperText="Helper text goes here"
        placeholder="Placeholder"
      />
    );
    const firstInput = container.querySelector(selectorPrimaryFocus);
    expect(firstInput === document.activeElement).toBeTruthy();
  });

  it('throws an error if there are more than 4 child nodes inside of the modal', () => {
    const error = jest.spyOn(console, 'error').mockImplementation(() => {});

    const { container } = renderComponent({}, [
      <TextInput
        key="form-field-1"
        id="1"
        labelText="Text input label"
        helperText="Helper text goes here"
        placeholder="Placeholder"
      />,
      <TextInput
        key="form-field-2"
        id="2"
        labelText="Text input label"
        helperText="Helper text goes here"
        placeholder="Placeholder"
      />,
      <TextInput
        key="form-field-3"
        id="3"
        labelText="Text input label"
        helperText="Helper text goes here"
        placeholder="Placeholder"
      />,
      <TextInput
        key="form-field-4"
        id="4"
        labelText="Text input label"
        helperText="Helper text goes here"
        placeholder="Placeholder"
      />,
      <TextInput
        key="form-field-5"
        id="5"
        labelText="Text input label"
        helperText="Helper text goes here"
        placeholder="Placeholder"
      />,
    ]);
    expect(() => {
      render(...container);
    }).toThrow();

    error.mockRestore();
  });
});
