@capillarytech/creatives-library 8.0.318 → 8.0.320

package/v2Containers/Templates/tests/TemplatesActionBar.test.js

@@ -0,0 +1,120 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import TemplatesActionBar from '../TemplatesActionBar';
+
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => {
+  const React = require('react');
+  function Search(props) {
+    return React.createElement('input', {
+      'data-testid': 'cap-input-search',
+      value: props?.value,
+      placeholder: props?.placeholder,
+      onChange: props?.onChange,
+      onKeyDown: (e) => {
+        if (e.key === 'Enter' && props.onPressEnter) {
+          props.onPressEnter(e);
+        }
+      },
+    });
+  }
+  function CapInput() {
+    return null;
+  }
+  CapInput.Search = Search;
+  return { __esModule: true, default: CapInput };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => {
+  const React = require('react');
+  return function CapButton(props) {
+    return React.createElement('button', {
+      type: 'button',
+      'data-testid': 'cta',
+      onClick: props?.onClick,
+      disabled: props?.disabled,
+    }, props?.children);
+  };
+});
+
+describe('TemplatesActionBar', () => {
+  it('renders search when searchPlaceholder is set', () => {
+    render(
+      <TemplatesActionBar
+        searchPlaceholder="Find templates"
+        searchValue="hi"
+        ctaLabel="Create"
+      />,
+    );
+    expect(screen.getByTestId('cap-input-search')).toHaveAttribute('placeholder', 'Find templates');
+  });
+
+  it('omits search when searchPlaceholder is empty', () => {
+    const { container } = render(
+      <TemplatesActionBar searchPlaceholder="" ctaLabel="Go" />,
+    );
+    expect(container.querySelector('[data-testid="cap-input-search"]')).toBeNull();
+  });
+
+  it('fires onSearchChange and onCtaClick', () => {
+    const onSearchChange = jest.fn();
+    const onCtaClick = jest.fn();
+    render(
+      <TemplatesActionBar
+        searchPlaceholder="S"
+        onSearchChange={onSearchChange}
+        ctaLabel="New"
+        onCtaClick={onCtaClick}
+      />,
+    );
+    fireEvent.change(screen.getByTestId('cap-input-search'), { target: { value: 'x' } });
+    fireEvent.click(screen.getByTestId('cta'));
+    expect(onSearchChange).toHaveBeenCalled();
+    expect(onCtaClick).toHaveBeenCalled();
+  });
+
+  it('fires onSearch when Enter is pressed (antd Input has no native onSearch)', () => {
+    const onSearch = jest.fn();
+    render(
+      <TemplatesActionBar
+        searchPlaceholder="S"
+        searchValue="query"
+        onSearch={onSearch}
+        ctaLabel="New"
+      />,
+    );
+    const input = screen.getByTestId('cap-input-search');
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+    expect(onSearch).toHaveBeenCalledWith('query');
+  });
+
+  it('renders ctaNode instead of default button when provided', () => {
+    render(
+      <TemplatesActionBar
+        searchPlaceholder="S"
+        ctaNode={<span data-testid="custom-cta">Custom</span>}
+      />,
+    );
+    expect(screen.getByTestId('custom-cta')).toBeInTheDocument();
+    expect(screen.queryByTestId('cta')).toBeNull();
+  });
+
+  it('hides CTA area when showCta is false', () => {
+    const { container } = render(
+      <TemplatesActionBar searchPlaceholder="S" showCta={false} ctaLabel="X" />,
+    );
+    expect(container.querySelector('[data-testid="cta"]')).toBeNull();
+  });
+
+  it('renders children in toolbar row', () => {
+    render(
+      <TemplatesActionBar searchPlaceholder="S" ctaLabel="C">
+        <span data-testid="child">extra</span>
+      </TemplatesActionBar>,
+    );
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+});