test: replacing snapshot tests with RTL tests part 5 (#2143)

* test: replacing snapshot tests with rtl tests part 5

* test: removig extra tests

* test: snaps update

* test: adding import shorthand and turning tests into ts

* docs: clarify which line the comment is about

---------

Co-authored-by: Braden MacDonald <[email protected]>

Author: jacobo-dominguez-wgu

jest.config.js

@@ -11,6 +11,9 @@ module.exports = createConfig('jest', {
   ],
   moduleNameMapper: {
     '^lodash-es$': 'lodash',
+    // This alias is for any code in the src directory that wants to avoid '../../' style relative imports:
+    '^@src/(.*)$': '<rootDir>/src/$1',
+    // This alias is used for plugins in the plugins/ folder only.
     '^CourseAuthoring/(.*)$': '<rootDir>/src/$1',
   },
   modulePathIgnorePatterns: [

src/editors/EditorContainer.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  render, screen, initializeMocks, fireEvent, act,
+} from '@src/testUtils';
+import EditorContainer from './EditorContainer';
+import { mockWaffleFlags } from '../data/apiHooks.mock';
+import editorCmsApi from './data/services/cms/api';
+
+mockWaffleFlags();
+
+const mockPathname = '/editor/';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    blockId: 'block-v1:Org+TS100+24+type@fake+block@123456fake',
+    blockType: 'fake',
+  }),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+  useSearchParams: () => [{
+    get: () => 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+  }],
+}));
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: () => ({
+    useReactMarkdownEditor: true, // or false depending on the test
+  }),
+}));
+
+// Mock this plugins component:
+jest.mock('frontend-components-tinymce-advanced-plugins', () => ({ a11ycheckerCss: '' }));
+// Always mock out the "fetch course images" endpoint:
+jest.spyOn(editorCmsApi, 'fetchCourseImages').mockImplementation(async () => ( // eslint-disable-next-line
+  { data: { assets: [], start: 0, end: 0, page: 0, pageSize: 50, totalCount: 0 } }
+));
+// Mock out the 'get ancestors' API:
+jest.spyOn(editorCmsApi, 'fetchByUnitId').mockImplementation(async () => ({
+  status: 200,
+  data: {
+    ancestors: [{
+      id: 'block-v1:Org+TS100+24+type@vertical+block@parent',
+      display_name: 'You-Knit? The Test Unit',
+      category: 'vertical',
+      has_children: true,
+    }],
+  },
+}));
+jest.mock('../library-authoring/LibraryBlock', () => ({
+  LibraryBlock: jest.fn(() => (<div>Advanced Editor Iframe</div>)),
+}));
+
+const props = { learningContextId: 'cOuRsEId' };
+
+describe('EditorContainer', () => {
+  beforeEach(() => {
+    initializeMocks();
+    jest.spyOn(editorCmsApi, 'fetchBlockById').mockImplementationOnce(async () => (
+      {
+        status: 200,
+        data: {
+          display_name: 'Fake Un-editable Block', category: 'fake', metadata: {}, data: '',
+        },
+      }
+    ));
+  });
+
+  test('render component', () => {
+    render(<EditorContainer {...props} />);
+    expect(screen.getByText('View in Library')).toBeInTheDocument();
+    expect(screen.getByText('Advanced Editor Iframe')).toBeInTheDocument();
+  });
+
+  test('should call onClose param when receiving "cancel-clicked" message', () => {
+    const onCloseMock = jest.fn();
+    render(<EditorContainer {...props} onClose={onCloseMock} />);
+    const messageEvent = new MessageEvent('message', {
+      data: {
+        type: 'xblock-event',
+        eventName: 'cancel',
+      },
+      origin: getConfig().STUDIO_BASE_URL,
+    });
+
+    act(() => {
+      window.dispatchEvent(messageEvent);
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Discard Changes and Exit' }));
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+});

src/editors/EditorContainer.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Collapsible, Icon, IconButton } from '@openedx/paragon';
 import { ExpandLess, ExpandMore, InfoOutline } from '@openedx/paragon/icons';
 
@@ -20,40 +20,41 @@ const CollapsibleFormWidget = ({
   subtitle,
   title,
   fontSize,
-  // injected
-  intl,
-}) => (
-  <Collapsible.Advanced
-    className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
-    defaultOpen
-    open={isError || undefined}
-  >
-    <Collapsible.Trigger
-      className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
-      style={{ justifyContent: 'unset' }}
+}) => {
+  const intl = useIntl();
+  return (
+    <Collapsible.Advanced
+      className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
+      defaultOpen
+      open={isError || undefined}
     >
-      <Collapsible.Visible whenClosed className="p-0 pb-3">
-        <div className="d-flex flex-column flex-grow-1">
+      <Collapsible.Trigger
+        className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
+        style={{ justifyContent: 'unset' }}
+      >
+        <Collapsible.Visible whenClosed className="p-0 pb-3">
+          <div className="d-flex flex-column flex-grow-1">
+            <div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
+            {subtitle ? <div className={`${fontSize} mb-4 mt-3`}>{subtitle}</div> : <div className="mb-4" />}
+          </div>
+          <div className="d-flex flex-row align-self-start">
+            {isError && <Icon className="alert-icon" src={InfoOutline} />}
+            <IconButton alt={intl.formatMessage(messages.expandAltText)} src={ExpandMore} iconAs={Icon} variant="dark" />
+          </div>
+        </Collapsible.Visible>
+        <Collapsible.Visible whenOpen>
           <div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
-          {subtitle ? <div className={`${fontSize} mb-4 mt-3`}>{subtitle}</div> : <div className="mb-4" />}
-        </div>
-        <div className="d-flex flex-row align-self-start">
-          {isError && <Icon className="alert-icon" src={InfoOutline} />}
-          <IconButton alt={intl.formatMessage(messages.expandAltText)} src={ExpandMore} iconAs={Icon} variant="dark" />
-        </div>
-      </Collapsible.Visible>
-      <Collapsible.Visible whenOpen>
-        <div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
-        <div className="align-self-start">
-          <IconButton alt={intl.formatMessage(messages.collapseAltText)} src={ExpandLess} iconAs={Icon} variant="dark" />
-        </div>
-      </Collapsible.Visible>
-    </Collapsible.Trigger>
-    <Collapsible.Body className={`collapsible-body rounded px-0 ${fontSize} pb-4`}>
-      {children}
-    </Collapsible.Body>
-  </Collapsible.Advanced>
-);
+          <div className="align-self-start">
+            <IconButton alt={intl.formatMessage(messages.collapseAltText)} src={ExpandLess} iconAs={Icon} variant="dark" />
+          </div>
+        </Collapsible.Visible>
+      </Collapsible.Trigger>
+      <Collapsible.Body className={`collapsible-body rounded px-0 ${fontSize} pb-4`}>
+        {children}
+      </Collapsible.Body>
+    </Collapsible.Advanced>
+  );
+};
 
 CollapsibleFormWidget.defaultProps = {
   subtitle: null,
@@ -66,9 +67,6 @@ CollapsibleFormWidget.propTypes = {
   subtitle: PropTypes.node,
   title: PropTypes.node.isRequired,
   fontSize: PropTypes.string,
-  // injected
-  intl: intlShape.isRequired,
 };
 
-export const CollapsibleFormWidgetInternal = CollapsibleFormWidget; // For testing only
-export default injectIntl(CollapsibleFormWidget);
+export default CollapsibleFormWidget;

src/editors/__snapshots__/EditorContainer.test.jsx.snap

@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+  render, screen, initializeMocks,
+} from '@src/testUtils';
+import CollapsibleFormWidget from './CollapsibleFormWidget';
+
+describe('CollapsibleFormWidget', () => {
+  const props = {
+    isError: false,
+    subtitle: 'Sample subtitle',
+    title: 'Sample title',
+    fontSize: 'x-small',
+  };
+  const testContent = (<p>Some test string</p>);
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  test('renders component', () => {
+    render(<CollapsibleFormWidget {...props}>{testContent}</CollapsibleFormWidget>);
+    expect(screen.getByText('Sample title')).toBeInTheDocument();
+    expect(screen.getByText('Some test string')).toBeInTheDocument();
+  });
+});

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DurationWidget render snapshots: renders as expected with default props 1`] = `
-<injectIntl(ShimmedIntlComponent)
+<CollapsibleFormWidget
   fontSize="x-small"
   subtitle="Custom: 00:00:00"
   title="Duration"
@@ -60,5 +60,5 @@ exports[`DurationWidget render snapshots: renders as expected with default props
       Total: 00:00:00
     </span>
   </div>
-</injectIntl(ShimmedIntlComponent)>
+</CollapsibleFormWidget>
 `;