jupyterlab/packages/debugger/test/debugger.spec.ts

// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.

import { init } from './utils';

init();

import { act } from 'react-dom/test-utils';

import { CodeEditorWrapper } from '@jupyterlab/codeeditor';

import {
  CodeMirrorEditorFactory,
  CodeMirrorMimeTypeService
} from '@jupyterlab/codemirror';

import { KernelSpecManager, Session } from '@jupyterlab/services';

import {
  createSession,
  JupyterServer,
  signalToPromise
} from '@jupyterlab/testutils';

import { toArray } from '@lumino/algorithm';

import { CommandRegistry } from '@lumino/commands';

import { UUID } from '@lumino/coreutils';

import { MessageLoop } from '@lumino/messaging';

import { Widget } from '@lumino/widgets';

import { Debugger } from '../src/debugger';

import { DebuggerService } from '../src/service';

import { DebuggerModel } from '../src/model';

import { SourcesBody } from '../src/panels/sources/body';

import { SourcesHeader } from '../src/panels/sources/header';

import { IDebugger } from '../src/tokens';

/**
 * A test sidebar.
 */
class TestSidebar extends Debugger.Sidebar {}

const server = new JupyterServer();

beforeAll(async () => {
  jest.setTimeout(20000);
  await server.start();
});

afterAll(async () => {
  await server.shutdown();
});

