@opensumi/ide-testing 2.21.13 → 2.22.0

package/src/browser/outputPeek/test-peek-widget.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { AppConfig, ConfigProvider, IContextKeyService } from '@opensumi/ide-core-browser';
+import { SplitPanel } from '@opensumi/ide-core-browser/lib/components';
+import { InlineActionBar } from '@opensumi/ide-core-browser/lib/components/actions';
+import { AbstractMenuService, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+import { PeekViewWidget } from '@opensumi/ide-monaco-enhance/lib/browser/peek-view';
+import type { ICodeEditor } from '@opensumi/ide-monaco/lib/browser/monaco-api/types';
+import { renderMarkdown } from '@opensumi/monaco-editor-core/esm/vs/base/browser/markdownRenderer';
+
+import { TestPeekMessageToken } from '../../common';
+import { TestMessageType } from '../../common/testCollection';
+import { firstLine, hintMessagePeekHeight } from '../../common/testingStates';
+
+import { TestMessageContainer } from './test-message-container';
+import { TestDto } from './test-output-peek';
+import { TestingPeekMessageServiceImpl } from './test-peek-message.service';
+import { TestTreeContainer } from './test-tree-container';
+
+import './test-peek-widget.less';
+
+@Injectable({ multiple: true })
+export class TestingOutputPeek extends PeekViewWidget {
+  @Autowired(TestPeekMessageToken)
+  private readonly testingPeekMessageService: TestingPeekMessageServiceImpl;
+
+  @Autowired(AbstractMenuService)
+  private readonly menuService: AbstractMenuService;
+
+  @Autowired(AppConfig)
+  private configContext: AppConfig;
+
+  public current?: TestDto;
+
+  constructor(public readonly editor: ICodeEditor, private readonly contextKeyService: IContextKeyService) {
+    super(editor, { isResizeable: true });
+  }
+
+  /**
+   * 在这里渲染测试结果
+   * 左侧:
+   *  - markdown
+   *  - plantText
+   *  - monaco diff editor (用于 assertEquals)
+   * 右侧:
+   *  - tree
+   */
+  protected _fillBody(container: HTMLElement): void {
+    this.setCssClass('testing-output-peek-container');
+    ReactDOM.render(
+      <ConfigProvider value={this.configContext}>
+        <SplitPanel overflow='hidden' id='testing-message-horizontal' flex={1}>
+          <TestMessageContainer />
+          <TestTreeContainer />
+        </SplitPanel>
+      </ConfigProvider>,
+      container,
+    );
+  }
+
+  protected async _fillActionBarOptions(container: HTMLElement): Promise<void> {
+    const menus = this.menuService.createMenu(MenuId.TestPeekTitleContext, this.contextKeyService);
+    return new Promise((res) => {
+      ReactDOM.render(
+        <ConfigProvider value={this.configContext}>
+          <InlineActionBar menus={menus} type='icon' context={[this.editor.getModel()?.uri.toString()!]} />
+        </ConfigProvider>,
+        container,
+        res,
+      );
+    });
+  }
+
+  protected applyClass(): void {
+    // not implemented
+  }
+
+  protected applyStyle(): void {
+    // not implemented
+  }
+
+  public async showInPlace(dto: TestDto) {
+    const message = dto.messages[dto.messageIndex];
+    this.setTitle(
+      firstLine(
+        typeof message.message === 'string' ? message.message : renderMarkdown(message.message).element.outerText,
+      ),
+      dto.test.label,
+    );
+    setTimeout(() => {
+      this.testingPeekMessageService._didReveal.fire(dto);
+      this.testingPeekMessageService._visibilityChange.fire(true);
+    });
+  }
+
+  public hide(): void {
+    super.dispose();
+    if (this._bodyElement) {
+      ReactDOM.unmountComponentAtNode(this._bodyElement);
+    }
+  }
+
+  public setModel(dto: TestDto): Promise<void> {
+    const message = dto.messages[dto.messageIndex];
+    const previous = this.current;
+
+    if (message.type !== TestMessageType.Error) {
+      return Promise.resolve();
+    }
+
+    if (!dto.revealLocation && !previous) {
+      return Promise.resolve();
+    }
+
+    this.current = dto;
+    if (!dto.revealLocation) {
+      return this.showInPlace(dto);
+    }
+
+    this.show(dto.revealLocation!.range, hintMessagePeekHeight(message));
+    this.editor.focus();
+
+    return this.showInPlace(dto);
+  }
+}

package/src/browser/outputPeek/test-tree-container.tsx

@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from 'react';
+
+import { BasicRecycleTree } from '@opensumi/ide-components';
+import { useInjectable } from '@opensumi/ide-core-browser';
+import { Disposable, localize } from '@opensumi/ide-core-common';
+import { Iterable } from '@opensumi/monaco-editor-core/esm/vs/base/common/iterator';
+
+import { TestPeekMessageToken } from '../../common';
+import { ITestResult, maxCountPriority, resultItemParents, TestResultServiceToken } from '../../common/test-result';
+import { ITestMessage, ITestTaskState, TestResultItem, TestResultState } from '../../common/testCollection';
+import { firstLine, parseMarkdownText } from '../../common/testingStates';
+import { buildTestUri, TestUriType } from '../../common/testingUri';
+import { ITestTreeData } from '../../common/tree-view.model';
+import styles from '../components/testing.module.less';
+import { getIconWithColor } from '../icons/icons';
+import { TestResultServiceImpl } from '../test.result.service';
+
+import { TestingPeekMessageServiceImpl } from './test-peek-message.service';
+
+
+enum ETestTreeType {
+  RESULT = 'result',
+  TEST = 'test',
+  TASK = 'task',
+  MESSAGE = 'message',
+}
+
+interface ITestBaseTree<T> extends ITestTreeData<T> {
+  type: ETestTreeType;
+  context: unknown;
+  id: string;
+  label: string;
+  description?: string;
+  ariaLabel?: string;
+}
+
+export const TestTreeContainer = () => {
+  const testResultService: TestResultServiceImpl = useInjectable(TestResultServiceToken);
+  const testingPeekMessageService: TestingPeekMessageServiceImpl = useInjectable(TestPeekMessageToken);
+
+  const [treeData, setTreeData] = useState<ITestBaseTree<ITestResult>[]>([]);
+
+  useEffect(() => {
+    const disposer: Disposable = new Disposable();
+    disposer.addDispose(testingPeekMessageService.onDidReveal((dto) => {}));
+
+    const toTreeResult = testResultService.results.map((e) => getRootChildren(e));
+    setTreeData(toTreeResult);
+
+    return disposer.dispose.bind(disposer);
+  }, []);
+
+  const resolveTestChildren = React.useCallback((node?: ITestBaseTree<unknown>) => {
+    if (!node) {
+      return null;
+    }
+    if (node.children && node.children.length > 0) {
+      return node.children;
+    }
+    return [];
+  }, []);
+
+  const getItemIcon = React.useCallback((item: ITestResult) => {
+    const state = item.completedAt === undefined ? TestResultState.Running : maxCountPriority(item.counts);
+    return getIconWithColor(state);
+  }, []);
+
+  const getTaskChildren = React.useCallback(
+    (result: ITestResult, test: TestResultItem, taskId: number): Iterable<ITestBaseTree<ITestMessage>> =>
+      Iterable.map(test.tasks[0].messages, (m, messageIndex) => {
+        const { message, location } = test.tasks[taskId].messages[messageIndex];
+
+        const uri = buildTestUri({
+          type: TestUriType.ResultMessage,
+          messageIndex,
+          resultId: result.id,
+          taskIndex: taskId,
+          testExtId: test.item.extId,
+        });
+
+        return {
+          type: ETestTreeType.MESSAGE,
+          context: uri,
+          // ** 这里应该解析 markdown 转为纯文本信息 **
+          label: firstLine(typeof message === 'string' ? message : parseMarkdownText(message.value)),
+          id: uri.toString(),
+          icon: '',
+          notExpandable: false,
+          location,
+          rawItem: m,
+        };
+      }),
+    [],
+  );
+
+  const getTestChildren = React.useCallback(
+    (result: ITestResult, test: TestResultItem): Iterable<ITestBaseTree<ITestTaskState>> => {
+      const tasks = Iterable.filter(test.tasks, (task) => task.messages.length > 0);
+      return Iterable.map(tasks, (t, taskId) => {
+        const task = result.tasks[taskId];
+        return {
+          type: ETestTreeType.TASK,
+          context: String(taskId),
+          label: task.name ?? localize('test.task.unnamed'),
+          id: `${result.id}/${test.item.extId}/${taskId}`,
+          icon: '',
+          task,
+          notExpandable: false,
+          rawItem: t,
+          get children() {
+            return Array.from(getTaskChildren(result, test, taskId));
+          },
+        };
+      });
+    },
+    [],
+  );
+
+  const getResultChildren = React.useCallback((result: ITestResult): Iterable<ITestBaseTree<TestResultItem>> => {
+    const tests = Iterable.filter(result.tests, (test) => test.tasks.some((t) => t.messages.length > 0));
+    return Iterable.map(tests, (test) => {
+      let description = '';
+      for (const parent of resultItemParents(result, test)) {
+        if (parent !== test) {
+          description = description ? parent.item.label + ' › ' + description : parent.item.label;
+        }
+      }
+      return {
+        type: ETestTreeType.TEST,
+        context: test.item.extId,
+        id: `${result.id}/${test.item.extId}`,
+        label: test.item.label,
+        get icon() {
+          return getIconWithColor(test.computedState);
+        },
+        notExpandable: false,
+        description,
+        rawItem: test,
+        get children() {
+          return Array.from(getTestChildren(result, test));
+        },
+      };
+    });
+  }, []);
+
+  const getRootChildren = React.useCallback(
+    (item: ITestResult): ITestBaseTree<ITestResult> => ({
+      type: ETestTreeType.RESULT,
+      context: item.id,
+      id: item.id,
+      label: item.name,
+      icon: '',
+      get iconClassName() {
+        return getItemIcon(item);
+      },
+      rawItem: item,
+      get children() {
+        return Array.from(getResultChildren(item));
+      },
+    }),
+    [],
+  );
+
+  return (
+    <div className={styles.test_output_peek_tree}>
+      {treeData.length > 0 && (
+        <BasicRecycleTree treeData={treeData} height={500} resolveChildren={resolveTestChildren} />
+      )}
+    </div>
+  );
+};

package/src/browser/test-contextkey.service.ts

@@ -0,0 +1,24 @@
+import { Optional, Injectable, Autowired } from '@opensumi/di';
+import { IContextKeyService, IContextKey, IScopedContextKeyService } from '@opensumi/ide-core-browser';
+import { TestingIsPeekVisible } from '@opensumi/ide-core-browser/lib/contextkey/testing';
+import { ContextKeyService } from '@opensumi/monaco-editor-core/esm/vs/platform/contextkey/browser/contextKeyService';
+import { IContextKeyServiceTarget } from '@opensumi/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
+
+@Injectable()
+export class TestContextKey {
+  @Autowired(IContextKeyService)
+  private readonly globalContextKeyService: IContextKeyService;
+
+  private _contextKeyService: IScopedContextKeyService | undefined;
+
+  public readonly contextTestingIsPeekVisible: IContextKey<boolean>;
+
+  constructor(@Optional() dom?: HTMLElement | IContextKeyServiceTarget | ContextKeyService) {
+    this._contextKeyService = this.globalContextKeyService.createScoped(dom);
+    this.contextTestingIsPeekVisible = TestingIsPeekVisible.bind(this.contextKeyScoped);
+  }
+
+  public get contextKeyScoped(): IScopedContextKeyService {
+    return this._contextKeyService!;
+  }
+}