diff --git a/locales/en/translation.json b/locales/en/translation.json index ee8fec5721..debc66a08a 100644 --- a/locales/en/translation.json +++ b/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", diff --git a/src/components/TopBar/HamburgerMenu.jsx b/src/components/TopBar/HamburgerMenu.jsx index 9fd8226678..7b7f5c50fe 100644 --- a/src/components/TopBar/HamburgerMenu.jsx +++ b/src/components/TopBar/HamburgerMenu.jsx @@ -23,11 +23,16 @@ const HamburgerMenu = createMenu({ hasInstructions, isEditingInstructions, isUserAuthenticated, + onAutoFormat, onStartEditingInstructions, onStartGithubLogIn, }) { return ( + + {i18next.t('top-bar.format-code')} + + { + 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 ( + + + + ); +} + +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); + }); +}); diff --git a/src/containers/TopBar.js b/src/containers/TopBar.js index 9fd0e23752..aaf21c77c1 100644 --- a/src/containers/TopBar.js +++ b/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)); },