Fix problem editor margins and borders (openedx#203)

* fix: fix border and allow customizing of tinymce style

* fix: make tinymce widget look like on figma

* fix: update settingsoptions card border

* fix: header typography

* fix: spacings

* chore: update snapshots

* Update src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* Update src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* Update src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* Update src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* Update src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* Update src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

* fix: html and react problems in problem editor

* chore: update snapshots

* chore: apply pr suggestions

* chore: fix test coverage

* chore: fix lint

* chore: fix tests

* chore: fix lint

Co-authored-by: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>

Author: jesperhodge

package-lock.json

@@ -38,7 +38,7 @@
     "@edx/frontend-platform": "2.4.0",
     "@edx/paragon": "^20.27.0",
     "@testing-library/dom": "^8.13.0",
-    "@testing-library/react": "12.1.1",
+    "@testing-library/react": "^12.1.1",
     "@testing-library/user-event": "^13.5.0",
     "codecov": "3.8.3",
     "enzyme": "3.11.0",

package.json

@@ -6,7 +6,7 @@ import { Add } from '@edx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
-import { initializeAnswerContainer } from '../../../hooks';
+import { useAnswerContainer, isSingleAnswerProblem } from './hooks';
 import { actions, selectors } from '../../../../../data/redux';
 import { answerOptionProps } from '../../../../../data/services/cms/types';
 import AnswerOption from './AnswerOption';
@@ -18,9 +18,12 @@ export const AnswersContainer = ({
   addAnswer,
   updateField,
 }) => {
-  const { hasSingleAnswer } = initializeAnswerContainer({ answers, problemType, updateField });
+  const hasSingleAnswer = isSingleAnswerProblem(problemType);
+
+  useAnswerContainer({ answers, problemType, updateField });
+
   return (
-    <div className="border rounded border-light-700 py-4 pl-4 pr-3">
+    <div className="border border-light-700 rounded py-4 pl-4 pr-3">
       {answers.map((answer) => (
         <AnswerOption
           key={answer.id}

src/colors.scss

@@ -1,9 +1,22 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { shallow } from 'enzyme';
+import { act, render, waitFor } from '@testing-library/react';
+
 import { actions, selectors } from '../../../../../data/redux';
 
 import * as module from './AnswersContainer';
 
+import { AnswersContainer as AnswersContainerWithoutHOC } from './AnswersContainer';
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  FormattedMessage: ({ defaultMessage }) => (<p>{defaultMessage}</p>),
+  injectIntl: (args) => args,
+  intlShape: {},
+}));
+
+jest.mock('./AnswerOption', () => () => <div>MockAnswerOption</div>);
+
 jest.mock('../../../../../data/redux', () => ({
   actions: {
     problem: {
@@ -25,10 +38,37 @@ describe('AnswersContainer', () => {
   };
   describe('render', () => {
     test('snapshot: renders correct default', () => {
-      expect(shallow(<module.AnswersContainer {...props} />)).toMatchSnapshot();
+      act(() => {
+        expect(shallow(<module.AnswersContainer {...props} />)).toMatchSnapshot();
+      });
     });
     test('snapshot: renders correctly with answers', () => {
-      expect(shallow(<module.AnswersContainer answers={[{ id: 'a', title: 'sOMetITlE', correct: true }, { id: 'b', title: 'sOMetITlE', correct: true }]} {...props} />)).toMatchSnapshot();
+      act(() => {
+        expect(shallow(
+          <module.AnswersContainer
+            {...props}
+            answers={[{ id: 'a', title: 'sOMetITlE', correct: true }, { id: 'b', title: 'sOMetITlE', correct: true }]}
+          />,
+        )).toMatchSnapshot();
+      });
+    });
+
+    test('with react-testing-library', async () => {
+      let container = null;
+      await act(async () => {
+        const wrapper = render(
+          <AnswersContainerWithoutHOC
+            {...props}
+            answers={[{ id: 'a', title: 'sOMetITlE', correct: true }, { id: 'b', title: 'sOMetITlE', correct: true }]}
+          />,
+        );
+        container = wrapper.container;
+      });
+
+      await waitFor(() => expect(container.querySelector('button')).toBeTruthy());
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      expect(props.updateField).toHaveBeenCalledWith(expect.objectContaining({ correctAnswerCount: 2 }));
     });
   });
   describe('mapStateToProps', () => {

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx

@@ -2,7 +2,7 @@
 
 exports[`AnswersContainer render snapshot: renders correct default 1`] = `
 <div
-  className="border rounded border-light-700 py-4 pl-4 pr-3"
+  className="border border-light-700 rounded py-4 pl-4 pr-3"
 >
   <Button
     className="pl-0 text-primary-500"
@@ -20,8 +20,30 @@ exports[`AnswersContainer render snapshot: renders correct default 1`] = `
 
 exports[`AnswersContainer render snapshot: renders correctly with answers 1`] = `
 <div
-  className="border rounded border-light-700 py-4 pl-4 pr-3"
+  className="border border-light-700 rounded py-4 pl-4 pr-3"
 >
+  <Component
+    answer={
+      Object {
+        "correct": true,
+        "id": "a",
+        "title": "sOMetITlE",
+      }
+    }
+    hasSingleAnswer={false}
+    key="a"
+  />
+  <Component
+    answer={
+      Object {
+        "correct": true,
+        "id": "b",
+        "title": "sOMetITlE",
+      }
+    }
+    hasSingleAnswer={false}
+    key="b"
+  />
   <Button
     className="pl-0 text-primary-500"
     onClick={[MockFunction]}

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.jsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { MockUseState } from '../../../../../../testUtils';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import * as module from './hooks';
 
 jest.mock('react', () => {
@@ -52,4 +53,15 @@ describe('Answer Options Hooks', () => {
       expect(state.setState[key]).toHaveBeenCalledWith(true);
     });
   });
+  describe('isSingleAnswerProblem()', () => {
+    test('singleSelect', () => {
+      expect(module.isSingleAnswerProblem(ProblemTypeKeys.SINGLESELECT)).toBe(true);
+    });
+    test('multiSelect', () => {
+      expect(module.isSingleAnswerProblem(ProblemTypeKeys.MULTISELECT)).toBe(false);
+    });
+    test('dropdown', () => {
+      expect(module.isSingleAnswerProblem(ProblemTypeKeys.DROPDOWN)).toBe(true);
+    });
+  });
 });

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { StrictDict } from '../../../../../utils';
 import * as module from './hooks';
 import { actions } from '../../../../../data/redux';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 
 export const state = StrictDict({
   isFeedbackVisible: (val) => useState(val),
@@ -37,6 +38,22 @@ export const prepareFeedback = (answer) => {
   };
 };
 
+export const isSingleAnswerProblem = (problemType) => (
+  problemType === ProblemTypeKeys.DROPDOWN || problemType === ProblemTypeKeys.SINGLESELECT
+);
+
+export const useAnswerContainer = ({ answers, updateField }) => {
+  useEffect(() => {
+    let answerCount = 0;
+    answers.forEach(answer => {
+      if (answer.correct) {
+        answerCount += 1;
+      }
+    });
+    updateField({ correctAnswerCount: answerCount });
+  }, []);
+};
+
 export default {
-  state, removeAnswer, setAnswer, prepareFeedback,
+  state, removeAnswer, setAnswer, prepareFeedback, isSingleAnswerProblem, useAnswerContainer,
 };

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hook.test.js

@@ -15,7 +15,7 @@ const AnswerWidget = ({
   const problemStaticData = ProblemTypes[problemType];
   return (
     <div>
-      <div className="p-3 text-primary-500">
+      <div className="mt-4 mb-3 text-primary-500">
         <div className="h4">
           <FormattedMessage {...messages.answerWidgetTitle} />
         </div>

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js

@@ -1,5 +1,3 @@
-@import '../../../../../../colors.scss';
-
 .answer-option {
   .answer-option-flex-item-1 {
     flex-basis: 8.33%;
@@ -27,8 +25,8 @@
       }
 
       &:focus, &:hover {
-        border-bottom: 1px solid $black;
+        border-bottom: 1px solid #000;
       }
     }
   }
-}
+}