chore: update imports, fix lint issues

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.jsx

@@ -16,7 +16,7 @@ import messages from './messages';
  * @param {func} setValue - update alt-text value
  * @param {string} value - current alt-text value
  */
-export const AltTextControls = ({
+const AltTextControls = ({
   isDecorative,
   setIsDecorative,
   setValue,
@@ -70,4 +70,5 @@ AltTextControls.propTypes = {
   intl: intlShape.isRequired,
 };
 
+export const AltTextControlsInternal = AltTextControls; // For testing only
 export default injectIntl(AltTextControls);

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.test.jsx

@@ -1,8 +1,9 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { formatMessage } from '../../../../testUtils';
-import { AltTextControls } from './AltTextControls';
+import { formatMessage } from '../../../testUtils';
+import { AltTextControlsInternal as AltTextControls } from './AltTextControls';
 
 jest.mock('./hooks', () => ({
   onInputChange: (handler) => ({ 'hooks.onInputChange': handler }),

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.jsx

@@ -11,7 +11,7 @@ import {
 } from '@openedx/paragon/icons';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
-import hooks from './hooks';
+import * as hooks from './hooks';
 import messages from './messages';
 
 /**
@@ -24,7 +24,7 @@ import messages from './messages';
  * @param {func} updateDimensions - update dimensions callback
  * @param {obj} value - local dimension values { height, width }
  */
-export const DimensionControls = ({
+const DimensionControls = ({
   isLocked,
   lock,
   setHeight,
@@ -89,4 +89,5 @@ DimensionControls.propTypes = ({
   intl: intlShape.isRequired,
 });
 
+export const DimensionControlsInternal = DimensionControls; // For testing only
 export default injectIntl(DimensionControls);

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.test.jsx

@@ -1,3 +1,4 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React, { useEffect } from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 import * as paragon from '@openedx/paragon';
@@ -6,12 +7,12 @@ import * as icons from '@openedx/paragon/icons';
 import {
   fireEvent, render, screen, waitFor,
 } from '@testing-library/react';
-import { formatMessage } from '../../../../testUtils';
-import { DimensionControls } from './DimensionControls';
-import hooks from './hooks';
+import { formatMessage } from '../../../testUtils';
+import { DimensionControlsInternal as DimensionControls } from './DimensionControls';
+import * as hooks from './hooks';
 
 const WrappedDimensionControls = () => {
-  const dimensions = hooks.dimensions('altText');
+  const dimensions = hooks.dimensionHooks('altText');
 
   useEffect(() => {
     dimensions.onImgLoad({ })({ target: { naturalWidth: 1517, naturalHeight: 803 } });
@@ -21,7 +22,7 @@ const WrappedDimensionControls = () => {
 };
 
 const UnlockedDimensionControls = () => {
-  const dimensions = hooks.dimensions('altText');
+  const dimensions = hooks.dimensionHooks('altText');
 
   useEffect(() => {
     dimensions.onImgLoad({ })({ target: { naturalWidth: 1517, naturalHeight: 803 } });

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js

@@ -1,6 +1,10 @@
 import React from 'react';
 
 import { StrictDict } from '../../../utils';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 
 // Simple wrappers for useState to allow easy mocking for tests.
@@ -334,12 +338,3 @@ export const onSaveClick = ({
     });
   }
 };
-
-export default {
-  altText: altTextHooks,
-  dimensions: dimensionHooks,
-  onCheckboxChange,
-  onInputChange,
-  onSaveClick,
-  checkFormValidation,
-};

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StrictDict } from '../../../utils';
-import { MockUseState } from '../../../../testUtils';
+import { MockUseState } from '../../../testUtils';
 import * as hooks from './hooks';
 
 jest.mock('react', () => ({

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx

@@ -6,7 +6,7 @@ import { ArrowBackIos } from '@openedx/paragon/icons';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import './index.scss';
-import hooks from './hooks';
+import * as hooks from './hooks';
 import messages from './messages';
 import BaseModal from '../../BaseModal';
 import AltTextControls from './AltTextControls';
@@ -23,7 +23,7 @@ import ErrorAlert from '../../ErrorAlerts/ErrorAlert';
  * @param {func} saveToEditor - save the current settings to the editor
  * @param {func} returnToSelection - return to image selection
  */
-export const ImageSettingsModal = ({
+const ImageSettingsModal = ({
   close,
   isOpen,
   returnToSelection,
@@ -32,8 +32,8 @@ export const ImageSettingsModal = ({
   // inject
   intl,
 }) => {
-  const altText = hooks.altText(selection.altText);
-  const dimensions = hooks.dimensions(altText);
+  const altText = hooks.altTextHooks(selection.altText);
+  const dimensions = hooks.dimensionHooks(altText);
   const onSaveClick = hooks.onSaveClick({
     altText,
     dimensions: dimensions.value,
@@ -102,4 +102,5 @@ ImageSettingsModal.propTypes = {
   // inject
   intl: intlShape.isRequired,
 };
+export const ImageSettingsModalInternal = ImageSettingsModal; // For testing only
 export default injectIntl(ImageSettingsModal);

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.scss

@@ -1,6 +1,7 @@
 .img-settings-form-container {
   .img-settings-thumbnail-container {
     width: 282px;
+
     .img-settings-thumbnail {
       margin-left: 32px;
       max-height: 250px;
@@ -11,17 +12,21 @@
   hr {
     width: 1px;
   }
+
   .img-settings-form-controls {
     width: 375px;
     margin: 0 24px;
+
     .dimension-input {
       width: 145px;
       margin-right: 15px;
       display: inline-block;
     }
+
     .img-settings-control-label {
       font-size: 1rem;
     }
+
     .decorative-control-label label {
       font-size: .75rem;
     }

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx

@@ -1,14 +1,15 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { formatMessage } from '../../../../testUtils';
-import { ImageSettingsModal } from '.';
+import { formatMessage } from '../../../testUtils';
+import { ImageSettingsModalInternal as ImageSettingsModal } from '.';
 
 jest.mock('./AltTextControls', () => 'AltTextControls');
 jest.mock('./DimensionControls', () => 'DimensionControls');
 
 jest.mock('./hooks', () => ({
-  altText: () => ({
+  altTextHooks: () => ({
     error: {
       show: true,
       dismiss: jest.fn(),
@@ -16,7 +17,7 @@ jest.mock('./hooks', () => ({
     isDecorative: false,
     value: 'alternative Taxes',
   }),
-  dimensions: () => ({
+  dimensionHooks: () => ({
     onImgLoad: jest.fn(
       (selection) => ({ 'hooks.dimensions.onImgLoad.callback': { selection } }),
     ).mockName('hooks.dimensions.onImgLoad'),

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.js

@@ -2,6 +2,10 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { thunkActions } from '../../../data/redux';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
 import { sortFunctions, sortKeys, sortMessages } from './utils';
 import messages from './messages';
@@ -177,7 +181,3 @@ export const imgHooks = ({
     selectBtnProps,
   };
 };
-
-export default {
-  imgHooks,
-};

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { dispatch } from 'react-redux';
 
-import { MockUseState } from '../../../../testUtils';
+import { MockUseState } from '../../../testUtils';
 import { keyStore } from '../../../utils';
 import { thunkActions } from '../../../data/redux';
 

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import hooks from './hooks';
+import * as hooks from './hooks';
 import { acceptedImgKeys } from './utils';
 import SelectionModal from '../../SelectionModal';
 import messages from './messages';
 import { RequestKeys } from '../../../data/constants/requests';
 import { selectors } from '../../../data/redux';
 
-export const SelectImageModal = ({
+const SelectImageModal = ({
   isOpen,
   close,
   setSelection,
@@ -84,4 +84,5 @@ export const mapStateToProps = (state) => ({
 
 export const mapDispatchToProps = {};
 
+export const SelectImageModalInternal = SelectImageModal; // For testing only
 export default connect(mapStateToProps, mapDispatchToProps)(SelectImageModal);

src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import { formatMessage } from '../../../../testUtils';
+import { formatMessage } from '../../../testUtils';
 import SelectionModal from '../../SelectionModal';
-import hooks from './hooks';
-import { SelectImageModal } from '.';
+import * as hooks from './hooks';
+import { SelectImageModalInternal as SelectImageModal } from '.';
 
 const mockImage = {
   displayName: 'DALL·E 2023-03-10.png',

src/editors/sharedComponents/ImageUploadModal/index.jsx

@@ -1,10 +1,15 @@
+import 'CourseAuthoring/editors/setupEditorTest';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 import { injectIntl } from '@edx/frontend-platform/i18n';
-import tinyMCEKeys from '../../data/constants/tinyMCE';
+import * as tinyMCEKeys from '../../data/constants/tinyMCE';
 import ImageSettingsModal from './ImageSettingsModal';
 import SelectImageModal from './SelectImageModal';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from '.';
 import { updateImageDimensions } from '../TinyMceWidget/hooks';
 
@@ -55,6 +60,7 @@ export const updateImagesRef = ({
     images: images.current, url: selection.externalUrl, height, width,
   });
 
+  // eslint-disable-next-line no-param-reassign
   images.current = imageAlreadyExists ? mappedImages : [...images.current, newImage];
 };
 
@@ -114,7 +120,7 @@ export const hooks = {
   propsString,
 };
 
-export const ImageUploadModal = ({
+const ImageUploadModal = ({
   // eslint-disable-next-line
   editorRef,
   isOpen,
@@ -187,4 +193,5 @@ ImageUploadModal.propTypes = {
   editorType: PropTypes.string,
 };
 
+export const ImageUploadModalInternal = ImageUploadModal; // For testing only
 export default injectIntl(ImageUploadModal);

src/editors/sharedComponents/ImageUploadModal/index.test.jsx

@@ -3,15 +3,18 @@ import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
 
 import { keyStore } from '../../utils';
-import tinyMCEKeys from '../../data/constants/tinyMCE';
-
+import * as tinyMCEKeys from '../../data/constants/tinyMCE';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
 import * as module from '.';
 import * as tinyMceHooks from '../TinyMceWidget/hooks';
 
 jest.mock('./ImageSettingsModal', () => 'ImageSettingsModal');
 jest.mock('./SelectImageModal', () => 'SelectImageModal');
 
-const { ImageUploadModal } = module;
+const { ImageUploadModalInternal: ImageUploadModal } = module;
 const hookKeys = keyStore(module.hooks);
 
 const settings = {