EjectButton component test

src/components/EjectButton/EjectButton.js

@@ -7,6 +7,7 @@ import { remote } from 'electron';
 import { COLORS } from '../../constants';
 
 import BigClickableButton from '../BigClickableButton';
+import type Electron from 'electron';
 
 const { dialog } = remote;
 
@@ -17,30 +18,31 @@ type Props = {
   onClick: () => void,
 };
 
+export const dialogOptions: Electron.MessageBoxOptions = {
+  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> {
   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();
-        }
-      }
-    );
+    dialog.showMessageBox(dialogOptions, dialogCallback.bind(this));
   };
 
   render() {

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 (not running)', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render (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 (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>
+`;
+
+exports[`EjectButton component should render (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>
+`;