windows title bar unit test (#597)

spec/__mocks__/electron.ts

@@ -105,6 +105,28 @@ export const ipcRenderer: IIpcRenderer = {
     },
 };
 
+const getCurrentWindow = jest.fn(() => {
+    return {
+        isFullScreen: jest.fn(() => {
+            return false;
+        }),
+        isMaximized: jest.fn(() => {
+            return false;
+        }),
+        on: jest.fn(),
+        removeListener: jest.fn(),
+        isDestroyed: jest.fn(() => {
+            return false;
+        }),
+        close: jest.fn(),
+        maximize: jest.fn(),
+        minimize: jest.fn(),
+        unmaximize: jest.fn(),
+        setFullScreen: jest.fn(),
+    };
+});
+
 export const remote = {
     app,
+    getCurrentWindow,
 };

spec/__snapshots__/windowsTitleBar.spec.ts.snap

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`windows title bar should render correctly 1`] = `
+<div
+  className="title-bar"
+  onDoubleClick={[Function]}
+  style={
+    Object {
+      "display": "flex",
+    }
+  }
+>
+  <div
+    className="title-bar-button-container"
+  >
+    <button
+      className="hamburger-menu-button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      title="Menu"
+    >
+      <svg
+        viewBox="0 0 15 10"
+        x="0px"
+        y="0px"
+      >
+        <rect
+          fill="rgba(255, 255, 255, 0.9)"
+          height="1"
+          width="15"
+        />
+        <rect
+          fill="rgba(255, 255, 255, 0.9)"
+          height="1"
+          width="15"
+          y="4"
+        />
+        <rect
+          fill="rgba(255, 255, 255, 0.9)"
+          height="1"
+          width="152"
+          y="8"
+        />
+      </svg>
+    </button>
+  </div>
+  <div
+    className="title-container"
+  >
+    <img
+      className="symphony-logo"
+    />
+    <p
+      className="title-bar-title"
+    >
+      Symphony
+    </p>
+  </div>
+  <div
+    className="title-bar-button-container"
+  >
+    <button
+      className="title-bar-button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      title="Minimize"
+    >
+      <svg
+        viewBox="0 0 14 1"
+        x="0px"
+        y="0px"
+      >
+        <rect
+          fill="rgba(255, 255, 255, 0.9)"
+          height="0.6"
+          width="14"
+        />
+      </svg>
+    </button>
+  </div>
+  <div
+    className="title-bar-button-container"
+  >
+    <button
+      className="title-bar-button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      title="unMaximize"
+    >
+      <svg
+        viewBox="0 0 14 10.2"
+        x="0px"
+        y="0px"
+      >
+        <path
+          d="M0,0v10.1h10.2V0H0z M9.2,9.2H1.1V1h8.1V9.2z"
+          fill="rgba(255, 255, 255, 0.9)"
+        />
+      </svg>
+    </button>
+  </div>
+  <div
+    className="title-bar-button-container"
+  >
+    <button
+      className="title-bar-button"
+      onClick={[Function]}
+      onMouseDown={[Function]}
+      title="Close"
+    >
+      <svg
+        viewBox="0 0 14 10.2"
+        x="0px"
+        y="0px"
+      >
+        <polygon
+          fill="rgba(255, 255, 255, 0.9)"
+          points="10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1 "
+        />
+      </svg>
+    </button>
+  </div>
+  <div
+    className="branding-logo"
+  />
+</div>
+`;

spec/windowsTitleBar.spec.ts

