Adds button to hamburger menu to format code (#2382)

locales/en/translation.json

@@ -4,6 +4,7 @@
     "export-gist": "Export Gist",
     "export-repo": "Export Repo",
     "update-repo": "Update Repo",
+    "format-code": "Format Code",
     "share-to-classroom": "Share To Classroom",
     "add-instructions": "Add Instructions",
     "edit-instructions": "Edit Instructions",

src/components/TopBar/HamburgerMenu.jsx

@@ -23,11 +23,16 @@ const HamburgerMenu = createMenu({
     hasInstructions,
     isEditingInstructions,
     isUserAuthenticated,
+    onAutoFormat,
     onStartEditingInstructions,
     onStartGithubLogIn,
   }) {
     return (
       <Fragment>
+        <MenuItem onClick={onAutoFormat}>
+          {i18next.t('top-bar.format-code')}
+        </MenuItem>
+
         <MenuItem
           isDisabled={isEditingInstructions}
           onClick={onStartEditingInstructions}
@@ -87,6 +92,7 @@ HamburgerMenu.propTypes = {
   hasInstructions: PropTypes.bool.isRequired,
   isEditingInstructions: PropTypes.bool.isRequired,
   isUserAuthenticated: PropTypes.bool.isRequired,
+  onAutoFormat: PropTypes.func.isRequired,
   onStartEditingInstructions: PropTypes.func.isRequired,
   onStartGithubLogIn: PropTypes.func.isRequired,
 };

src/components/TopBar/index.jsx

@@ -50,6 +50,7 @@ export default function TopBar({
   projectKeys,
   shouldShowSavedIndicator,
   validationState,
+  onAutoFormat,
   onClickMenu,
   onCloseMenu,
   onCreateNewProject,
@@ -130,6 +131,7 @@ export default function TopBar({
         isEditingInstructions={isEditingInstructions}
         isOpen={openMenu === 'hamburger'}
         isUserAuthenticated={isUserAuthenticated}
+        onAutoFormat={onAutoFormat}
         onClick={partial(onClickMenu, 'hamburger')}
         onStartEditingInstructions={partial(
           onStartEditingInstructions,
@@ -162,6 +164,7 @@ TopBar.propTypes = {
   projectKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
   shouldShowSavedIndicator: PropTypes.bool.isRequired,
   validationState: PropTypes.string.isRequired,
+  onAutoFormat: PropTypes.func.isRequired,
   onClickMenu: PropTypes.func.isRequired,
   onCloseMenu: PropTypes.func.isRequired,
   onCreateNewProject: PropTypes.func.isRequired,

src/components/__tests__/HamburgerMenu.test.jsx

@@ -0,0 +1,81 @@
+import {fromJS} from 'immutable';
+import React from 'react';
+import {Provider} from 'react-redux';
+import {act, create} from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+
+import {MenuItem} from '../TopBar/createMenu';
+import HamburgerMenu from '../TopBar/HamburgerMenu';
+
+jest.mock('i18next', () => {
+  return {
+    t: jest.fn().mockImplementation(translationKey => translationKey),
+    init: jest.fn(),
+  };
+});
+
+const mockStore = configureStore([]);
+const store = mockStore(
+  fromJS({
+    ui: {
+      openTopBarMenu: 'hamburger',
+    },
+  }),
+);
+
+const DEFAULT_PROPS = {
+  hasInstructions: false,
+  isEditingInstructions: false,
+  isUserAuthenticated: false,
+  onAutoFormat: jest.fn(),
+  onStartEditingInstructions: jest.fn(),
+  onStartGithubLogIn: jest.fn(),
+};
+
+function buildComponent() {
+  return (
+    <Provider store={store}>
+      <HamburgerMenu {...DEFAULT_PROPS} />
+    </Provider>
+  );
+}
+
+function renderComponent(props = {}) {
+  let component;
+  act(() => {
+    component = create(buildComponent(props));
+  });
+  return component;
+}
+
+describe('hamburger menu', () => {
+  let menu;
+
+  beforeEach(() => {
+    menu = renderComponent();
+    DEFAULT_PROPS.onAutoFormat.mockClear();
+    DEFAULT_PROPS.onStartEditingInstructions.mockClear();
+    DEFAULT_PROPS.onStartGithubLogIn.mockClear();
+  });
+
+  it('renders the format code button', () => {
+    const menuItems = menu.root.findAllByType(MenuItem);
+    const formatCodeBtn = menuItems.find(
+      btn => btn.props.children === 'top-bar.format-code',
+    );
+    expect(formatCodeBtn).toBeTruthy();
+  });
+
+  it('calls the passed `onAutoFormat()` method when format code button is pressed', () => {
+    const menuItems = menu.root.findAllByType(MenuItem);
+    const formatCodeBtn = menuItems.find(
+      btn => btn.props.children === 'top-bar.format-code',
+    );
+
+    act(() => {
+      formatCodeBtn.props.onClick();
+    });
+
+    expect(DEFAULT_PROPS.onAutoFormat).toHaveBeenCalledTimes(1);
+  });
+});

src/containers/TopBar.js

@@ -1,6 +1,7 @@
 import {connect} from 'react-redux';
 
 import {
+  beautifyProjectSource,
   closeTopBarMenu,
   createProject,
   createSnapshot,
@@ -72,6 +73,10 @@ function exportRepo(dispatch) {
 
 function mapDispatchToProps(dispatch) {
   return {
+    onAutoFormat() {
+      dispatch(beautifyProjectSource());
+    },
+
     onClickMenu(menuKey) {
       dispatch(toggleTopBarMenu(menuKey));
     },