@patternfly/react-core 5.2.0-prerelease.30 → 5.2.0-prerelease.31

package/src/components/TreeView/__tests__/TreeViewRoot.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TreeViewRoot } from '../TreeViewRoot';
+import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
+
+test('Renders children', () => {
+  render(
+    <TreeViewRoot>
+      <div className={styles.treeViewNode}>Content</div>
+    </TreeViewRoot>
+  );
+
+  expect(screen.getByText('Content')).toBeVisible();
+});
+
+test(`Renders with class ${styles.treeView} by default`, () => {
+  render(
+    <TreeViewRoot>
+      <div className={styles.treeViewNode}>Content</div>
+    </TreeViewRoot>
+  );
+
+  expect(screen.getByText('Content').parentElement).toHaveClass(styles.treeView, { exact: true });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(
+    <TreeViewRoot className="test-class">
+      <div className={styles.treeViewNode}>Content</div>
+    </TreeViewRoot>
+  );
+
+  expect(screen.getByText('Content').parentElement).toHaveClass('test-class');
+});
+
+test(`Renders with class ${styles.modifiers.guides} when hasGuides is passed`, () => {
+  render(
+    <TreeViewRoot hasGuides>
+      <div className={styles.treeViewNode}>Content</div>
+    </TreeViewRoot>
+  );
+
+  expect(screen.getByText('Content').parentElement).toHaveClass(styles.modifiers.guides);
+});
+
+test(`Does not render with additional classes when variant="default"`, () => {
+  render(
+    <TreeViewRoot variant="default">
+      <div className={styles.treeViewNode}>Content</div>
+    </TreeViewRoot>
+  );
+
+  expect(screen.getByText('Content').parentElement).toHaveClass(styles.treeView, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.compact} when variant="compact"`, () => {
+  render(
+    <TreeViewRoot variant="compact">
+      <div className={styles.treeViewNode}>Content</div>
+    </TreeViewRoot>
+  );
+
+  expect(screen.getByText('Content').parentElement).toHaveClass(styles.modifiers.compact);
+});
+
+test(`Renders with classes ${styles.modifiers.compact} and ${styles.modifiers.noBackground} when variant="compactNoBackground"`, () => {
+  render(
+    <TreeViewRoot variant="compactNoBackground">
+      <div className={styles.treeViewNode}>Content</div>
+    </TreeViewRoot>
+  );
+
+  expect(screen.getByText('Content').parentElement).toHaveClass(
+    styles.modifiers.compact,
+    styles.modifiers.noBackground
+  );
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(
+    <TreeViewRoot>
+      <div className={styles.treeViewNode}>Content</div>
+    </TreeViewRoot>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/TreeView/__tests__/TreeViewSearch.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TreeViewSearch } from '../TreeViewSearch';
+import userEvent from '@testing-library/user-event';
+import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
+
+test(`Renders with ${styles.treeViewSearch} by default`, () => {
+  render(<TreeViewSearch />);
+
+  expect(screen.getByRole('searchbox').parentElement?.parentElement).toHaveClass(styles.treeViewSearch, {
+    exact: true
+  });
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<TreeViewSearch className="test-class" />);
+
+  expect(screen.getByRole('searchbox').parentElement?.parentElement).toHaveClass('test-class');
+});
+
+test(`Renders with id when passed`, () => {
+  render(<TreeViewSearch id="test-id" />);
+
+  expect(screen.getByRole('searchbox')).toHaveAttribute('id', 'test-id');
+});
+
+test(`Does not render with id when it is not passed`, () => {
+  render(<TreeViewSearch />);
+
+  expect(screen.getByRole('searchbox')).not.toHaveAttribute('id');
+});
+
+test(`Renders with name when passed`, () => {
+  render(<TreeViewSearch name="testName" />);
+
+  expect(screen.getByRole('searchbox')).toHaveAttribute('name', 'testName');
+});
+
+test(`Does not render with name when it is not passed`, () => {
+  render(<TreeViewSearch />);
+
+  expect(screen.getByRole('searchbox')).not.toHaveAttribute('name');
+});
+
+test(`Renders with aria-label when passed`, () => {
+  render(<TreeViewSearch aria-label="test label" />);
+
+  expect(screen.getByRole('searchbox')).toHaveAccessibleName('test label');
+});
+
+test(`Does not render with aria-label when it is not passed`, () => {
+  render(<TreeViewSearch />);
+
+  expect(screen.getByRole('searchbox')).not.toHaveAccessibleName();
+});
+
+test(`Spreads additional props`, () => {
+  render(<TreeViewSearch data-testprop="test-value" />);
+
+  expect(screen.getByRole('searchbox')).toHaveAttribute('data-testprop', 'test-value');
+});
+
+test(`Calls onSearch when input is typed into`, async () => {
+  const user = userEvent.setup();
+  const onSearchMock = jest.fn();
+  render(<TreeViewSearch onSearch={onSearchMock} />);
+
+  await user.type(screen.getByRole('searchbox'), 'a');
+
+  expect(onSearchMock).toHaveBeenCalledTimes(1);
+});
+
+test(`Does not call onSearch when input is not typed into`, async () => {
+  const user = userEvent.setup();
+  const onSearchMock = jest.fn();
+
+  render(
+    <>
+      <TreeViewSearch />
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.type(screen.getByRole('textbox'), 'a');
+
+  expect(onSearchMock).not.toHaveBeenCalled();
+});
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<TreeViewSearch />);
+
+  expect(asFragment()).toMatchSnapshot();
+});