Call miqCheckForChanges in breadcrumbs

https://bugzilla.redhat.com/show_bug.cgi?id=1725927
ManageIQ · Aug 13, 2019 · b38be36 · b38be36
1 parent 5063765
commit b38be36
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 3 deletions.
diff --git a/app/javascript/components/breadcrumbs/index.js b/app/javascript/components/breadcrumbs/index.js
@@ -3,21 +3,23 @@ import PropTypes from 'prop-types';
 import { Breadcrumb } from 'patternfly-react';
 import { unescape } from 'lodash';
 
+import { onClickTree, onClick } from './on-click-functions';
+
 const parsedText = text => unescape(text).replace(/<[/]{0,1}strong>/g, '');
 
 class Breadcrumbs extends Component {
   renderItems = () => {
     const {
       items, controllerName,
     } = this.props;
-    return items.filter((item, index) => index !== (items.length - 1)).map((item, index) => {
+    return items.filter((_item, index) => index !== (items.length - 1)).map((item, index) => {
       const text = parsedText(item.title);
       if ((item.url || item.key) && !item.action) {
         if (item.key) {
           return (
             <Breadcrumb.Item
               key={`${item.key}-${index}`} // eslint-disable-line react/no-array-index-key
-              onClick={() => sendDataWithRx({ breadcrumbSelect: { path: `/${controllerName}/tree_select`, key: item.key } })}
+              onClick={() => onClickTree(controllerName, item)}
             >
               {text}
             </Breadcrumb.Item>
@@ -27,6 +29,7 @@ class Breadcrumbs extends Component {
           <Breadcrumb.Item
             key={item.url || index}
             href={item.url}
+            onClick={e => onClick(e, item.url)}
           >
             {text}
           </Breadcrumb.Item>
@@ -38,7 +41,7 @@ class Breadcrumbs extends Component {
 
   render() {
     const {
-      items, title, controllerName, ...rest
+      items, title, controllerName, ...rest // eslint-disable-line no-unused-vars
     } = this.props;
 
     return (

diff --git a/app/javascript/components/breadcrumbs/on-click-functions.js b/app/javascript/components/breadcrumbs/on-click-functions.js
@@ -0,0 +1,12 @@
+export const onClickTree = (controllerName, item) => (
+  window.miqCheckForChanges()
+    ? sendDataWithRx({ breadcrumbSelect: { path: `/${controllerName}/tree_select`, key: item.key } }) : null
+);
+
+export const onClick = (e, url) => {
+  e.preventDefault();
+  if (window.miqCheckForChanges()) {
+    window.location.assign(url);
+  }
+  return null;
+};
diff --git a/app/javascript/spec/breadcrumbs/__snapshots__/breadcrumbs.spec.js.snap b/app/javascript/spec/breadcrumbs/__snapshots__/breadcrumbs.spec.js.snap
@@ -55,13 +55,15 @@ exports[`Breadcrumbs component is correctly rendered 1`] = `
           active={false}
           href="/providers"
           key="/providers"
+          onClick={[Function]}
         >
           <li
             className=""
           >
             <SafeAnchor
               componentClass="a"
               href="/providers"
+              onClick={[Function]}
             >
               <a
                 href="/providers"

diff --git a/app/javascript/spec/breadcrumbs/breadcrumbs.spec.js b/app/javascript/spec/breadcrumbs/breadcrumbs.spec.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import toJson from 'enzyme-to-json';
+
+import * as clickFunctions from '../../components/breadcrumbs/on-click-functions';
 import Breadcrumbs from '../../components/breadcrumbs';
 
 describe('Breadcrumbs component', () => {
@@ -19,4 +21,38 @@ describe('Breadcrumbs component', () => {
     const wrapper = mount(<Breadcrumbs {...props} />);
     expect(toJson(wrapper)).toMatchSnapshot();
   });
+
+  it('clicked on breadcrumb in tree', () => {
+    clickFunctions.onClickTree = jest.fn();
+
+    const initialProps = {
+      ...props,
+      items: [
+        { key: 'xx-11', title: 'Item 11' },
+        { title: 'Header' },
+      ],
+    };
+    const wrapper = mount(<Breadcrumbs {...initialProps} />);
+
+    wrapper.find('a').first().simulate('click');
+
+    expect(clickFunctions.onClickTree).toHaveBeenCalledWith(initialProps.controllerName, initialProps.items[0]);
+  });
+
+  it('clicked on breadcrumb', () => {
+    clickFunctions.onClick = jest.fn();
+
+    const initialProps = {
+      ...props,
+      items: [
+        { url: 'xx-11', title: 'Item 11' },
+        { title: 'Header' },
+      ],
+    };
+    const wrapper = mount(<Breadcrumbs {...initialProps} />);
+
+    wrapper.find('a').first().simulate('click');
+
+    expect(clickFunctions.onClick).toHaveBeenCalledWith(expect.any(Object), initialProps.items[0].url);
+  });
 });
diff --git a/app/javascript/spec/breadcrumbs/on-click-functions.spec.js b/app/javascript/spec/breadcrumbs/on-click-functions.spec.js
@@ -0,0 +1,56 @@
+import { onClickTree, onClick } from '../../components/breadcrumbs/on-click-functions';
+
+describe('Breadcrumbs onClick functions', () => {
+  describe('onClick', () => {
+    it('calls e.prevent default', () => {
+      const mockFn = jest.fn();
+      window.miqCheckForChanges = jest.fn(() => false);
+
+      const result = onClick({ preventDefault: mockFn }, '/url');
+
+      expect(mockFn).toHaveBeenCalled();
+      expect(window.miqCheckForChanges).toHaveBeenCalled();
+      expect(result).toEqual(null);
+
+      window.miqCheckForChanges.mockClear();
+    });
+
+    it('change location', () => {
+      const mockFn = jest.fn();
+      window.miqCheckForChanges = () => true;
+      window.location.assign = jest.fn();
+
+      onClick({ preventDefault: mockFn }, '/url');
+
+      expect(window.location.assign).toHaveBeenCalledWith('/url');
+
+      window.location.assign.mockClear();
+    });
+  });
+
+  describe('onClickTree', () => {
+    it('returns null if no changes', () => {
+      window.miqCheckForChanges = () => false;
+      jest.spyOn(window, 'sendDataWithRx');
+
+      const result = onClickTree();
+
+      expect(result).toEqual(null);
+      expect(window.sendDataWithRx).not.toHaveBeenCalled();
+    });
+
+    it('calls rxjs', () => {
+      window.miqCheckForChanges = () => true;
+      jest.spyOn(window, 'sendDataWithRx');
+
+      onClickTree('pxe', { key: 'xx-11' });
+
+      expect(window.sendDataWithRx).toHaveBeenCalledWith({
+        breadcrumbSelect: {
+          key: 'xx-11',
+          path: '/pxe/tree_select',
+        },
+      });
+    });
+  });
+});