diff --git a/src/discussions/data/hooks.js b/src/discussions/data/hooks.js
index fce41b21..e2f04801 100644
--- a/src/discussions/data/hooks.js
+++ b/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);
diff --git a/src/discussions/data/hooks.test.jsx b/src/discussions/data/hooks.test.jsx
deleted file mode 100644
index 545c79c5..00000000
--- a/src/discussions/data/hooks.test.jsx
+++ /dev/null
@@ -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 (
-
- );
- }
-
- function renderComponent() {
- return render(
-
-
-
-
-
-
-
-
- ,
- );
- }
-
- 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());
- });
-});
diff --git a/src/discussions/discussions-home/DiscussionSidebar.jsx b/src/discussions/discussions-home/DiscussionSidebar.jsx
index bb3072c5..cbc015f2 100644
--- a/src/discussions/discussions-home/DiscussionSidebar.jsx
+++ b/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) {
diff --git a/src/discussions/discussions-home/DiscussionSidebar.test.jsx b/src/discussions/discussions-home/DiscussionSidebar.test.jsx
index 2158c5a2..97ba6526 100644
--- a/src/discussions/discussions-home/DiscussionSidebar.test.jsx
+++ b/src/discussions/discussions-home/DiscussionSidebar.test.jsx
@@ -30,7 +30,7 @@ function renderComponent(displaySidebar = true, location = `/${courseId}/`) {
-
+