feat: use frontend-plugin-framework to provide a FooterSlot (#332)

Co-authored-by: Brian Smith <bsmith@axim.org>

.env

@@ -32,3 +32,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ACCOUNT_SETTINGS_URL=''

.env.development

@@ -7,7 +7,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
@@ -38,3 +37,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ACCOUNT_SETTINGS_URL=http://localhost:1997

.env.test

@@ -7,7 +7,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
@@ -36,3 +35,4 @@ ENTERPRISE_MARKETING_URL='http://example.com'
 ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+ACCOUNT_SETTINGS_URL=http://localhost:1997

.eslintrc.js

@@ -1,4 +1,5 @@
-const { createConfig } = require('@edx/frontend-build');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('eslint', {
   rules: {

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master

.gitignore

@@ -25,3 +25,5 @@ module.config.js
 ### transifex ###
 src/i18n/transifex_input.json
 temp
+
+src/i18n/messages

.nvmrc

@@ -1 +1 @@
-18.17
+18.19

.tx/config

@@ -1,9 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-app-ora-grading]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type        = KEYVALUEJSON
-

Makefile

@@ -2,16 +2,13 @@ npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json
 
-transifex_resource = frontend-app-ora-grading
-transifex_langs = "ar,de_DE,es_419,fa_IR,fr,fr_CA,hi,it_IT,pt_PT,uk,ru,zh_CN"
-
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 NPM_TESTS=build i18n_extract lint test
 
@@ -43,35 +40,18 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
-
-ifeq ($(OPENEDX_ATLAS_PULL),)
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
-else
-# Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-	  && atlas pull --filter=$(transifex_langs) \
+	  && atlas pull $(ATLAS_OPTIONS) \
 	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
 	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+	           translations/frontend-platform/src/i18n/messages:frontend-platform \
 	           translations/paragon/src/i18n/messages:paragon \
 	           translations/frontend-app-ora-grading/src/i18n/messages:frontend-app-ora-grading
 
-	$(intl_imports) frontend-component-footer frontend-component-header paragon frontend-app-ora-grading
-endif
+	$(intl_imports) frontend-component-footer frontend-component-header frontend-platform paragon frontend-app-ora-grading
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -39,6 +39,12 @@ to the `relevant tutor-mfe documentation`_ to get started using it.
 
 .. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
 
+Plugins
+=======
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Developing
 ==========
 

catalog-info.yaml

@@ -14,6 +14,6 @@ metadata:
       title: "Stage Site"
       icon: "Web"
 spec:
-  owner: group:content-aurora
+  owner: ~
   type: 'website'
   lifecycle: 'production'

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
@@ -6,9 +6,6 @@ module.exports = createConfig('jest', {
     '<rootDir>/src/setupTest.js',
   ],
   modulePaths: ['<rootDir>/src/'],
-  snapshotSerializers: [
-    'enzyme-to-json/serializer',
-  ],
   coveragePathIgnorePatterns: [
     'src/segment.js',
     'src/postcss.config.js',

package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "semantic-release": "semantic-release",
@@ -24,26 +24,25 @@
     "access": "public"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@^1.2.0",
-    "@edx/frontend-component-footer": "12.2.1",
-    "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-platform": "4.6.1",
-    "@edx/paragon": "^20.44.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-header": "5.0.2",
+    "@edx/frontend-platform": "7.1.0",
+    "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@openedx/frontend-slot-footer": "^1.0.2",
+    "@openedx/paragon": "21.11.3",
     "@redux-beacon/segment": "^1.1.0",
     "@reduxjs/toolkit": "^1.6.1",
     "@testing-library/user-event": "^14.0.0",
     "@zip.js/zip.js": "^2.4.6",
-    "axios": "^0.27.0",
+    "axios": "^0.28.0",
     "classnames": "^2.3.1",
-    "core-js": "3.32.1",
+    "core-js": "3.35.1",
     "dompurify": "^2.3.1",
     "email-prop-type": "^3.0.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
     "file-saver": "^2.0.5",
     "filesize": "^8.0.6",
     "font-awesome": "4.7.0",
@@ -56,11 +55,11 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-intl": "^5.20.9",
+    "react-intl": "6.4.7",
     "react-pdf": "^5.5.0",
     "react-redux": "^7.2.9",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.21.3",
+    "react-router-dom": "6.21.3",
     "react-router-redux": "^5.0.0-alpha.9",
     "redux": "4.2.1",
     "redux-beacon": "^2.1.0",
@@ -74,16 +73,16 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",
-    "@edx/frontend-build": "^12.7.0",
+    "@edx/react-unit-test-utils": "2.0.0",
     "@edx/reactifex": "^2.1.1",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@openedx/frontend-build": "13.0.28",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "12.1.5",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "axios-mock-adapter": "^1.20.0",
     "fetch-mock": "^9.11.0",
     "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "29.6.4",
+    "jest": "29.7.0",
     "jest-expect-message": "^1.0.2",
     "react-dev-utils": "^12.0.1",
     "react-test-renderer": "^17.0.2",

src/App.jsx

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import { selectors } from 'data/redux';
 
 import DemoWarning from 'containers/DemoWarning';
 import CTA from 'containers/CTA';
+import NotificationsBanner from 'containers/NotificationsBanner';
 import ListView from 'containers/ListView';
 
 import './App.scss';
@@ -23,13 +24,15 @@ export const App = ({ courseMetadata, isEnabled }) => (
         courseTitle={courseMetadata.title}
         courseNumber={courseMetadata.number}
         courseOrg={courseMetadata.org}
+        data-testid="header"
       />
       {!isEnabled && <DemoWarning />}
       <CTA />
-      <main>
+      <NotificationsBanner />
+      <main data-testid="main">
         <ListView />
       </main>
-      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      <FooterSlot />
     </div>
   </Router>
 );

src/App.scss

@@ -1,7 +1,7 @@
 // frontend-app-*/src/index.scss
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 $fa-font-path: "~font-awesome/fonts";

src/App.test.jsx

@@ -1,10 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-
-import Footer from '@edx/frontend-component-footer';
-import { LearningHeader as Header } from '@edx/frontend-component-header';
-
-import ListView from 'containers/ListView';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { App } from './App';
 
@@ -20,16 +15,14 @@ jest.mock('data/redux', () => ({
 jest.mock('@edx/frontend-component-header', () => ({
   LearningHeader: 'Header',
 }));
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
 
 jest.mock('containers/DemoWarning', () => 'DemoWarning');
 jest.mock('containers/CTA', () => 'CTA');
 jest.mock('containers/ListView', () => 'ListView');
 jest.mock('components/Head', () => 'Head');
 
-const logo = 'fakeLogo.png';
 let el;
-let router;
 
 describe('App router component', () => {
   const props = {
@@ -41,34 +34,28 @@ describe('App router component', () => {
     isEnabled: true,
   };
   test('snapshot: enabled', () => {
-    expect(shallow(<App {...props} />)).toMatchSnapshot();
+    expect(shallow(<App {...props} />).snapshot).toMatchSnapshot();
   });
   test('snapshot: disabled (show demo warning)', () => {
-    expect(shallow(<App {...props} isEnabled={false} />)).toMatchSnapshot();
+    expect(shallow(<App {...props} isEnabled={false} />).snapshot).toMatchSnapshot();
   });
   describe('component', () => {
     beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App {...props} />);
-      router = el.childAt(0);
     });
     describe('Router', () => {
       test('Routing - ListView is only route', () => {
-        expect(router.find('main')).toEqual(shallow(
-          <main><ListView /></main>,
-        ));
+        expect(el.instance.findByTestId('main')[0].children).toHaveLength(1);
+        expect(el.instance.findByTestId('main')[0].children[0].type).toBe('ListView');
       });
     });
-    test('Footer logo drawn from env variable', () => {
-      expect(router.find(Footer).props().logo).toEqual(logo);
-    });
 
     test('Header to use courseMetadata props', () => {
       const {
         courseTitle,
         courseNumber,
         courseOrg,
-      } = router.find(Header).props();
+      } = el.instance.findByTestId('header')[0].props;
       expect(courseTitle).toEqual(props.courseMetadata.title);
       expect(courseNumber).toEqual(props.courseMetadata.number);
       expect(courseOrg).toEqual(props.courseMetadata.org);

src/__snapshots__/App.test.jsx.snap

@@ -8,15 +8,17 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
       courseNumber="course-number"
       courseOrg="course-org"
       courseTitle="course-title"
+      data-testid="header"
     />
     <DemoWarning />
     <CTA />
-    <main>
+    <NotificationsBanner />
+    <main
+      data-testid="main"
+    >
       <ListView />
     </main>
-    <Footer
-      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
-    />
+    <FooterSlot />
   </div>
 </BrowserRouter>
 `;
@@ -29,14 +31,16 @@ exports[`App router component snapshot: enabled 1`] = `
       courseNumber="course-number"
       courseOrg="course-org"
       courseTitle="course-title"
+      data-testid="header"
     />
     <CTA />
-    <main>
+    <NotificationsBanner />
+    <main
+      data-testid="main"
+    >
       <ListView />
     </main>
-    <Footer
-      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
-    />
+    <FooterSlot />
   </div>
 </BrowserRouter>
 `;

src/__snapshots__/index.test.jsx.snap

@@ -17,6 +17,7 @@ exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
       Symbol(Symbol.observable): [Function],
     }
   }
+  wrapWithRouter={false}
 >
   <App />
 </AppProvider>

src/components/ConfirmModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { AlertModal, ActionRow, Button } from '@edx/paragon';
+import { AlertModal, ActionRow, Button } from '@openedx/paragon';
 import { nullMethod } from 'hooks';
 
 export const ConfirmModal = ({

src/components/ConfirmModal.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { ConfirmModal } from './ConfirmModal';
 
@@ -13,9 +13,9 @@ describe('ConfirmModal', () => {
     onConfirm: jest.fn().mockName('this.props.onConfirm'),
   };
   test('snapshot: closed', () => {
-    expect(shallow(<ConfirmModal {...props} />)).toMatchSnapshot();
+    expect(shallow(<ConfirmModal {...props} />).snapshot).toMatchSnapshot();
   });
   test('snapshot: open', () => {
-    expect(shallow(<ConfirmModal {...props} isOpen />)).toMatchSnapshot();
+    expect(shallow(<ConfirmModal {...props} isOpen />).snapshot).toMatchSnapshot();
   });
 });

src/components/DemoAlert/index.jsx

@@ -6,7 +6,7 @@ import {
   ActionRow,
   AlertModal,
   Button,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import messages from './messages';
 

src/components/DemoAlert/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 import { DemoAlert } from '.';
@@ -11,6 +11,6 @@ describe('DemoAlert component', () => {
       isOpen: true,
       onClose: jest.fn().mockName('props.onClose'),
     };
-    expect(shallow(<DemoAlert {...props} />)).toMatchSnapshot();
+    expect(shallow(<DemoAlert {...props} />).snapshot).toMatchSnapshot();
   });
 });

src/components/FilePopoverContent/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import filesize from 'filesize';
 import FilePopoverContent from '.';
@@ -19,20 +19,19 @@ describe('FilePopoverContent', () => {
       el = shallow(<FilePopoverContent {...props} />);
     });
     describe('snapshot', () => {
-      test('default', () => expect(el).toMatchSnapshot());
+      test('default', () => expect(el.snapshot).toMatchSnapshot());
       test('invalid size', () => {
-        el.setProps({
-          size: null,
-        });
-        expect(el).toMatchSnapshot();
+        el = shallow(<FilePopoverContent {...props} size={null} />);
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
 
     describe('behavior', () => {
       test('content', () => {
-        expect(el.text()).toContain(props.name);
-        expect(el.text()).toContain(props.description);
-        expect(el.text()).toContain(filesize(props.size));
+        const childElements = el.instance.children;
+        expect(childElements[0].children[2].el).toContain(props.name);
+        expect(childElements[1].children[2].el).toContain(props.description);
+        expect(childElements[2].children[2].el).toContain(filesize(props.size));
       });
     });
   });

src/components/FilePreview/Banners/ErrorBanner.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Alert, Button } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert, Button } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 const messageShape = PropTypes.shape({

src/components/FilePreview/Banners/ErrorBanner.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import ErrorBanner from './ErrorBanner';
 
@@ -31,16 +31,20 @@ describe('Error Banner component', () => {
   });
 
   test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 
   describe('component', () => {
     test('children node', () => {
-      expect(el.containsMatchingElement(children)).toEqual(true);
+      const childElement = el.instance.children[1];
+      const child = shallow(children);
+
+      expect(childElement.type).toEqual(child.type);
+      expect(childElement.children[0].el).toEqual(child.children[0].el);
     });
 
     test('verify actions', () => {
-      const actions = el.find('Alert').prop('actions');
+      const { actions } = el.instance.findByType('Alert')[0].props;
       expect(actions).toHaveLength(props.actions.length);
 
       actions.forEach((action, index) => {
@@ -52,8 +56,8 @@ describe('Error Banner component', () => {
     });
 
     test('verify heading', () => {
-      const heading = el.find('FormattedMessage');
-      expect(heading.props()).toEqual(props.headingMessage);
+      const heading = el.instance.findByType('FormattedMessage')[0];
+      expect(heading.props).toEqual(props.headingMessage);
     });
   });
 });

src/components/FilePreview/Banners/LoadingBanner.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Alert, Spinner } from '@edx/paragon';
+import { Alert, Spinner } from '@openedx/paragon';
 
 export const LoadingBanner = () => (
   <Alert variant="info">

src/components/FilePreview/Banners/LoadingBanner.test.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import LoadingBanner from './LoadingBanner';
 
 describe('Loading Banner component', () => {
   test('snapshot', () => {
     const el = shallow(<LoadingBanner />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 });

src/components/FilePreview/BaseRenderers/ImageRenderer.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import ImageRenderer from './ImageRenderer';
 
@@ -16,6 +16,6 @@ describe('Image Renderer Component', () => {
     el = shallow(<ImageRenderer {...props} />);
   });
   test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 });

src/components/FilePreview/BaseRenderers/PDFRenderer.jsx

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { pdfjs, Document, Page } from 'react-pdf';
 import {
   Icon, Form, ActionRow, IconButton,
-} from '@edx/paragon';
-import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { ChevronLeft, ChevronRight } from '@openedx/paragon/icons';
 import pdfjsWorker from 'react-pdf/dist/esm/pdf.worker.entry';
 
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import PDFRenderer from './PDFRenderer';
 
@@ -42,7 +42,7 @@ describe('PDF Renderer Component', () => {
   describe('snapshots', () => {
     test('first page, prev is disabled', () => {
       hooks.rendererHooks.mockReturnValue(hookProps);
-      expect(shallow(<PDFRenderer {...props} />)).toMatchSnapshot();
+      expect(shallow(<PDFRenderer {...props} />).snapshot).toMatchSnapshot();
     });
     test('on last page, next is disabled', () => {
       hooks.rendererHooks.mockReturnValue({
@@ -51,7 +51,7 @@ describe('PDF Renderer Component', () => {
         hasNext: false,
         hasPrev: true,
       });
-      expect(shallow(<PDFRenderer {...props} />)).toMatchSnapshot();
+      expect(shallow(<PDFRenderer {...props} />).snapshot).toMatchSnapshot();
     });
   });
 });

src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import TXTRenderer from './TXTRenderer';
 
@@ -18,6 +18,6 @@ describe('TXT Renderer Component', () => {
     onSuccess: jest.fn().mockName('this.props.onSuccess'),
   };
   test('snapshot', () => {
-    expect(shallow(<TXTRenderer {...props} />)).toMatchSnapshot();
+    expect(shallow(<TXTRenderer {...props} />).snapshot).toMatchSnapshot();
   });
 });

src/components/FilePreview/FileCard.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Card, Collapsible } from '@edx/paragon';
+import { Card, Collapsible } from '@openedx/paragon';
 import FilePopoverContent from 'components/FilePopoverContent';
 import FileInfo from './FileInfo';
 
@@ -17,7 +17,7 @@ export const FileCard = ({ file, children }) => (
       defaultOpen
       title={<h3 className="file-card-title">{file.name}</h3>}
     >
-      <div className="preview-panel">
+      <div className="preview-panel" data-testid="preview-panel">
         <FileInfo><FilePopoverContent {...file} /></FileInfo>
         {children}
       </div>

src/components/FilePreview/FileCard.scss

@@ -1,4 +1,4 @@
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 
 .file-card {
   margin: map-get($spacers, 1) 0;

src/components/FilePreview/FileCard.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Collapsible } from '@edx/paragon';
+import { Collapsible } from '@openedx/paragon';
 
 import FilePopoverContent from 'components/FilePopoverContent';
 import FileInfo from './FileInfo';
@@ -24,19 +24,19 @@ describe('File Preview Card component', () => {
     el = shallow(<FileCard {...props}>{children}</FileCard>);
   });
   test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   describe('Component', () => {
     test('collapsible title is name header', () => {
-      const title = el.find(Collapsible).prop('title');
+      const { title } = el.instance.findByType(Collapsible)[0].props;
       expect(title).toEqual(<h3 className="file-card-title">{props.file.name}</h3>);
     });
     test('forwards children into preview-panel', () => {
-      const previewPanelChildren = el.find('.preview-panel').children();
-      expect(previewPanelChildren.at(0).equals(
+      const previewPanelChildren = el.instance.findByTestId('preview-panel')[0].children;
+      expect(previewPanelChildren[0].matches(
         <FileInfo><FilePopoverContent file={props.file} /></FileInfo>,
       ));
-      expect(previewPanelChildren.at(1).equals(children)).toEqual(true);
+      expect(previewPanelChildren[1].matches(shallow(children))).toEqual(true);
     });
   });
 });

src/components/FilePreview/FileInfo.jsx

@@ -5,8 +5,8 @@ import {
   Button,
   OverlayTrigger,
   Popover,
-} from '@edx/paragon';
-import { InfoOutline } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { nullMethod } from 'hooks';
 import messages from './messages';

src/components/FilePreview/FileInfo.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Popover } from '@edx/paragon';
+import { Popover } from '@openedx/paragon';
 
 import FileInfo from './FileInfo';
 
@@ -13,11 +13,11 @@ describe('File Preview Card component', () => {
     el = shallow(<FileInfo {...props}>{children}</FileInfo>);
   });
   test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   describe('Component', () => {
     test('overlay with passed children', () => {
-      const { overlay } = el.at(0).props();
+      const { overlay } = el.instance.props;
       expect(overlay.type).toEqual(Popover);
       expect(overlay.props.children).toEqual(<Popover.Content>{children}</Popover.Content>);
     });

src/components/FilePreview/FileRenderer.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 import { keyStore } from 'utils';
@@ -35,7 +35,7 @@ describe('FileRenderer', () => {
           rendererProps: { prop: 'hooks.rendererProps' },
         };
         jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
-        expect(shallow(<FileRenderer {...props} />)).toMatchSnapshot();
+        expect(shallow(<FileRenderer {...props} />).snapshot).toMatchSnapshot();
       });
       test('is not loading, with error', () => {
         const hookProps = {
@@ -46,7 +46,7 @@ describe('FileRenderer', () => {
           rendererProps: { prop: 'hooks.rendererProps' },
         };
         jest.spyOn(hooks, hookKeys.renderHooks).mockReturnValueOnce(hookProps);
-        expect(shallow(<FileRenderer {...props} />)).toMatchSnapshot();
+        expect(shallow(<FileRenderer {...props} />).snapshot).toMatchSnapshot();
       });
     });
   });

src/components/FilePreview/__snapshots__/FileCard.test.jsx.snap

@@ -18,6 +18,7 @@ exports[`File Preview Card component snapshot 1`] = `
   >
     <div
       className="preview-panel"
+      data-testid="preview-panel"
     >
       <FileInfo>
         <FilePopoverContent

src/components/Head/index.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 import Head from '.';
 
 jest.mock('react-helmet', () => ({
@@ -17,9 +17,9 @@ jest.mock('@edx/frontend-platform', () => ({
 describe('Head', () => {
   it('snapshot', () => {
     const el = shallow(<Head />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
 
-    expect(el.find('title').text()).toContain(getConfig().SITE_NAME);
-    expect(el.find('link').prop('href')).toEqual(getConfig().FAVICON_URL);
+    expect(el.instance.findByType('title')[0].el.children[0]).toContain(getConfig().SITE_NAME);
+    expect(el.instance.findByType('link')[0].props.href).toEqual(getConfig().FAVICON_URL);
   });
 });

src/components/InfoPopover/__snapshots__/index.test.jsx.snap

@@ -21,6 +21,7 @@ exports[`Info Popover Component snapshot 1`] = `
   <IconButton
     alt="Display more info"
     className="esg-help-icon"
+    data-testid="esg-help-icon"
     iconAs="Icon"
     onClick={[MockFunction this.props.onClick]}
     src={[MockFunction icons.InfoOutline]}

src/components/InfoPopover/index.jsx

@@ -6,8 +6,8 @@ import {
   Popover,
   Icon,
   IconButton,
-} from '@edx/paragon';
-import { InfoOutline } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { nullMethod } from 'hooks';
@@ -30,6 +30,7 @@ export const InfoPopover = ({ onClick, children, intl }) => (
   >
     <IconButton
       className="esg-help-icon"
+      data-testid="esg-help-icon"
       src={InfoOutline}
       alt={intl.formatMessage(messages.altText)}
       iconAs={Icon}

src/components/InfoPopover/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 import { InfoPopover } from '.';
@@ -12,12 +12,12 @@ describe('Info Popover Component', () => {
     el = shallow(<InfoPopover onClick={onClick} intl={{ formatMessage }}>{child}</InfoPopover>);
   });
   test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   describe('Component', () => {
     test('Test component render', () => {
-      expect(el.length).toEqual(1);
-      expect(el.find('.esg-help-icon').length).toEqual(1);
+      expect(el.instance.children.length).toEqual(1);
+      expect(el.instance.findByTestId('esg-help-icon').length).toEqual(1);
     });
   });
 });

src/components/LoadingMessage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Spinner } from '@edx/paragon';
+import { Spinner } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 /**

src/components/StatusBadge.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Badge } from '@edx/paragon';
+import { Badge } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { StrictDict } from 'utils';

src/components/StatusBadge.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { gradingStatuses } from 'data/services/lms/constants';
 import { StatusBadge } from './StatusBadge';
@@ -10,25 +10,25 @@ describe('StatusBadge component', () => {
   describe('behavior', () => {
     it('does not render if status does not have configured variant', () => {
       const el = render('arbitrary');
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
       expect(el.isEmptyRender()).toEqual(true);
     });
     describe('status snapshots: loads badge with configured variant and message.', () => {
       test('`ungraded` shows primary button variant and message', () => {
         const el = render(gradingStatuses.ungraded);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('`locked` shows light button variant and message', () => {
         const el = render(gradingStatuses.locked);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('`graded` shows success button variant and message', () => {
         const el = render(gradingStatuses.graded);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('`inProgress` shows warning button variant and message', () => {
         const el = render(gradingStatuses.inProgress);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
   });

src/components/__snapshots__/StatusBadge.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StatusBadge component behavior does not render if status does not have configured variant 1`] = `""`;
+exports[`StatusBadge component behavior does not render if status does not have configured variant 1`] = `null`;
 
 exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`graded\` shows success button variant and message 1`] = `
 <Badge

src/containers/CTA/CTA.test.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { CTA } from '.';
 
 describe('CTA component', () => {
   test('snapshots', () => {
     const el = shallow(<CTA hide />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 });

src/containers/CTA/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { PageBanner, Hyperlink } from '@edx/paragon';
+import { PageBanner, Hyperlink } from '@openedx/paragon';
 
 import messages from './messages';
 

src/containers/CriterionContainer/CriterionFeedback.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { feedbackRequirement } from 'data/services/lms/constants';
@@ -51,13 +51,14 @@ export class CriterionFeedback extends React.Component {
         <Form.Control
           as="textarea"
           className="criterion-feedback feedback-input"
+          data-testid="criterion-feedback-input"
           floatingLabel={this.commentMessage}
           value={value}
           onChange={this.onChange}
           disabled={!isGrading}
         />
         {isInvalid && (
-          <Form.Control.Feedback type="invalid" className="feedback-error-msg">
+          <Form.Control.Feedback type="invalid" className="feedback-error-msg" data-testid="criterion-feedback-error-msg">
             {this.translate(messages.criterionFeedbackError)}
           </Form.Control.Feedback>
         )}

src/containers/CriterionContainer/CriterionFeedback.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { actions, selectors } from 'data/redux';
 import {
@@ -48,34 +48,27 @@ describe('Criterion Feedback', () => {
   let el;
   beforeEach(() => {
     el = shallow(<CriterionFeedback {...props} />);
-    el.instance().onChange = jest.fn().mockName('this.onChange');
+    el.instance.onChange = jest.fn().mockName('this.onChange');
   });
   describe('snapshot', () => {
     test('is grading', () => {
-      expect(el.instance().render()).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
 
     test('is graded', () => {
-      el.setProps({
-        isGrading: false,
-        gradeStatus: gradeStatuses.graded,
-      });
-      expect(el.instance().render()).toMatchSnapshot();
+      el = shallow(<CriterionFeedback {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
+      expect(el.snapshot).toMatchSnapshot();
     });
 
     test('feedback value is invalid', () => {
-      el.setProps({
-        isInvalid: true,
-      });
-      expect(el.instance().render()).toMatchSnapshot();
+      el = shallow(<CriterionFeedback {...props} isInvalid />);
+      expect(el.snapshot).toMatchSnapshot();
     });
 
     Object.values(feedbackRequirement).forEach((requirement) => {
       test(`feedback is configured to ${requirement}`, () => {
-        el.setProps({
-          config: requirement,
-        });
-        expect(el.instance().render()).toMatchSnapshot();
+        el = shallow(<CriterionFeedback {...props} config={requirement} />);
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
   });
@@ -84,33 +77,23 @@ describe('Criterion Feedback', () => {
     describe('render', () => {
       test('is grading (the feedback input is not disabled)', () => {
         expect(el.isEmptyRender()).toEqual(false);
-        expect(el.instance().props.value).toEqual(props.value);
-        const controlEl = el.find('.feedback-input');
-        expect(controlEl.prop('disabled')).toEqual(false);
-        expect(controlEl.prop('value')).toEqual(props.value);
+        const controlEl = el.instance.findByTestId('criterion-feedback-input')[0];
+        expect(controlEl.props.disabled).toEqual(false);
+        expect(controlEl.props.value).toEqual(props.value);
       });
       test('is graded (the input is disabled)', () => {
-        el.setProps({
-          isGrading: false,
-          gradeStatus: gradeStatuses.graded,
-        });
-        expect(el.instance().props.value).toEqual(props.value);
-        const controlEl = el.find('.feedback-input');
-        expect(controlEl.prop('disabled')).toEqual(true);
-        expect(controlEl.prop('value')).toEqual(props.value);
+        el = shallow(<CriterionFeedback {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
+        const controlEl = el.instance.findByTestId('criterion-feedback-input')[0];
+        expect(controlEl.props.disabled).toEqual(true);
+        expect(controlEl.props.value).toEqual(props.value);
       });
       test('is having invalid feedback (feedback get render)', () => {
-        el.setProps({
-          isInvalid: true,
-        });
-        const feedbackErrorEl = el.find('.feedback-error-msg');
-        expect(el.instance().props.isInvalid).toEqual(true);
+        el = shallow(<CriterionFeedback {...props} isInvalid />);
+        const feedbackErrorEl = el.instance.findByTestId('criterion-feedback-error-msg');
         expect(feedbackErrorEl).toBeDefined();
       });
       test('is configure to disabled (the input does not get render)', () => {
-        el.setProps({
-          config: feedbackRequirement.disabled,
-        });
+        el = shallow(<CriterionFeedback {...props} config={feedbackRequirement.disabled} />);
         expect(el.isEmptyRender()).toEqual(true);
       });
     });
@@ -118,7 +101,7 @@ describe('Criterion Feedback', () => {
     describe('behavior', () => {
       test('onChange call set value', () => {
         el = shallow(<CriterionFeedback {...props} />);
-        el.instance().onChange({
+        el.instance.findByTestId('criterion-feedback-input')[0].props.onChange({
           target: {
             value: 'some value',
           },
@@ -129,33 +112,41 @@ describe('Criterion Feedback', () => {
 
     describe('getter commentMessage', () => {
       test('is grading', () => {
-        el.setProps({ config: feedbackRequirement.optional, isGrading: true });
-        expect(el.instance().commentMessage).toContain(
+        let commentMessage;
+
+        el = shallow(<CriterionFeedback {...props} isGrading config={feedbackRequirement.optional} />);
+        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
+        expect(commentMessage).toContain(
           messages.optional.defaultMessage,
         );
 
-        el.setProps({ config: feedbackRequirement.required });
-        expect(el.instance().commentMessage).not.toContain(
+        el = shallow(<CriterionFeedback {...props} config={feedbackRequirement.required} />);
+        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
+        expect(commentMessage).not.toContain(
           messages.optional.defaultMessage,
         );
 
-        expect(el.instance().commentMessage).toContain(
+        expect(commentMessage).toContain(
           messages.addComments.defaultMessage,
         );
       });
 
       test('is not grading', () => {
-        el.setProps({ config: feedbackRequirement.optional, isGrading: false });
-        expect(el.instance().commentMessage).toContain(
+        let commentMessage;
+
+        el = shallow(<CriterionFeedback {...props} isGrading={false} config={feedbackRequirement.optional} />);
+        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
+        expect(commentMessage).toContain(
           messages.optional.defaultMessage,
         );
 
-        el.setProps({ config: feedbackRequirement.required });
-        expect(el.instance().commentMessage).not.toContain(
+        el = shallow(<CriterionFeedback {...props} isGrading={false} config={feedbackRequirement.required} />);
+        commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
+        expect(commentMessage).not.toContain(
           messages.optional.defaultMessage,
         );
 
-        expect(el.instance().commentMessage).toContain(
+        expect(commentMessage).toContain(
           messages.comments.defaultMessage,
         );
       });

src/containers/CriterionContainer/RadioCriterion.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { actions, selectors } from 'data/redux';

src/containers/CriterionContainer/RadioCriterion.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { actions, selectors } from 'data/redux';
 import { formatMessage } from 'testUtils';
@@ -63,25 +63,21 @@ describe('Radio Criterion Container', () => {
   let el;
   beforeEach(() => {
     el = shallow(<RadioCriterion {...props} />);
-    el.instance().onChange = jest.fn().mockName('this.onChange');
+    el.instance.onChange = jest.fn().mockName('this.onChange');
   });
   describe('snapshot', () => {
     test('is grading', () => {
-      expect(el.instance().render()).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
 
     test('is not grading', () => {
-      el.setProps({
-        isGrading: false,
-      });
-      expect(el.instance().render()).toMatchSnapshot();
+      el = shallow(<RadioCriterion {...props} isGrading={false} />);
+      expect(el.snapshot).toMatchSnapshot();
     });
 
     test('radio contain invalid response', () => {
-      el.setProps({
-        isInvalid: true,
-      });
-      expect(el.instance().render()).toMatchSnapshot();
+      el = shallow(<RadioCriterion {...props} isInvalid />);
+      expect(el.snapshot).toMatchSnapshot();
     });
   });
 
@@ -89,36 +85,33 @@ describe('Radio Criterion Container', () => {
     describe('rendering', () => {
       test('is grading (all options are not disabled)', () => {
         expect(el.isEmptyRender()).toEqual(false);
-        const optionsEl = el.find('.criteria-option');
+        const optionsEl = el.instance.children;
         expect(optionsEl.length).toEqual(props.config.options.length);
-        optionsEl.forEach((optionEl) => expect(optionEl.prop('disabled')).toEqual(false));
+        optionsEl.forEach((optionEl) => expect(optionEl.props.disabled).toEqual(false));
       });
 
       test('is not grading (all options are disabled)', () => {
-        el.setProps({
-          isGrading: false,
-        });
+        el = shallow(<RadioCriterion {...props} isGrading={false} />);
         expect(el.isEmptyRender()).toEqual(false);
-        const optionsEl = el.find('.criteria-option');
+        const optionsEl = el.instance.children;
         expect(optionsEl.length).toEqual(props.config.options.length);
-        optionsEl.forEach((optionEl) => expect(optionEl.prop('disabled')).toEqual(true));
+        optionsEl.forEach((optionEl) => expect(optionEl.props.disabled).toEqual(true));
       });
 
       test('radio contain invalid response (error response get render)', () => {
-        el.setProps({
-          isInvalid: true,
-        });
+        el = shallow(<RadioCriterion {...props} isInvalid />);
         expect(el.isEmptyRender()).toEqual(false);
-        const radioErrorEl = el.find('.feedback-error-msg');
-        expect(el.instance().props.isInvalid).toEqual(true);
-        expect(radioErrorEl).toBeDefined();
+        const radioErrorEl = el.instance.children[2];
+        expect(radioErrorEl.props.type).toBe('invalid');
+        expect(radioErrorEl.props.className).toBe('feedback-error-msg');
+        expect(radioErrorEl).toBeTruthy();
       });
     });
 
     describe('behavior', () => {
       test('onChange call set crition option', () => {
         el = shallow(<RadioCriterion {...props} />);
-        el.instance().onChange({
+        el.instance.children[0].props.onChange({
           target: {
             value: 'some value',
           },

src/containers/CriterionContainer/ReviewCriterion.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Form, FormControlFeedback } from '@edx/paragon';
+import { Form, FormControlFeedback } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { selectors } from 'data/redux';
@@ -14,10 +14,10 @@ import messages from './messages';
 export const ReviewCriterion = ({ config }) => (
   <div className="review-criterion">
     {config.options.map((option) => (
-      <div key={option.name} className="criteria-option">
+      <div key={option.name} className="criteria-option" data-testid="criteria-option">
         <div>
-          <Form.Label className="option-label">{option.label}</Form.Label>
-          <FormControlFeedback className="option-points">
+          <Form.Label className="option-label" data-testid="option-label">{option.label}</Form.Label>
+          <FormControlFeedback className="option-points" data-testid="option-points">
             <FormattedMessage {...messages.optionPoints} values={{ points: option.points }} />
           </FormControlFeedback>
         </div>

src/containers/CriterionContainer/ReviewCriterion.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { selectors } from 'data/redux';
 import { ReviewCriterion, mapStateToProps } from './ReviewCriterion';
@@ -55,21 +55,21 @@ describe('Review Crition Container', () => {
     el = shallow(<ReviewCriterion {...props} />);
   });
   test('snapshot', () => {
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 
   describe('component', () => {
     test('rendering (everything show up)', () => {
       expect(el.isEmptyRender()).toEqual(false);
-      const optionsEl = el.find('.criteria-option');
+      const optionsEl = el.instance.findByTestId('criteria-option');
       expect(optionsEl.length).toEqual(props.config.options.length);
       optionsEl.forEach((optionEl, i) => {
         const option = props.config.options[i];
-        expect(optionEl.key()).toEqual(option.name);
-        expect(optionEl.find('.option-label').childAt(0).text()).toEqual(
+        expect(optionEl.props.key).toEqual(option.name);
+        expect(optionEl.findByTestId('option-label')[0].children[0].el).toEqual(
           option.label,
         );
-        expect(optionEl.find('.option-points').childAt(0).props()).toEqual({
+        expect(optionEl.findByTestId('option-points')[0].children[0].props).toEqual({
           ...messages.optionPoints,
           values: { points: option.points },
         });

src/containers/CriterionContainer/__snapshots__/CriterionFeedback.test.jsx.snap

@@ -7,9 +7,10 @@ exports[`Criterion Feedback snapshot feedback is configured to optional 1`] = `
   <Form.Control
     as="textarea"
     className="criterion-feedback feedback-input"
+    data-testid="criterion-feedback-input"
     disabled={false}
     floatingLabel="Add comments (Optional)"
-    onChange={[MockFunction this.onChange]}
+    onChange={[Function]}
     value="criterion value"
   />
 </Form.Group>
@@ -20,9 +21,10 @@ exports[`Criterion Feedback snapshot feedback is configured to required 1`] = `
   <Form.Control
     as="textarea"
     className="criterion-feedback feedback-input"
+    data-testid="criterion-feedback-input"
     disabled={false}
     floatingLabel="Add comments"
-    onChange={[MockFunction this.onChange]}
+    onChange={[Function]}
     value="criterion value"
   />
 </Form.Group>
@@ -33,13 +35,15 @@ exports[`Criterion Feedback snapshot feedback value is invalid 1`] = `
   <Form.Control
     as="textarea"
     className="criterion-feedback feedback-input"
+    data-testid="criterion-feedback-input"
     disabled={false}
     floatingLabel="Add comments"
-    onChange={[MockFunction this.onChange]}
+    onChange={[Function]}
     value="criterion value"
   />
   <Form.Control.Feedback
     className="feedback-error-msg"
+    data-testid="criterion-feedback-error-msg"
     type="invalid"
   >
     The feedback is required
@@ -52,9 +56,10 @@ exports[`Criterion Feedback snapshot is graded 1`] = `
   <Form.Control
     as="textarea"
     className="criterion-feedback feedback-input"
+    data-testid="criterion-feedback-input"
     disabled={true}
     floatingLabel="Comments"
-    onChange={[MockFunction this.onChange]}
+    onChange={[Function]}
     value="criterion value"
   />
 </Form.Group>
@@ -65,9 +70,10 @@ exports[`Criterion Feedback snapshot is grading 1`] = `
   <Form.Control
     as="textarea"
     className="criterion-feedback feedback-input"
+    data-testid="criterion-feedback-input"
     disabled={false}
     floatingLabel="Add comments"
-    onChange={[MockFunction this.onChange]}
+    onChange={[Function]}
     value="criterion value"
   />
 </Form.Group>

src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap

@@ -9,7 +9,8 @@ exports[`Radio Criterion Container snapshot is grading 1`] = `
     className="criteria-option"
     description="1 points"
     disabled={false}
-    onChange={[MockFunction this.onChange]}
+    key="option name"
+    onChange={[Function]}
     value="option name"
   >
     this label
@@ -18,7 +19,8 @@ exports[`Radio Criterion Container snapshot is grading 1`] = `
     className="criteria-option"
     description="2 points"
     disabled={false}
-    onChange={[MockFunction this.onChange]}
+    key="option name 2"
+    onChange={[Function]}
     value="option name 2"
   >
     this label 2
@@ -35,7 +37,8 @@ exports[`Radio Criterion Container snapshot is not grading 1`] = `
     className="criteria-option"
     description="1 points"
     disabled={true}
-    onChange={[MockFunction this.onChange]}
+    key="option name"
+    onChange={[Function]}
     value="option name"
   >
     this label
@@ -44,7 +47,8 @@ exports[`Radio Criterion Container snapshot is not grading 1`] = `
     className="criteria-option"
     description="2 points"
     disabled={true}
-    onChange={[MockFunction this.onChange]}
+    key="option name 2"
+    onChange={[Function]}
     value="option name 2"
   >
     this label 2
@@ -61,7 +65,8 @@ exports[`Radio Criterion Container snapshot radio contain invalid response 1`] =
     className="criteria-option"
     description="1 points"
     disabled={false}
-    onChange={[MockFunction this.onChange]}
+    key="option name"
+    onChange={[Function]}
     value="option name"
   >
     this label
@@ -70,7 +75,8 @@ exports[`Radio Criterion Container snapshot radio contain invalid response 1`] =
     className="criteria-option"
     description="2 points"
     disabled={false}
-    onChange={[MockFunction this.onChange]}
+    key="option name 2"
+    onChange={[Function]}
     value="option name 2"
   >
     this label 2

src/containers/CriterionContainer/__snapshots__/ReviewCriterion.test.jsx.snap

@@ -6,16 +6,19 @@ exports[`Review Crition Container snapshot 1`] = `
 >
   <div
     className="criteria-option"
+    data-testid="criteria-option"
     key="option name"
   >
     <div>
       <Form.Label
         className="option-label"
+        data-testid="option-label"
       >
         this label
       </Form.Label>
       <FormControlFeedback
         className="option-points"
+        data-testid="option-points"
       >
         <FormattedMessage
           defaultMessage="{points} points"
@@ -32,16 +35,19 @@ exports[`Review Crition Container snapshot 1`] = `
   </div>
   <div
     className="criteria-option"
+    data-testid="criteria-option"
     key="option name 2"
   >
     <div>
       <Form.Label
         className="option-label"
+        data-testid="option-label"
       >
         this label 2
       </Form.Label>
       <FormControlFeedback
         className="option-points"
+        data-testid="option-points"
       >
         <FormattedMessage
           defaultMessage="{points} points"

src/containers/CriterionContainer/__snapshots__/index.test.jsx.snap

@@ -13,6 +13,7 @@ exports[`Criterion Container snapshot is graded and is not grading 1`] = `
     <InfoPopover>
       <div
         className="help-popover-option"
+        data-testid="help-popover-option"
         key="option name"
       >
         <strong>
@@ -23,6 +24,7 @@ exports[`Criterion Container snapshot is graded and is not grading 1`] = `
       </div>
       <div
         className="help-popover-option"
+        data-testid="help-popover-option"
         key="option name 2"
       >
         <strong>
@@ -35,6 +37,7 @@ exports[`Criterion Container snapshot is graded and is not grading 1`] = `
   </Form.Label>
   <div
     className="rubric-criteria"
+    data-testid="rubric-criteria"
   >
     <RadioCriterion
       isGrading={false}
@@ -61,6 +64,7 @@ exports[`Criterion Container snapshot is ungraded and is grading 1`] = `
     <InfoPopover>
       <div
         className="help-popover-option"
+        data-testid="help-popover-option"
         key="option name"
       >
         <strong>
@@ -71,6 +75,7 @@ exports[`Criterion Container snapshot is ungraded and is grading 1`] = `
       </div>
       <div
         className="help-popover-option"
+        data-testid="help-popover-option"
         key="option name 2"
       >
         <strong>
@@ -83,6 +88,7 @@ exports[`Criterion Container snapshot is ungraded and is grading 1`] = `
   </Form.Label>
   <div
     className="rubric-criteria"
+    data-testid="rubric-criteria"
   >
     <RadioCriterion
       isGrading={true}
@@ -109,6 +115,7 @@ exports[`Criterion Container snapshot is ungraded and is not grading 1`] = `
     <InfoPopover>
       <div
         className="help-popover-option"
+        data-testid="help-popover-option"
         key="option name"
       >
         <strong>
@@ -119,6 +126,7 @@ exports[`Criterion Container snapshot is ungraded and is not grading 1`] = `
       </div>
       <div
         className="help-popover-option"
+        data-testid="help-popover-option"
         key="option name 2"
       >
         <strong>
@@ -131,6 +139,7 @@ exports[`Criterion Container snapshot is ungraded and is not grading 1`] = `
   </Form.Label>
   <div
     className="rubric-criteria"
+    data-testid="rubric-criteria"
   >
     <ReviewCriterion
       orderNum={1}

src/containers/CriterionContainer/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 
 import { selectors } from 'data/redux';
 import { gradeStatuses } from 'data/services/lms/constants';
@@ -25,7 +25,7 @@ export const CriterionContainer = (props) => {
         <span className="criteria-title">{config.prompt}</span>
         <InfoPopover>
           {config.options.map((option) => (
-            <div key={option.name} className="help-popover-option">
+            <div key={option.name} className="help-popover-option" data-testid="help-popover-option">
               <strong>{option.label}</strong>
               <br />
               {option.explanation}
@@ -33,7 +33,7 @@ export const CriterionContainer = (props) => {
           ))}
         </InfoPopover>
       </Form.Label>
-      <div className="rubric-criteria">
+      <div className="rubric-criteria" data-testid="rubric-criteria">
         {isGrading || gradeStatus === gradeStatuses.graded ? (
           <RadioCriterion orderNum={orderNum} isGrading={isGrading} />
         ) : (

src/containers/CriterionContainer/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { selectors } from 'data/redux';
 import { gradeStatuses } from 'data/services/lms/constants';
@@ -58,56 +58,46 @@ describe('Criterion Container', () => {
 
   describe('snapshot', () => {
     test('is ungraded and is grading', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
 
     test('is ungraded and is not grading', () => {
-      el.setProps({
-        isGrading: false,
-      });
-      expect(el).toMatchSnapshot();
+      el = shallow(<CriterionContainer {...props} isGrading={false} />);
+      expect(el.snapshot).toMatchSnapshot();
     });
 
     test('is graded and is not grading', () => {
-      el.setProps({
-        isGrading: false,
-        gradeStatus: gradeStatuses.graded,
-      });
-      expect(el).toMatchSnapshot();
+      el = shallow(<CriterionContainer {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
+      expect(el.snapshot).toMatchSnapshot();
     });
   });
 
   describe('component', () => {
     test('rendering and all of the option show up', () => {
       expect(el.isEmptyRender()).toEqual(false);
-      const optionsEl = el.find('.help-popover-option');
+      const optionsEl = el.instance.findByTestId('help-popover-option');
       expect(optionsEl.length).toEqual(props.config.options.length);
       optionsEl.forEach((optionEl, i) => {
-        expect(optionEl.key()).toEqual(props.config.options[i].name);
-        expect(optionEl.text()).toContain(props.config.options[i].explanation);
+        expect(optionEl.props.key).toEqual(props.config.options[i].name);
+        expect(optionEl.children[2].el).toContain(props.config.options[i].explanation);
       });
     });
 
     test('is ungraded and is grading (Radio criterion get render)', () => {
-      const rubricCriteria = el.find('.rubric-criteria');
-      expect(rubricCriteria.children(0).name()).toEqual('RadioCriterion');
+      const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
+      expect(rubricCriteria.children[0].el.type).toEqual('RadioCriterion');
     });
 
     test('is ungraded and is not grading (Review criterion get render)', () => {
-      el.setProps({
-        isGrading: false,
-      });
-      const rubricCriteria = el.find('.rubric-criteria');
-      expect(rubricCriteria.children(0).name()).toEqual('ReviewCriterion');
+      el = shallow(<CriterionContainer {...props} isGrading={false} />);
+      const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
+      expect(rubricCriteria.children[0].el.type).toEqual('ReviewCriterion');
     });
 
     test('is graded and is not grading (Radio criterion get render)', () => {
-      el.setProps({
-        isGrading: false,
-        gradeStatus: gradeStatuses.graded,
-      });
-      const rubricCriteria = el.find('.rubric-criteria');
-      expect(rubricCriteria.children(0).name()).toEqual('RadioCriterion');
+      el = shallow(<CriterionContainer {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
+      const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
+      expect(rubricCriteria.children[0].el.type).toEqual('RadioCriterion');
     });
   });
 

src/containers/DemoWarning/DemoWarning.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { selectors } from 'data/redux';
 import { DemoWarning, mapStateToProps } from '.';
@@ -16,12 +16,12 @@ describe('DemoWarning component', () => {
   describe('snapshots', () => {
     test('does not render if disabled flag is missing', () => {
       el = shallow(<DemoWarning hide />);
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
       expect(el.isEmptyRender()).toEqual(true);
     });
     test('snapshot: disabled flag is present', () => {
       el = shallow(<DemoWarning hide={false} />);
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
       expect(el.isEmptyRender()).toEqual(false);
     });
   });

src/containers/DemoWarning/__snapshots__/DemoWarning.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DemoWarning component snapshots does not render if disabled flag is missing 1`] = `""`;
+exports[`DemoWarning component snapshots does not render if disabled flag is missing 1`] = `null`;
 
 exports[`DemoWarning component snapshots snapshot: disabled flag is present 1`] = `
 <Alert

src/containers/DemoWarning/index.jsx

@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 
 import { selectors } from 'data/redux';
 import messages from './messages';

src/containers/ListView/EmptySubmission.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Hyperlink, Button } from '@edx/paragon';
+import { Hyperlink, Button } from '@openedx/paragon';
 
 import urls from 'data/services/lms/urls';
 import emptyStateSVG from './assets/empty-state.svg';

src/containers/ListView/EmptySubmission.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 
 import urls from 'data/services/lms/urls';
 
@@ -22,11 +22,11 @@ describe('EmptySubmission component', () => {
       el = shallow(<EmptySubmission {...props} />);
     });
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('openResponse destination', () => {
       expect(
-        el.find(Hyperlink).at(0).props().destination,
+        el.instance.findByType(Hyperlink)[0].props.destination,
       ).toEqual(urls.openResponse(props.courseId));
     });
   });

src/containers/ListView/FilterStatusComponent.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, DataTableContext } from '@edx/paragon';
+import { Button, DataTableContext } from '@openedx/paragon';
 
 import * as module from './FilterStatusComponent';
 

src/containers/ListView/FilterStatusComponent.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import * as module from './FilterStatusComponent';
 
@@ -71,20 +71,20 @@ describe('FilterStatusComponent component', () => {
       test('showFilteredFields', () => {
         mockHooks(hookProps);
         const el = shallow(<FilterStatusComponent {...props} />);
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('showFilteredFields=false - hide filterTexts', () => {
         mockHooks(hookProps);
         const el = shallow(
           <FilterStatusComponent {...props} showFilteredFields={false} />,
         );
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
     test('without filters', () => {
       mockHooks({});
       const el = shallow(<FilterStatusComponent {...props} />);
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
       expect(el.isEmptyRender()).toEqual(true);
     });
   });

src/containers/ListView/ListError.jsx

@@ -6,8 +6,8 @@ import {
   Alert,
   Button,
   Hyperlink,
-} from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import urls from 'data/services/lms/urls';

src/containers/ListView/ListError.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { selectors, thunkActions } from 'data/redux';
 
@@ -45,7 +45,7 @@ describe('ListError component', () => {
         el = shallow(<ListError {...props} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
   });

src/containers/ListView/ListView.scss

@@ -1,4 +1,4 @@
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 
 span.pgn__icon.breadcrumb-arrow {
   width: 16px !important;

src/containers/ListView/ListViewBreadcrumb.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { ArrowBack, Launch } from '@edx/paragon/icons';
-import { Hyperlink, Icon } from '@edx/paragon';
+import { ArrowBack, Launch } from '@openedx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { selectors } from 'data/redux';

src/containers/ListView/ListViewBreadcrumb.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 
 import * as constants from 'data/constants/app';
 import urls from 'data/services/lms/urls';
@@ -40,16 +40,16 @@ describe('ListViewBreadcrumb component', () => {
       el = shallow(<ListViewBreadcrumb {...props} />);
     });
     test('snapshot: empty (no list data)', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('openResponse destination', () => {
       expect(
-        el.find(Hyperlink).at(0).props().destination,
+        el.instance.findByType(Hyperlink)[0].props.destination,
       ).toEqual(urls.openResponse(props.courseId));
     });
     test('ora destination', () => {
       expect(
-        el.find(Hyperlink).at(1).props().destination,
+        el.instance.findByType(Hyperlink)[1].props.destination,
       ).toEqual(urls.ora(props.courseId, constants.locationId()));
     });
   });

src/containers/ListView/SelectedBulkAction.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 

src/containers/ListView/SelectedBulkAction.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { SelectedBulkAction } from './SelectedBulkAction';
 
@@ -10,7 +10,7 @@ describe('SelectedBulkAction component', () => {
   };
   test('snapshots', () => {
     const el = shallow(<SelectedBulkAction {...props} handleClick={() => jest.fn()} />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 
   test('handleClick', () => {

src/containers/ListView/SubmissionsTable.jsx

@@ -7,7 +7,7 @@ import {
   DataTable,
   TextFilter,
   MultiSelectDropdownFilter,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { gradingStatuses, submissionFields } from 'data/services/lms/constants';
@@ -74,6 +74,7 @@ export class SubmissionsTable extends React.Component {
     return (
       <div className="submissions-table">
         <DataTable
+          data-testid="data-table"
           isFilterable
           FilterStatusComponent={FilterStatusComponent}
           numBreakoutFilters={2}

src/containers/ListView/SubmissionsTable.test.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import {
-  DataTable,
   MultiSelectDropdownFilter,
   TextFilter,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { selectors, thunkActions } from 'data/redux';
 import { gradingStatuses as statuses, submissionFields } from 'data/services/lms/constants';
@@ -122,7 +121,7 @@ describe('SubmissionsTable component', () => {
     });
     describe('render tests', () => {
       const mockMethod = (methodName) => {
-        el.instance()[methodName] = jest.fn().mockName(`this.${methodName}`);
+        el.instance[methodName] = jest.fn().mockName(`this.${methodName}`);
       };
       beforeEach(() => {
         el = shallow(<SubmissionsTable {...props} />);
@@ -136,23 +135,21 @@ describe('SubmissionsTable component', () => {
         });
         test('snapshot: empty (no list data)', () => {
           el = shallow(<SubmissionsTable {...props} listData={[]} />);
-          expect(el).toMatchSnapshot();
+          expect(el.snapshot).toMatchSnapshot();
           expect(el.isEmptyRender()).toEqual(true);
         });
         test('snapshot: happy path', () => {
-          expect(el.instance().render()).toMatchSnapshot();
+          expect(el.snapshot).toMatchSnapshot();
         });
         test('snapshot: team happy path', () => {
-          el.setProps({ isIndividual: false, listData: [...teamData] });
-          expect(el.instance().render()).toMatchSnapshot();
+          el = shallow(<SubmissionsTable {...props} isIndividual={false} listData={[...teamData]} />);
+          expect(el.snapshot).toMatchSnapshot();
         });
       });
       describe('DataTable', () => {
-        let table;
         let tableProps;
         beforeEach(() => {
-          table = el.find(DataTable);
-          tableProps = table.props();
+          tableProps = el.instance.findByTestId('data-table')[0].props;
         });
         test.each([
           'isFilterable',
@@ -181,7 +178,7 @@ describe('SubmissionsTable component', () => {
             expect(columns[1]).toEqual({
               Header: messages.learnerSubmissionDate.defaultMessage,
               accessor: submissionFields.dateSubmitted,
-              Cell: el.instance().formatDate,
+              Cell: el.instance.children[0].props.columns[1].Cell,
               disableFilters: true,
             });
           });
@@ -189,7 +186,7 @@ describe('SubmissionsTable component', () => {
             expect(columns[2]).toEqual({
               Header: messages.grade.defaultMessage,
               accessor: submissionFields.score,
-              Cell: el.instance().formatGrade,
+              Cell: el.instance.children[0].props.columns[2].Cell,
               disableFilters: true,
             });
           });
@@ -197,18 +194,18 @@ describe('SubmissionsTable component', () => {
             expect(columns[3]).toEqual({
               Header: messages.gradingStatus.defaultMessage,
               accessor: submissionFields.gradingStatus,
-              Cell: el.instance().formatStatus,
+              Cell: el.instance.children[0].props.columns[3].Cell,
               Filter: MultiSelectDropdownFilter,
               filter: 'includesValue',
-              filterChoices: el.instance().gradeStatusOptions,
+              filterChoices: el.instance.children[0].props.columns[3].filterChoices,
             });
           });
         });
         describe('team columns', () => {
           let columns;
           beforeEach(() => {
-            el.setProps({ isIndividual: false, listData: [...teamData] });
-            columns = el.find(DataTable).props().columns;
+            el = shallow(<SubmissionsTable {...props} isIndividual={false} listData={[...teamData]} />);
+            columns = el.instance.findByTestId('data-table')[0].props.columns;
           });
           test('teamName column', () => {
             expect(columns[0]).toEqual({
@@ -220,7 +217,7 @@ describe('SubmissionsTable component', () => {
             expect(columns[1]).toEqual({
               Header: messages.teamSubmissionDate.defaultMessage,
               accessor: submissionFields.dateSubmitted,
-              Cell: el.instance().formatDate,
+              Cell: el.instance.children[0].props.columns[1].Cell,
               disableFilters: true,
             });
           });
@@ -228,7 +225,7 @@ describe('SubmissionsTable component', () => {
             expect(columns[2]).toEqual({
               Header: messages.grade.defaultMessage,
               accessor: submissionFields.score,
-              Cell: el.instance().formatGrade,
+              Cell: el.instance.children[0].props.columns[2].Cell,
               disableFilters: true,
             });
           });
@@ -236,10 +233,10 @@ describe('SubmissionsTable component', () => {
             expect(columns[3]).toEqual({
               Header: messages.gradingStatus.defaultMessage,
               accessor: submissionFields.gradingStatus,
-              Cell: el.instance().formatStatus,
+              Cell: el.instance.children[0].props.columns[3].Cell,
               Filter: MultiSelectDropdownFilter,
               filter: 'includesValue',
-              filterChoices: el.instance().gradeStatusOptions,
+              filterChoices: el.instance.children[0].props.columns[3].filterChoices,
             });
           });
         });
@@ -251,24 +248,24 @@ describe('SubmissionsTable component', () => {
           const fakeDate = 16131215154955;
           const fakeDateString = 'test-date-string';
           const mock = jest.spyOn(Date.prototype, 'toLocaleString').mockReturnValue(fakeDateString);
-          expect(el.instance().formatDate({ value: fakeDate })).toEqual(fakeDateString);
+          expect(el.instance.children[0].props.columns[1].Cell({ value: fakeDate })).toEqual(fakeDateString);
           mock.mockRestore();
         });
       });
       describe('formatGrade method', () => {
         it('returns "-" if grade is null', () => {
-          expect(el.instance().formatGrade({ value: null })).toEqual('-');
+          expect(el.instance.children[0].props.columns[2].Cell({ value: null })).toEqual('-');
         });
         it('returns <pointsEarned>/<pointsPossible> if grade exists', () => {
           expect(
-            el.instance().formatGrade({ value: { pointsEarned: 1, pointsPossible: 10 } }),
+            el.instance.children[0].props.columns[2].Cell({ value: { pointsEarned: 1, pointsPossible: 10 } }),
           ).toEqual('1/10');
         });
       });
       describe('formatStatus method', () => {
         it('returns a StatusBadge with the given status', () => {
           const status = 'graded';
-          expect(el.instance().formatStatus({ value: 'graded' })).toEqual(
+          expect(el.instance.children[0].props.columns[3].Cell({ value: 'graded' })).toEqual(
             <StatusBadge status={status} />,
           );
         });
@@ -280,8 +277,8 @@ describe('SubmissionsTable component', () => {
             { original: { submissionUUID: '456' } },
             { original: { submissionUUID: '789' } },
           ];
-          el.instance().handleViewAllResponsesClick(data)();
-          expect(el.instance().props.loadSelectionForReview).toHaveBeenCalledWith(['123', '456', '789']);
+          el.instance.children[0].props.tableActions[0].props.handleClick(data)();
+          expect(el.shallowRenderer._instance.props.loadSelectionForReview).toHaveBeenCalledWith(['123', '456', '789']); // eslint-disable-line no-underscore-dangle
         });
       });
     });

src/containers/ListView/TableAction.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
@@ -11,6 +11,7 @@ export const TableAction = ({ tableInstance, handleClick }) => (
     onClick={handleClick(tableInstance.rows)}
     variant="primary"
     className="view-all-responses-btn"
+    disabled={tableInstance.rows.length === 0}
   >
     <FormattedMessage {...messages.viewAllResponses} />
   </Button>

src/containers/ListView/TableAction.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { TableAction } from './TableAction';
 
@@ -10,7 +10,16 @@ describe('TableAction component', () => {
   };
   test('snapshots', () => {
     const el = shallow(<TableAction {...props} handleClick={() => jest.fn()} />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
+  });
+
+  test('Inactive Button "View All Responses"', () => {
+    const emptyProps = {
+      tableInstance: { rows: [] },
+      handleClick: jest.fn(),
+    };
+    const el = shallow(<TableAction {...emptyProps} />);
+    expect(el.snapshot).toMatchSnapshot();
   });
 
   test('handleClick', () => {

src/containers/ListView/__snapshots__/FilterStatusComponent.test.jsx.snap

@@ -34,4 +34,4 @@ exports[`FilterStatusComponent component snapshot with filters showFilteredField
 </div>
 `;
 
-exports[`FilterStatusComponent component snapshot without filters 1`] = `""`;
+exports[`FilterStatusComponent component snapshot without filters 1`] = `null`;

src/containers/ListView/__snapshots__/SubmissionsTable.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SubmissionsTable component component render tests snapshots snapshot: empty (no list data) 1`] = `""`;
+exports[`SubmissionsTable component component render tests snapshots snapshot: empty (no list data) 1`] = `null`;
 
 exports[`SubmissionsTable component component render tests snapshots snapshot: happy path 1`] = `
 <div
@@ -11,7 +11,7 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
     bulkActions={
       Array [
         <mockConstructor
-          handleClick={[MockFunction this.handleViewAllResponsesClick]}
+          handleClick={[Function]}
         />,
       ]
     }
@@ -22,19 +22,19 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
           "accessor": "username",
         },
         Object {
-          "Cell": [MockFunction this.formatDate],
+          "Cell": [Function],
           "Header": "Learner submission date",
           "accessor": "dateSubmitted",
           "disableFilters": true,
         },
         Object {
-          "Cell": [MockFunction this.formatGrade],
+          "Cell": [Function],
           "Header": "Grade",
           "accessor": "score",
           "disableFilters": true,
         },
         Object {
-          "Cell": [MockFunction this.formatStatus],
+          "Cell": [Function],
           "Filter": "MultiSelectDropdownFilter",
           "Header": "Grading status",
           "accessor": "gradingStatus",
@@ -91,6 +91,7 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
         },
       ]
     }
+    data-testid="data-table"
     defaultColumnValues={
       Object {
         "Filter": "TextFilter",
@@ -111,7 +112,7 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
     tableActions={
       Array [
         <mockConstructor
-          handleClick={[MockFunction this.handleViewAllResponsesClick]}
+          handleClick={[Function]}
         />,
       ]
     }
@@ -132,7 +133,7 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
     bulkActions={
       Array [
         <mockConstructor
-          handleClick={[MockFunction this.handleViewAllResponsesClick]}
+          handleClick={[Function]}
         />,
       ]
     }
@@ -143,19 +144,19 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
           "accessor": "teamName",
         },
         Object {
-          "Cell": [MockFunction this.formatDate],
+          "Cell": [Function],
           "Header": "Team submission date",
           "accessor": "dateSubmitted",
           "disableFilters": true,
         },
         Object {
-          "Cell": [MockFunction this.formatGrade],
+          "Cell": [Function],
           "Header": "Grade",
           "accessor": "score",
           "disableFilters": true,
         },
         Object {
-          "Cell": [MockFunction this.formatStatus],
+          "Cell": [Function],
           "Filter": "MultiSelectDropdownFilter",
           "Header": "Grading status",
           "accessor": "gradingStatus",
@@ -212,6 +213,7 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
         },
       ]
     }
+    data-testid="data-table"
     defaultColumnValues={
       Object {
         "Filter": "TextFilter",
@@ -232,7 +234,7 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
     tableActions={
       Array [
         <mockConstructor
-          handleClick={[MockFunction this.handleViewAllResponsesClick]}
+          handleClick={[Function]}
         />,
       ]
     }

src/containers/ListView/__snapshots__/TableAction.test.jsx.snap

@@ -1,8 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`TableAction component Inactive Button "View All Responses" 1`] = `
+<Button
+  className="view-all-responses-btn"
+  disabled={true}
+  variant="primary"
+>
+  <FormattedMessage
+    defaultMessage="View all responses"
+    description="Button text to load all responses for review/grading"
+    id="ora-grading.ListView.viewAllResponses"
+  />
+</Button>
+`;
+
 exports[`TableAction component snapshots 1`] = `
 <Button
   className="view-all-responses-btn"
+  disabled={false}
   onClick={[MockFunction]}
   variant="primary"
 >

src/containers/ListView/__snapshots__/index.test.jsx.snap

@@ -13,10 +13,10 @@ exports[`ListView component component snapshots loaded has data 1`] = `
 <Container
   className="py-4"
 >
-  <React.Fragment>
+  <Fragment>
     <ListViewBreadcrumb />
     <SubmissionsTable />
-  </React.Fragment>
+  </Fragment>
   <ReviewModal />
 </Container>
 `;

src/containers/ListView/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { Container, Spinner } from '@edx/paragon';
+import { Container, Spinner } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { selectors, thunkActions } from 'data/redux';

src/containers/ListView/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { selectors, thunkActions } from 'data/redux';
 import { RequestKeys } from 'data/constants/requests';
@@ -34,7 +34,7 @@ jest.mock('data/redux', () => ({
   },
 }));
 
-jest.mock('@edx/paragon', () => ({
+jest.mock('@openedx/paragon', () => ({
   Container: 'Container',
   Spinner: 'Spinner',
 }));
@@ -59,20 +59,20 @@ describe('ListView component', () => {
         el = shallow(<ListView {...props} />);
       });
       test('loading', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('loaded has data', () => {
-        el.setProps({ isLoaded: true });
-        expect(el.instance().render()).toMatchSnapshot();
+        el = shallow(<ListView {...props} isLoaded />);
+        expect(el.snapshot).toMatchSnapshot();
       });
 
       test('loaded with no data', () => {
-        el.setProps({ isLoaded: true, isEmptySubmissionData: true });
-        expect(el.instance().render()).toMatchSnapshot();
+        el = shallow(<ListView {...props} isLoaded isEmptySubmissionData />);
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('error', () => {
-        el.setProps({ hasError: true });
-        expect(el.instance().render()).toMatchSnapshot();
+        el = shallow(<ListView {...props} hasError />);
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
     describe('behavior', () => {

src/containers/NotificationsBanner/NotificationsBanner.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { NotificationsBanner } from '.';
+
+describe('NotificationsBanner component', () => {
+  test('snapshots', () => {
+    const el = shallow(<NotificationsBanner hide />);
+    expect(el.snapshot).toMatchSnapshot();
+  });
+});

src/containers/NotificationsBanner/__snapshots__/NotificationsBanner.test.jsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotificationsBanner component snapshots 1`] = `
+<PageBanner
+  variant="accentB"
+>
+  <span>
+    <FormattedMessage
+      defaultMessage="You can now enable notifications for ORA assignments that require staff grading, from the "
+      description="user info message that user can enable notifications for ORA assignments"
+      id="ora-grading.NotificationsBanner.Message"
+    />
+    <Hyperlink
+      destination="http://localhost:1997/notifications"
+      isInline={true}
+      rel="noopener noreferrer"
+      showLaunchIcon={false}
+      target="_blank"
+      variant="muted"
+    >
+      <FormattedMessage
+        defaultMessage="preferences center."
+        description="placeholder for the preferences center link"
+        id="ora-grading.NotificationsBanner.linkMessage"
+      />
+    </Hyperlink>
+  </span>
+</PageBanner>
+`;

src/containers/NotificationsBanner/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { PageBanner, Hyperlink } from '@openedx/paragon';
+
+import messages from './messages';
+
+export const NotificationsBanner = () => (
+  <PageBanner variant="accentB">
+    <span>
+      <FormattedMessage {...messages.infoMessage} />
+      <Hyperlink
+        isInline
+        variant="muted"
+        destination={`${getConfig().ACCOUNT_SETTINGS_URL}/notifications`}
+        target="_blank"
+        rel="noopener noreferrer"
+        showLaunchIcon={false}
+      >
+        <FormattedMessage {...messages.notificationsBannerLinkMessage} />
+      </Hyperlink>
+    </span>
+  </PageBanner>
+);
+
+export default NotificationsBanner;

src/containers/NotificationsBanner/messages.js

@@ -0,0 +1,18 @@
+/* eslint-disable quotes */
+import { defineMessages } from '@edx/frontend-platform/i18n';
+import { StrictDict } from 'utils';
+
+const messages = defineMessages({
+  infoMessage: {
+    id: 'ora-grading.NotificationsBanner.Message',
+    defaultMessage: 'You can now enable notifications for ORA assignments that require staff grading, from the ',
+    description: 'user info message that user can enable notifications for ORA assignments',
+  },
+  notificationsBannerLinkMessage: {
+    id: 'ora-grading.NotificationsBanner.linkMessage',
+    defaultMessage: 'preferences center.',
+    description: 'placeholder for the preferences center link',
+  },
+});
+
+export default StrictDict(messages);

src/containers/ResponseDisplay/FileDownload.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
   StatefulButton,
   Icon,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { RequestKeys, RequestStates } from 'data/constants/requests';
 import { selectors, thunkActions } from 'data/redux';

src/containers/ResponseDisplay/FileDownload.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { RequestKeys, RequestStates } from 'data/constants/requests';
 import { selectors, thunkActions } from 'data/redux';
@@ -31,23 +31,23 @@ describe('FileDownload', () => {
     });
     describe('snapshot', () => {
       test('download is inactive', () => {
-        expect(el).toMatchSnapshot();
-        expect(el.at(0).props().state).toEqual(statusMapping[RequestStates.inactive]);
+        expect(el.snapshot).toMatchSnapshot();
+        expect(el.instance.props.state).toEqual(statusMapping[RequestStates.inactive]);
       });
       test('download is pending', () => {
-        el.setProps({ requestStatus: { status: RequestStates.pending } });
-        expect(el).toMatchSnapshot();
-        expect(el.at(0).props().state).toEqual(statusMapping[RequestStates.pending]);
+        el = shallow(<FileDownload {...props} requestStatus={{ status: RequestStates.pending }} />);
+        expect(el.snapshot).toMatchSnapshot();
+        expect(el.instance.props.state).toEqual(statusMapping[RequestStates.pending]);
       });
       test('download is completed', () => {
-        el.setProps({ requestStatus: { status: RequestStates.completed } });
-        expect(el).toMatchSnapshot();
-        expect(el.at(0).props().state).toEqual(statusMapping[RequestStates.completed]);
+        el = shallow(<FileDownload {...props} requestStatus={{ status: RequestStates.completed }} />);
+        expect(el.snapshot).toMatchSnapshot();
+        expect(el.instance.props.state).toEqual(statusMapping[RequestStates.completed]);
       });
       test('download is failed', () => {
-        el.setProps({ requestStatus: { status: RequestStates.failed } });
-        expect(el).toMatchSnapshot();
-        expect(el.at(0).props().state).toEqual(statusMapping[RequestStates.failed]);
+        el = shallow(<FileDownload {...props} requestStatus={{ status: RequestStates.failed }} />);
+        expect(el.snapshot).toMatchSnapshot();
+        expect(el.instance.props.state).toEqual(statusMapping[RequestStates.failed]);
       });
     });
   });

src/containers/ResponseDisplay/PreviewDisplay.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { FileTypes } from 'data/constants/files';
 import { FileRenderer } from 'components/FilePreview';
@@ -33,21 +33,21 @@ describe('PreviewDisplay', () => {
 
     describe('snapshot', () => {
       test('files render with props', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('files does not exist', () => {
-        el.setProps({ files: [] });
-        expect(el).toMatchSnapshot();
+        el = shallow(<PreviewDisplay {...props} files={[]} />);
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
 
     describe('component', () => {
       test('only renders compatible files', () => {
-        const cards = el.find(FileRenderer);
+        const cards = el.instance.findByType(FileRenderer);
         expect(cards.length).toEqual(supportedTypes.length);
         cards.forEach((_, index) => {
           expect(
-            cards.at(index).prop('file'),
+            cards[index].props.file,
           ).toEqual(props.files[index]);
         });
       });

src/containers/ResponseDisplay/ResponseDisplay.scss

@@ -1,4 +1,4 @@
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 
 .response-display {
   padding: map-get($spacers, 0);

src/containers/ResponseDisplay/SubmissionFiles.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import {
   Card, Collapsible, Icon, DataTable, Button,
-} from '@edx/paragon';
-import { ArrowDropDown, ArrowDropUp, WarningFilled } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { ArrowDropDown, ArrowDropUp, WarningFilled } from '@openedx/paragon/icons';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { downloadAllLimit, downloadSingleLimit } from 'data/constants/files';
@@ -42,7 +42,7 @@ export class SubmissionFiles extends React.Component {
           <>
             <Collapsible.Advanced defaultOpen>
               <Collapsible.Trigger className="submission-files-title">
-                <h3>{this.title}</h3>
+                <h3 data-testid="submission-files-title">{this.title}</h3>
                 <Collapsible.Visible whenClosed>
                   <Icon src={ArrowDropDown} />
                 </Collapsible.Visible>
@@ -83,10 +83,10 @@ export class SubmissionFiles extends React.Component {
             </Collapsible.Advanced>
             <Card.Footer className="text-right">
               {
-                this.canDownload ? <FileDownload files={files} /> : (
+                this.canDownload ? <FileDownload files={files} data-testid="file-download" /> : (
                   <div>
                     <Icon className="d-inline-block align-middle" src={WarningFilled} />
-                    <span className="exceed-download-text"> {intl.formatMessage(messages.exceedFileSize)} </span>
+                    <span className="exceed-download-text" data-testid="exceed-download-text"> {intl.formatMessage(messages.exceedFileSize)} </span>
                     <Button disabled>{intl.formatMessage(messages.downloadFiles)}</Button>
                   </div>
                 )

src/containers/ResponseDisplay/SubmissionFiles.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { downloadAllLimit, downloadSingleLimit } from 'data/constants/files';
 
@@ -37,35 +37,32 @@ describe('SubmissionFiles', () => {
 
     describe('snapshot', () => {
       test('files existed for props', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
 
       test('files does not exist', () => {
-        el.setProps({ files: [] });
+        el = shallow(<SubmissionFiles intl={{ formatMessage }} {...props} files={[]} />);
 
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       test('files size exceed', () => {
         const files = props.files.map(file => ({ ...file, size: downloadSingleLimit + 1 }));
-        el.setProps({ files });
-        expect(el).toMatchSnapshot();
+        el = shallow(<SubmissionFiles intl={{ formatMessage }} {...props} files={files} />);
+        expect(el.snapshot).toMatchSnapshot();
       });
     });
 
     describe('behavior', () => {
       test('title', () => {
-        const titleEl = el.find('.submission-files-title>h3');
-        expect(titleEl.text()).toEqual(
-          `${formatMessage(messages.submissionFiles)} (${props.files.length})`,
-        );
-        expect(el.instance().title).toEqual(
+        const titleEl = el.instance.findByTestId('submission-files-title')[0].children[0];
+        expect(titleEl.el).toEqual(
           `${formatMessage(messages.submissionFiles)} (${props.files.length})`,
         );
       });
 
       describe('canDownload', () => {
         test('normal file size', () => {
-          expect(el.instance().canDownload).toEqual(true);
+          expect(el.instance.findByTestId('file-download')).toHaveLength(1);
         });
 
         test('one of the file exceed the limit', () => {
@@ -73,11 +70,11 @@ describe('SubmissionFiles', () => {
 
           oneFileExceed.forEach(file => expect(file.size < downloadAllLimit).toEqual(true));
 
-          el.setProps({ files: oneFileExceed });
-          expect(el.instance().canDownload).toEqual(false);
+          el = shallow(<SubmissionFiles intl={{ formatMessage }} {...props} files={oneFileExceed} />);
+          expect(el.instance.findByTestId('file-download')).toHaveLength(0);
 
-          const warningEl = el.find('span.exceed-download-text');
-          expect(warningEl.text().trim()).toEqual(formatMessage(messages.exceedFileSize));
+          const warningEl = el.instance.findByTestId('exceed-download-text')[0];
+          expect(warningEl.el.children[1]).toEqual(formatMessage(messages.exceedFileSize));
         });
 
         test('total file size exceed the limit', () => {
@@ -93,8 +90,8 @@ describe('SubmissionFiles', () => {
             expect(file.size < downloadSingleLimit).toEqual(true);
           });
 
-          el.setProps({ files: totalFilesExceed });
-          expect(el.instance().canDownload).toEqual(false);
+          el = shallow(<SubmissionFiles intl={{ formatMessage }} {...props} files={totalFilesExceed} />);
+          expect(el.instance.findByTestId('file-download')).toHaveLength(0);
         });
       });
     });

src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap

@@ -18,102 +18,107 @@ exports[`SubmissionFiles component snapshot files existed for props 1`] = `
 <Card
   className="submission-files"
 >
-  <Collapsible.Advanced
-    defaultOpen={true}
-  >
-    <Collapsible.Trigger
-      className="submission-files-title"
+  <Fragment>
+    <Collapsible.Advanced
+      defaultOpen={true}
     >
-      <h3>
-        Submission Files (2)
-      </h3>
-      <Collapsible.Visible
-        whenClosed={true}
+      <Collapsible.Trigger
+        className="submission-files-title"
       >
-        <Icon
-          src={[MockFunction icons.ArrowDropDown]}
-        />
-      </Collapsible.Visible>
-      <Collapsible.Visible
-        whenOpen={true}
-      >
-        <Icon
-          src={[MockFunction icons.ArrowDropUp]}
-        />
-      </Collapsible.Visible>
-    </Collapsible.Trigger>
-    <Collapsible.Body
-      className="submission-files-body"
-    >
-      <div
-        className="submission-files-table"
-      >
-        <DataTable
-          columns={
-            Array [
-              Object {
-                "Cell": [MockFunction FileNameCell],
-                "Header": "Name",
-                "accessor": "name",
-              },
-              Object {
-                "Cell": [MockFunction FileExtensionCell],
-                "Header": "File Extension",
-                "accessor": "name",
-                "id": "extension",
-              },
-              Object {
-                "Cell": [MockFunction FilePopoverCell],
-                "Header": "File Metadata",
-                "accessor": "",
-              },
-            ]
-          }
-          data={
-            Array [
-              Object {
-                "description": "description for the file",
-                "downloadURL": "/valid-url-wink-wink",
-                "name": "some file name.jpg",
-                "size": 0,
-              },
-              Object {
-                "description": "description for this file",
-                "downloadURL": "/url-2",
-                "name": "file number 2.jpg",
-                "size": 0,
-              },
-            ]
-          }
-          itemCount={2}
+        <h3
+          data-testid="submission-files-title"
         >
-          <DataTable.Table />
-        </DataTable>
-      </div>
-    </Collapsible.Body>
-  </Collapsible.Advanced>
-  <Card.Footer
-    className="text-right"
-  >
-    <FileDownload
-      files={
-        Array [
-          Object {
-            "description": "description for the file",
-            "downloadURL": "/valid-url-wink-wink",
-            "name": "some file name.jpg",
-            "size": 0,
-          },
-          Object {
-            "description": "description for this file",
-            "downloadURL": "/url-2",
-            "name": "file number 2.jpg",
-            "size": 0,
-          },
-        ]
-      }
-    />
-  </Card.Footer>
+          Submission Files (2)
+        </h3>
+        <Collapsible.Visible
+          whenClosed={true}
+        >
+          <Icon
+            src={[MockFunction icons.ArrowDropDown]}
+          />
+        </Collapsible.Visible>
+        <Collapsible.Visible
+          whenOpen={true}
+        >
+          <Icon
+            src={[MockFunction icons.ArrowDropUp]}
+          />
+        </Collapsible.Visible>
+      </Collapsible.Trigger>
+      <Collapsible.Body
+        className="submission-files-body"
+      >
+        <div
+          className="submission-files-table"
+        >
+          <DataTable
+            columns={
+              Array [
+                Object {
+                  "Cell": [MockFunction FileNameCell],
+                  "Header": "Name",
+                  "accessor": "name",
+                },
+                Object {
+                  "Cell": [MockFunction FileExtensionCell],
+                  "Header": "File Extension",
+                  "accessor": "name",
+                  "id": "extension",
+                },
+                Object {
+                  "Cell": [MockFunction FilePopoverCell],
+                  "Header": "File Metadata",
+                  "accessor": "",
+                },
+              ]
+            }
+            data={
+              Array [
+                Object {
+                  "description": "description for the file",
+                  "downloadURL": "/valid-url-wink-wink",
+                  "name": "some file name.jpg",
+                  "size": 0,
+                },
+                Object {
+                  "description": "description for this file",
+                  "downloadURL": "/url-2",
+                  "name": "file number 2.jpg",
+                  "size": 0,
+                },
+              ]
+            }
+            itemCount={2}
+          >
+            <DataTable.Table />
+          </DataTable>
+        </div>
+      </Collapsible.Body>
+    </Collapsible.Advanced>
+    <Card.Footer
+      className="text-right"
+    >
+      <FileDownload
+        data-testid="file-download"
+        files={
+          Array [
+            Object {
+              "description": "description for the file",
+              "downloadURL": "/valid-url-wink-wink",
+              "name": "some file name.jpg",
+              "size": 0,
+            },
+            Object {
+              "description": "description for this file",
+              "downloadURL": "/url-2",
+              "name": "file number 2.jpg",
+              "size": 0,
+            },
+          ]
+        }
+      />
+    </Card.Footer>
+  </Fragment>
 </Card>
 `;
 
@@ -121,100 +126,105 @@ exports[`SubmissionFiles component snapshot files size exceed 1`] = `
 <Card
   className="submission-files"
 >
-  <Collapsible.Advanced
-    defaultOpen={true}
-  >
-    <Collapsible.Trigger
-      className="submission-files-title"
+  <Fragment>
+    <Collapsible.Advanced
+      defaultOpen={true}
     >
-      <h3>
-        Submission Files (2)
-      </h3>
-      <Collapsible.Visible
-        whenClosed={true}
+      <Collapsible.Trigger
+        className="submission-files-title"
       >
-        <Icon
-          src={[MockFunction icons.ArrowDropDown]}
-        />
-      </Collapsible.Visible>
-      <Collapsible.Visible
-        whenOpen={true}
-      >
-        <Icon
-          src={[MockFunction icons.ArrowDropUp]}
-        />
-      </Collapsible.Visible>
-    </Collapsible.Trigger>
-    <Collapsible.Body
-      className="submission-files-body"
-    >
-      <div
-        className="submission-files-table"
-      >
-        <DataTable
-          columns={
-            Array [
-              Object {
-                "Cell": [MockFunction FileNameCell],
-                "Header": "Name",
-                "accessor": "name",
-              },
-              Object {
-                "Cell": [MockFunction FileExtensionCell],
-                "Header": "File Extension",
-                "accessor": "name",
-                "id": "extension",
-              },
-              Object {
-                "Cell": [MockFunction FilePopoverCell],
-                "Header": "File Metadata",
-                "accessor": "",
-              },
-            ]
-          }
-          data={
-            Array [
-              Object {
-                "description": "description for the file",
-                "downloadURL": "/valid-url-wink-wink",
-                "name": "some file name.jpg",
-                "size": 1610612737,
-              },
-              Object {
-                "description": "description for this file",
-                "downloadURL": "/url-2",
-                "name": "file number 2.jpg",
-                "size": 1610612737,
-              },
-            ]
-          }
-          itemCount={2}
+        <h3
+          data-testid="submission-files-title"
         >
-          <DataTable.Table />
-        </DataTable>
+          Submission Files (2)
+        </h3>
+        <Collapsible.Visible
+          whenClosed={true}
+        >
+          <Icon
+            src={[MockFunction icons.ArrowDropDown]}
+          />
+        </Collapsible.Visible>
+        <Collapsible.Visible
+          whenOpen={true}
+        >
+          <Icon
+            src={[MockFunction icons.ArrowDropUp]}
+          />
+        </Collapsible.Visible>
+      </Collapsible.Trigger>
+      <Collapsible.Body
+        className="submission-files-body"
+      >
+        <div
+          className="submission-files-table"
+        >
+          <DataTable
+            columns={
+              Array [
+                Object {
+                  "Cell": [MockFunction FileNameCell],
+                  "Header": "Name",
+                  "accessor": "name",
+                },
+                Object {
+                  "Cell": [MockFunction FileExtensionCell],
+                  "Header": "File Extension",
+                  "accessor": "name",
+                  "id": "extension",
+                },
+                Object {
+                  "Cell": [MockFunction FilePopoverCell],
+                  "Header": "File Metadata",
+                  "accessor": "",
+                },
+              ]
+            }
+            data={
+              Array [
+                Object {
+                  "description": "description for the file",
+                  "downloadURL": "/valid-url-wink-wink",
+                  "name": "some file name.jpg",
+                  "size": 1610612737,
+                },
+                Object {
+                  "description": "description for this file",
+                  "downloadURL": "/url-2",
+                  "name": "file number 2.jpg",
+                  "size": 1610612737,
+                },
+              ]
+            }
+            itemCount={2}
+          >
+            <DataTable.Table />
+          </DataTable>
+        </div>
+      </Collapsible.Body>
+    </Collapsible.Advanced>
+    <Card.Footer
+      className="text-right"
+    >
+      <div>
+        <Icon
+          className="d-inline-block align-middle"
+        />
+        <span
+          className="exceed-download-text"
+          data-testid="exceed-download-text"
+        >
+           
+          Exceeded the allow download size
+           
+        </span>
+        <Button
+          disabled={true}
+        >
+          Download files
+        </Button>
       </div>
-    </Collapsible.Body>
-  </Collapsible.Advanced>
-  <Card.Footer
-    className="text-right"
-  >
-    <div>
-      <Icon
-        className="d-inline-block align-middle"
-      />
-      <span
-        className="exceed-download-text"
-      >
-         
-        Exceeded the allow download size
-         
-      </span>
-      <Button
-        disabled={true}
-      >
-        Download files
-      </Button>
-    </div>
-  </Card.Footer>
+    </Card.Footer>
+  </Fragment>
 </Card>
 `;

src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap

@@ -4,9 +4,12 @@ exports[`ResponseDisplay component snapshot file upload disable with valid respo
 <div
   className="response-display"
 >
-  <Card>
+  <Card
+    key="0"
+  >
     <Card.Section
       className="response-display-text-content"
+      data-testid="response-display-text-content"
     >
       parsed html (sanitized (some text response here))
     </Card.Section>
@@ -19,9 +22,11 @@ exports[`ResponseDisplay component snapshot file upload disabled without respons
   className="response-display"
 >
   <SubmissionFiles
+    data-testid="submission-files"
     files={Array []}
   />
   <PreviewDisplay
+    data-testid="allow-file-upload"
     files={Array []}
   />
 </div>
@@ -32,6 +37,7 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
   className="response-display"
 >
   <SubmissionFiles
+    data-testid="submission-files"
     files={
       Array [
         Object {
@@ -48,6 +54,7 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
     }
   />
   <PreviewDisplay
+    data-testid="allow-file-upload"
     files={
       Array [
         Object {
@@ -63,9 +70,12 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
       ]
     }
   />
-  <Card>
+  <Card
+    key="0"
+  >
     <Card.Section
       className="response-display-text-content"
+      data-testid="response-display-text-content"
     >
       parsed html (sanitized (some text response here))
     </Card.Section>
@@ -78,9 +88,11 @@ exports[`ResponseDisplay component snapshot file upload enable without response
   className="response-display"
 >
   <SubmissionFiles
+    data-testid="submission-files"
     files={Array []}
   />
   <PreviewDisplay
+    data-testid="allow-file-upload"
     files={Array []}
   />
 </div>

src/containers/ResponseDisplay/components/FileExtensionCell.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import FileExtensionCell from './FileExtensionCell';
 
@@ -13,12 +13,12 @@ describe('FileExtensionCell', () => {
       el = shallow(<FileExtensionCell {...props} />);
     });
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
 
     describe('behavior', () => {
       test('content', () => {
-        expect(el.text()).toEqual('PDF');
+        expect(el.instance.children[0].el).toEqual('PDF');
       });
     });
   });

src/containers/ResponseDisplay/components/FileNameCell.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import FileNameCell from './FileNameCell';
 
@@ -13,12 +13,12 @@ describe('FileNameCell', () => {
       el = shallow(<FileNameCell {...props} />);
     });
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
 
     describe('behavior', () => {
       test('content', () => {
-        expect(el.text()).toEqual(props.value);
+        expect(el.instance.children[0].el).toEqual(props.value);
       });
     });
   });

src/containers/ResponseDisplay/components/FilePopoverCell.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import FilePopoverContent from 'components/FilePopoverContent';
 import FilePopoverCell from './FilePopoverCell';
@@ -23,14 +23,14 @@ describe('FilePopoverCell', () => {
       el = shallow(<FilePopoverCell {...props} />);
     });
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
 
     describe('behavior', () => {
       test('content', () => {
         const { original } = props.row;
-        const content = el.find(FilePopoverContent);
-        expect(content.props()).toEqual({ ...original });
+        const content = el.instance.findByType(FilePopoverContent)[0];
+        expect(content.props).toEqual({ ...original });
       });
     });
   });