@capillarytech/creatives-library 8.0.266-alpha.1 → 8.0.266

package/v2Containers/WebPush/Create/components/ButtonsLinksSection.test.js

@@ -0,0 +1,463 @@
+import React from 'react';
+import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
+import ButtonsLinksSection from './ButtonsLinksSection';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import { ON_CLICK_BEHAVIOUR_OPTIONS, WEBPUSH_BUTTON_TYPES } from '../../constants';
+
+// Mock ButtonList
+jest.mock('./ButtonList', () => {
+  const React = require('react');
+  return function MockButtonList(props) {
+    return (
+      <div data-testid="button-list" className="mock-button-list">
+        <div>Buttons: {props.buttons?.length || 0}</div>
+        <div>Disabled: {props.disabled ? 'true' : 'false'}</div>
+        <div>DisableSecondary: {props.disableSecondaryButton ? 'true' : 'false'}</div>
+        <div>IsInlineFormVisible: {props.isInlineFormVisible ? 'true' : 'false'}</div>
+        {props.renderInlineForm && <div data-testid="inline-form">{props.renderInlineForm()}</div>}
+      </div>
+    );
+  };
+});
+
+// Mock ButtonForm
+jest.mock('./ButtonForm', () => {
+  const React = require('react');
+  return function MockButtonForm(props) {
+    return (
+      <div data-testid="button-form" className="mock-button-form">
+        <div>ButtonType: {props.buttonType}</div>
+        <div>IsEditMode: {props.isEditMode ? 'true' : 'false'}</div>
+        <div>InitialData: {props.initialData ? JSON.stringify(props.initialData) : 'null'}</div>
+        <button onClick={props.onSave} data-testid="button-form-save">
+          Save
+        </button>
+        <button onClick={props.onCancel} data-testid="button-form-cancel">
+          Cancel
+        </button>
+      </div>
+    );
+  };
+});
+
+describe('ButtonsLinksSection', () => {
+  const mockFormatMessage = jest.fn((message) => message?.defaultMessage || message?.id || message);
+  const mockOnClickBehaviourChange = jest.fn();
+  const mockOnRedirectUrlChange = jest.fn();
+
+  const mockMessages = {
+    buttonsAndLinks: {
+      id: 'app.webpush.buttonsAndLinks',
+      defaultMessage: 'Buttons and Links',
+    },
+    onClickBehaviour: {
+      id: 'app.webpush.onClickBehaviour',
+      defaultMessage: 'On-click Behaviour',
+    },
+    enterUrl: {
+      id: 'app.webpush.enterUrl',
+      defaultMessage: 'Enter URL',
+    },
+    buttons: {
+      id: 'app.webpush.buttons',
+      defaultMessage: 'Buttons',
+    },
+    optional: {
+      id: 'app.webpush.optional',
+      defaultMessage: '(Optional)',
+    },
+    addButton: {
+      id: 'app.webpush.addButton',
+      defaultMessage: 'Add Button',
+    },
+  };
+
+  const createMockButtonState = (overrides = {}) => ({
+    buttons: [],
+    isAddingButton: false,
+    buttonBeingAdded: null,
+    editingButtonIndex: null,
+    handleAddPrimaryButton: jest.fn(),
+    handleAddSecondaryButton: jest.fn(),
+    handleButtonSave: jest.fn(),
+    handleButtonCancel: jest.fn(),
+    handleButtonEdit: jest.fn(),
+    handleButtonDelete: jest.fn(),
+    handleButtonReorder: jest.fn(),
+    isAddFlow: false,
+    isEditFlow: false,
+    showAddPrimaryButton: false,
+    showAddSecondaryButton: false,
+    showDisabledSecondaryDuringPrimary: false,
+    disableSecondaryAddButton: false,
+    ...overrides,
+  });
+
+  const defaultProps = {
+    onClickBehaviour: ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL,
+    onClickBehaviourOptions: [
+      { value: ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL, label: 'Open Site' },
+      { value: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL, label: 'Redirect to URL' },
+    ],
+    onClickBehaviourChange: mockOnClickBehaviourChange,
+    redirectUrl: '',
+    redirectUrlError: '',
+    onRedirectUrlChange: mockOnRedirectUrlChange,
+    buttonState: createMockButtonState(),
+    formatMessage: mockFormatMessage,
+    messages: mockMessages,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render correctly with default props', () => {
+      const wrapper = shallowWithIntl(<ButtonsLinksSection {...defaultProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render buttons and links section', () => {
+      const wrapper = mountWithIntl(<ButtonsLinksSection {...defaultProps} />);
+      const section = wrapper.find('.creatives-webpush-buttons-links');
+      expect(section.exists()).toBe(true);
+    });
+
+    it('should render buttons section', () => {
+      const wrapper = mountWithIntl(<ButtonsLinksSection {...defaultProps} />);
+      const section = wrapper.find('.creatives-webpush-buttons-section');
+      expect(section.exists()).toBe(true);
+    });
+
+    it('should render heading for buttons and links', () => {
+      const wrapper = mountWithIntl(<ButtonsLinksSection {...defaultProps} />);
+      const heading = wrapper.find(CapHeading).find('.webpush-buttons-links');
+      expect(heading.exists()).toBe(true);
+    });
+
+    it('should render heading for on-click behaviour', () => {
+      const wrapper = mountWithIntl(<ButtonsLinksSection {...defaultProps} />);
+      const heading = wrapper.find(CapHeading).find('.webpush-on-click-behaviour');
+      expect(heading.exists()).toBe(true);
+    });
+
+    it('should render CapRadioGroup with correct props', () => {
+      const wrapper = mountWithIntl(<ButtonsLinksSection {...defaultProps} />);
+      const radioGroup = wrapper.find(CapRadioGroup);
+      expect(radioGroup.exists()).toBe(true);
+      expect(radioGroup.prop('options')).toEqual(defaultProps.onClickBehaviourOptions);
+      expect(radioGroup.prop('value')).toBe(ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL);
+    });
+  });
+
+  describe('On-Click Behaviour', () => {
+    it('should call onClickBehaviourChange when radio group changes', () => {
+      const wrapper = mountWithIntl(<ButtonsLinksSection {...defaultProps} />);
+      const radioGroup = wrapper.find(CapRadioGroup);
+      radioGroup.prop('onChange')(ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL);
+      expect(mockOnClickBehaviourChange).toHaveBeenCalledWith(ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL);
+    });
+
+    it('should render redirect URL input when REDIRECT_TO_URL is selected', () => {
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection
+          {...defaultProps}
+          onClickBehaviour={ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL}
+          redirectUrl="https://example.com"
+        />
+      );
+      const input = wrapper.find(CapInput).find('#webpush-redirect-url-input');
+      expect(input.exists()).toBe(true);
+    });
+
+    it('should not render redirect URL input when SITE_URL is selected', () => {
+      const wrapper = mountWithIntl(<ButtonsLinksSection {...defaultProps} />);
+      const input = wrapper.find(CapInput).find('#webpush-redirect-url-input');
+      expect(input.exists()).toBe(false);
+    });
+
+    it('should show error status when redirectUrlError is provided', () => {
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection
+          {...defaultProps}
+          onClickBehaviour={ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL}
+          redirectUrlError="Invalid URL"
+        />
+      );
+      const input = wrapper.find(CapInput).find('#webpush-redirect-url-input');
+      expect(input.exists()).toBe(true);
+    });
+
+    it('should call onRedirectUrlChange when URL input changes', () => {
+      const onRedirectUrlChangeMock = jest.fn();
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection
+          {...defaultProps}
+          onClickBehaviour={ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL}
+          onRedirectUrlChange={onRedirectUrlChangeMock}
+        />
+      );
+      const input = wrapper.find('#webpush-redirect-url-input').hostNodes().first();
+      expect(input.exists()).toBe(true);
+      
+      // Simulate change event with sample URL
+      const sampleUrl = 'https://example.com/redirect';
+      input.prop('onChange')({ target: { value: sampleUrl } });
+      
+      // Verify the handler was called with the correct value
+      expect(onRedirectUrlChangeMock).toHaveBeenCalledWith({ target: { value: sampleUrl } });
+    });
+  });
+
+  describe('Button List', () => {
+    it('should render ButtonList with correct props', () => {
+      const buttonState = createMockButtonState({
+        buttons: [
+          { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 1', url: 'https://example.com/1' },
+        ],
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const buttonList = wrapper.find('[data-testid="button-list"]');
+      expect(buttonList.exists()).toBe(true);
+    });
+
+    it('should pass buttons to ButtonList', () => {
+      const buttons = [
+        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 1', url: 'https://example.com/1' },
+        { type: WEBPUSH_BUTTON_TYPES.SECONDARY, text: 'Button 2', url: 'https://example.com/2' },
+      ];
+      const buttonState = createMockButtonState({ buttons });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const buttonList = wrapper.find('[data-testid="button-list"]');
+      expect(buttonList.text()).toContain('Buttons: 2');
+    });
+
+    it('should disable ButtonList when isAddFlow is true', () => {
+      const buttonState = createMockButtonState({ isAddFlow: true });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const buttonList = wrapper.find('[data-testid="button-list"]');
+      expect(buttonList.text()).toContain('Disabled: true');
+    });
+
+    it('should show inline form when isEditFlow is true', () => {
+      const buttons = [
+        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 1', url: 'https://example.com/1' },
+      ];
+      const buttonState = createMockButtonState({
+        buttons,
+        isEditFlow: true,
+        editingButtonIndex: 0,
+        buttonBeingAdded: WEBPUSH_BUTTON_TYPES.PRIMARY,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const buttonList = wrapper.find('[data-testid="button-list"]');
+      expect(buttonList.text()).toContain('IsInlineFormVisible: true');
+      expect(wrapper.find('[data-testid="inline-form"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Add Button Flow', () => {
+    it('should render ButtonForm when isAddFlow is true', () => {
+      const buttonState = createMockButtonState({
+        isAddingButton: true,
+        isAddFlow: true,
+        buttonBeingAdded: WEBPUSH_BUTTON_TYPES.PRIMARY,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const buttonForm = wrapper.find('[data-testid="button-form"]');
+      expect(buttonForm.exists()).toBe(true);
+      expect(buttonForm.text()).toContain('ButtonType: primary');
+      expect(buttonForm.text()).toContain('IsEditMode: false');
+    });
+
+    it('should not render ButtonForm when isAddFlow is false', () => {
+      const buttonState = createMockButtonState({ isAddFlow: false });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const buttonForm = wrapper.find('[data-testid="button-form"]');
+      expect(buttonForm.length).toBe(0);
+    });
+
+    it('should call handleButtonSave when form save is clicked', () => {
+      const handleButtonSave = jest.fn();
+      const buttonState = createMockButtonState({
+        isAddingButton: true,
+        isAddFlow: true,
+        buttonBeingAdded: WEBPUSH_BUTTON_TYPES.PRIMARY,
+        handleButtonSave,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const saveButton = wrapper.find('[data-testid="button-form-save"]');
+      saveButton.simulate('click');
+      expect(handleButtonSave).toHaveBeenCalled();
+    });
+
+    it('should call handleButtonCancel when form cancel is clicked', () => {
+      const handleButtonCancel = jest.fn();
+      const buttonState = createMockButtonState({
+        isAddingButton: true,
+        isAddFlow: true,
+        buttonBeingAdded: WEBPUSH_BUTTON_TYPES.PRIMARY,
+        handleButtonCancel,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const cancelButton = wrapper.find('[data-testid="button-form-cancel"]');
+      cancelButton.simulate('click');
+      expect(handleButtonCancel).toHaveBeenCalled();
+    });
+  });
+
+  describe('Add Button Controls', () => {
+    it('should render add primary button when showAddPrimaryButton is true', () => {
+      const handleAddPrimaryButton = jest.fn();
+      const buttonState = createMockButtonState({
+        showAddPrimaryButton: true,
+        handleAddPrimaryButton,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const addButton = wrapper.find(CapButton).find('.add-primary-button');
+      expect(addButton.exists()).toBe(true);
+    });
+
+    it('should render add secondary button when showAddSecondaryButton is true', () => {
+      const handleAddSecondaryButton = jest.fn();
+      const buttonState = createMockButtonState({
+        showAddSecondaryButton: true,
+        handleAddSecondaryButton,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const addButton = wrapper.find(CapButton).find('.add-secondary-button');
+      expect(addButton.exists()).toBe(true);
+    });
+
+    it('should render disabled secondary button when showDisabledSecondaryDuringPrimary is true', () => {
+      const buttonState = createMockButtonState({
+        showDisabledSecondaryDuringPrimary: true,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const addButton = wrapper.find(CapButton).find('.add-secondary-button');
+      expect(addButton.exists()).toBe(true);
+    });
+
+    it('should call handleAddPrimaryButton when add primary button is clicked', () => {
+      const handleAddPrimaryButton = jest.fn();
+      const buttonState = createMockButtonState({
+        showAddPrimaryButton: true,
+        handleAddPrimaryButton,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const addButton = wrapper.find('.add-primary-button').hostNodes();
+      expect(addButton.exists()).toBe(true);
+      
+      // Simulate click on the add primary button
+      addButton.simulate('click');
+      wrapper.update();
+      
+      // Verify the handler was called
+      expect(handleAddPrimaryButton).toHaveBeenCalled();
+    });
+
+    it('should call handleAddSecondaryButton when add secondary button is clicked', () => {
+      const handleAddSecondaryButton = jest.fn();
+      const buttonState = createMockButtonState({
+        showAddSecondaryButton: true,
+        handleAddSecondaryButton,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const addButton = wrapper.find('.add-secondary-button').hostNodes();
+      expect(addButton.exists()).toBe(true);
+      
+      // Simulate click on the add secondary button
+      addButton.simulate('click');
+      wrapper.update();
+      
+      // Verify the handler was called
+      expect(handleAddSecondaryButton).toHaveBeenCalled();
+    });
+
+    it('should not render add button controls when all flags are false', () => {
+      const buttonState = createMockButtonState({
+        showAddPrimaryButton: false,
+        showAddSecondaryButton: false,
+        showDisabledSecondaryDuringPrimary: false,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const addControls = wrapper.find('.button-add-controls');
+      expect(addControls.exists()).toBe(false);
+    });
+  });
+
+  describe('Edit Button Flow', () => {
+    it('should render ButtonForm with initial data when editing', () => {
+      const buttons = [
+        { type: WEBPUSH_BUTTON_TYPES.PRIMARY, text: 'Button 1', url: 'https://example.com/1' },
+      ];
+      const buttonState = createMockButtonState({
+        buttons,
+        isEditFlow: true,
+        editingButtonIndex: 0,
+        buttonBeingAdded: WEBPUSH_BUTTON_TYPES.PRIMARY,
+      });
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection {...defaultProps} buttonState={buttonState} />
+      );
+      const inlineForm = wrapper.find('[data-testid="inline-form"]');
+      expect(inlineForm.exists()).toBe(true);
+      const buttonForm = inlineForm.find('[data-testid="button-form"]');
+      expect(buttonForm.text()).toContain('IsEditMode: true');
+      expect(buttonForm.text()).toContain('InitialData:');
+    });
+  });
+
+  describe('Default Props', () => {
+    it('should use default redirectUrlError when not provided', () => {
+      const wrapper = mountWithIntl(
+        <ButtonsLinksSection
+          onClickBehaviour={ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL}
+          onClickBehaviourOptions={defaultProps.onClickBehaviourOptions}
+          onClickBehaviourChange={mockOnClickBehaviourChange}
+          redirectUrl=""
+          onRedirectUrlChange={mockOnRedirectUrlChange}
+          buttonState={createMockButtonState()}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const input = wrapper.find(CapInput).find('#webpush-redirect-url-input');
+      expect(input.exists()).toBe(true);
+    });
+  });
+});
+

package/v2Containers/WebPush/Create/components/FormActions.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+
+/**
+ * FormActions component - Displays save button and error messages
+ */
+export const FormActions = ({
+  onSave,
+  isSaveDisabled,
+  errorText,
+  accountErrorText,
+  formatMessage,
+  messages,
+}) => (
+  <>
+    <CapRow className="creatives-webpush-actions">
+      <CapButton type="primary" onClick={onSave} disabled={isSaveDisabled}>
+        {formatMessage(messages.saveTemplate)}
+      </CapButton>
+    </CapRow>
+    {errorText && (
+      <CapRow>
+        <CapError className="webpush-template-error">{errorText}</CapError>
+      </CapRow>
+    )}
+    {accountErrorText && (
+      <CapRow>
+        <CapError className="webpush-template-account-error">
+          {accountErrorText}
+        </CapError>
+      </CapRow>
+    )}
+  </>
+);
+
+FormActions.propTypes = {
+  onSave: PropTypes.func.isRequired,
+  isSaveDisabled: PropTypes.bool.isRequired,
+  errorText: PropTypes.string,
+  accountErrorText: PropTypes.string,
+  formatMessage: PropTypes.func.isRequired,
+  messages: PropTypes.object.isRequired,
+};
+
+FormActions.defaultProps = {
+  errorText: '',
+  accountErrorText: '',
+};
+
+export default FormActions;
+

package/v2Containers/WebPush/Create/components/FormActions.test.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
+import FormActions from './FormActions';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+
+describe('FormActions', () => {
+  const mockFormatMessage = jest.fn((message) => message.defaultMessage || message);
+  const mockOnSave = jest.fn();
+
+  const mockMessages = {
+    saveTemplate: {
+      defaultMessage: 'Save Template',
+    },
+  };
+
+  const defaultProps = {
+    onSave: mockOnSave,
+    isSaveDisabled: false,
+    errorText: '',
+    accountErrorText: '',
+    formatMessage: mockFormatMessage,
+    messages: mockMessages,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render correctly with default props', () => {
+      const wrapper = shallowWithIntl(<FormActions {...defaultProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render save button', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} />);
+      const saveButton = wrapper.find(CapButton);
+      expect(saveButton.exists()).toBe(true);
+      expect(saveButton.prop('type')).toBe('primary');
+      expect(saveButton.prop('disabled')).toBe(false);
+    });
+
+    it('should render save button with correct text', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} />);
+      const saveButton = wrapper.find(CapButton);
+      expect(saveButton.exists()).toBe(true);
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.saveTemplate);
+    });
+
+    it('should disable save button when isSaveDisabled is true', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} isSaveDisabled={true} />);
+      const saveButton = wrapper.find(CapButton);
+      expect(saveButton.prop('disabled')).toBe(true);
+    });
+
+    it('should enable save button when isSaveDisabled is false', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} isSaveDisabled={false} />);
+      const saveButton = wrapper.find(CapButton);
+      expect(saveButton.prop('disabled')).toBe(false);
+    });
+  });
+
+  describe('Error Messages', () => {
+    it('should not render error text when errorText is empty', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} errorText="" />);
+      const errorRows = wrapper.find(CapRow).findWhere((node) => {
+        const error = node.find(CapError);
+        return error.exists() && error.prop('className') === 'webpush-template-error';
+      });
+      expect(errorRows.length).toBe(0);
+    });
+
+    it('should render error text when errorText is provided', () => {
+      const errorText = 'Template save failed';
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} errorText={errorText} />);
+      const error = wrapper.find(CapError).find('.webpush-template-error');
+      expect(error.exists()).toBe(true);
+      expect(error.length).toBeGreaterThan(0);
+    });
+
+    it('should not render account error text when accountErrorText is empty', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} accountErrorText="" />);
+      const errorRows = wrapper.find(CapRow).findWhere((node) => {
+        const error = node.find(CapError);
+        return error.exists() && error.prop('className') === 'webpush-template-account-error';
+      });
+      expect(errorRows.length).toBe(0);
+    });
+
+    it('should render account error text when accountErrorText is provided', () => {
+      const accountErrorText = 'Account error occurred';
+      const wrapper = mountWithIntl(
+        <FormActions {...defaultProps} accountErrorText={accountErrorText} />
+      );
+      const error = wrapper.find(CapError).find('.webpush-template-account-error');
+      expect(error.exists()).toBe(true);
+      expect(error.length).toBeGreaterThan(0);
+    });
+
+    it('should render both error texts when both are provided', () => {
+      const wrapper = mountWithIntl(
+        <FormActions
+          {...defaultProps}
+          errorText="Template error"
+          accountErrorText="Account error"
+        />
+      );
+      const templateError = wrapper.find(CapError).find('.webpush-template-error');
+      const accountError = wrapper.find(CapError).find('.webpush-template-account-error');
+      expect(templateError.exists()).toBe(true);
+      expect(accountError.exists()).toBe(true);
+    });
+  });
+
+  describe('Save Button Interaction', () => {
+    it('should call onSave when save button is clicked', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} />);
+      const saveButton = wrapper.find(CapButton);
+      saveButton.simulate('click');
+      expect(mockOnSave).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onSave when button is disabled and clicked', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} isSaveDisabled={true} />);
+      const saveButton = wrapper.find(CapButton);
+      saveButton.simulate('click');
+      // Even if disabled, the click event might fire, but the button should be disabled
+      expect(saveButton.prop('disabled')).toBe(true);
+      expect(defaultProps.onSave).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Default Props', () => {
+    it('should use default errorText when not provided', () => {
+      const wrapper = mountWithIntl(
+        <FormActions
+          onSave={mockOnSave}
+          isSaveDisabled={false}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const error = wrapper.find(CapError).find('.webpush-template-error');
+      expect(error.exists()).toBe(false);
+    });
+
+    it('should use default accountErrorText when not provided', () => {
+      const wrapper = mountWithIntl(
+        <FormActions
+          onSave={mockOnSave}
+          isSaveDisabled={false}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const error = wrapper.find(CapError).find('.webpush-template-account-error');
+      expect(error.exists()).toBe(false);
+    });
+  });
+});
+