{
- ReactDOM.render(
+ renderUtils(
{
});
test('Test the Dropdown snapshot', () => {
- const component = renderer.create();
+ let component;
+ act(() => {
+ component = renderer.create();
+ });
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
@@ -61,28 +64,37 @@ describe('Test Dropdown Component', () => {
test('Trigger the overlay by the click event', () => {
const body = render();
const dropdown = body.getByTestId('dropdown');
- fireEvent.click(dropdown);
+ act(() => {
+ fireEvent.click(dropdown);
+ });
expect(screen.getByTestId('overlay')).not.toBeNull();
});
test('Trigger the overlay by the hover event', () => {
const body = render();
const dropdown = body.getByTestId('dropdown');
- fireEvent.mouseOver(dropdown);
+ act(() => {
+ fireEvent.mouseOver(dropdown);
+ });
expect(screen.getByTestId('overlay')).not.toBeNull();
});
test('Trigger the overlay by the contextmenu event', () => {
const body = render();
const dropdown = body.getByTestId('dropdown');
- if (dropdown) {
- fireEvent.contextMenu(dropdown);
- }
+ act(() => {
+ if (dropdown) {
+ fireEvent.contextMenu(dropdown);
+ }
+ });
expect(screen.getByTestId('overlay')).not.toBeNull();
});
test('Dispose the Dropdown', () => {
- const tree = renderer.create();
+ let tree;
+ act(() => {
+ tree = renderer.create();
+ });
const dropdownNode: any = (
tree as renderer.ReactTestRenderer
diff --git a/src/components/scrollable/__tests__/scrollable.test.tsx b/src/components/scrollable/__tests__/scrollable.test.tsx
index badad47d9..2a367267f 100644
--- a/src/components/scrollable/__tests__/scrollable.test.tsx
+++ b/src/components/scrollable/__tests__/scrollable.test.tsx
@@ -3,6 +3,8 @@ import { fireEvent, render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { IScrollbarProps, Scrollable } from '../index';
+import { act } from 'react-test-renderer';
+import { sleep } from '@test/utils';
// to make sure the Scrollable component not be mocked by global
jest.mock('mo/components/scrollable', () => {
@@ -96,7 +98,11 @@ describe('Test Scrollable Component', () => {
);
const rootEle = getByTestId('mytest');
- fireEvent.scroll(rootEle);
+ await act(async () => {
+ fireEvent.mouseEnter(rootEle);
+ await sleep(300);
+ });
+
expect(trackElement(container).style.opacity).toBe('1');
});
diff --git a/src/components/scrollable/index.tsx b/src/components/scrollable/index.tsx
index 60c6ce418..324ffc220 100644
--- a/src/components/scrollable/index.tsx
+++ b/src/components/scrollable/index.tsx
@@ -44,6 +44,7 @@ const Scrollable = forwardRef(function (
}, []);
const onScrollStart = useCallback(() => {
+ /* istanbul ignore next */
setIsScrolling(true);
}, []);
const onScrollStop = useCallback(() => {
diff --git a/src/components/select/__tests__/select.test.tsx b/src/components/select/__tests__/select.test.tsx
index 9eddac904..ba0b9dbc0 100644
--- a/src/components/select/__tests__/select.test.tsx
+++ b/src/components/select/__tests__/select.test.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { fireEvent, render } from '@testing-library/react';
-import renderer from 'react-test-renderer';
+import renderer, { act } from 'react-test-renderer';
import '@testing-library/jest-dom';
import { Select, Option, inputClassName } from '../index';
@@ -40,7 +40,10 @@ describe('Test Select Component', () => {
});
test('Match the Select snapshot', () => {
- const component = renderer.create();
+ let component;
+ act(() => {
+ component = renderer.create();
+ });
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx
index f6ea45db5..8ac62ef04 100644
--- a/src/components/tabs/tab.tsx
+++ b/src/components/tabs/tab.tsx
@@ -86,12 +86,13 @@ export function Tab({ tab, active, ...restEvents }: ITabComponent) {
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
- item: { type: 'DND_NODE', tab },
+ type: 'DND_NODE',
+ item: tab,
} as any);
const [, drop] = useDrop({
accept: 'DND_NODE',
- hover(item: { type: string; tab: ITabProps }, monitor) {
+ hover(item: ITabProps, monitor) {
if (!ref.current) return;
const component = ref.current;
/**
@@ -113,7 +114,7 @@ export function Tab({ tab, active, ...restEvents }: ITabComponent) {
hoverMiddleX,
hoverClientX,
};
- onDrag?.(item.tab, tab, dragInfo);
+ onDrag?.(item, tab, dragInfo);
},
});
diff --git a/src/components/tree/__tests__/tree.test.tsx b/src/components/tree/__tests__/tree.test.tsx
index 91d0186e8..c93ad03b9 100644
--- a/src/components/tree/__tests__/tree.test.tsx
+++ b/src/components/tree/__tests__/tree.test.tsx
@@ -458,9 +458,12 @@ describe('Test the Tree component', () => {
fireEvent.click(getByText('test1'));
});
- expect(mockFn).toBeCalledTimes(1);
expect(container.querySelector('.codicon-spin')).toBeInTheDocument();
- await sleep(1000);
+ expect(mockFn).toBeCalledTimes(1);
+
+ await act(async () => {
+ await sleep(1000);
+ });
expect(container.querySelector('.codicon-spin')).toBeNull();
act(() => {
diff --git a/src/extensions/__tests__/folderTree.test.tsx b/src/extensions/__tests__/folderTree.test.tsx
deleted file mode 100644
index 08df008d4..000000000
--- a/src/extensions/__tests__/folderTree.test.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import molecule, { create, Workbench } from 'mo';
-import { cleanup, fireEvent, render } from '@testing-library/react';
-import type { ITreeNodeItemProps } from 'mo/components';
-import type { IEditorTab } from 'mo/model/workbench/editor';
-
-const testFileId = 'testFileId';
-const testFileName = 'testFileName';
-const mockTreeData: ITreeNodeItemProps[] = [
- {
- id: 'root',
- name: 'root',
- isLeaf: false,
- children: [
- {
- id: testFileId,
- name: testFileName,
- isLeaf: true,
- isEditable: true,
- },
- ],
- },
-];
-const mockTabData: IEditorTab = {
- id: testFileId,
- name: testFileName,
- data: {
- value: '',
- path: testFileName,
- },
-};
-
-describe('folderTree extension', () => {
- afterEach(cleanup);
-
- test('Execute the listener function of onUpdateFileName', () => {
- const container = create({
- extensions: [],
- }).render();
- const { getByRole } = render(container);
-
- molecule.folderTree.setState({ folderTree: { data: mockTreeData } });
- expect(molecule.folderTree.getState().folderTree?.data).toEqual(
- mockTreeData
- );
-
- molecule.editor.open(mockTabData);
- expect(molecule.editor.getState().current?.data?.length).toBe(1);
-
- const input = getByRole('input');
- expect(input).toBeTruthy();
-
- // Update filename to a valid name
- const mockEnterValue = 'test-enter';
- fireEvent.keyDown(input, {
- keyCode: 13,
- target: { value: mockEnterValue },
- });
- expect(molecule.editor.getState().current?.tab?.name).toBe(
- mockEnterValue
- );
-
- molecule.folderTree.update({
- id: testFileId,
- isEditable: true,
- });
- const input2 = getByRole('input');
- expect(input2).toBeTruthy();
-
- // Update filename to an invalid name
- const mockEmptyValue = '';
- fireEvent.keyDown(input2, {
- keyCode: 13,
- target: { value: mockEmptyValue },
- });
- expect(molecule.editor.getState().current?.tab?.name).toBe(
- mockEnterValue
- );
- });
-});
diff --git a/src/react/__tests__/connector.test.tsx b/src/react/__tests__/connector.test.tsx
index 0d7b04f91..e1d31b4c4 100644
--- a/src/react/__tests__/connector.test.tsx
+++ b/src/react/__tests__/connector.test.tsx
@@ -35,6 +35,7 @@ function TestComponent(props: any) {
}
import { Controller } from '../controller';
+import { act } from 'react-test-renderer';
describe('Test Connector Component', () => {
const serviceA = new TestServiceA();
const serviceB = new TestServiceB();
@@ -102,11 +103,15 @@ describe('Test Connector Component', () => {
);
expect(getByText('A')).not.toBeNull();
expect(getByText('B')).not.toBeNull();
- serviceA.setState({
- data: 'updateA',
+ act(() => {
+ serviceA.setState({
+ data: 'updateA',
+ });
});
- serviceB.setState({
- data: 'updateB',
+ act(() => {
+ serviceB.setState({
+ data: 'updateB',
+ });
});
expect(getByText('updateA')).not.toBeNull();
expect(getByText('updateB')).not.toBeNull();
diff --git a/src/react/__tests__/render-react.test.tsx b/src/react/__tests__/render-react.test.tsx
new file mode 100644
index 000000000..7c1e7e633
--- /dev/null
+++ b/src/react/__tests__/render-react.test.tsx
@@ -0,0 +1,43 @@
+jest.mock('react-dom', () => {
+ const originalModule = jest.requireActual('react-dom');
+ return {
+ ...originalModule,
+ render: jest.fn(),
+ unmountComponentAtNode: jest.fn(() => true),
+ version: '16.0.0',
+ };
+});
+
+import React from 'react';
+import { cleanup } from '@testing-library/react';
+import * as ReactDOM from 'react-dom';
+import { render, renderedSign, unmout } from '../render';
+import { act } from 'react-test-renderer';
+import '@testing-library/jest-dom';
+
+describe('Test react16 render', () => {
+ test('Should createRoot in react16', () => {
+ console.log(ReactDOM.version);
+ const container = document.createElement('div');
+ container.id = 'container';
+ document.body.appendChild(container);
+
+ const TestNode = () => test
;
+ act(() => {
+ render(, container);
+ });
+
+ expect(container[renderedSign]).toBeUndefined();
+ });
+
+ test('Should unmount in react16', () => {
+ const container = document.getElementById('container')!;
+
+ act(() => {
+ expect(unmout(container)).toBeTruthy();
+ });
+
+ document.body.innerHTML = '';
+ cleanup();
+ });
+});
diff --git a/src/react/__tests__/render.test.tsx b/src/react/__tests__/render.test.tsx
new file mode 100644
index 000000000..188002b34
--- /dev/null
+++ b/src/react/__tests__/render.test.tsx
@@ -0,0 +1,47 @@
+jest.mock('react-dom', () => {
+ const originalModule = jest.requireActual('react-dom');
+ return {
+ ...originalModule,
+ version: '18.0.0',
+ };
+});
+
+import React from 'react';
+import { cleanup, queryByTestId } from '@testing-library/react';
+import * as ReactDOM from 'react-dom';
+import { render, renderedSign, unmout } from '../render';
+import { act } from 'react-test-renderer';
+import '@testing-library/jest-dom';
+
+describe('Test react render', () => {
+ test('Should createRoot in react18', () => {
+ console.log(ReactDOM.version);
+ const container = document.createElement('div');
+ container.id = 'container';
+ document.body.appendChild(container);
+
+ const TestNode = () => test
;
+ act(() => {
+ render(, container);
+ });
+
+ expect(container[renderedSign]).not.toBeNull();
+ expect(queryByTestId(container, 'test')).toBeInTheDocument();
+ });
+
+ test('Should unmount in react18', () => {
+ const container = document.getElementById('container')!;
+ const unmountFn = jest.fn();
+ container[renderedSign].unmount = unmountFn;
+
+ act(() => {
+ expect(unmout(container)).toBeTruthy();
+ });
+
+ expect(unmountFn).toBeCalled();
+ expect(container[renderedSign]).toBeUndefined();
+
+ document.body.innerHTML = '';
+ cleanup();
+ });
+});
diff --git a/src/react/render.ts b/src/react/render.ts
new file mode 100644
index 000000000..f82436280
--- /dev/null
+++ b/src/react/render.ts
@@ -0,0 +1,64 @@
+import * as ReactDOM from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
+
+const reactdom: typeof ReactDOM & {
+ createRoot?: typeof createRoot;
+ __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: {
+ usingClientEntryPoint?: boolean;
+ };
+} = {
+ ...ReactDOM,
+};
+
+let nextReactDOMClient: typeof createRoot | undefined;
+
+export const renderedSign = Symbol('__molecule__root');
+
+if (ReactDOM.version.startsWith('18')) {
+ nextReactDOMClient = reactdom.createRoot;
+}
+
+function toggleWarning(skip: boolean) {
+ const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } = reactdom;
+
+ if (
+ __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED &&
+ typeof __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === 'object'
+ ) {
+ __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.usingClientEntryPoint =
+ skip;
+ }
+}
+
+export const render = (
+ node: JSX.Element,
+ container: HTMLElement & {
+ [renderedSign]?: Root;
+ }
+) => {
+ if (nextReactDOMClient) {
+ toggleWarning(true);
+ const root = container[renderedSign] || nextReactDOMClient(container);
+ toggleWarning(false);
+ root.render(node);
+
+ container[renderedSign] = root;
+ return;
+ }
+
+ reactdom.render(node, container);
+};
+
+export const unmout = (
+ container: HTMLElement & {
+ [renderedSign]?: Root;
+ }
+) => {
+ if (nextReactDOMClient) {
+ container[renderedSign]?.unmount();
+ Reflect.deleteProperty(container, renderedSign);
+ return true;
+ }
+
+ return reactdom.unmountComponentAtNode(container);
+};
diff --git a/src/services/workbench/__tests__/editorService.test.tsx b/src/services/workbench/__tests__/editorService.test.tsx
index 73ef5c71c..ed5bd1f73 100644
--- a/src/services/workbench/__tests__/editorService.test.tsx
+++ b/src/services/workbench/__tests__/editorService.test.tsx
@@ -451,6 +451,19 @@ describe('Test EditorService', () => {
expect(editor.getDefaultMenus()).toEqual(menus);
});
+ test('Should dispose model after closing a tab', () => {
+ const editor = new EditorService();
+ const disposeFn = jest.fn();
+ const originalGetModel = MonacoEditor.getModel;
+ // @ts-ignore
+ MonacoEditor.getModel = jest.fn(() => ({ dispose: disposeFn }));
+ // @ts-ignore
+ editor.disposeModel([{ id: 1 }]);
+
+ expect(disposeFn).toBeCalled();
+ MonacoEditor.getModel = originalGetModel;
+ });
+
test('Listen to the Tab update event', () => {
const editor = new EditorService();
expectFnCalled((testFn) => {
diff --git a/src/services/workbench/__tests__/folderTreeService.test.ts b/src/services/workbench/__tests__/folderTreeService.test.tsx
similarity index 98%
rename from src/services/workbench/__tests__/folderTreeService.test.ts
rename to src/services/workbench/__tests__/folderTreeService.test.tsx
index 8f0aed3a6..3bc6a481d 100644
--- a/src/services/workbench/__tests__/folderTreeService.test.ts
+++ b/src/services/workbench/__tests__/folderTreeService.test.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
import { Button } from 'mo/components/button';
import 'reflect-metadata';
import { container } from 'tsyringe';
@@ -404,8 +405,9 @@ describe('Test StatusBarService', () => {
});
test('Should support to set entry', () => {
- folderTreeService.setEntry(Button);
- expect(folderTreeService.getState().entry).toEqual(Button);
+ const entryBtn = ;
+ folderTreeService.setEntry(entryBtn);
+ expect(folderTreeService.getState().entry).toEqual(entryBtn);
});
test('Should support to rename', () => {
diff --git a/src/workbench/activityBar/__tests__/activityBar.test.tsx b/src/workbench/activityBar/__tests__/activityBar.test.tsx
index 46e7fd194..5d17b72e7 100644
--- a/src/workbench/activityBar/__tests__/activityBar.test.tsx
+++ b/src/workbench/activityBar/__tests__/activityBar.test.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import renderer from 'react-test-renderer';
+import renderer, { act } from 'react-test-renderer';
import { fireEvent, render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { ID_ACTIVITY_BAR } from 'mo/common/id';
@@ -29,7 +29,10 @@ const mockData: IActivityBarItem[] = [
describe('The ActivityBar Component', () => {
test('match the snapshot', () => {
- const component = renderer.create();
+ let component;
+ act(() => {
+ component = renderer.create();
+ });
expect(component.toJSON()).toMatchSnapshot();
});
diff --git a/src/workbench/activityBar/__tests__/activityBarItem.test.tsx b/src/workbench/activityBar/__tests__/activityBarItem.test.tsx
index 5b9f91351..57654a6aa 100644
--- a/src/workbench/activityBar/__tests__/activityBarItem.test.tsx
+++ b/src/workbench/activityBar/__tests__/activityBarItem.test.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import renderer from 'react-test-renderer';
+import renderer, { act } from 'react-test-renderer';
import { fireEvent, render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { ActivityBarItem } from '../activityBarItem';
@@ -16,7 +16,10 @@ import { KeyCode } from 'mo/monaco';
describe('The ActivityBar Item Component', () => {
test('match the snapshot', () => {
- const component = renderer.create();
+ let component;
+ act(() => {
+ component = renderer.create();
+ });
expect(component.toJSON()).toMatchSnapshot();
});
diff --git a/src/workbench/editor/__tests__/group.test.tsx b/src/workbench/editor/__tests__/group.test.tsx
index f488d64d2..22085aa65 100644
--- a/src/workbench/editor/__tests__/group.test.tsx
+++ b/src/workbench/editor/__tests__/group.test.tsx
@@ -1,5 +1,5 @@
import 'reflect-metadata';
-import React from 'react';
+import React, { useRef } from 'react';
import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
import { tabItemActiveClassName } from 'mo/components/tabs/tab';
@@ -152,4 +152,83 @@ describe('The Editor Component', () => {
expect(renderDiv?.innerHTML).toEqual(TEST_ID);
});
+
+ test('Should update editor props', () => {
+ const fn = jest.fn();
+ const { rerender } = render(
+
+ );
+
+ rerender(
+
+ );
+
+ expect(fn).toBeCalled();
+ });
+
+ test('Should scroll to view', () => {
+ Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+ configurable: true,
+ value: 500,
+ });
+
+ Object.defineProperty(HTMLElement.prototype, 'offsetLeft', {
+ configurable: true,
+ value: 1000,
+ });
+
+ const mockScrollToFn = jest.fn();
+ (useRef as jest.Mock).mockReturnValueOnce({
+ current: { scrollTo: mockScrollToFn },
+ });
+
+ render(
+
+ );
+
+ expect(mockScrollToFn).toBeCalled();
+ expect(mockScrollToFn.mock.calls[0][0]).toBe(1000);
+ expect(mockScrollToFn.mock.calls[0][1]).toBe(0);
+ });
});
diff --git a/src/workbench/menuBar/__tests__/menubar.test.tsx b/src/workbench/menuBar/__tests__/menubar.test.tsx
index 98af72834..620ab5d11 100644
--- a/src/workbench/menuBar/__tests__/menubar.test.tsx
+++ b/src/workbench/menuBar/__tests__/menubar.test.tsx
@@ -1,10 +1,11 @@
import React from 'react';
-import renderer from 'react-test-renderer';
+import renderer, { act } from 'react-test-renderer';
import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import MenuBar, { actionClassName } from '../menuBar';
import { MenuBarMode } from 'mo/model/workbench/layout';
+import { sleep } from '@test/utils';
const TEST_ID = 'test-id';
const TEST_DATA = 'test-data';
@@ -31,7 +32,10 @@ const menuData = [
const TEST_FN: jest.Mock = jest.fn();
describe('Test MenuBar Component', () => {
- afterEach(cleanup);
+ afterEach(() => {
+ cleanup();
+ document.body.innerHTML = '';
+ });
test('Match the MenuBar snapshot', () => {
const component = renderer.create(
@@ -59,7 +63,7 @@ describe('Test MenuBar Component', () => {
test('Should support to get the focus element', () => {
const mockFn = jest.fn();
- const {} = render(
+ render(
{
const originalFunc = document.elementsFromPoint;
document.elementsFromPoint = jest.fn(() => elemArr);
- fireEvent.click(elem);
- await waitFor(() => {
- expect(ulElem?.style.opacity).toBe('1');
+ await act(async () => {
+ fireEvent.click(elem);
+ await sleep(300);
});
+ expect(ulElem?.style.opacity).toBe('1');
- fireEvent.click(elem);
- await waitFor(() => {
- expect(ulElem?.style.opacity).toBe('0');
+ await act(async () => {
+ fireEvent.click(elem);
+ await sleep(300);
});
+ expect(ulElem?.style.opacity).toBe('0');
document.elementsFromPoint = originalFunc;
});
diff --git a/src/workbench/notification/__tests__/__snapshots__/notificationPane.test.tsx.snap b/src/workbench/notification/__tests__/__snapshots__/notificationPane.test.tsx.snap
index b46616983..fc23ec992 100644
--- a/src/workbench/notification/__tests__/__snapshots__/notificationPane.test.tsx.snap
+++ b/src/workbench/notification/__tests__/__snapshots__/notificationPane.test.tsx.snap
@@ -34,7 +34,6 @@ exports[`Test NotificationPane Component Match The NotificationPane snapshot 1`]
onClick={[Function]}
title="Clear Notification"
/>
-