@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

package/v2Containers/WebPush/Create/components/tests/ButtonList.test.js

@@ -1,515 +0,0 @@
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { mountWithIntl, shallowWithIntl } from '../../../../../helpers/intl-enzym-test-helpers';
-import ButtonList from '../ButtonList';
-import ButtonItem from '../ButtonItem';
-
-// Mock ButtonItem component
-jest.mock('../ButtonItem', () => {
-  return function MockButtonItem({
-    button,
-    index,
-    onEdit,
-    onDelete,
-    onDragStart,
-    onDragOver,
-    onDrop,
-    onDragEnd,
-    disabled,
-  }) {
-    return (
-      <div
-        className="mock-button-item"
-        data-testid={`button-item-${index}`}
-        data-disabled={disabled}
-        draggable={!disabled}
-        onDragStart={(e) => {
-          if (!disabled) {
-            e.dataTransfer = { effectAllowed: 'move', setData: jest.fn() };
-            onDragStart(index);
-          }
-        }}
-        onDragOver={(e) => {
-          if (!disabled) {
-            e.preventDefault();
-            e.dataTransfer = { dropEffect: 'move' };
-            onDragOver(index);
-          }
-        }}
-        onDrop={(e) => {
-          if (!disabled) {
-            e.preventDefault();
-            onDrop(index);
-          }
-        }}
-        onDragEnd={() => {
-          if (!disabled) {
-            onDragEnd();
-          }
-        }}
-      >
-        <span className="button-text">{button.text}</span>
-        <span className="button-url">{button.url}</span>
-        <span className="button-type">{button.type}</span>
-        <button
-          className="edit-button"
-          onClick={() => !disabled && onEdit(index)}
-          disabled={disabled}
-        >
-          Edit
-        </button>
-        <button
-          className="delete-button"
-          onClick={() => !disabled && onDelete(index)}
-          disabled={disabled}
-        >
-          Delete
-        </button>
-      </div>
-    );
-  };
-});
-
-describe('ButtonList', () => {
-  const mockOnEdit = jest.fn();
-  const mockOnDelete = jest.fn();
-  const mockOnReorder = jest.fn();
-  const mockRenderInlineForm = jest.fn(() => <div className="inline-form">Inline Form</div>);
-
-  const mockButtons = [
-    { id: 'btn-1', text: 'Primary Button', url: 'https://example.com', type: 'primary' },
-    { id: 'btn-2', text: 'Secondary Button', url: 'https://example2.com', type: 'secondary' },
-  ];
-
-  const defaultProps = {
-    buttons: mockButtons,
-    onEdit: mockOnEdit,
-    onDelete: mockOnDelete,
-    onReorder: mockOnReorder,
-    disabled: false,
-    disableSecondaryButton: false,
-    isInlineFormVisible: false,
-    inlineFormIndex: null,
-    renderInlineForm: null,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('should render correctly with default props', () => {
-      const wrapper = shallowWithIntl(<ButtonList {...defaultProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should return null when buttons array is empty', () => {
-      const wrapper = shallowWithIntl(
-        <ButtonList {...defaultProps} buttons={[]} />
-      );
-      expect(wrapper.isEmptyRender()).toBe(true);
-    });
-
-    it('should render all buttons', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      const buttonItems = wrapper.find(ButtonItem);
-      expect(buttonItems).toHaveLength(2);
-    });
-
-    it('should render button items with correct props', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      const firstButtonItem = wrapper.find(ButtonItem).first();
-      
-      expect(firstButtonItem.prop('button')).toEqual(mockButtons[0]);
-      expect(firstButtonItem.prop('index')).toBe(0);
-      expect(firstButtonItem.prop('onEdit')).toBe(mockOnEdit);
-      expect(firstButtonItem.prop('onDelete')).toBe(mockOnDelete);
-      expect(firstButtonItem.prop('disabled')).toBe(false);
-    });
-  });
-
-  describe('Edit Button', () => {
-    it('should call onEdit with correct index when edit is clicked on primary button', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      const firstButtonItem = wrapper.find(ButtonItem).first();
-      
-      firstButtonItem.prop('onEdit')(0);
-      
-      expect(mockOnEdit).toHaveBeenCalledWith(0);
-      expect(mockOnEdit).toHaveBeenCalledTimes(1);
-    });
-
-    it('should call onEdit with correct index when edit is clicked on secondary button', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      const secondButtonItem = wrapper.find(ButtonItem).at(1);
-      
-      secondButtonItem.prop('onEdit')(1);
-      
-      expect(mockOnEdit).toHaveBeenCalledWith(1);
-      expect(mockOnEdit).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not call onEdit when button item is disabled', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList {...defaultProps} disabled={true} />
-      );
-      const firstButtonItem = wrapper.find(ButtonItem).first();
-      
-      // ButtonItem should be disabled, so onEdit should not be called
-      expect(firstButtonItem.prop('disabled')).toBe(true);
-      
-      // Simulate click on the edit button - the onClick handler checks disabled state
-      const editButton = wrapper.find('.edit-button').first();
-      editButton.simulate('click');
-      wrapper.update();
-      
-      // Verify the callback is not called when disabled
-      expect(mockOnEdit).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Delete Button', () => {
-    it('should call onDelete with correct index when delete is clicked', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      const firstButtonItem = wrapper.find(ButtonItem).first();
-      
-      firstButtonItem.prop('onDelete')(0);
-      
-      expect(mockOnDelete).toHaveBeenCalledWith(0);
-      expect(mockOnDelete).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not call onDelete when button item is disabled', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList {...defaultProps} disabled={true} />
-      );
-      const firstButtonItem = wrapper.find(ButtonItem).first();
-      
-      // ButtonItem should be disabled, so onDelete should not be called
-      expect(firstButtonItem.prop('disabled')).toBe(true);
-      
-      // Simulate click on the delete button - the onClick handler checks disabled state
-      const deleteButton = wrapper.find('.delete-button').first();
-      deleteButton.simulate('click');
-      wrapper.update();
-      
-      // Verify the callback is not called when disabled
-      expect(mockOnDelete).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Reorder Buttons (Drag and Drop)', () => {
-    it('should set draggedIndex on drag start', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      
-      // Simulate drag start - call with index directly
-      act(() => {
-        wrapper.find(ButtonItem).first().prop('onDragStart')(0);
-      });
-      wrapper.update();
-      
-      // Get fresh references after state update
-      act(() => {
-        wrapper.find(ButtonItem).at(1).prop('onDragOver')(1);
-      });
-      wrapper.update();
-      
-      expect(mockOnReorder).toHaveBeenCalledWith(0, 1);
-    });
-
-    it('should call onReorder when dragging over a different button', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      
-      // Start drag on first button - call with index directly
-      act(() => {
-        wrapper.find(ButtonItem).first().prop('onDragStart')(0);
-      });
-      wrapper.update();
-      
-      // Get fresh references after state update and drag over second button
-      act(() => {
-        wrapper.find(ButtonItem).at(1).prop('onDragOver')(1);
-      });
-      wrapper.update();
-      
-      expect(mockOnReorder).toHaveBeenCalledWith(0, 1);
-    });
-
-    it('should not call onReorder when dragging over the same button', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      
-      // Start drag on first button - call with index directly
-      act(() => {
-        wrapper.find(ButtonItem).first().prop('onDragStart')(0);
-      });
-      wrapper.update();
-      
-      // Drag over the same button - call with index directly
-      act(() => {
-        wrapper.find(ButtonItem).first().prop('onDragOver')(0);
-      });
-      wrapper.update();
-      
-      expect(mockOnReorder).not.toHaveBeenCalled();
-    });
-
-    it('should not call onReorder when component is disabled', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} disabled={true} />);
-      
-      // Try to start drag (should be prevented) - call with index directly
-      act(() => {
-        wrapper.find(ButtonItem).first().prop('onDragStart')(0);
-      });
-      wrapper.update();
-      
-      // Try to drag over (should be prevented) - call with index directly
-      act(() => {
-        wrapper.find(ButtonItem).at(1).prop('onDragOver')(1);
-      });
-      wrapper.update();
-      
-      expect(mockOnReorder).not.toHaveBeenCalled();
-    });
-
-    it('should reset draggedIndex on drag end', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      
-      // Start drag - call with index directly
-      act(() => {
-        wrapper.find(ButtonItem).first().prop('onDragStart')(0);
-      });
-      wrapper.update();
-      
-      // End drag
-      act(() => {
-        wrapper.find(ButtonItem).first().prop('onDragEnd')();
-      });
-      wrapper.update();
-      
-      // Try to drag over after drag end (should not call onReorder) - call with index directly
-      mockOnReorder.mockClear();
-      act(() => {
-        wrapper.find(ButtonItem).at(1).prop('onDragOver')(1);
-      });
-      wrapper.update();
-      
-      expect(mockOnReorder).not.toHaveBeenCalled();
-    });
-
-    it('should handle multiple reorder operations', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      
-      // First reorder: move button 0 to position 1 - call with index directly
-      act(() => {
-        wrapper.find(ButtonItem).first().prop('onDragStart')(0);
-      });
-      wrapper.update();
-      
-      act(() => {
-        wrapper.find(ButtonItem).at(1).prop('onDragOver')(1);
-      });
-      wrapper.update();
-      
-      expect(mockOnReorder).toHaveBeenCalledWith(0, 1);
-      
-      // End drag
-      act(() => {
-        wrapper.find(ButtonItem).first().prop('onDragEnd')();
-      });
-      wrapper.update();
-      
-      // Second reorder: move button 1 to position 0 - call with index directly
-      mockOnReorder.mockClear();
-      act(() => {
-        wrapper.find(ButtonItem).at(1).prop('onDragStart')(1);
-      });
-      wrapper.update();
-      
-      act(() => {
-        wrapper.find(ButtonItem).first().prop('onDragOver')(0);
-      });
-      wrapper.update();
-      
-      expect(mockOnReorder).toHaveBeenCalledWith(1, 0);
-    });
-  });
-
-  describe('Disabled States', () => {
-    it('should disable all button items when disabled prop is true', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} disabled={true} />);
-      const buttonItems = wrapper.find(ButtonItem);
-      
-      buttonItems.forEach((item) => {
-        expect(item.prop('disabled')).toBe(true);
-      });
-    });
-
-    it('should disable button items that are not being edited when inline form is visible', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          isInlineFormVisible={true}
-          inlineFormIndex={0}
-        />
-      );
-      const buttonItems = wrapper.find(ButtonItem);
-      
-      // First button (index 0) should not be disabled (being edited)
-      expect(buttonItems.at(0).prop('disabled')).toBe(false);
-      // Second button (index 1) should be disabled (not being edited)
-      expect(buttonItems.at(1).prop('disabled')).toBe(true);
-    });
-
-    it('should disable button items when both disabled and inline form are active', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          disabled={true}
-          isInlineFormVisible={true}
-          inlineFormIndex={0}
-        />
-      );
-      const buttonItems = wrapper.find(ButtonItem);
-      
-      // All buttons should be disabled when disabled prop is true
-      buttonItems.forEach((item) => {
-        expect(item.prop('disabled')).toBe(true);
-      });
-    });
-
-    it('should not disable buttons when inline form is not visible', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          isInlineFormVisible={false}
-          inlineFormIndex={null}
-        />
-      );
-      const buttonItems = wrapper.find(ButtonItem);
-      
-      buttonItems.forEach((item) => {
-        expect(item.prop('disabled')).toBe(false);
-      });
-    });
-  });
-
-  describe('Inline Form Rendering', () => {
-    it('should render inline form when isInlineFormVisible is true and inlineFormIndex is set', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          isInlineFormVisible={true}
-          inlineFormIndex={0}
-          renderInlineForm={mockRenderInlineForm}
-        />
-      );
-      
-      const inlineForm = wrapper.find('.button-inline-form');
-      expect(inlineForm.exists()).toBe(true);
-      expect(mockRenderInlineForm).toHaveBeenCalled();
-    });
-
-    it('should not render inline form when isInlineFormVisible is false', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          isInlineFormVisible={false}
-          inlineFormIndex={0}
-          renderInlineForm={mockRenderInlineForm}
-        />
-      );
-      
-      const inlineForm = wrapper.find('.button-inline-form');
-      expect(inlineForm.exists()).toBe(false);
-    });
-
-    it('should not render inline form when inlineFormIndex is null', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          isInlineFormVisible={true}
-          inlineFormIndex={null}
-          renderInlineForm={mockRenderInlineForm}
-        />
-      );
-      
-      const inlineForm = wrapper.find('.button-inline-form');
-      expect(inlineForm.exists()).toBe(false);
-    });
-
-    it('should not render inline form when inlineFormIndex is negative', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          isInlineFormVisible={true}
-          inlineFormIndex={-1}
-          renderInlineForm={mockRenderInlineForm}
-        />
-      );
-      
-      const inlineForm = wrapper.find('.button-inline-form');
-      expect(inlineForm.exists()).toBe(false);
-    });
-
-    it('should not render inline form when renderInlineForm is not a function', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          isInlineFormVisible={true}
-          inlineFormIndex={0}
-          renderInlineForm={null}
-        />
-      );
-      
-      const inlineForm = wrapper.find('.button-inline-form');
-      expect(inlineForm.exists()).toBe(false);
-    });
-
-    it('should render inline form at the correct index', () => {
-      const wrapper = mountWithIntl(
-        <ButtonList
-          {...defaultProps}
-          isInlineFormVisible={true}
-          inlineFormIndex={1}
-          renderInlineForm={mockRenderInlineForm}
-        />
-      );
-      
-      const inlineForm = wrapper.find('.button-inline-form');
-      expect(inlineForm.exists()).toBe(true);
-      
-      // The inline form should be rendered instead of the button at index 1
-      const buttonItems = wrapper.find(ButtonItem);
-      // We should still have button items, but the form should be in the list
-      expect(inlineForm.exists()).toBe(true);
-    });
-  });
-
-  describe('Button Item Props', () => {
-    it('should pass correct button data to ButtonItem', () => {
-      const customButtons = [
-        { id: 'btn-3', text: 'Custom Primary', url: 'https://custom1.com', type: 'primary' },
-        { id: 'btn-4', text: 'Custom Secondary', url: 'https://custom2.com', type: 'secondary' },
-      ];
-      const wrapper = mountWithIntl(
-        <ButtonList {...defaultProps} buttons={customButtons} />
-      );
-      
-      const firstButtonItem = wrapper.find(ButtonItem).first();
-      expect(firstButtonItem.prop('button')).toEqual(customButtons[0]);
-      
-      const secondButtonItem = wrapper.find(ButtonItem).at(1);
-      expect(secondButtonItem.prop('button')).toEqual(customButtons[1]);
-    });
-
-    it('should pass correct index to each ButtonItem', () => {
-      const wrapper = mountWithIntl(<ButtonList {...defaultProps} />);
-      const buttonItems = wrapper.find(ButtonItem);
-      
-      buttonItems.forEach((item, index) => {
-        expect(item.prop('index')).toBe(index);
-      });
-    });
-  });
-});
-