WID-179: add tests for SideButton.ts

src/__tests__/SideButton.test.tsx

@@ -0,0 +1,129 @@
+import { ILabShell } from '@jupyterlab/application';
+import { CommandRegistry } from '@lumino/commands';
+import { SideButton } from '../components/SideButton';
+import { launcherIcon } from '@jupyterlab/ui-components';
+import { Message } from '@lumino/messaging';
+
+jest.mock('@jupyterlab/ui-components', () => {
+  return {
+    esModule: true,
+    LabIcon: jest.fn()
+  };
+});
+
+const MOCK_COMMAND = 'mock:command';
+
+describe('Test SideButton', () => {
+  let registry: CommandRegistry;
+  let labShell: ILabShell;
+  let toAdd: CommandRegistry.ICommandOptions;
+
+  beforeEach(() => {
+    registry = new CommandRegistry();
+    labShell = {
+      add: jest.fn().mockImplementation((_a: any, _b: any, _c?: any) => {
+        return;
+      }),
+      collapseRight: jest.fn().mockImplementation(() => {
+        return;
+      }),
+      collapseLeft: jest.fn().mockImplementation(() => {
+        return;
+      })
+    } as unknown as ILabShell;
+    // Widget.attach(labShell, document.body);
+    toAdd = {
+      execute: jest.fn().mockImplementation(() => {
+        return;
+      })
+    };
+    registry.addCommand(MOCK_COMMAND, toAdd);
+  });
+
+  it('Tests button rendered right', () => {
+    const btn = new SideButton({
+      id: 'test-id',
+      caption: 'Test btn',
+      icon: launcherIcon,
+      command: MOCK_COMMAND,
+      commandRegistry: registry,
+      labShell: labShell,
+      area: 'right'
+    });
+    expect(btn.id).toEqual('test-id');
+    btn.addToLabShell();
+    const expectedArgs = [btn, 'right', undefined];
+    expect(labShell.add).toBeCalledWith(...expectedArgs);
+  });
+
+  it('Tests button rendered left', () => {
+    const btn = new SideButton({
+      caption: 'Test btn',
+      icon: launcherIcon,
+      command: MOCK_COMMAND,
+      commandRegistry: registry,
+      labShell: labShell,
+      area: 'left'
+    });
+    btn.addToLabShell();
+    const expectedArgs = [btn, 'left', undefined];
+    expect(labShell.add).toBeCalledWith(...expectedArgs);
+  });
+
+  it('Tests command is executed and right panel is collapsed', () => {
+    const btn = new SideButton({
+      caption: 'Test btn',
+      icon: launcherIcon,
+      command: MOCK_COMMAND,
+      commandRegistry: registry,
+      labShell: labShell,
+      area: 'right'
+    });
+    btn.addToLabShell();
+    // simulate a click on side button (post an after-show message)
+    const msg = new Message('after-show');
+    btn.processMessage(msg);
+    // command was called
+    expect(toAdd.execute).toBeCalled();
+    // any panel on the same side as btn is closed
+    expect(labShell.collapseRight).toBeCalled();
+  });
+
+  it('Tests command is executed and right panel is collapsed', () => {
+    const btn = new SideButton({
+      caption: 'Test btn',
+      icon: launcherIcon,
+      command: MOCK_COMMAND,
+      commandRegistry: registry,
+      labShell: labShell,
+      area: 'left'
+    });
+    btn.addToLabShell();
+    // simulate a click on side button (post an after-show message)
+    const msg = new Message('after-show');
+    btn.processMessage(msg);
+    // command was called
+    expect(toAdd.execute).toBeCalled();
+    // any panel on the same side as btn is closed
+    expect(labShell.collapseLeft).toBeCalled();
+  });
+
+  it('Tests command executes but no pane is collapsed if button is not rendered on sides', () => {
+    const btn = new SideButton({
+      caption: 'Test btn',
+      icon: launcherIcon,
+      command: MOCK_COMMAND,
+      commandRegistry: registry,
+      labShell: labShell,
+      area: 'top'
+    });
+    btn.addToLabShell();
+    // simulate a click on side button (post an after-show message)
+    const msg = new Message('after-show');
+    btn.processMessage(msg);
+    // command was called
+    expect(toAdd.execute).toBeCalled();
+    // no side pane was closed
+    expect(labShell.collapseLeft).toBeCalledTimes(0);
+  });
+});

src/components/SideButton.ts

@@ -1,7 +1,7 @@
 import { Widget } from '@lumino/widgets';
 import { Message } from '@lumino/messaging';
 import { CommandRegistry } from '@lumino/commands';
-import { launcherIcon, LabIcon } from '@jupyterlab/ui-components';
+import { LabIcon } from '@jupyterlab/ui-components';
 import { ILabShell } from '@jupyterlab/application';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Drag } from '@lumino/dragdrop';
@@ -24,10 +24,8 @@ export class SideButton extends Widget {
     this._commands = options.commandRegistry;
     this._area = options.area;
     this._shellOptions = options.shellOptions;
-    this.title.icon = options.icon ? options.icon : launcherIcon;
-    this.title.caption = options.caption
-      ? options.caption
-      : 'PyUnicore Task Stream';
+    this.title.icon = options.icon;
+    this.title.caption = options.caption;
     this.id = options.id ? options.id : 'tvb-ext-unicore-side-btn';
     this.title.className = this.id;
   }
@@ -46,6 +44,7 @@ export class SideButton extends Widget {
    * @protected
    */
   protected async onAfterShow(msg: Message): Promise<void> {
+    console.log('after show');
     super.onAfterShow(msg);
     Drag.overrideCursor('wait');
     await this._click();
@@ -85,13 +84,13 @@ export namespace SideButton {
    * @id: Button id
    */
   export interface IOptions extends Widget.IOptions {
+    caption: string;
     command: string;
     commandRegistry: CommandRegistry;
     labShell: ILabShell;
     area: Area;
     shellOptions?: DocumentRegistry.IOpenOptions;
-    icon?: LabIcon;
-    caption?: string;
+    icon: LabIcon;
     id?: string;
   }
 

src/index.ts

@@ -21,6 +21,7 @@ import { requestAPI } from './handler';
 import { Kernel } from '@jupyterlab/services';
 import { ConsolePanel, IConsoleTracker } from '@jupyterlab/console';
 import { NO_SITE, getJobCode } from './constants';
+import { launcherIcon } from '@jupyterlab/ui-components';
 import { SideButton } from './components/SideButton';
 
 async function cancelJob(resource_url: string): Promise<any> {
@@ -125,6 +126,8 @@ const plugin: JupyterFrontEndPlugin<void> = {
       command: command,
       commandRegistry: app.commands,
       labShell,
+      caption: 'PyUnicore Tasks Stream',
+      icon: launcherIcon,
       area: 'right',
       shellOptions: { rank: 10 }
     });

tsconfig.json

@@ -25,6 +25,7 @@
     "src/components/*.tsx",
     "src/components/*.ts",
     "src/__tests__/*.tsx",
+    "src/__tests__/*.ts",
     "node_modules/@types/jest/index.d.ts"
   ]
 }