test: update tests

src/components/collapse/__tests__/index.test.tsx

@@ -15,16 +15,27 @@ describe('Test The Collapse Component', () => {
     });
 
     let original;
+    const observerFnCollection: any[] = [];
     beforeEach(() => {
         original = HTMLElement.prototype.getBoundingClientRect;
         // @ts-ignore
         HTMLElement.prototype.getBoundingClientRect = () => ({
             height: 500,
         });
+
+        global.ResizeObserver = jest.fn().mockImplementation((fn) => {
+            observerFnCollection.push(fn);
+            return {
+                observe: jest.fn(),
+                unobserve: jest.fn(),
+                disconnect: jest.fn(),
+            };
+        });
     });
 
     afterEach(() => {
         HTMLElement.prototype.getBoundingClientRect = original;
+        observerFnCollection.length = 0;
     });
 
     test('Match Snapshot', () => {
@@ -213,8 +224,7 @@ describe('Test The Collapse Component', () => {
             HTMLElement.prototype.getBoundingClientRect = () => ({
                 height: 1000,
             });
-            // Trigger the window resize event.
-            fireEvent(window, new Event('resize'));
+            observerFnCollection.forEach((f) => f());
             await sleep(150);
         });
 
@@ -277,7 +287,7 @@ describe('Test The Collapse Component', () => {
             />
         );
 
-        let mock1 = container.querySelector('div[data-collapse-id="mock1"]');
+        const mock1 = container.querySelector('div[data-collapse-id="mock1"]');
         expect(mock1?.parentElement?.style.height).toBe('26px');
 
         await act(async () => {
@@ -321,7 +331,7 @@ describe('Test The Collapse Component', () => {
                 ]}
             />
         );
-        let mock1 = container.querySelector('div[data-collapse-id="mock1"]');
+        const mock1 = container.querySelector('div[data-collapse-id="mock1"]');
         expect(mock1?.parentElement?.style.height).toBe('26px');
 
         await act(async () => {

src/components/split/__tests__/index.test.tsx

@@ -15,17 +15,28 @@ afterEach(cleanup);
 
 describe('Test The SplitPane Component', () => {
     let original;
+    const observerFnCollection: any[] = [];
     beforeEach(() => {
         original = HTMLElement.prototype.getBoundingClientRect;
         // @ts-ignore
         HTMLElement.prototype.getBoundingClientRect = () => ({
             width: 500,
             height: 0,
         });
+
+        global.ResizeObserver = jest.fn().mockImplementation((fn) => {
+            observerFnCollection.push(fn);
+            return {
+                observe: jest.fn(),
+                unobserve: jest.fn(),
+                disconnect: jest.fn(),
+            };
+        });
     });
 
     afterEach(() => {
         HTMLElement.prototype.getBoundingClientRect = original;
+        observerFnCollection.length = 0;
     });
 
     test('Match Snapshot', () => {
@@ -166,17 +177,18 @@ describe('Test The SplitPane Component', () => {
     });
 
     test('Should support to resize', async () => {
-        const mockFn = jest.fn();
-        mockFn
+        const mockFn = jest
+            .fn()
             .mockImplementationOnce(() => ['keep', 'keep', 'pave'])
             .mockImplementationOnce(() => 'keep')
             .mockImplementationOnce(() => undefined);
-        const { container } = render(
+        const mockChange = jest.fn();
+        render(
             <SplitPane
                 role="split"
                 sizes={['10%', '10px']}
                 style={{ width: 500 }}
-                onChange={jest.fn()}
+                onChange={mockChange}
                 onResizeStrategy={mockFn}
             >
                 <div>1</div>
@@ -191,62 +203,45 @@ describe('Test The SplitPane Component', () => {
                 width: 1000,
                 height: 0,
             });
-
-            // Trigger the window resize event.
-            fireEvent(window, new Event('resize'));
+            observerFnCollection.forEach((f) => f());
             await sleep(150);
         });
 
-        let panes = container.querySelectorAll<HTMLDivElement>(
-            `.${paneItemClassName}`
-        );
-        expect(mockFn).toBeCalled();
+        expect(mockFn).toBeCalledTimes(1);
         // normal strategy, to specify one pane to be pave
-        expect(panes[0].style.width).toBe('50px');
-        expect(panes[1].style.width).toBe('10px');
-        expect(panes[2].style.width).toBe('940px');
+        expect(mockChange.mock.calls[0][0]).toEqual([50, 10, 940]);
 
         await act(async () => {
             // @ts-ignore
             HTMLElement.prototype.getBoundingClientRect = () => ({
                 width: 1500,
                 height: 0,
             });
-
-            // Trigger the window resize event.
-            fireEvent(window, new Event('resize'));
+            observerFnCollection.forEach((f) => f());
             await sleep(150);
         });
 
-        panes = container.querySelectorAll<HTMLDivElement>(
-            `.${paneItemClassName}`
-        );
-        expect(mockFn).toBeCalled();
+        expect(mockFn).toBeCalledTimes(2);
         // to specify global strategy to be keep
-        expect(panes[0].style.width).toBe('50px');
-        expect(panes[1].style.width).toBe('10px');
-        expect(panes[2].style.width).toBe('940px');
+        expect(mockChange.mock.calls[1][0]).toEqual([50, 10, 440]);
 
         await act(async () => {
             // @ts-ignore
             HTMLElement.prototype.getBoundingClientRect = () => ({
                 width: 2000,
                 height: 0,
             });
-
-            // Trigger the window resize event.
-            fireEvent(window, new Event('resize'));
+            observerFnCollection.forEach((f) => f());
             await sleep(150);
         });
 
-        panes = container.querySelectorAll<HTMLDivElement>(
-            `.${paneItemClassName}`
-        );
-        expect(mockFn).toBeCalled();
+        expect(mockFn).toBeCalledTimes(3);
         // abnormal strategy, same as returns 'pave', we don't recommend to set it
-        expect(panes[0].style.width).toBe(`${2000 / 3}px`);
-        expect(panes[1].style.width).toBe(`${2000 / 3}px`);
-        expect(panes[2].style.width).toBe(`${2000 / 3}px`);
+        expect(mockChange.mock.calls[2][0]).toEqual([
+            2000 / 3,
+            2000 / 3,
+            2000 / 3,
+        ]);
     });
 
     test('Should have limited sizes', () => {

src/workbench/__tests__/workbench.test.tsx

@@ -63,17 +63,28 @@ function expectBasicPartsInTheDocument() {
 
 describe('Test Workbench Component', () => {
     let original;
+    const observerFnCollection: any[] = [];
     beforeEach(() => {
         original = HTMLElement.prototype.getBoundingClientRect;
         // @ts-ignore
         HTMLElement.prototype.getBoundingClientRect = () => ({
             width: 500,
             height: 500,
         });
+
+        global.ResizeObserver = jest.fn().mockImplementation((fn) => {
+            observerFnCollection.push(fn);
+            return {
+                observe: jest.fn(),
+                unobserve: jest.fn(),
+                disconnect: jest.fn(),
+            };
+        });
     });
 
     afterEach(() => {
         HTMLElement.prototype.getBoundingClientRect = original;
+        observerFnCollection.length = 0;
     });
 
     function workbenchModel(): IWorkbench & ILayout {
@@ -113,6 +124,7 @@ describe('Test Workbench Component', () => {
             sidebar: sidebarState,
             splitPanePos: layout.splitPanePos,
             horizontalSplitPanePos: layout.horizontalSplitPanePos,
+            groupSplitPos: layout.groupSplitPos,
         };
     }
 
@@ -236,24 +248,17 @@ describe('Test Workbench Component', () => {
         expect(select('.mo-menuBar--horizontal')).toBeInTheDocument();
     });
 
-    test('Should resize panes when called on window.resize', async () => {
+    test('Should resize panes when called on ResizeObserver', async () => {
         const workbench = workbenchModel();
-        render(<WorkbenchView {...workbench} />);
-
-        const sidebarDOM = select<HTMLDivElement>('.mo-sidebar');
-        const editorDOM = select<HTMLDivElement>('.mo-editor');
-        const panelDOM = select<HTMLDivElement>('.mo-panel');
-
-        const sideBarPane = sidebarDOM?.parentElement;
-        const editorPane = editorDOM?.parentElement;
-        const panelPane = panelDOM?.parentElement;
-
-        expect(sideBarPane?.style.width).toBe('300px');
-        expect(
-            (sideBarPane?.nextElementSibling as HTMLDivElement).style.width
-        ).toBe('200px');
-        expect(editorPane?.style.height).toBe('350px');
-        expect(panelPane?.style.height).toBe('150px');
+        const horizontalMockFn = jest.fn();
+        const paneChangeMockFn = jest.fn();
+        render(
+            <WorkbenchView
+                {...workbench}
+                onHorizontalPaneSizeChange={horizontalMockFn}
+                onPaneSizeChange={paneChangeMockFn}
+            />
+        );
 
         await act(async () => {
             // mock resize
@@ -262,17 +267,14 @@ describe('Test Workbench Component', () => {
                 width: 1000,
                 height: 1000,
             });
-            fireEvent(window, new Event('resize'));
+            observerFnCollection.forEach((f) => f());
             await sleep(150);
         });
 
-        // expect the sidebar's size won't changed
-        expect(sideBarPane?.style.width).toBe('300px');
-        expect(
-            (sideBarPane?.nextElementSibling as HTMLDivElement).style.width
-        ).toBe('700px');
-        expect(editorPane?.style.height).toBe('850px');
-        // expect the panel's size won't changed
-        expect(panelPane?.style.height).toBe('150px');
+        expect(horizontalMockFn).toBeCalled();
+        expect(horizontalMockFn.mock.calls[0][0]).toEqual([850, 150]);
+
+        expect(paneChangeMockFn).toBeCalled();
+        expect(paneChangeMockFn.mock.calls[0][0]).toEqual([300, 700]);
     });
 });