From 6bc0065259c7eba9650944b0c4536819a5f94d84 Mon Sep 17 00:00:00 2001
From: Kshitij Sobti <kshitij@sobti.in>
Date: Wed, 30 Mar 2022 16:40:42 +0530
Subject: [PATCH] feat: use resize postmessage API to send size hints to parent
 (#100)

When the post list is resized, send a size hint to the parent window (LMS/Learning MFE) so it can resize the discussions MFE iframe dynamically.
---
 .env                                          |  1 +
 .env.development                              |  1 +
 .env.test                                     |  1 +
 .../comments/CommentsView.test.jsx            | 88 ++++++++++---------
 src/discussions/data/hooks.js                 | 62 ++++++++++++-
 src/discussions/data/hooks.test.jsx           | 67 ++++++++++++++
 .../discussions-home/DiscussionContent.jsx    | 14 +--
 src/setupTest.js                              | 43 ++++++++-
 8 files changed, 226 insertions(+), 51 deletions(-)
 create mode 100644 src/discussions/data/hooks.test.jsx

diff --git a/.env b/.env
index 9fc7c719..5bc31041 100644
--- a/.env
+++ b/.env
@@ -6,6 +6,7 @@ CSRF_TOKEN_API_PATH=''
 ECOMMERCE_BASE_URL=''
 LANGUAGE_PREFERENCE_COOKIE_NAME=''
 LMS_BASE_URL=''
+LEARNING_BASE_URL=''
 LOGIN_URL=''
 LOGOUT_URL=''
 LOGO_URL=''
diff --git a/.env.development b/.env.development
index 5266dd5d..af61c869 100644
--- a/.env.development
+++ b/.env.development
@@ -7,6 +7,7 @@ CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
+LEARNING_BASE_URL='http://localhost:2000'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
diff --git a/.env.test b/.env.test
index e6a9bc01..cfb9b321 100644
--- a/.env.test
+++ b/.env.test
@@ -5,6 +5,7 @@ CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 ECOMMERCE_BASE_URL='http://localhost:18130'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
+LEARNING_BASE_URL='http://localhost:2000'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
diff --git a/src/discussions/comments/CommentsView.test.jsx b/src/discussions/comments/CommentsView.test.jsx
index 3854fac4..2d10d4be 100644
--- a/src/discussions/comments/CommentsView.test.jsx
+++ b/src/discussions/comments/CommentsView.test.jsx
@@ -1,11 +1,9 @@
-import PropTypes from 'prop-types';
-
 import {
   act, fireEvent, render, screen, waitFor, within,
 } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
-import { MemoryRouter, Route } from 'react-router';
+import { MemoryRouter } from 'react-router';
 import { Factory } from 'rosie';
 
 import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
@@ -16,10 +14,10 @@ import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import { courseConfigApiUrl } from '../data/api';
 import { fetchCourseConfig } from '../data/thunks';
+import DiscussionContent from '../discussions-home/DiscussionContent';
 import { threadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
 import { commentsApiUrl } from './data/api';
-import CommentsView from './CommentsView';
 
 import '../posts/data/__factories__';
 import './data/__factories__';
@@ -30,37 +28,6 @@ const courseId = 'course-v1:edX+TestX+Test_Course';
 let store;
 let axiosMock;
 
-// Provides a mock editor component that functions like tinyMCE without the overhead
-function MockEditor({
-  onBlur,
-  onEditorChange,
-}) {
-  return (
-    <textarea
-      data-testid="tinymce-editor"
-      onChange={(event) => {
-        onEditorChange(event.currentTarget.value);
-      }}
-      onBlur={event => {
-        onBlur(event.currentTarget.value);
-      }}
-    />
-  );
-}
-
-MockEditor.propTypes = {
-  onBlur: PropTypes.func.isRequired,
-  onEditorChange: PropTypes.func.isRequired,
-};
-jest.mock('@tinymce/tinymce-react', () => {
-  const originalModule = jest.requireActual('@tinymce/tinymce-react');
-  return {
-    __esModule: true,
-    ...originalModule,
-    Editor: MockEditor,
-  };
-});
-
 function mockAxiosReturnPagedComments() {
   [null, false, true].forEach(endorsed => {
     const postId = endorsed === null ? discussionPostId : questionPostId;
@@ -112,10 +79,8 @@ function renderComponent(postId) {
   render(
     <IntlProvider locale="en">
       <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`comments/${postId}`]}>
-          <Route path="comments/:postId">
-            <CommentsView />
-          </Route>
+        <MemoryRouter initialEntries={[`/${courseId}/posts/${postId}`]}>
+          <DiscussionContent />
         </MemoryRouter>
       </AppProvider>
     </IntlProvider>,
@@ -489,6 +454,43 @@ describe('CommentsView', () => {
         .rejects
         .toThrow();
     });
+
+    it('handles liking a comment', async () => {
+      renderComponent(discussionPostId);
+
+      // Wait for the content to load
+      await screen.findByText('comment number 7', { exact: false });
+      const view = screen.getByTestId('comment-comment-1');
+
+      const likeButton = within(view).getByRole('button', { name: /like/i });
+      await act(async () => {
+        fireEvent.click(likeButton);
+      });
+      expect(axiosMock.history.patch).toHaveLength(2);
+      expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject({ voted: true });
+    });
+
+    it.each([
+      ['endorsing comments', 'Endorse', { endorsed: true }],
+      ['reporting comments', 'Report', { abuse_flagged: true }],
+    ])('handles %s', async (label, buttonLabel, patchData) => {
+      renderComponent(discussionPostId);
+
+      // Wait for the content to load
+      await screen.findByText('comment number 7', { exact: false });
+
+      // There should be three buttons, one for the post, the second for the
+      // comment and the third for a response to that comment
+      const actionButtons = screen.queryAllByRole('button', { name: /actions menu/i });
+      await act(async () => {
+        fireEvent.click(actionButtons[1]);
+      });
+      await act(async () => {
+        fireEvent.click(screen.getByRole('button', { name: buttonLabel }));
+      });
+      expect(axiosMock.history.patch).toHaveLength(2);
+      expect(JSON.parse(axiosMock.history.patch[1].data)).toMatchObject(patchData);
+    });
   });
 
   describe.each([
@@ -500,13 +502,13 @@ describe('CommentsView', () => {
     testId,
   }) => {
     test(`for ${component}`, async () => {
-      await renderComponent(discussionPostId);
+      renderComponent(discussionPostId);
       // Wait for the content to load
       await screen.findByText('comment number 7', { exact: false });
       const content = screen.getByTestId(testId);
       const actionsButton = within(content)
         .getAllByRole('button', { name: /actions menu/i })[0];
-      act(() => {
+      await act(async () => {
         fireEvent.click(actionsButton);
       });
       expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false }))
@@ -514,12 +516,12 @@ describe('CommentsView', () => {
         .toBeInTheDocument();
       const deleteButton = within(content)
         .queryByRole('button', { name: /delete/i });
-      act(() => {
+      await act(async () => {
         fireEvent.click(deleteButton);
       });
       expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false }))
         .toBeInTheDocument();
-      act(() => {
+      await act(async () => {
         fireEvent.click(screen.queryByRole('button', { name: /delete/i }));
       });
       expect(screen.queryByRole('dialog', { name: /delete \w+/i, exact: false }))
diff --git a/src/discussions/data/hooks.js b/src/discussions/data/hooks.js
index f3e729e7..dbd2e0ec 100644
--- a/src/discussions/data/hooks.js
+++ b/src/discussions/data/hooks.js
@@ -1,9 +1,10 @@
 /* eslint-disable import/prefer-default-export */
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation, useRouteMatch } from 'react-router';
 
+import { getConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import { breakpoints, useWindowSize } from '@edx/paragon';
 
@@ -87,3 +88,62 @@ export function useIsOnDesktop() {
   const windowSize = useWindowSize();
   return windowSize.width >= breakpoints.large.minWidth;
 }
+
+/**
+ * Given an element this attempts to get the height of the entire UI.
+ *
+ * @param element
+ * @returns {number}
+ */
+function getOuterHeight(element) {
+  // This is the height of the entire document body.
+  const bodyHeight = document.body.offsetHeight;
+  // This is the height of the container that will scroll.
+  const elementContainerHeight = element.parentNode.clientHeight;
+  // The difference between the body height and the container height is the size of the header footer etc.
+  // Add to that the element's own height and we get the size the UI should be to fit everything.
+  return bodyHeight - elementContainerHeight + element.scrollHeight;
+}
+
+/**
+ * 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) {
+  function postResizeMessage(height) {
+    window.parent.postMessage({
+      type: 'plugin.resize',
+      payload: {
+        height,
+      },
+    }, getConfig().LEARNING_BASE_URL);
+  }
+
+  const location = useLocation();
+  const enabled = window.parent !== window;
+
+  const resizeObserver = useRef(new ResizeObserver(() => {
+    /* istanbul ignore if: ResizeObserver isn't available in the testing env */
+    if (refContainer.current) {
+      postResizeMessage(getOuterHeight(refContainer.current));
+    }
+  }));
+
+  useEffect(() => {
+    const container = refContainer.current;
+    const observer = resizeObserver.current;
+    if (container && observer && enabled) {
+      observer.observe(container);
+      postResizeMessage(getOuterHeight(container));
+    }
+
+    return () => {
+      if (container && observer && enabled) {
+        observer.unobserve(container);
+        // Send a message to reset the size so that navigating to another
+        // page doesn't cause the size to be retained
+        postResizeMessage(null);
+      }
+    };
+  }, [refContainer, resizeObserver, location]);
+}
diff --git a/src/discussions/data/hooks.test.jsx b/src/discussions/data/hooks.test.jsx
new file mode 100644
index 00000000..796a3e17
--- /dev/null
+++ b/src/discussions/data/hooks.test.jsx
@@ -0,0 +1,67 @@
+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 { 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();
+    await waitFor(() => expect(window.parent.postMessage).toHaveBeenCalledTimes(1));
+    // Test that size is reset on unmount
+    unmount();
+    await waitFor(() => expect(window.parent.postMessage).toHaveBeenCalledTimes(2));
+    expect(window.parent.postMessage).toHaveBeenLastCalledWith(
+      { type: 'plugin.resize', payload: { height: null } },
+      'http://localhost:2000',
+    );
+  });
+  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/DiscussionContent.jsx b/src/discussions/discussions-home/DiscussionContent.jsx
index 85acf083..64f4b162 100644
--- a/src/discussions/discussions-home/DiscussionContent.jsx
+++ b/src/discussions/discussions-home/DiscussionContent.jsx
@@ -1,19 +1,21 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { useSelector } from 'react-redux';
 import { Route, Switch } from 'react-router';
 
 import { Routes } from '../../data/constants';
 import { CommentsView } from '../comments';
+import { useContainerSizeForParent } from '../data/hooks';
 import { PostEditor } from '../posts';
 
 export default function DiscussionContent() {
-  const postEditorVisible = useSelector(
-    (state) => state.threads.postEditorVisible,
-  );
+  const refContainer = useRef(null);
+  const postEditorVisible = useSelector((state) => state.threads.postEditorVisible);
+  useContainerSizeForParent(refContainer);
+
   return (
-    <div className="d-flex bg-light-300 flex-column w-75 w-xs-100 w-xl-75 align-items-center h-100 pb-2 overflow-auto">
-      <div className="d-flex flex-column w-100 mw-xl">
+    <div className="d-flex bg-light-300 flex-column w-75 w-xs-100 w-xl-75 align-items-center h-100 overflow-auto">
+      <div className="d-flex flex-column w-100 mw-xl" ref={refContainer}>
         {postEditorVisible ? (
           <Route path={Routes.POSTS.NEW_POST}>
             <PostEditor />
diff --git a/src/setupTest.js b/src/setupTest.js
index 0c487ad9..c9dd682c 100755
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -1,5 +1,7 @@
-import 'babel-polyfill';
+import PropTypes from 'prop-types';
+
 import '@testing-library/jest-dom/extend-expect';
+import 'babel-polyfill';
 
 // mock methods which are not implemented in JSDOM:
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
@@ -16,3 +18,42 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: jest.fn(),
   })),
 });
+
+// Provides a mock editor component that functions like tinyMCE without the overhead
+function MockEditor({
+  onBlur,
+  onEditorChange,
+}) {
+  return (
+    // eslint-disable-next-line react/jsx-filename-extension
+    <textarea
+      data-testid="tinymce-editor"
+      onChange={(event) => {
+        onEditorChange(event.currentTarget.value);
+      }}
+      onBlur={event => {
+        onBlur(event.currentTarget.value);
+      }}
+    />
+  );
+}
+
+MockEditor.propTypes = {
+  onBlur: PropTypes.func.isRequired,
+  onEditorChange: PropTypes.func.isRequired,
+};
+jest.mock('@tinymce/tinymce-react', () => {
+  const originalModule = jest.requireActual('@tinymce/tinymce-react');
+  return {
+    __esModule: true,
+    ...originalModule,
+    Editor: MockEditor,
+  };
+});
+
+// Mock ResizeObserver since JSDOM doesn't provider an implementation.
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));