tests

Author: pondrejk

webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookTable/Components/Formatters/__tests__/__snapshots__/enabledCellFormatter.test.js.snap

@@ -1,7 +1,38 @@
-import { enabledCellFormatter } from '../index';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import enabledCellFormatter from '../enabledCellFormatter';
+
+jest.mock('@patternfly/react-icons', () => ({
+  CheckIcon: () => <span data-testid="check-icon" />,
+  BanIcon: () => <span data-testid="ban-icon" />,
+}));
+
+const renderCell = (value, extra) => {
+  const formatter = enabledCellFormatter();
+  const element = formatter(value, extra);
+  return render(element);
+};
 
 describe('enabledCellFormatter', () => {
-  it('render', () => {
-    expect(enabledCellFormatter()(true)).toMatchSnapshot();
+  it('uses the cell value when row context includes rowData and value is true', () => {
+    renderCell(true, { rowData: { id: 1, enabled: false } });
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+
+  it('uses the cell value when row context includes rowData and value is false', () => {
+    renderCell(false, { rowData: { id: 1, enabled: true } });
+    expect(screen.getByTestId('ban-icon')).toBeInTheDocument();
+  });
+
+  it('uses value.enabled when rowData is not present and enabled is true', () => {
+    renderCell({ enabled: true });
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+  });
+
+  it('uses value.enabled when rowData is not present and enabled is false', () => {
+    renderCell({ enabled: false });
+    expect(screen.getByTestId('ban-icon')).toBeInTheDocument();
   });
 });

webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookTable/Components/Formatters/__tests__/enabledCellFormatter.test.js

@@ -1,14 +1,26 @@
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import EnabledCell from '../EnabledCell';
 
-const fixtures = {
-  'should render blank cell': {
-    condition: false,
-  },
-  'should render marked cell': {
-    condition: true,
-  },
-};
-
-describe('EnabledCell', () =>
-  testComponentSnapshotsWithFixtures(EnabledCell, fixtures));
+jest.mock('@patternfly/react-icons', () => ({
+  CheckIcon: () => <span data-testid="check-icon" />,
+  BanIcon: () => <span data-testid="ban-icon" />,
+}));
+
+describe('EnabledCell', () => {
+  it('renders the check icon when condition is true', () => {
+    render(<EnabledCell condition />);
+
+    expect(screen.getByTestId('check-icon')).toBeInTheDocument();
+    expect(screen.queryByTestId('ban-icon')).not.toBeInTheDocument();
+  });
+
+  it('renders the ban icon when condition is false', () => {
+    render(<EnabledCell condition={false} />);
+
+    expect(screen.getByTestId('ban-icon')).toBeInTheDocument();
+    expect(screen.queryByTestId('check-icon')).not.toBeInTheDocument();
+  });
+});

webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookTable/Components/__tests__/EnabledCell.test.js

@@ -1,32 +1,124 @@
 import React from 'react';
-import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
 
+import mockForemanTableIndexPage from './mocks/MockForemanTableIndexPage';
+
+import * as selectors from '../../WebhooksPageSelectors';
 import WebhooksIndexPage from '../WebhooksIndexPage';
+import {
+  spySelector,
+  webhooks as webhooksFixture,
+} from './WebhooksIndexPage.fixtures';
+
+jest.mock('../../Components/WebhookTable/Components/Formatters', () => ({
+  nameToEditFormatter: () => () => null,
+  enabledCellFormatter: () => () => null,
+  actionCellFormatter: () => () => null,
+}));
+
+jest.mock('foremanReact/components/PF4/TableIndexPage/TableIndexPage', () => ({
+  __esModule: true,
+  default: mockForemanTableIndexPage,
+}));
+
+jest.mock('../Components/WebhookCreateModal', () => ({
+  __esModule: true,
+  default: ({ isOpen, onCancel }) =>
+    isOpen ? (
+      <div data-testid="webhook-create-modal">
+        <button type="button" onClick={onCancel}>
+          Close create modal
+        </button>
+      </div>
+    ) : null,
+}));
+
+jest.mock('../Components/WebhookDeleteModal', () => ({
+  __esModule: true,
+  default: ({ modalState }) =>
+    modalState.isOpen ? (
+      <div data-testid="webhook-delete-modal">Delete modal</div>
+    ) : null,
+}));
+
+jest.mock('../Components/WebhookEditModal', () => ({
+  __esModule: true,
+  default: ({ modalState }) =>
+    modalState.isOpen ? (
+      <div data-testid="webhook-edit-modal">Edit modal</div>
+    ) : null,
+}));
+
+jest.mock('../Components/WebhookTestModal', () => ({
+  __esModule: true,
+  default: ({ modalState }) =>
+    modalState.isOpen ? (
+      <div data-testid="webhook-test-modal">Test modal</div>
+    ) : null,
+}));
 
-const fixtures = {
-  'render with minimal props': {
-    fetchAndPush: jest.fn(),
-    reloadWithSearch: jest.fn(),
-    handleCreateSubmit: jest.fn(),
-    isLoading: false,
-    hasError: false,
-    hasData: false,
-    itemCount: 0,
-    canCreate: true,
-    sort: {},
-    webhooks: [],
-  },
-};
+const store = createStore((state = {}) => state);
+
+const renderPage = () =>
+  render(
+    <Provider store={store}>
+      <WebhooksIndexPage />
+    </Provider>
+  );
 
 describe('WebhooksIndexPage', () => {
-  describe('redering', () => {
-    const webhooksPage = () => (
-      <Provider store={createStore((state = [], action) => state)}>
-        <WebhooksIndexPage />
-      </Provider>
-    );
-    testComponentSnapshotsWithFixtures(webhooksPage, fixtures);
+  beforeAll(() => {
+    spySelector(selectors);
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    selectors.selectWebhooks.mockImplementation(() => []);
+  });
+
+  it('renders the webhooks header', () => {
+    renderPage();
+
+    expect(
+      screen.getByRole('heading', { name: 'Webhooks' })
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('webhooks-table-index')).toBeInTheDocument();
+  });
+
+  it('renders webhook rows from the store', () => {
+    selectors.selectWebhooks.mockImplementation(() => webhooksFixture);
+
+    renderPage();
+
+    expect(screen.getByText('my-webhook')).toBeInTheDocument();
+    expect(screen.getByText('your-webhook')).toBeInTheDocument();
+  });
+
+  it('opens the create modal when Create new is clicked', () => {
+    renderPage();
+
+    expect(
+      screen.queryByTestId('webhook-create-modal')
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Create new' }));
+
+    expect(screen.getByTestId('webhook-create-modal')).toBeInTheDocument();
+  });
+
+  it('closes the create modal when cancel is triggered', () => {
+    renderPage();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Create new' }));
+    expect(screen.getByTestId('webhook-create-modal')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close create modal' }));
+
+    expect(
+      screen.queryByTestId('webhook-create-modal')
+    ).not.toBeInTheDocument();
   });
 });

webpack/ForemanWebhooks/Routes/Webhooks/Components/WebhookTable/Components/__tests__/__snapshots__/EnabledCell.test.js.snap

@@ -25,7 +25,9 @@ describe('WebhooksIndexPage - Integration Test', () => {
       </Router>
     );
 
-    expect(component.exists('WebhooksTable')).toEqual(true);
+    expect(component.find('[data-testid="table-index-page"]').exists()).toEqual(
+      true
+    );
     expect(component.exists('WebhookCreateModal')).toEqual(true);
   });
 });

webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/__tests__/WebhooksIndexPage.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function MockForemanTableIndexPage({ header, customCreateAction, rows = [] }) {
+  const onCreate = customCreateAction ? customCreateAction() : undefined;
+  return (
+    <div data-testid="webhooks-table-index">
+      <h1>{header}</h1>
+      <ul aria-label="webhook-rows">
+        {rows.map(row => (
+          <li key={row.id}>{row.name}</li>
+        ))}
+      </ul>
+      {onCreate ? (
+        <button type="button" onClick={onCreate}>
+          Create new
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+MockForemanTableIndexPage.propTypes = {
+  header: PropTypes.string,
+  customCreateAction: PropTypes.func,
+  rows: PropTypes.arrayOf(PropTypes.object),
+};
+
+MockForemanTableIndexPage.defaultProps = {
+  header: '',
+  customCreateAction: null,
+  rows: [],
+};
+
+export default MockForemanTableIndexPage;

webpack/ForemanWebhooks/Routes/Webhooks/WebhooksIndexPage/__tests__/__snapshots__/WebhooksIndexPage.test.js.snap

@@ -1,10 +1,45 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const TableIndexPage = ({ children }) => <div>{children}</div>;
+/** Minimal stub — real TableIndexPage uses columns/rows, not always children. */
+const TableIndexPage = ({
+  children = null,
+  header,
+  columns,
+  rows,
+  controller,
+  apiUrl,
+  apiOptions,
+  customCreateAction,
+  id,
+}) => (
+  <div data-testid="table-index-page" id={id}>
+    {header ? <h1>{header}</h1> : null}
+    {children}
+    {rows && rows.length > 0 ? (
+      <ul data-testid="table-index-rows">
+        {rows.map(row => (
+          <li key={row.id}>{row.name}</li>
+        ))}
+      </ul>
+    ) : null}
+  </div>
+);
 
 TableIndexPage.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
+  header: PropTypes.string,
+  columns: PropTypes.object,
+  rows: PropTypes.array,
+  controller: PropTypes.string,
+  apiUrl: PropTypes.string,
+  apiOptions: PropTypes.object,
+  customCreateAction: PropTypes.func,
+  id: PropTypes.string,
+};
+
+TableIndexPage.defaultProps = {
+  children: null,
 };
 
 export default TableIndexPage;