feat: add setting icon to commands UI (#1052)

* feat: add setting icon to commands UI * fix: test failed
electron · Apr 26, 2022 · 193e6dc · 193e6dc
1 parent 2c21076
commit 193e6dc
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 0 deletions.
diff --git a/src/renderer/components/commands.tsx b/src/renderer/components/commands.tsx
@@ -44,6 +44,13 @@ export class Commands extends React.Component<CommandsProps> {
         onDoubleClick={this.handleDoubleClick}
       >
         <div>
+          <ControlGroup fill={true} vertical={false}>
+            <Button
+              icon="cog"
+              title="Setting"
+              onClick={appState.toggleSettings}
+            />
+          </ControlGroup>
           <ControlGroup fill={true} vertical={false}>
             <VersionChooser appState={appState} />
             <Runner appState={appState} />

diff --git a/tests/mocks/state.ts b/tests/mocks/state.ts
@@ -92,6 +92,7 @@ export class StateMock {
   public signOutGitHub = jest.fn();
   public toggleAddVersionDialog = jest.fn();
   public toggleAuthDialog = jest.fn();
+  public toggleSettings = jest.fn();
   public updateElectronVersions = jest.fn();
 
   constructor() {

diff --git a/tests/renderer/components/__snapshots__/commands-spec.tsx.snap b/tests/renderer/components/__snapshots__/commands-spec.tsx.snap
@@ -6,6 +6,16 @@ exports[`Commands component renders when system is darwin 1`] = `
   onDoubleClick={[Function]}
 >
   <div>
+    <Blueprint3.ControlGroup
+      fill={true}
+      vertical={false}
+    >
+      <Blueprint3.Button
+        icon="cog"
+        onClick={[MockFunction]}
+        title="Setting"
+      />
+    </Blueprint3.ControlGroup>
     <Blueprint3.ControlGroup
       fill={true}
       vertical={false}
@@ -50,6 +60,16 @@ exports[`Commands component renders when system not is darwin 1`] = `
   onDoubleClick={[Function]}
 >
   <div>
+    <Blueprint3.ControlGroup
+      fill={true}
+      vertical={false}
+    >
+      <Blueprint3.Button
+        icon="cog"
+        onClick={[MockFunction]}
+        title="Setting"
+      />
+    </Blueprint3.ControlGroup>
     <Blueprint3.ControlGroup
       fill={true}
       vertical={false}

diff --git a/tests/renderer/components/commands-spec.tsx b/tests/renderer/components/commands-spec.tsx
@@ -8,6 +8,7 @@ import { IpcEvents } from '../../../src/ipc-events';
 
 import { StateMock } from '../../mocks/mocks';
 import { overridePlatform, resetPlatform } from '../../utils';
+import { Button, ControlGroup } from '@blueprintjs/core';
 
 jest.mock('../../../src/renderer/components/commands-runner', () => ({
   Runner: 'runner',
@@ -67,4 +68,12 @@ describe('Commands component', () => {
     expect(spy).toHaveBeenCalledWith(IpcEvents.CLICK_TITLEBAR_MAC);
     spy.mockRestore();
   });
+
+  it('show setting', () => {
+    const wrapper = shallow(<Commands appState={store as any} />);
+
+    wrapper.find(ControlGroup).at(0).find(Button).simulate('click');
+
+    expect(store.toggleSettings).toHaveBeenCalled();
+  });
 });