describe('Debugger', () => {
  const specsManager = new KernelSpecManager();
  const config = new Debugger.Config();
  const service = new DebuggerService({ specsManager, config });
  const registry = new CommandRegistry();
  const factoryService = new CodeMirrorEditorFactory();
  const mimeTypeService = new CodeMirrorMimeTypeService();
  const lines = [3, 5];
  const code = [
    'i = 0',
    'i += 1',
    'i += 1',
    'j = i**2',
    'j += 1',
    'print(i, j)'
  ].join('\n');

  let breakpoints: IDebugger.IBreakpoint[];
  let session: Debugger.Session;
  let path: string;
  let connection: Session.ISessionConnection;
  let sidebar: TestSidebar;

  beforeAll(async () => {
    connection = await createSession({
      name: '',
      type: 'test',
      path: UUID.uuid4()
    });
    await connection.changeKernel({ name: 'xpython' });

    session = new Debugger.Session({ connection });
    service.session = session;

    sidebar = new TestSidebar({
      service,
      callstackCommands: {
        registry,
        continue: '',
        terminate: '',
        next: '',
        stepIn: '',
        stepOut: '',
        evaluate: ''
      },
      breakpointsCommands: {
        registry,
        pause: ''
      },
      editorServices: {
        factoryService,
        mimeTypeService
      }
    });

    await act(async () => {
      Widget.attach(sidebar, document.body);
      MessageLoop.sendMessage(sidebar, Widget.Msg.UpdateRequest);
      await service.restoreState(true);
    });

    path = service.getCodeId(code);

    breakpoints = lines.map((line: number, id: number) => {
      return {
        id,
        line,
        verified: true,
        source: {
          path
        }
      };
    });

    const model = service.model as DebuggerModel;
    const currentFrameChanged = signalToPromise(
      model.callstack.currentFrameChanged
    );

    await act(async () => {
      await service.updateBreakpoints(code, breakpoints);
      connection!.kernel!.requestExecute({ code });
      await currentFrameChanged;
    });
  });

  afterAll(async () => {
    await connection.shutdown();
    connection.dispose();
    session.dispose();
    sidebar.dispose();
  });

  describe('#constructor()', () => {
    it('should create a new debugger sidebar', () => {
      expect(sidebar).toBeInstanceOf(Debugger.Sidebar);
    });
  });

  describe('Panel', () => {
    describe('Variable toolbar', () => {
      let toolbar: Element;
      beforeEach(() => {
        toolbar = sidebar.variables.node;
      });
      it('should have title', () => {
        const title = toolbar.querySelectorAll(
          'div.jp-stack-panel-header > h2'
        );
        expect(title.length).toBe(1);
        expect(title[0].innerHTML).toContain('Variables');
      });
      it('should have two buttons', () => {
        const buttons = toolbar.querySelectorAll('button');
        expect(buttons.length).toBe(2);
        expect(buttons[0].title).toBe('Tree View');
        expect(buttons[1].title).toBe('Table View');
      });
    });
    describe('Callstack toolbar', () => {
      let toolbar: Element;
      beforeEach(() => {
        toolbar = sidebar.callstack.node;
      });
      it('should have title', () => {
        const title = toolbar.querySelectorAll(
          'div.jp-stack-panel-header > h2'
        );
        console;
        expect(title.length).toBe(1);
        expect(title[0].innerHTML).toContain('Callstack');
      });
      it('should have six buttons', () => {
        const buttons = toolbar.querySelectorAll('button');
        expect(buttons.length).toBe(6);
      });
    });
    describe('Breakpoints toolbar', () => {
      let toolbar: Element;
      beforeEach(() => {
        toolbar = sidebar.breakpoints.node;
      });
      it('should have title', () => {
        const title = toolbar.querySelectorAll(
          'div.jp-stack-panel-header > h2'
        );
        expect(title.length).toBe(1);
        expect(title[0].innerHTML).toContain('Breakpoints');
      });
      it('should have two buttons', () => {
        const buttons = toolbar.querySelectorAll('button');
        expect(buttons.length).toBe(2);
      });
    });
    describe('Source toolbar', () => {
      let toolbar: Element;
      beforeEach(() => {
        toolbar = sidebar.sources.node;
      });
      it('should have title', () => {
        const title = toolbar.querySelectorAll(
          'div.jp-stack-panel-header > h2'
        );
        expect(title.length).toBe(1);
        expect(title[0].innerHTML).toContain('Source');
      });

      it('should have one button', () => {
        const buttons = toolbar.querySelectorAll('button');
        expect(buttons.length).toBe(1);
      });
    });
  });

  describe('#callstack', () => {
    it('should have a header and a body', () => {
      expect(sidebar.callstack.widgets.length).toEqual(2);
    });

    it('should have the jp-DebuggerCallstack class', () => {
      expect(sidebar.callstack.hasClass('jp-DebuggerCallstack')).toBe(true);
    });

    it('should have the debug buttons', () => {
      const node = sidebar.callstack.node;
      const items = node.querySelectorAll('button');

      expect(items.length).toEqual(6);
      items.forEach(item => {
        expect(Array.from(items[0].classList)).toEqual(
          expect.arrayContaining(['jp-ToolbarButtonComponent'])
        );
      });
    });

    it('should display the stack frames', () => {
      const node = sidebar.callstack.node;
      const items = node.querySelectorAll('.jp-DebuggerCallstack-body li');

      expect(items).toHaveLength(1);
      expect(items[0].innerHTML).toContain('module');
      expect(items[0].innerHTML).toContain('3'); // line for the first breakpoint
    });
  });

  describe('#breakpoints', () => {
    it('should have the jp-DebuggerBreakpoints class', () => {
      expect(sidebar.breakpoints.hasClass('jp-DebuggerBreakpoints')).toBe(true);
    });

    it('should contain the list of breakpoints', async () => {
      const node = sidebar.breakpoints.node;
      const items = node.querySelectorAll('.jp-DebuggerBreakpoint');
      expect(items).toHaveLength(2);
    });

    it('should contain the path to the breakpoints', async () => {
      const node = sidebar.breakpoints.node;
      const items = node.querySelectorAll('.jp-DebuggerBreakpoint-source');
      items.forEach(item => {
        // TODO: replace by toEqual when there is an alternative to the rtl
        // breakpoint display
        expect(item.innerHTML).toContain(path.slice(1));
      });
    });

    it('should contain the line number', async () => {
      const node = sidebar.breakpoints.node;
      const items = node.querySelectorAll('.jp-DebuggerBreakpoint-line');

      await act(() => service.updateBreakpoints(code, breakpoints));

      items.forEach((item, i) => {
        const parsed = parseInt(item.innerHTML, 10);
        expect(parsed).toEqual(lines[i]);
      });
    });

    it('should be updated when new breakpoints are added', async () => {
      const node = sidebar.breakpoints.node;
      let items = node.querySelectorAll('.jp-DebuggerBreakpoint');
      const len1 = items.length;

      const bps = breakpoints.concat([
        {
          id: 3,
          line: 4,
          verified: true,
          source: {
            path
          }
        }
      ]);

      await act(() => service.updateBreakpoints(code, bps));

      items = node.querySelectorAll('.jp-DebuggerBreakpoint');
      const len2 = items.length;

      expect(len2).toEqual(len1 + 1);
    });

    it('should contain the path after a restore', async () => {
      await service.restoreState(true);
      const node = sidebar.breakpoints.node;
      const items = node.querySelectorAll('.jp-DebuggerBreakpoint-source');
      items.forEach(item => {
        // TODO: replace by toEqual when there is an alternative to the rtl
        // breakpoint display
        expect(item.innerHTML).toContain(path.slice(1));
      });
    });
  });

  describe('#sources', () => {
    it('should have a header and a body', () => {
      expect(sidebar.sources.widgets.length).toEqual(2);
    });

    it('should display the source path in the header', () => {
      const body = sidebar.sources.widgets[0] as SourcesHeader;
      const children = toArray(body.children());
      const sourcePath = children[2].node.querySelector('span');
      expect(sourcePath!.innerHTML).toEqual(path);
    });

    it('should display the source code in the body', () => {
      const body = sidebar.sources.widgets[1] as SourcesBody;
      const children = toArray(body.children());
      const editor = children[0] as CodeEditorWrapper;
      expect(editor.model.value.text).toEqual(code);
    });
  });
});