@axinom/mosaic-ui 0.32.0-rc.1 → 0.32.0-rc.11

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.spec.tsx

@@ -1,15 +1,20 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { Link, BrowserRouter as Router } from 'react-router-dom';
 import { noop } from '../../../helpers/utils';
 import { TextButton } from '../../Buttons';
-import { ConfirmationConfig, ConfirmDialog } from '../../ConfirmDialog';
+import { ConfirmDialog, ConfirmationConfig } from '../../ConfirmDialog';
 import { IconName } from '../../Icons';
 import {
   PageHeaderAction,
+  isPageHeaderJsAction,
+  isPageHeaderNavigationAction,
+} from './PageHeaderAction';
+import {
   PageHeaderActionProps,
   PageHeaderActionType,
-} from './PageHeaderAction';
+} from './PageHeaderAction.model';
 
 const defaultProps: PageHeaderActionProps = {
   label: 'action-label',
@@ -17,514 +22,676 @@ const defaultProps: PageHeaderActionProps = {
 };
 
 describe('PageHeaderAction', () => {
-  it('renders the component without crashing', () => {
-    const wrapper = shallow(<PageHeaderAction {...defaultProps} />);
-
-    expect(wrapper).toBeTruthy();
-  });
-
-  it('renders a label', () => {
-    const mockLabel = 'test-label';
-    const wrapper = shallow(
-      <PageHeaderAction {...defaultProps} label={mockLabel} />,
-    );
-
-    const label = wrapper.find('span');
-
-    expect(label.text()).toBe(mockLabel);
-  });
-
-  it('renders a Icon, if set', () => {
-    const mockLabel = 'test-label';
-    const wrapper = mount(
-      <PageHeaderAction
-        {...defaultProps}
-        label={mockLabel}
-        icon={IconName.ChevronRight}
-      />,
-    );
-
-    const Icon = wrapper.find('.icons');
-
-    expect(Icon.exists()).toBe(true);
-  });
-
-  it('image is used instead of icon if icon prop is a string', () => {
-    const mockLabel = 'test-label';
-    const wrapper = mount(
-      <PageHeaderAction
-        {...defaultProps}
-        label={mockLabel}
-        icon={'test'}
-        imgAlt={'alt'}
-      />,
-    );
-
-    const Icon = wrapper.find('.icons');
+  describe('PageHeaderJSAction', () => {
+    it('renders the component without crashing', () => {
+      const wrapper = shallow(<PageHeaderAction {...defaultProps} />);
 
-    expect(Icon.exists()).toBe(false);
-  });
+      expect(wrapper).toBeTruthy();
+    });
 
-  it('raises onActionSelected', () => {
-    const spy = jest.fn();
-    const wrapper = mount(<PageHeaderAction {...defaultProps} onClick={spy} />);
+    it('renders a label', () => {
+      const mockLabel = 'test-label';
+      const wrapper = mount(
+        <PageHeaderAction {...defaultProps} label={mockLabel} />,
+      );
 
-    const container = wrapper.find('.container');
-    container.simulate('click');
+      const label = wrapper.find('span');
 
-    expect(spy).toHaveBeenCalledTimes(1);
-  });
+      expect(label.text()).toBe(mockLabel);
+    });
 
-  describe('confirmation', () => {
-    it(`'Simple' mode changes the background color when clicked for the first time`, () => {
-      const spy = jest.fn();
+    it('renders a Icon, if set', () => {
+      const mockLabel = 'test-label';
       const wrapper = mount(
         <PageHeaderAction
           {...defaultProps}
-          label={'test-label'}
-          confirmationMode="Simple"
-          onClick={spy}
+          label={mockLabel}
+          icon={IconName.ChevronRight}
         />,
       );
-      let container = wrapper.find('.container');
-      expect(container.hasClass('hasConfirm')).toBe(false);
-
-      wrapper.simulate('click');
-      wrapper.update();
 
-      container = wrapper.find('.container');
+      const Icon = wrapper.find('.icons');
 
-      expect(container.hasClass('hasConfirm')).toBe(true);
+      expect(Icon.exists()).toBe(true);
     });
 
-    it(`'Simple' mode renders a confirmation message, raises the 'onClick' event after confirmation, and resets the action label`, () => {
+    it('image is used instead of icon if icon prop is a string', () => {
       const mockLabel = 'test-label';
-      const confirmationMsg = 'Click again to confirm';
-      const spy = jest.fn();
       const wrapper = mount(
         <PageHeaderAction
           {...defaultProps}
           label={mockLabel}
-          confirmationMode="Simple"
-          onClick={spy}
+          icon={'test'}
+          imgAlt={'alt'}
         />,
       );
 
-      let span = wrapper.find('span');
+      const Icon = wrapper.find('.icons');
 
-      expect(span.text()).toBe(mockLabel);
+      expect(Icon.exists()).toBe(false);
+    });
 
-      wrapper.simulate('click');
+    it('raises onActionSelected', () => {
+      const spy = jest.fn();
+      const wrapper = mount(
+        <PageHeaderAction {...defaultProps} onClick={spy} />,
+      );
 
-      span = wrapper.find('span');
+      const container = wrapper.find('.container');
+      container.simulate('click');
 
-      expect(span.text()).toBe(confirmationMsg);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
 
-      wrapper.simulate('click');
+    describe('confirmation', () => {
+      it(`'Simple' mode changes the background color when clicked for the first time`, () => {
+        const spy = jest.fn();
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={'test-label'}
+            confirmationMode="Simple"
+            onClick={spy}
+          />,
+        );
+        let container = wrapper.find('.container');
+        expect(container.hasClass('hasConfirm')).toBe(false);
 
-      span = wrapper.find('span');
+        wrapper.simulate('click');
+        wrapper.update();
 
-      expect(spy).toHaveBeenCalledTimes(1);
-      expect(span.text()).toBe(mockLabel);
-    });
+        container = wrapper.find('.container');
 
-    it(`'Simple' mode renders a confirmation message, and doesn't raise the 'onClick' event on 'mouseleave' when confirmation is required`, async () => {
-      const mockLabel = 'test-label';
-      const confirmationMsg = 'Click again to confirm';
-      const spy = jest.fn();
-      jest.useFakeTimers();
+        expect(container.hasClass('hasConfirm')).toBe(true);
+      });
 
-      const wrapper = mount(
-        <PageHeaderAction
-          {...defaultProps}
-          label={mockLabel}
-          confirmationMode="Simple"
-          onClick={spy}
-        />,
-      );
+      it(`'Simple' mode renders a confirmation message, raises the 'onClick' event after confirmation, and resets the action label`, () => {
+        const mockLabel = 'test-label';
+        const confirmationMsg = 'Click again to confirm';
+        const spy = jest.fn();
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={mockLabel}
+            confirmationMode="Simple"
+            onClick={spy}
+          />,
+        );
+
+        let span = wrapper.find('span');
+
+        expect(span.text()).toBe(mockLabel);
 
-      await act(async () => {
         wrapper.simulate('click');
-      });
-      wrapper.update();
 
-      let span = wrapper.find('span');
-      let container = wrapper.find('.container');
+        span = wrapper.find('span');
 
-      expect(container.hasClass('hasConfirm')).toBe(true);
-      expect(span.text()).toBe(confirmationMsg);
-      expect(spy).not.toHaveBeenCalled();
+        expect(span.text()).toBe(confirmationMsg);
+
+        wrapper.simulate('click');
 
-      await act(async () => {
-        await wrapper.simulate('mouseleave');
+        span = wrapper.find('span');
+
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(span.text()).toBe(mockLabel);
       });
-      wrapper.update();
 
-      await act(async () => {
-        jest.runAllTimers();
+      it(`'Simple' mode renders a confirmation message, and doesn't raise the 'onClick' event on 'mouseleave' when confirmation is required`, async () => {
+        const mockLabel = 'test-label';
+        const confirmationMsg = 'Click again to confirm';
+        const spy = jest.fn();
+        jest.useFakeTimers();
+
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={mockLabel}
+            confirmationMode="Simple"
+            onClick={spy}
+          />,
+        );
+
+        await act(async () => {
+          wrapper.simulate('click');
+        });
+        wrapper.update();
+
+        let span = wrapper.find('span');
+        let container = wrapper.find('.container');
+
+        expect(container.hasClass('hasConfirm')).toBe(true);
+        expect(span.text()).toBe(confirmationMsg);
+        expect(spy).not.toHaveBeenCalled();
+
+        await act(async () => {
+          await wrapper.simulate('mouseleave');
+        });
+        wrapper.update();
+
+        await act(async () => {
+          jest.runAllTimers();
+        });
+        wrapper.update();
+
+        span = wrapper.find('span');
+        container = wrapper.find('.container');
+
+        expect(span.text()).toBe(mockLabel);
+        expect(spy).not.toHaveBeenCalled();
+        expect(container.hasClass('hasConfirm')).toBe(false);
       });
-      wrapper.update();
 
-      span = wrapper.find('span');
-      container = wrapper.find('.container');
+      it(`'Advanced' mode changes the background color when clicked for the first time`, async () => {
+        const spy = jest.fn();
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={'test-label'}
+            confirmationMode="Advanced"
+            onClick={spy}
+          />,
+        );
+        let container = wrapper.find('.container').first();
+        expect(container.hasClass('hasConfirm')).toBe(false);
+
+        await act(async () => {
+          await wrapper.simulate('click');
+        });
+        wrapper.update();
+
+        container = wrapper.find('.container').first();
+
+        expect(container.hasClass('hasConfirm')).toBe(true);
+      });
 
-      expect(span.text()).toBe(mockLabel);
-      expect(spy).not.toHaveBeenCalled();
-      expect(container.hasClass('hasConfirm')).toBe(false);
-    });
+      it(`'Advanced' mode confirmation pop up, raises the 'onClick' event after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, async () => {
+        const spy = jest.fn();
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={'test-label'}
+            confirmationMode="Advanced"
+            onClick={spy}
+          />,
+        );
+        let confirmation = wrapper.find(ConfirmDialog);
 
-    it(`'Advanced' mode changes the background color when clicked for the first time`, async () => {
-      const spy = jest.fn();
-      const wrapper = mount(
-        <PageHeaderAction
-          {...defaultProps}
-          label={'test-label'}
-          confirmationMode="Advanced"
-          onClick={spy}
-        />,
-      );
-      let container = wrapper.find('.container').first();
-      expect(container.hasClass('hasConfirm')).toBe(false);
+        expect(confirmation.exists()).toBe(false);
 
-      await act(async () => {
-        await wrapper.simulate('click');
-      });
-      wrapper.update();
+        await act(async () => {
+          await wrapper.simulate('click');
+        });
+        wrapper.update();
 
-      container = wrapper.find('.container').first();
+        confirmation = wrapper.find(ConfirmDialog);
 
-      expect(container.hasClass('hasConfirm')).toBe(true);
-    });
+        expect(confirmation.exists()).toBe(true);
 
-    it(`'Advanced' mode confirmation pop up, raises the 'onClick' event after the 'Confirm' button is clicked, and finally dismisses the confirmation pop up`, async () => {
-      const spy = jest.fn();
-      const wrapper = mount(
-        <PageHeaderAction
-          {...defaultProps}
-          label={'test-label'}
-          confirmationMode="Advanced"
-          onClick={spy}
-        />,
-      );
-      let confirmation = wrapper.find(ConfirmDialog);
+        const confirmButton = wrapper.find(TextButton).last();
+
+        act(() => {
+          confirmButton.simulate('click');
+        });
+        wrapper.update();
 
-      expect(confirmation.exists()).toBe(false);
+        confirmation = wrapper.find(ConfirmDialog);
 
-      await act(async () => {
-        await wrapper.simulate('click');
+        expect(confirmation.exists()).toBe(false);
+        expect(spy).toHaveBeenCalledTimes(1);
       });
-      wrapper.update();
 
-      confirmation = wrapper.find(ConfirmDialog);
+      it(`'Advanced' mode confirmation pop up, does not raise the 'onClick' event after the 'Cancel' button is clicked, and finally dismisses the confirmation pop up`, async () => {
+        const spy = jest.fn();
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={'test-label'}
+            confirmationMode="Advanced"
+            onClick={spy}
+          />,
+        );
+        let confirmation = wrapper.find(ConfirmDialog);
 
-      expect(confirmation.exists()).toBe(true);
+        expect(confirmation.exists()).toBe(false);
 
-      const confirmButton = wrapper.find(TextButton).last();
+        await act(async () => {
+          await wrapper.simulate('click');
+        });
+        wrapper.update();
 
-      act(() => {
-        confirmButton.simulate('click');
-      });
-      wrapper.update();
+        confirmation = wrapper.find(ConfirmDialog);
 
-      confirmation = wrapper.find(ConfirmDialog);
+        expect(confirmation.exists()).toBe(true);
 
-      expect(confirmation.exists()).toBe(false);
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
+        const confirmButton = wrapper.find(TextButton).first();
 
-    it(`'Advanced' mode confirmation pop up, does not raise the 'onClick' event after the 'Cancel' button is clicked, and finally dismisses the confirmation pop up`, async () => {
-      const spy = jest.fn();
-      const wrapper = mount(
-        <PageHeaderAction
-          {...defaultProps}
-          label={'test-label'}
-          confirmationMode="Advanced"
-          onClick={spy}
-        />,
-      );
-      let confirmation = wrapper.find(ConfirmDialog);
+        act(() => {
+          confirmButton.simulate('click');
+        });
+        wrapper.update();
 
-      expect(confirmation.exists()).toBe(false);
+        confirmation = wrapper.find(ConfirmDialog);
 
-      await act(async () => {
-        await wrapper.simulate('click');
+        expect(confirmation.exists()).toBe(false);
+        expect(spy).not.toHaveBeenCalled();
       });
-      wrapper.update();
 
-      confirmation = wrapper.find(ConfirmDialog);
+      it(`'Advanced' mode renders a confirmation pop up, does not raise the 'onClick' event when the mouse leaves component, and finally dismisses the confirmation pop up`, async () => {
+        const spy = jest.fn();
+        jest.useFakeTimers();
 
-      expect(confirmation.exists()).toBe(true);
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={'test-label'}
+            confirmationMode="Advanced"
+            onClick={spy}
+          />,
+        );
+        let confirmation = wrapper.find(ConfirmDialog);
 
-      const confirmButton = wrapper.find(TextButton).first();
+        expect(confirmation.exists()).toBe(false);
 
-      act(() => {
-        confirmButton.simulate('click');
-      });
-      wrapper.update();
+        await act(async () => {
+          await wrapper.simulate('click');
+        });
+        wrapper.update();
 
-      confirmation = wrapper.find(ConfirmDialog);
+        confirmation = wrapper.find(ConfirmDialog);
 
-      expect(confirmation.exists()).toBe(false);
-      expect(spy).not.toHaveBeenCalled();
-    });
+        expect(confirmation.exists()).toBe(true);
 
-    it(`'Advanced' mode renders a confirmation pop up, does not raise the 'onClick' event when the mouse leaves component, and finally dismisses the confirmation pop up`, async () => {
-      const spy = jest.fn();
-      jest.useFakeTimers();
+        await act(async () => {
+          await wrapper.simulate('mouseleave');
+        });
+        wrapper.update();
 
-      const wrapper = mount(
-        <PageHeaderAction
-          {...defaultProps}
-          label={'test-label'}
-          confirmationMode="Advanced"
-          onClick={spy}
-        />,
-      );
-      let confirmation = wrapper.find(ConfirmDialog);
+        await act(async () => {
+          jest.runAllTimers();
+        });
+        wrapper.update();
 
-      expect(confirmation.exists()).toBe(false);
+        confirmation = wrapper.find(ConfirmDialog);
 
-      await act(async () => {
-        await wrapper.simulate('click');
+        // TODO: Debug why this isn't passing
+        // expect(confirmation.exists()).toBe(false);
+        expect(spy).not.toHaveBeenCalled();
       });
-      wrapper.update();
 
-      confirmation = wrapper.find(ConfirmDialog);
-
-      expect(confirmation.exists()).toBe(true);
+      it(`'Advanced' mode accepts a 'confirmationConfig' object`, async () => {
+        const mockConfig: ConfirmationConfig = {
+          title: 'test-title',
+          body: 'test-body',
+          cancelButtonText: 'test-cancel',
+          confirmButtonText: 'test-confirm',
+        };
+
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={'test-label'}
+            confirmationMode="Advanced"
+            confirmationConfig={mockConfig}
+          />,
+        );
+
+        await act(async () => {
+          await wrapper.simulate('click');
+        });
+        wrapper.update();
+
+        const confirmation = wrapper.find(ConfirmDialog);
+
+        expect(confirmation.prop('title')).toBe(mockConfig.title);
+        expect(confirmation.prop('children')).toBe(mockConfig.body);
+        expect(confirmation.prop('cancelButtonText')).toBe(
+          mockConfig.cancelButtonText,
+        );
+        expect(confirmation.prop('confirmButtonText')).toBe(
+          mockConfig.confirmButtonText,
+        );
+      });
 
-      await act(async () => {
-        await wrapper.simulate('mouseleave');
+      it(`'Simple' raises onConfirmOpen if set`, () => {
+        const confirmToggleSpy = jest.fn();
+
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={'test-label'}
+            confirmationMode="Simple"
+            confirmationConfig={{ onConfirmOpen: confirmToggleSpy }}
+          />,
+        );
+
+        // toggle confirmation on
+        act(() => {
+          wrapper.simulate('click');
+        });
+
+        expect(confirmToggleSpy).toHaveBeenCalledTimes(1);
+
+        // toggle confirmation off
+        act(() => {
+          wrapper.simulate('click');
+        });
+
+        expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
+        expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
+          mode: 'Simple',
+        });
+        expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false, {
+          mode: 'Simple',
+        });
       });
-      wrapper.update();
 
-      await act(async () => {
-        jest.runAllTimers();
+      it(`'Simple' raises onConfirmOpen when 'mouseleave' if set`, async () => {
+        const confirmToggleSpy = jest.fn();
+
+        jest.useFakeTimers();
+
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={'test-label'}
+            confirmationMode="Simple"
+            confirmationConfig={{ onConfirmOpen: confirmToggleSpy }}
+          />,
+        );
+
+        await act(async () => {
+          wrapper.simulate('click');
+        });
+        wrapper.update();
+
+        await act(async () => {
+          await wrapper.simulate('mouseleave');
+        });
+        wrapper.update();
+
+        await act(async () => {
+          jest.runAllTimers();
+        });
+        wrapper.update();
+
+        expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
+        expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
+          mode: 'Simple',
+        });
+        expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false, {
+          mode: 'Simple',
+        });
       });
-      wrapper.update();
 
-      confirmation = wrapper.find(ConfirmDialog);
+      it(`'Advanced' raises onConfirmOpen when 'Cancel' is clicked, if set`, () => {
+        const confirmToggleSpy = jest.fn();
+
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={'test-label'}
+            confirmationMode="Advanced"
+            confirmationConfig={{ onConfirmOpen: confirmToggleSpy }}
+          />,
+        );
+
+        // toggle confirmation on
+        act(() => {
+          wrapper.simulate('click');
+        });
+        wrapper.update();
+
+        const cancelButton = wrapper.find(TextButton).first();
+
+        act(() => {
+          cancelButton.simulate('click');
+        });
+        wrapper.update();
+
+        expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
+        expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
+          mode: 'Advanced',
+        });
+        expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false, {
+          mode: 'Advanced',
+        });
+      });
 
-      // TODO: Debug why this isn't passing
-      // expect(confirmation.exists()).toBe(false);
-      expect(spy).not.toHaveBeenCalled();
+      it(`'Advanced' raises onConfirmOpen when 'Confirm' is clicked, if set`, () => {
+        const confirmToggleSpy = jest.fn();
+
+        const wrapper = mount(
+          <PageHeaderAction
+            {...defaultProps}
+            label={'test-label'}
+            confirmationMode="Advanced"
+            confirmationConfig={{ onConfirmOpen: confirmToggleSpy }}
+          />,
+        );
+
+        // toggle confirmation on
+        act(() => {
+          wrapper.simulate('click');
+        });
+        wrapper.update();
+
+        const confirmButton = wrapper.find(TextButton).last();
+
+        act(() => {
+          confirmButton.simulate('click');
+        });
+        wrapper.update();
+
+        expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
+        expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
+          mode: 'Advanced',
+        });
+        expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false, {
+          mode: 'Advanced',
+        });
+      });
     });
 
-    it(`'Advanced' mode accepts a 'confirmationConfig' object`, async () => {
-      const mockConfig: ConfirmationConfig = {
-        title: 'test-title',
-        body: 'test-body',
-        cancelButtonText: 'test-cancel',
-        confirmButtonText: 'test-confirm',
-      };
-
+    it(`sets background color when actionType is 'Context'`, () => {
+      const spy = jest.fn();
       const wrapper = mount(
         <PageHeaderAction
-          {...defaultProps}
-          label={'test-label'}
-          confirmationMode="Advanced"
-          confirmationConfig={mockConfig}
+          label={'action-label'}
+          actionType={PageHeaderActionType.Context}
+          onClick={spy}
         />,
       );
 
-      await act(async () => {
-        await wrapper.simulate('click');
-      });
-      wrapper.update();
-
-      const confirmation = wrapper.find(ConfirmDialog);
+      const container = wrapper.find('.container');
 
-      expect(confirmation.prop('title')).toBe(mockConfig.title);
-      expect(confirmation.prop('children')).toBe(mockConfig.body);
-      expect(confirmation.prop('cancelButtonText')).toBe(
-        mockConfig.cancelButtonText,
-      );
-      expect(confirmation.prop('confirmButtonText')).toBe(
-        mockConfig.confirmButtonText,
-      );
+      expect(container.hasClass('context')).toBe(true);
     });
 
-    it(`'Simple' raises onConfirmOpen if set`, () => {
-      const confirmToggleSpy = jest.fn();
-
+    it(`sets background color when actionType is 'Active'`, () => {
+      const spy = jest.fn();
       const wrapper = mount(
         <PageHeaderAction
-          {...defaultProps}
-          label={'test-label'}
-          confirmationMode="Simple"
-          confirmationConfig={{ onConfirmOpen: confirmToggleSpy }}
+          label={'action-label'}
+          actionType={PageHeaderActionType.Active}
+          onClick={spy}
         />,
       );
 
-      // toggle confirmation on
-      act(() => {
-        wrapper.simulate('click');
-      });
-
-      expect(confirmToggleSpy).toHaveBeenCalledTimes(1);
+      const container = wrapper.find('.container');
 
-      // toggle confirmation off
-      act(() => {
-        wrapper.simulate('click');
-      });
-
-      expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
-      expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
-        mode: 'Simple',
-      });
-      expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false, {
-        mode: 'Simple',
-      });
+      expect(container.hasClass('active')).toBe(true);
     });
 
-    it(`'Simple' raises onConfirmOpen when 'mouseleave' if set`, async () => {
-      const confirmToggleSpy = jest.fn();
-
-      jest.useFakeTimers();
-
+    it(`disallows interactions when action is set to disabled`, () => {
+      const spy = jest.fn();
       const wrapper = mount(
         <PageHeaderAction
-          {...defaultProps}
-          label={'test-label'}
-          confirmationMode="Simple"
-          confirmationConfig={{ onConfirmOpen: confirmToggleSpy }}
+          label={'action-label'}
+          disabled={true}
+          onClick={spy}
         />,
       );
 
-      await act(async () => {
-        wrapper.simulate('click');
-      });
-      wrapper.update();
+      const disabledAttribute = wrapper.find('.container').prop('disabled');
 
-      await act(async () => {
-        await wrapper.simulate('mouseleave');
-      });
-      wrapper.update();
-
-      await act(async () => {
-        jest.runAllTimers();
-      });
-      wrapper.update();
+      wrapper.simulate('click');
 
-      expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
-      expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
-        mode: 'Simple',
-      });
-      expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false, {
-        mode: 'Simple',
-      });
+      expect(disabledAttribute).toBe(true);
+      expect(spy).not.toHaveBeenCalled();
     });
+  });
 
-    it(`'Advanced' raises onConfirmOpen when 'Cancel' is clicked, if set`, () => {
-      const confirmToggleSpy = jest.fn();
+  describe('PageHeaderNavigationAction', () => {
+    const defaultProps = {
+      label: 'Action Label',
+      path: '/action-path',
+    };
 
-      const wrapper = mount(
-        <PageHeaderAction
-          {...defaultProps}
-          label={'test-label'}
-          confirmationMode="Advanced"
-          confirmationConfig={{ onConfirmOpen: confirmToggleSpy }}
-        />,
+    it('renders the component without crashing', () => {
+      const wrapper = shallow(
+        <PageHeaderAction {...defaultProps} path="/test" />,
       );
+      expect(wrapper).toBeTruthy();
+    });
 
-      // toggle confirmation on
-      act(() => {
-        wrapper.simulate('click');
-      });
-      wrapper.update();
-
-      const cancelButton = wrapper.find(TextButton).first();
+    it('renders a Link when path is provided', () => {
+      const wrapper = mount(
+        <Router>
+          <PageHeaderAction {...defaultProps} />
+        </Router>,
+      );
 
-      act(() => {
-        cancelButton.simulate('click');
-      });
-      wrapper.update();
+      expect(wrapper.find(Link)).toHaveLength(1);
+    });
 
-      expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
-      expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
-        mode: 'Advanced',
-      });
-      expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false, {
-        mode: 'Advanced',
-      });
+    it('renders a label', () => {
+      const mockLabel = 'test-label';
+      const wrapper = mount(
+        <Router>
+          <PageHeaderAction {...defaultProps} label={mockLabel} path="/test" />
+        </Router>,
+      );
+      const label = wrapper.find('span');
+      expect(label.text()).toBe(mockLabel);
     });
 
-    it(`'Advanced' raises onConfirmOpen when 'Confirm' is clicked, if set`, () => {
-      const confirmToggleSpy = jest.fn();
+    it('renders an icon, if set', () => {
+      const mockLabel = 'test-label';
+      const wrapper = mount(
+        <Router>
+          {' '}
+          <PageHeaderAction
+            {...defaultProps}
+            label={mockLabel}
+            icon={IconName.ChevronRight}
+            path="/test"
+          />
+        </Router>,
+      );
+      const icon = wrapper.find('.icons');
+      expect(icon.exists()).toBe(true);
+    });
 
+    it('renders an image instead of icon if icon prop is a string', () => {
+      const mockLabel = 'test-label';
       const wrapper = mount(
-        <PageHeaderAction
-          {...defaultProps}
-          label={'test-label'}
-          confirmationMode="Advanced"
-          confirmationConfig={{ onConfirmOpen: confirmToggleSpy }}
-        />,
+        <Router>
+          <PageHeaderAction
+            {...defaultProps}
+            label={mockLabel}
+            icon="test"
+            imgAlt="alt"
+            path="/test"
+          />
+        </Router>,
       );
+      const icon = wrapper.find('.icons');
+      expect(icon.exists()).toBe(false);
+      const image = wrapper.find('img');
+      expect(image.exists()).toBe(true);
+    });
 
-      // toggle confirmation on
-      act(() => {
-        wrapper.simulate('click');
-      });
-      wrapper.update();
+    it('renders a link with correct path', () => {
+      const mockPath = '/test-path';
+      const wrapper = mount(
+        <Router>
+          <PageHeaderAction {...defaultProps} path={mockPath} />
+        </Router>,
+      );
+      const link = wrapper.find('Link');
+      expect(link.prop('to')).toBe(mockPath);
+    });
 
-      const confirmButton = wrapper.find(TextButton).last();
+    it('opens link in a new tab if openInNewTab is true', () => {
+      const wrapper = mount(
+        <Router>
+          <PageHeaderAction {...defaultProps} path="/test" openInNewTab />
+        </Router>,
+      );
+      const link = wrapper.find('a');
+      expect(link.prop('target')).toBe('_blank');
+    });
 
-      act(() => {
-        confirmButton.simulate('click');
-      });
-      wrapper.update();
+    it('does not open link in a new tab if openInNewTab is false', () => {
+      const wrapper = mount(
+        <Router>
+          <PageHeaderAction
+            {...defaultProps}
+            path="/test"
+            openInNewTab={false}
+          />
+        </Router>,
+      );
+      const link = wrapper.find('Link');
+      expect(link.prop('target')).toBeUndefined();
+    });
 
-      expect(confirmToggleSpy).toHaveBeenCalledTimes(2);
-      expect(confirmToggleSpy).toHaveBeenNthCalledWith(1, true, {
-        mode: 'Advanced',
-      });
-      expect(confirmToggleSpy).toHaveBeenNthCalledWith(2, false, {
-        mode: 'Advanced',
-      });
+    it('renders with disabled class if disabled prop is true', () => {
+      const wrapper = mount(
+        <Router>
+          <PageHeaderAction {...defaultProps} path="/test" disabled />
+        </Router>,
+      );
+      const container = wrapper.find('.container').hostNodes();
+      expect(container.hasClass('disabled')).toBe(true);
     });
   });
+});
 
-  it(`sets background color when actionType is 'Context'`, () => {
-    const spy = jest.fn();
-    const wrapper = shallow(
-      <PageHeaderAction
-        label={'action-label'}
-        actionType={PageHeaderActionType.Context}
-        onClick={spy}
-      />,
-    );
-
-    const container = wrapper.find('.container');
-
-    expect(container.hasClass('context')).toBe(true);
+describe('isPageHeaderNavigationAction', () => {
+  it('should return true for a valid PageHeaderNavigationActionProps object', () => {
+    const action = { label: 'Navigation Action', path: '/home' };
+    expect(isPageHeaderNavigationAction(action)).toBe(true);
   });
 
-  it(`sets background color when actionType is 'Active'`, () => {
-    const spy = jest.fn();
-    const wrapper = shallow(
-      <PageHeaderAction
-        label={'action-label'}
-        actionType={PageHeaderActionType.Active}
-        onClick={spy}
-      />,
-    );
-
-    const container = wrapper.find('.container');
-
-    expect(container.hasClass('active')).toBe(true);
+  it('should return false for an invalid PageHeaderNavigationActionProps object', () => {
+    const action = { label: 'Navigation Action', onClick: noop };
+    expect(isPageHeaderNavigationAction(action)).toBe(false);
   });
 
-  it(`disallows interactions when action is set to disabled`, () => {
-    const spy = jest.fn();
-    const wrapper = mount(
-      <PageHeaderAction label={'action-label'} disabled={true} onClick={spy} />,
-    );
+  it('should return false for a non-PageHeaderNavigationActionProps object', () => {
+    const action = { label: 'JS Action', onClick: noop };
+    expect(isPageHeaderNavigationAction(action)).toBe(false);
+  });
+});
 
-    const disabledAttribute = wrapper.find('.container').prop('disabled');
+describe('isPageHeaderJsAction', () => {
+  it('should return true for a valid PageHeaderJsActionProps object', () => {
+    const action = { label: 'JS Action', onClick: noop };
+    expect(isPageHeaderJsAction(action)).toBe(true);
+  });
 
-    wrapper.simulate('click');
+  it('should return false for an invalid PageHeaderNavigationActionProps object', () => {
+    const action = { label: 'JS Action', path: '/home' };
+    expect(isPageHeaderJsAction(action)).toBe(false);
+  });
 
-    expect(disabledAttribute).toBe(true);
-    expect(spy).not.toHaveBeenCalled();
+  it('should return false in case `onClick` property is set to `undefined`', () => {
+    const action = {
+      label: 'Navigation Action',
+      path: '/home',
+      onClick: undefined,
+    };
+    expect(isPageHeaderJsAction(action)).toBe(false);
   });
 });