patternfly · nicolethoen · Jul 11, 2022 · Jun 28, 2022 · Jun 28, 2022 · Jul 8, 2022
diff --git a/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx b/packages/react-core/src/components/Hint/__tests__/Hint.test.tsx
@@ -1,17 +1,70 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Hint } from '../Hint';
-import { HintBody } from '../HintBody';
-import { HintTitle } from '../HintTitle';
-import { HintFooter } from '../HintFooter';
 
-test('simple hint', () => {
+test('renders without children', () => {
+  render(<Hint data-testid='Hint' />);
+
+  expect(screen.getByTestId('Hint')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<Hint>Test</Hint>);
+
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('renders with class pf-c-hint', () => {
+  render(<Hint>Test</Hint>);
+
+  const hint = screen.getByText('Test');
+
+  expect(hint).toHaveClass('pf-c-hint');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<Hint className='custom-classname'>Test</Hint>);
+
+  const hint = screen.getByText('Test');
+
+  expect(hint).toHaveClass('custom-classname');
+});
+
+test('does not render actions options when not passed', () => {
+  render(<Hint>Test</Hint>);
+
+  const actions = screen.queryByText('actions');
+
+  expect(actions).not.toBeInTheDocument();
+});
+
+test('renders actions options', () => {
+  render(<Hint actions="actions">Test</Hint>);
+
+  const actions = screen.getByText("actions");
+
+  expect(actions).toBeVisible();
+});
+
+test('renders with class pf-c-hint__actions if there is an action prop', () => {
+  render(<Hint actions="actions">Test</Hint>);
+
+  const hint = screen.getByText('actions');
+
+  expect(hint).toHaveClass('pf-c-hint__actions');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <Hint aria-label="labelling-id">Test</Hint>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches hint snapshot', () => {
   const { asFragment } = render(
-    <Hint>
-      <HintTitle>Title</HintTitle>
-      <HintBody>Body</HintBody>
-      <HintFooter>Footer</HintFooter>
-    </Hint>
+    <Hint />
   );
   expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Hint/__tests__/HintBody.test.tsx b/packages/react-core/src/components/Hint/__tests__/HintBody.test.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { HintBody } from "../HintBody";
+
+test('renders without children', () => {
+  render(<HintBody data-testid="HintBody"></HintBody>);
+
+  expect(screen.getByTestId('HintBody')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<HintBody>{<button>Test Me</button>}</HintBody>);
+
+  expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
+});
+
+test('renders with class pf-c-hint__body', () => {
+  render(<HintBody>Hint Body Test</HintBody>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('pf-c-hint__body');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<HintBody className="custom-classname">Hint Body Test</HintBody>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('custom-classname');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <HintBody aria-label="labelling-id">Test</HintBody>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<HintBody>{<button>Test</button>}</HintBody>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Hint/__tests__/HintFooter.test.tsx b/packages/react-core/src/components/Hint/__tests__/HintFooter.test.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { HintFooter } from "../HintFooter";
+
+test('renders without children', () => {
+  render(<HintFooter data-testid="HintFooter"></HintFooter>);
+
+  expect(screen.getByTestId('HintFooter')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<HintFooter>{<button>Test Me</button>}</HintFooter>);
+
+  expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
+});
+
+test('renders with class pf-c-hint__footer', () => {
+  render(<HintFooter>Hint Body Test</HintFooter>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('pf-c-hint__footer');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<HintFooter className="custom-classname">Hint Body Test</HintFooter>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('custom-classname');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <HintFooter aria-label="labelling-id">Test</HintFooter>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<HintFooter>{<button>Test</button>}</HintFooter>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Hint/__tests__/HintTitle.test.tsx b/packages/react-core/src/components/Hint/__tests__/HintTitle.test.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { HintTitle } from "../HintTitle";
+
+test('renders without children', () => {
+  render(<HintTitle data-testid="HintTitle"></HintTitle>);
+
+  expect(screen.getByTestId('HintTitle')).toBeVisible();
+});
+
+test('renders children', () => {
+  render(<HintTitle>{<button>Test Me</button>}</HintTitle>);
+
+  expect(screen.getByRole('button', { name: 'Test Me' })).toBeVisible();
+});
+
+test('renders with class pf-c-hint__title', () => {
+  render(<HintTitle>Hint Body Test</HintTitle>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('pf-c-hint__title');
+});
+
+test('renders with custom class names provided via prop', () => {
+  render(<HintTitle className="custom-classname">Hint Body Test</HintTitle>);
+
+  const body = screen.getByText('Hint Body Test');
+
+  expect(body).toHaveClass('custom-classname');
+});
+
+test('renders with inherited element props spread to the component', () => {
+  render(
+    <HintTitle aria-label="labelling-id">Test</HintTitle>
+  );
+
+  expect(screen.getByText('Test')).toHaveAccessibleName('labelling-id');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<HintTitle>{<button>Test</button>}</HintTitle>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Hint/__tests__/__snapshots__/Hint.test.tsx.snap b/packages/react-core/src/components/Hint/__tests__/__snapshots__/Hint.test.tsx.snap
@@ -1,28 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`simple hint 1`] = `
+exports[`matches hint snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-hint"
   >
     <div
       class="pf-c-hint__actions"
     />
-    <div
-      class="pf-c-hint__title"
-    >
-      Title
-    </div>
-    <div
-      class="pf-c-hint__body"
-    >
-      Body
-    </div>
-    <div
-      class="pf-c-hint__footer"
-    >
-      Footer
-    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Hint/__tests__/__snapshots__/HintBody.test.tsx.snap b/packages/react-core/src/components/Hint/__tests__/__snapshots__/HintBody.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-hint__body"
+  >
+    <button>
+      Test
+    </button>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Hint/__tests__/__snapshots__/HintFooter.test.tsx.snap b/packages/react-core/src/components/Hint/__tests__/__snapshots__/HintFooter.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-hint__footer"
+  >
+    <button>
+      Test
+    </button>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Hint/__tests__/__snapshots__/HintTitle.test.tsx.snap b/packages/react-core/src/components/Hint/__tests__/__snapshots__/HintTitle.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-hint__title"
+  >
+    <button>
+      Test
+    </button>
+  </div>
+</DocumentFragment>
+`;