feat: update FLCC + add enzyme (#282)

This releases FLCC to stage.

.eslintrc.js

@@ -1,12 +1,12 @@
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('eslint',
-{
-    "rules": {
-      "jsx-a11y/label-has-associated-control": [ 2, {
-        "controlComponents": ["Input"],
+  {
+    rules: {
+      'jsx-a11y/label-has-associated-control': [2, {
+        controlComponents: ['Input'],
       }],
-    }
-  }
-);
-
+      'template-curly-spacing': 'off',
+      indent: 'off',
+    },
+  });

jest.config.js

@@ -8,4 +8,10 @@ module.exports = createConfig('jest', {
     'src/setupTest.js',
     'src/i18n',
   ],
+  snapshotSerializers: [
+    'enzyme-to-json/serializer',
+  ],
+  moduleNameMapper: {
+    '^lodash-es$': 'lodash',
+  },
 });

package.json

@@ -33,10 +33,11 @@
     "url": "https://github.com/edx/frontend-app-course-authoring/issues"
   },
   "dependencies": {
+    "@edx/frontend-build": "8.0.4",
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
     "@edx/frontend-component-footer": "10.1.6",
-    "@edx/frontend-lib-content-components": "1.2.0",
-    "@edx/frontend-platform": "1.14.0",
+    "@edx/frontend-lib-content-components": "1.9.0",
+    "@edx/frontend-platform": "1.15.5",
     "@edx/paragon": "19.9.0",
     "@fortawesome/fontawesome-svg-core": "1.2.28",
     "@fortawesome/free-brands-svg-icons": "5.11.2",
@@ -67,6 +68,9 @@
     "@edx/browserslist-config": "1.0.0",
     "@edx/frontend-build": "8.0.4",
     "@edx/reactifex": "^1.0.3",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
+    "enzyme-to-json": "^3.6.2",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "12.1.1",
     "@testing-library/user-event": "^13.2.1",

src/editors/EditorContainer.test.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { shallow } from 'enzyme';
 import EditorContainer from './EditorContainer';
 
+jest.mock('@edx/frontend-lib-content-components', () => ({ EditorPage: () => 'HeaderTitle' }));
+
 jest.mock('react-router', () => ({
   ...jest.requireActual('react-router'), // use actual for all non-hook parts
   useParams: () => ({
@@ -10,24 +12,12 @@ jest.mock('react-router', () => ({
   }),
 }));
 
-const mockRole = 'Tiny-MCE-Mock';
-jest.mock('@tinymce/tinymce-react', () => {
-  const originalModule = jest.requireActual('@tinymce/tinymce-react');
-  return {
-    __esModule: true,
-    ...originalModule,
-    Editor: () => <div role={mockRole} />
-    ,
-  };
-});
+const props = { courseId: 'cOuRsEId' };
 
 describe('Editor Container', () => {
-  it('shows a rich text editor loading with an error', () => {
-    render(<EditorContainer
-      courseId="demoXDemocourse"
-    />);
-    expect(screen.getByText('Cancel')).toBeTruthy();
-    expect(screen.getByText('Add To Course')).toBeTruthy();
-    expect(screen.findByRole(mockRole)).toBeTruthy();
+  describe('snapshots', () => {
+    test('rendering correctly with expected Input', () => {
+      expect(shallow(<EditorContainer {...props} />)).toMatchSnapshot();
+    });
   });
 });

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Editor Container snapshots rendering correctly with expected Input 1`] = `
+<div
+  className="editor-page"
+>
+  <EditorPage
+    blockId="company-id1"
+    blockType="html"
+    courseId="cOuRsEId"
+    studioEndpointUrl="http://localhost:18010"
+  />
+</div>
+`;

src/setupTest.js

@@ -4,6 +4,13 @@ import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import ReactDOM from 'react-dom';
 
+/* eslint-disable import/no-extraneous-dependencies */
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import 'babel-polyfill';
+
+Enzyme.configure({ adapter: new Adapter() });
+
 /* need to mock window for tinymce on import, as it is JSDOM incompatible */
 
 Object.defineProperty(window, 'matchMedia', {