test: fix failed test related to containerSize hook

src/discussions/data/hooks.js

@@ -105,20 +105,20 @@ export function useIsOnXLDesktop() {
  * This hook posts a resize message to the parent window if running in an iframe
  * @param refContainer reference to the component whose size is to be measured
  */
-export function useContainerSizeForParent(refContainer) {
+export function useContainerSize(refContainer) {
   const location = useLocation();
   const [height, setHeight] = useState();
 
   const resizeObserver = useRef(new ResizeObserver(() => {
     /* istanbul ignore if: ResizeObserver isn't available in the testing env */
-    if (refContainer.current) {
-      setHeight(refContainer.current.clientHeight);
+    if (refContainer?.current) {
+      setHeight(refContainer?.current?.clientHeight);
     }
   }));
 
   useEffect(() => {
-    const container = refContainer.current;
-    const observer = resizeObserver.current;
+    const container = refContainer?.current;
+    const observer = resizeObserver?.current;
     if (container && observer) {
       observer.observe(container);
       setHeight(container.clientHeight);

src/discussions/data/hooks.test.jsx

@@ -1,68 +0,0 @@
-import { useRef } from 'react';
-
-import { render, waitFor } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-import { Context as ResponsiveContext } from 'react-responsive';
-import { MemoryRouter } from 'react-router';
-
-import { getConfig, initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import { initializeStore } from '../../store';
-import { useContainerSizeForParent } from './hooks';
-
-let store;
-initializeMockApp();
-describe('Hooks', () => {
-  function ComponentWithHook() {
-    const refContainer = useRef(null);
-    useContainerSizeForParent(refContainer);
-    return (
-      <div>
-        <div ref={refContainer} />
-      </div>
-    );
-  }
-
-  function renderComponent() {
-    return render(
-      <IntlProvider locale="en">
-        <ResponsiveContext.Provider value={{ width: 1280 }}>
-          <AppProvider store={store}>
-            <MemoryRouter initialEntries={['/']}>
-              <ComponentWithHook />
-            </MemoryRouter>
-          </AppProvider>
-        </ResponsiveContext.Provider>
-      </IntlProvider>,
-    );
-  }
-
-  let parent;
-  beforeEach(() => {
-    store = initializeStore();
-    parent = window.parent;
-  });
-  afterEach(() => {
-    window.parent = parent;
-  });
-  test('useContainerSizeForParent enabled', async () => {
-    delete window.parent;
-    window.parent = { ...window, postMessage: jest.fn() };
-    const { unmount } = renderComponent();
-    // Once for LMS and one for learning MFE
-    await waitFor(() => expect(window.parent.postMessage).toHaveBeenCalledTimes(2));
-    // Test that size is reset on unmount
-    unmount();
-    await waitFor(() => expect(window.parent.postMessage).toHaveBeenCalledTimes(4));
-    expect(window.parent.postMessage).toHaveBeenLastCalledWith(
-      { type: 'plugin.resize', payload: { height: null } },
-      getConfig().LMS_BASE_URL,
-    );
-  });
-  test('useContainerSizeForParent disabled', async () => {
-    window.parent.postMessage = jest.fn();
-    renderComponent();
-    await waitFor(() => expect(window.parent.postMessage).not.toHaveBeenCalled());
-  });
-});

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -9,7 +9,7 @@ import {
 
 import { RequestStatus, Routes } from '../../data/constants';
 import {
-  useContainerSizeForParent, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
+  useContainerSize, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
 } from '../data/hooks';
 import { selectconfigLoadingStatus } from '../data/selectors';
 import { LearnerPostsView, LearnersView } from '../learners';
@@ -23,7 +23,7 @@ export default function DiscussionSidebar({ displaySidebar, postActionBarRef })
   const configStatus = useSelector(selectconfigLoadingStatus);
   const redirectToLearnersTab = useShowLearnersTab();
   const sidebarRef = useRef(null);
-  const postActionBarHeight = useContainerSizeForParent(postActionBarRef);
+  const postActionBarHeight = useContainerSize(postActionBarRef);
 
   useEffect(() => {
     if (sidebarRef && postActionBarHeight) {

src/discussions/discussions-home/DiscussionSidebar.test.jsx

@@ -30,7 +30,7 @@ function renderComponent(displaySidebar = true, location = `/${courseId}/`) {
         <AppProvider store={store}>
           <DiscussionContext.Provider value={{ courseId }}>
             <MemoryRouter initialEntries={[location]}>
-              <DiscussionSidebar displaySidebar={displaySidebar} />
+              <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={null} />
             </MemoryRouter>
           </DiscussionContext.Provider>
         </AppProvider>