EjectButton component test (#348)

* added test

* fixed flow

* inlined click handler

* improved test text as requested in review

* removed typing as it's a typescript definition

* updated snapshot

src/components/EjectButton/EjectButton.js

@@ -17,32 +17,29 @@ type Props = {
   onClick: () => void,
 };
 
-class EjectButton extends PureComponent<Props> {
-  handleClick = () => {
-    dialog.showMessageBox(
-      {
-        type: 'warning',
-        buttons: ['Yes, light this candle', "Ahhh no don't do that"],
-        defaultId: 1,
-        cancelId: 1,
-        title: 'Are you sure?',
-        message:
-          'Ejecting is a permanent one-time task that unwraps the create-react-app environment.',
-        detail:
-          "It's recommended for users comfortable with Webpack, who need to make tweaks not possible without ejecting.",
-      },
-      (response: number) => {
-        // The response will be the index of the chosen option, from the
-        // `buttons` array above.
-        const isConfirmed = response === 0;
-
-        if (isConfirmed) {
-          this.props.onClick();
-        }
-      }
-    );
-  };
+export const dialogOptions = {
+  type: 'warning',
+  buttons: ['Yes, light this candle', "Ahhh no don't do that"],
+  defaultId: 1,
+  cancelId: 1,
+  title: 'Are you sure?',
+  message:
+    'Ejecting is a permanent one-time task that unwraps the create-react-app environment.',
+  detail:
+    "It's recommended for users comfortable with Webpack, who need to make tweaks not possible without ejecting.",
+};
+
+export function dialogCallback(response: number) {
+  // The response will be the index of the chosen option, from the
+  // `buttons` array above.
+  const isConfirmed = response === 0;
 
+  if (isConfirmed) {
+    this.props.onClick();
+  }
+}
+
+class EjectButton extends PureComponent<Props> {
   render() {
     const { isRunning } = this.props;
 
@@ -52,7 +49,9 @@ class EjectButton extends PureComponent<Props> {
         height={34}
         colors={[COLORS.purple[500], COLORS.blue[700]]}
         isOn={isRunning}
-        onClick={this.handleClick}
+        onClick={() =>
+          dialog.showMessageBox(dialogOptions, dialogCallback.bind(this))
+        }
       >
         <IconBase size={24} icon={ejectIcon} />
       </BigClickableButton>

src/components/EjectButton/EjectButton.test.js

@@ -0,0 +1,52 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+import React from 'react';
+import { shallow } from 'enzyme';
+import { remote } from 'electron'; // Mocked
+import EjectButton, { dialogOptions, dialogCallback } from './EjectButton';
+import BigClickableButton from '../BigClickableButton';
+
+const { dialog } = remote;
+
+describe('EjectButton component', () => {
+  let wrapper;
+  let clickHandler;
+
+  beforeEach(() => {
+    clickHandler = jest.fn();
+    wrapper = shallow(<EjectButton onClick={clickHandler} />);
+  });
+
+  it('should render without being pressed (not running)', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render as pressed (running)', () => {
+    wrapper.setProps({ isRunning: true });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('Confirm dialog', () => {
+    let ejectButton;
+    beforeEach(() => {
+      ejectButton = wrapper.find(BigClickableButton);
+      ejectButton.simulate('click');
+    });
+
+    it('should display dialog', () => {
+      expect(dialog.showMessageBox).toBeCalledWith(
+        dialogOptions,
+        expect.anything()
+      );
+    });
+
+    it('should call clickHandler if confirmed', () => {
+      dialogCallback.call(wrapper.instance(), 0);
+      expect(clickHandler.mock.calls.length).toBe(1);
+    });
+
+    it('should dismiss with-out calling clickHandler', () => {
+      dialogCallback.call(wrapper.instance(), 1);
+      expect(clickHandler.mock.calls.length).toBe(0);
+    });
+  });
+});

src/components/EjectButton/__snapshots__/EjectButton.test.js.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EjectButton component should render as pressed (running) 1`] = `
+<BigClickableButton
+  colors={
+    Array [
+      "#651fff",
+      "#304FFE",
+    ]
+  }
+  height={34}
+  isOn={true}
+  onClick={[Function]}
+  thickness={6}
+  width={40}
+>
+  <Icon
+    fill="currentColor"
+    icon={
+      Object {
+        "children": Array [
+          Object {
+            "attribs": Object {
+              "d": "M5 17h14v2H5zm7-12L5.33 15h13.34z",
+            },
+            "name": "path",
+          },
+        ],
+        "viewBox": "0 0 24 24",
+      }
+    }
+    size={24}
+  />
+</BigClickableButton>
+`;
+
+exports[`EjectButton component should render without being pressed (not running) 1`] = `
+<BigClickableButton
+  colors={
+    Array [
+      "#651fff",
+      "#304FFE",
+    ]
+  }
+  height={34}
+  onClick={[Function]}
+  thickness={6}
+  width={40}
+>
+  <Icon
+    fill="currentColor"
+    icon={
+      Object {
+        "children": Array [
+          Object {
+            "attribs": Object {
+              "d": "M5 17h14v2H5zm7-12L5.33 15h13.34z",
+            },
+            "name": "path",
+          },
+        ],
+        "viewBox": "0 0 24 24",
+      }
+    }
+    size={24}
+  />
+</BigClickableButton>
+`;