From 2ebcd850d6242792710c82599c922ec4e27e06fc Mon Sep 17 00:00:00 2001
From: Christopher Willis-Ford <cwillisf@media.mit.edu>
Date: Fri, 7 Feb 2020 16:41:32 -0800
Subject: [PATCH] add unit tests for About button on menu bar
---
src/components/menu-bar/menu-bar.jsx | 24 +++++++-----
test/unit/components/menu-bar.test.jsx | 52 ++++++++++++++++++++++++++
2 files changed, 66 insertions(+), 10 deletions(-)
create mode 100644 test/unit/components/menu-bar.test.jsx
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 92bf3f46e..354e5c06d 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -141,6 +141,19 @@ MenuItemTooltip.propTypes = {
isRtl: PropTypes.bool
};
+const AboutButton = props => (
+ <Button
+ className={classNames(styles.menuBarItem, styles.hoverable)}
+ iconClassName={styles.aboutIcon}
+ iconSrc={aboutIcon}
+ onClick={props.onClick}
+ />
+);
+
+AboutButton.propTypes = {
+ onClick: PropTypes.func.isRequired
+};
+
class MenuBar extends React.Component {
constructor (props) {
super(props);
@@ -311,17 +324,8 @@ class MenuBar extends React.Component {
{remixMessage}
</Button>
);
- const handleClickAbout = this.props.onClickAbout;
// Show the About button only if we have a handler for it (like in the desktop app)
- const aboutButton = handleClickAbout ? (
- <div className={classNames(styles.menuBarItem, styles.hoverable)}>
- <img
- className={styles.aboutIcon}
- onClick={handleClickAbout}
- src={aboutIcon}
- />
- </div>
- ) : null;
+ const aboutButton = this.props.onClickAbout ? <AboutButton onClick={this.props.onClickAbout} /> : null;
return (
<Box
className={classNames(
diff --git a/test/unit/components/menu-bar.test.jsx b/test/unit/components/menu-bar.test.jsx
new file mode 100644
index 000000000..3aaadb9de
--- /dev/null
+++ b/test/unit/components/menu-bar.test.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {mountWithIntl} from '../../helpers/intl-helpers';
+import MenuBar from '../../../src/components/menu-bar/menu-bar';
+import {menuInitialState} from '../../../src/reducers/menus';
+import {LoadingState} from '../../../src/reducers/project-state';
+
+import configureStore from 'redux-mock-store';
+import {Provider} from 'react-redux';
+import VM from 'scratch-vm';
+
+
+describe('MenuBar Component', () => {
+ const store = configureStore()({
+ locales: {
+ isRtl: false,
+ locale: 'en-US'
+ },
+ scratchGui: {
+ menus: menuInitialState,
+ projectState: {
+ loadingState: LoadingState.NOT_LOADED
+ },
+ vm: new VM()
+ }
+ });
+
+ const getComponent = function (props = {}) {
+ return <Provider store={store}><MenuBar {...props} /></Provider>;
+ };
+
+ test('menu bar with no About handler has no About button', () => {
+ const menuBar = mountWithIntl(getComponent());
+ const button = menuBar.find('AboutButton');
+ expect(button.exists()).toBe(false);
+ });
+
+ test('menu bar with an About handler has an About button', () => {
+ const onClickAbout = jest.fn();
+ const menuBar = mountWithIntl(getComponent({onClickAbout}));
+ const button = menuBar.find('AboutButton');
+ expect(button.exists()).toBe(true);
+ });
+
+ test('clicking on About button calls the handler', () => {
+ const onClickAbout = jest.fn();
+ const menuBar = mountWithIntl(getComponent({onClickAbout}));
+ const button = menuBar.find('AboutButton');
+ expect(onClickAbout).toHaveBeenCalledTimes(0);
+ button.simulate('click');
+ expect(onClickAbout).toHaveBeenCalledTimes(1);
+ });
+});
--
GitLab