feat(versions): Add resin tracking for sidebar back button (#1309)

Author: jstoffan

src/elements/common/nav-button/BackButton.js

@@ -5,30 +5,35 @@
  */
 
 import * as React from 'react';
+import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
-import { withRouter } from 'react-router-dom';
-import type { RouterHistory } from 'react-router-dom';
+import { Route, type Location } from 'react-router-dom';
 import IconNavigateLeft from '../../../icons/general/IconNavigateLeft';
 import messages from '../messages';
 import PlainButton from '../../../components/plain-button';
 import './BackButton.scss';
 
 type Props = {
-    history: RouterHistory,
-    path?: string,
+    className?: string,
+    to?: Location,
 };
 
-const BackButton = ({ history, path }: Props) => (
-    <PlainButton
-        className="bdl-BackButton"
-        onClick={() => (path ? history.push(path) : history.goBack())}
-        type="button"
-    >
-        <IconNavigateLeft height={24} width={24} />
-        <span className="accessibility-hidden">
-            <FormattedMessage {...messages.back} />
-        </span>
-    </PlainButton>
+const BackButton = ({ className, to, ...rest }: Props) => (
+    <Route>
+        {({ history }) => (
+            <PlainButton
+                className={classNames('bdl-BackButton', className)}
+                onClick={() => (to ? history.push(to) : history.goBack())}
+                type="button"
+                {...rest}
+            >
+                <IconNavigateLeft height={24} width={24} />
+                <span className="accessibility-hidden">
+                    <FormattedMessage {...messages.back} />
+                </span>
+            </PlainButton>
+        )}
+    </Route>
 );
 
-export default withRouter(BackButton);
+export default BackButton;

src/elements/common/nav-button/__tests__/BackButton-test.js

@@ -1,26 +1,43 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { MemoryRouter, Router } from 'react-router-dom';
+import { mount } from 'enzyme';
 import { BackButton } from '..';
 
-jest.mock('react-router-dom', () => ({
-    withRouter: Component => Component,
-}));
-
 describe('elements/common/nav-button/BackButton', () => {
-    const history = { goBack: jest.fn() };
-    const getWrapper = () => shallow(<BackButton history={history} />);
+    const getWrapper = (props = {}) =>
+        mount(
+            <MemoryRouter initialEntries={['/start', '/test']}>
+                <BackButton {...props} />
+            </MemoryRouter>,
+        );
+    const getHistory = wrapper => wrapper.find(Router).prop('history');
 
     test('should match its snapshot', () => {
         const wrapper = getWrapper();
+        const button = wrapper.find(BackButton).first();
 
-        expect(wrapper).toMatchSnapshot();
+        expect(button).toMatchSnapshot();
     });
 
-    test('should call history back on click', () => {
+    test('should call history back on click if no path is defined', () => {
         const wrapper = getWrapper();
+        const history = getHistory(wrapper);
+
+        history.goBack = jest.fn();
 
         wrapper.simulate('click');
 
         expect(history.goBack).toHaveBeenCalled();
     });
+
+    test('should call history.push on click if a path is defined', () => {
+        const wrapper = getWrapper({ to: '/new' });
+        const history = getHistory(wrapper);
+
+        history.push = jest.fn();
+
+        wrapper.simulate('click');
+
+        expect(history.push).toHaveBeenCalledWith('/new');
+    });
 });

src/elements/common/nav-button/__tests__/__snapshots__/BackButton-test.js.snap

@@ -1,22 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`elements/common/nav-button/BackButton should match its snapshot 1`] = `
-<PlainButton
-  className="bdl-BackButton"
-  onClick={[Function]}
-  type="button"
->
-  <IconNavigateLeft
-    height={24}
-    width={24}
-  />
-  <span
-    className="accessibility-hidden"
-  >
-    <FormattedMessage
-      defaultMessage="Back"
-      id="be.back"
-    />
-  </span>
-</PlainButton>
+<BackButton>
+  <Route>
+    <PlainButton
+      className="bdl-BackButton"
+      onClick={[Function]}
+      type="button"
+    >
+      <button
+        className="btn-plain bdl-BackButton"
+        onClick={[Function]}
+        type="button"
+      >
+        <IconNavigateLeft
+          height={24}
+          width={24}
+        >
+          <AccessibleSVG
+            className="icon-navigate-left "
+            focusable="false"
+            height={24}
+            viewBox="0 0 48 48"
+            width={24}
+          >
+            <svg
+              className="icon-navigate-left "
+              focusable="false"
+              height={24}
+              role="presentation"
+              viewBox="0 0 48 48"
+              width={24}
+            >
+              <path
+                d="M30.8,33.2L21.7,24l9.2-9.2L28,12L16,24l12,12L30.8,33.2z"
+                fill="#494949"
+                stroke="#DCDCDC"
+                strokeMiterlimit="10"
+              />
+              <path
+                d="M0,0h48v48H0V0z"
+                display="none"
+                fill="none"
+              />
+            </svg>
+          </AccessibleSVG>
+        </IconNavigateLeft>
+        <span
+          className="accessibility-hidden"
+        >
+          <FormattedMessage
+            defaultMessage="Back"
+            id="be.back"
+          >
+            <div />
+          </FormattedMessage>
+        </span>
+      </button>
+    </PlainButton>
+  </Route>
+</BackButton>
 `;

src/elements/content-sidebar/versions/VersionsSidebar.js

@@ -36,7 +36,7 @@ const VersionsSidebar = ({ error, isLoading, parentName, ...rest }: Props) => (
         data-resin-feature="versions"
         title={
             <React.Fragment>
-                <BackButton path={`/${parentName}`} />
+                <BackButton data-resin-target="back" to={`/${parentName}`} />
                 <FormattedMessage {...messages.versionsTitle} />
             </React.Fragment>
         }

src/elements/content-sidebar/versions/__tests__/VersionsSidebar-test.js

@@ -9,7 +9,7 @@ jest.mock('../../../common/nav-button', () => ({
 }));
 
 describe('elements/content-sidebar/versions/VersionsSidebar', () => {
-    const getWrapper = (props = {}) => shallow(<VersionsSidebar {...props} />);
+    const getWrapper = (props = {}) => shallow(<VersionsSidebar parentName="activity" {...props} />);
 
     describe('render', () => {
         test('should show the versions list if no error prop is provided', () => {

src/elements/content-sidebar/versions/__tests__/__snapshots__/VersionsSidebar-test.js.snap

@@ -8,7 +8,8 @@ exports[`elements/content-sidebar/versions/VersionsSidebar render should show an
   title={
     <React.Fragment>
       <BackButton
-        path="/undefined"
+        data-resin-target="back"
+        to="/activity"
       />
       <FormattedMessage
         defaultMessage="Version History"
@@ -44,7 +45,8 @@ exports[`elements/content-sidebar/versions/VersionsSidebar render should show th
   title={
     <React.Fragment>
       <BackButton
-        path="/undefined"
+        data-resin-target="back"
+        to="/activity"
       />
       <FormattedMessage
         defaultMessage="Version History"