@@ -0,0 +1,192 @@
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import WindowsTitleBar from '../src/renderer/components/windows-title-bar';
+import { ipcRenderer, remote } from './__mocks__/electron';
+
+describe('windows title bar', () => {
+    beforeEach(() => {
+        // state initial
+        jest.spyOn(remote, 'getCurrentWindow').mockImplementation(() => {
+            return {
+                isFullScreen: jest.fn(() => {
+                    return false;
+                }),
+                isMaximized: jest.fn(() => {
+                    return false;
+                }),
+                on: jest.fn(),
+                removeListener: jest.fn(),
+                isDestroyed: jest.fn(() => {
+                    return false;
+                }),
+                close: jest.fn(),
+                maximize: jest.fn(),
+                minimize: jest.fn(),
+                unmaximize: jest.fn(),
+                setFullScreen: jest.fn(),
+            };
+        });
+    });
+
+    const getCurrentWindowFnLabel = 'getCurrentWindow';
+    const onEventLabel = 'on';
+    const maximizeEventLabel = 'maximize';
+    const unmaximizeEventLabel = 'unmaximize';
+    const enterFullScreenEventLabel = 'enter-full-screen';
+    const leaveFullScreenEventLabel = 'leave-full-screen';
+
+    it('should render correctly', () => {
+        const wrapper = shallow(React.createElement(WindowsTitleBar));
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should mount correctly', () => {
+        const wrapper = shallow(React.createElement(WindowsTitleBar));
+        const instance: any = wrapper.instance();
+        const window = instance.window;
+        const spy = jest.spyOn(remote, getCurrentWindowFnLabel);
+        const spyWindow = jest.spyOn(window, onEventLabel);
+        expect(spy).toBeCalled();
+        expect(spyWindow).nthCalledWith(1, maximizeEventLabel, expect.any(Function));
+        expect(spyWindow).nthCalledWith(2, unmaximizeEventLabel, expect.any(Function));
+        expect(spyWindow).nthCalledWith(3, enterFullScreenEventLabel, expect.any(Function));
+        expect(spyWindow).nthCalledWith(4, leaveFullScreenEventLabel, expect.any(Function));
+    });
+
+    it('should call `close` correctly', () => {
+        const fnLabel = 'close';
+        const titleLabel = 'Close';
+        const wrapper = shallow(React.createElement(WindowsTitleBar));
+        const customSelector = `button.title-bar-button[title="${titleLabel}"]`;
+        const instance: any = wrapper.instance();
+        const window = instance.window;
+        const spy = jest.spyOn(window, fnLabel);
+        wrapper.find(customSelector).simulate('click');
+        expect(spy).toBeCalled();
+    });
+
+    it('should call `minimize` correctly', () => {
+        const fnLabel = 'minimize';
+        const titleLabel = 'Minimize';
+        const wrapper = shallow(React.createElement(WindowsTitleBar));
+        const customSelector = `button.title-bar-button[title="${titleLabel}"]`;
+        const instance: any = wrapper.instance();
+        const window = instance.window;
+        const spy = jest.spyOn(window, fnLabel);
+        wrapper.find(customSelector).simulate('click');
+        expect(spy).toBeCalled();
+    });
+
+    it('should call `showMenu` correctly', () => {
+        const titleLabel = 'Menu';
+        const symphonyApiLabel = 'symphony-api';
+        const expectedValue = {
+            cmd: 'popup-menu',
+        };
+        const spy = jest.spyOn(ipcRenderer, 'send');
+        const customSelector = `button.hamburger-menu-button[title="${titleLabel}"]`;
+        const wrapper = shallow(React.createElement(WindowsTitleBar));
+        wrapper.find(customSelector).simulate('click');
+        expect(spy).toBeCalledWith(symphonyApiLabel, expectedValue);
+    });
+
+    it('should call `onMouseDown` correctly', () => {
+        const titleLabel = 'Menu';
+        const customSelector = `button.hamburger-menu-button[title="${titleLabel}"]`;
+        const wrapper = shallow(React.createElement(WindowsTitleBar));
+        const event = {
+            preventDefault: jest.fn(),
+        }
+        const spy = jest.spyOn(event, 'preventDefault');
+        wrapper.find(customSelector).simulate('mouseDown', event);
+        expect(spy).toBeCalled();
+    });
+
+    it('should call `updateState` correctly', () => {
+        const wrapper = shallow(React.createElement(WindowsTitleBar));
+        const spy = jest.spyOn(wrapper, 'setState');
+        const instance: any = wrapper.instance();
+        instance.updateState({ isMaximized: false });
+        expect(spy).lastCalledWith(expect.any(Function));
+    });
+
+    describe('componentDidMount event', () => {
+        beforeEach(() => {
+            document.body.innerHTML = `<div id="content-wrapper"></div>`;
+        });
+
+        it('should call `componentDidMount` when isFullScreen', () => {
+            const spy = jest.spyOn(document.body.style, 'removeProperty');
+            const expectedValue = 'margin-top';
+            // changing state before componentDidMount
+            jest.spyOn(remote, 'getCurrentWindow').mockImplementation(() => {
+                return {
+                    isFullScreen: jest.fn(() => {
+                        return true;
+                    }),
+                    isMaximized: jest.fn(() => {
+                        return false;
+                    }),
+                    on: jest.fn(),
+                    removeListener: jest.fn(),
+                    isDestroyed: jest.fn(() => {
+                        return false;
+                    }),
+                    close: jest.fn(),
+                    maximize: jest.fn(),
+                    minimize: jest.fn(),
+                    unmaximize: jest.fn(),
+                    setFullScreen: jest.fn(),
+                };
+            });
+            shallow(React.createElement(WindowsTitleBar));
+            expect(spy).toBeCalledWith(expectedValue);
+        });
+    });
+
+    describe('maximize functions', () => {
+        it('should call `unmaximize` correctly when is not full screen', () => {
+            const titleLabel = 'Maximize';
+            const unmaximizeFn = 'unmaximize';
+            const customSelector = `button.title-bar-button[title="${titleLabel}"]`;
+            const wrapper = shallow(React.createElement(WindowsTitleBar));
+            const instance: any = wrapper.instance();
+            const window = instance.window;
+            const spy = jest.spyOn(window, unmaximizeFn);
+            wrapper.setState({ isMaximized: true });
+            wrapper.find(customSelector).simulate('click');
+            expect(spy).toBeCalled();
+        });
+
+        it('should call `unmaximize` correctly when is full screen', () => {
+            const windowSpyFn = 'setFullScreen';
+            const titleLabel = 'Maximize';
+            const customSelector = `button.title-bar-button[title="${titleLabel}"]`;
+            const wrapper = shallow(React.createElement(WindowsTitleBar));
+            const instance: any = wrapper.instance();
+            const window = instance.window;
+            const spy = jest.spyOn(window, windowSpyFn);
+            window.isFullScreen = jest.fn(() => {
+                return true;
+            });
+            wrapper.setState({ isMaximized: true });
+            wrapper.find(customSelector).simulate('click');
+            expect(spy).toBeCalledWith(false);
+        });
+
+        it('should call maximize correctly when it is not in full screen', () => {
+            const titleLabel = 'unMaximize';
+            const maximizeFn = 'maximize';
+            const expectedState = { isMaximized: true };
+            const customSelector = `button.title-bar-button[title="${titleLabel}"]`;
+            const wrapper = shallow(React.createElement(WindowsTitleBar));
+            const instance: any = wrapper.instance();
+            const window = instance.window;
+            const spyWindow = jest.spyOn(window, maximizeFn);
+            const spyState = jest.spyOn(wrapper, 'setState');
+            wrapper.find(customSelector).simulate('click');
+            expect(spyWindow).toBeCalled();
+            expect(spyState).lastCalledWith(expectedState);
+        });
+    });
+});