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

Co-authored-by: Brian Smith <bsmith@axim.org>
Merge pull request #329 from openedx/aansari/INF-1375
2024-06-06 15:06:24 -03:00 · 2024-04-30 21:09:29 +05:00 · 2024-04-30 20:07:23 +05:00 · 2024-04-30 19:59:26 +05:00 · 2024-04-03 15:25:01 -03:00 · 2024-03-18 15:01:30 -04:00
185 changed files with 10979 additions and 11684 deletions
--- a/.env
+++ b/.env
@@ -32,3 +32,4 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
+ACCOUNT_SETTINGS_URL=''
--- a/.env.development
+++ b/.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
--- a/.env.test
+++ b/.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
--- a/.eslintrc.js
+++ b/.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: {
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.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
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,5 @@ module.config.js
 ### transifex ###
 src/i18n/transifex_input.json
 temp
+
+src/i18n/messages
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.16
+18.19
--- a/.tx/config
+++ b/.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
-
--- a/28
+++ b/28
@@ -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,fr,es_419,zh_CN,fr_CA,it_IT,pt_PT,de_DE,uk,ru,hi"
-
 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:
--- a/README.rst
+++ b/README.rst
@@ -1,7 +1,8 @@
 frontend-app-ora-grading
-########################
+#############################
+
+|license-badge| |status-badge| |ci-badge| |codecov-badge|

-|ci-badge| |codecov-badge| |doc-badge| |license-badge| |status-badge|

 Purpose
 *******
@@ -22,25 +23,62 @@ app in ``edx-platform``.
 Getting Started
 ***************

+Prerequisites
+=============
+
+The `devstack`_ is currently recommended as a development environment for your
+new MFE.  If you start it with ``make dev.up.lms`` that should give you
+everything you need as a companion to this frontend.
+
+Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
+to the `relevant tutor-mfe documentation`_ to get started using it.
+
+.. _Devstack: https://github.com/openedx/devstack
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _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
 ==========

-One Time Setup
+Cloning and Startup
 --------------

 First, clone the repo, install code prerequisites, and start the app.

 .. code-block::

-  # Clone the repository
-  git clone git@github.com:openedx/frontend-app-ora-grading.git
-  cd frontend-app-ora-grading

-  # Install prerequisites
-  npm install
+  1. Clone your new repo:

-  # Start the MFE
-  npm run start
+  ``git clone git@github.com:openedx/frontend-app-ora-grading.git``
+
+  2. Use node v18.x.
+
+    The current version of the micro-frontend build scripts support node 18.
+    Using other major versions of node *may* work, but this is unsupported.  For
+    convenience, this repository includes an .nvmrc file to help in setting the
+    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+  3. Install npm dependencies:
+
+    ``cd frontend-app-ora-grading && npm install``
+
+  4. Update the application port to use for local development:
+
+    Default port is 1993. If this does not work for you, update the line
+    `PORT=1993` to your port in all .env.* files
+
+  5. Start the dev server:
+
+    ``npm start``

 The app will, by default, run on `http://localhost:1993` unless otherwise
 specified in ``.env.development:PORT`` and ``.env.development:BASE_URL``.
@@ -112,24 +150,24 @@ the `MFE production deployment guide`_

 .. _MFE production deployment guide: https://openedx.github.io/frontend-platform/#production-deployment-strategy

+Internationalization
+====================
+
+Please see refer to the `frontend-platform i18n howto`_ for documentation on
+internationalization.
+
+.. _frontend-platform i18n howto: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst
+
 Getting Help
 ************

-Documentation
-=============
-
-See `ORA Staff Grading on ReadTheDocs`_ for more in-depth usage information.
-
-.. _ORA Staff Grading on ReadTheDocs: https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/open_response_assessments/ORA_Staff_Grading.html#ora-staff-grading
-
-More Help
-=========
-
 If you're having trouble, we have discussion forums at
 https://discuss.openedx.org where you can connect with others in the community.

 Our real-time conversations are on Slack. You can request a `Slack
-invitation`_, then join our `community Slack workspace`_.
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.

 For anything non-trivial, the best path is to open an issue in this repository
 with as many details about the issue you are facing as you can provide.
@@ -140,27 +178,30 @@ For more information about these options, see the `Getting Help`_ page.

 .. _Slack invitation: https://openedx.org/slack
 .. _community Slack workspace: https://openedx.slack.com/
-.. _Getting Help: https://openedx.org/getting-help
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect

 License
 *******

-The code in this repository is licensed under the GNU Affero General Public
-License v3.0 unless otherwise noted.
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.

 Please see `LICENSE <LICENSE>`_ for details.

 Contributing
 ************

-This project is currently only accepting bug fixes, security fixes, and 
-maintenance work. New features should be discussed in advance with the owning
-team and added to the public roadmap or they may not be accepted. You can start
-a conversation by creating a new issue on this repo summarizing your feature
-idea.
+Contributions are very welcome.  Please read `How To Contribute`_ for details.

-Please read `How To Contribute <https://openedx.org/r/how-to-contribute>`_ for
-details.
+.. _How To Contribute: https://openedx.org/r/how-to-contribute
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features.  However, please make sure
+to have a discussion about your new feature idea with the maintainers prior to
+beginning development to maximize the chances of your change being accepted.
+You can start a conversation by creating a new issue on this repo summarizing
+your idea.

 The Open edX Code of Conduct
 ****************************
@@ -181,22 +222,18 @@ file in this repo.
 Reporting Security Issues
 *************************

-Please do not report security issues in public. Please email security@openedx.org.
-
-.. |ci-badge| image:: https://github.com/openedx/frontend-app-ora-grading/actions/workflows/ci.yml/badge.svg
-    :target: https://github.com/openedx/frontend-app-ora-grading/actions/workflows/ci.yml
-    :alt: CI
-
-.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-ora-grading/coverage.svg?branch=master
-    :target: https://codecov.io/github/openedx/frontend-app-ora-grading?branch=master
-    :alt: Codecov
-
-.. |doc-badge| image:: https://readthedocs.org/projects/frontend-app-ora-grading/badge/?version=latest
-    :target: https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/open_response_assessments/ORA_Staff_Grading.html
-    :alt: Documentation
+Please do not report security issues in public, and email security@openedx.org instead.

 .. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-ora-grading.svg
    :target: https://github.com/openedx/frontend-app-ora-grading/blob/master/LICENSE
    :alt: License

 .. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
+
+.. |ci-badge| image:: https://github.com/openedx/frontend-app-ora-grading/actions/workflows/ci.yml/badge.svg
+    :target: https://github.com/openedx/frontend-app-ora-grading/actions/workflows/ci.yml
+    :alt: Continuous Integration
+
+.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-ora-grading/coverage.svg?branch=master
+    :target: https://codecov.io/github/openedx/frontend-app-ora-grading?branch=master
+    :alt: Codecov
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -14,6 +14,6 @@ metadata:
      title: "Stage Site"
      icon: "Web"
 spec:
-  owner: group:content-aurora
+  owner: ~
  type: 'website'
  lifecycle: 'production'
--- a/documentation/.ci.yml.md
+++ b/documentation/.ci.yml.md
@@ -26,4 +26,3 @@ There are only two requirements for a good `make target` name
 What `make validate-no-uncommitted-package-lock-changes` does is `git diff`s for any `package-lock.json` file changes in your project.

 This is important because `npm` uses the pinned dependencies in your `package-lock.json` file to build the `node_modules` directory. However, the dependencies defined within the `package.json` file can be modified manually, for example, to become misaligned with the dependencies defined within the `package-lock.json`. So when `npm install` executes, the `package-lock.json` file will be updated to mirror the modified `package.json` changes.
-
--- a/jest.config.js
+++ b/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',
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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-edx.org@^2.0.3",
-    "@edx/frontend-component-footer": "^12.0.0",
-    "@edx/frontend-component-header": "^4.2.2",
-    "@edx/frontend-platform": "^4.1.0",
-    "@edx/paragon": "^20.30.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.31.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",
@@ -53,40 +52,40 @@
    "moment": "^2.29.3",
    "prop-types": "15.8.1",
    "query-string": "7.1.3",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "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.4",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-redux": "^7.2.9",
+    "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",
    "redux-devtools-extension": "2.13.9",
    "redux-logger": "3.0.6",
    "redux-thunk": "2.4.2",
-    "regenerator-runtime": "^0.13.9",
+    "regenerator-runtime": "^0.14.0",
    "reselect": "^4.0.0",
    "util": "^0.12.4",
    "whatwg-fetch": "^3.6.2"
  },
  "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",
-    "@testing-library/react": "^12.1.5",
+    "@openedx/frontend-build": "13.0.28",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "12.1.5",
    "axios-mock-adapter": "^1.20.0",
-    "enzyme-adapter-react-16": "^1.15.6",
    "fetch-mock": "^9.11.0",
    "husky": "^7.0.0",
    "identity-obj-proxy": "^3.0.0",
-    "jest": "29.6.1",
+    "jest": "29.7.0",
    "jest-expect-message": "^1.0.2",
    "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^17.0.2",
    "reactifex": "1.1.1",
    "redux-mock-store": "^1.5.4",
    "semantic-release": "^19.0.3"
--- a/src/App.jsx
+++ b/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>
 );
--- a/src/App.scss
+++ b/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";
--- a/src/App.test.jsx
+++ b/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);
--- a/src/snapshots/App.test.jsx.snap
+++ b/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>
 `;
--- a/src/snapshots/index.test.jsx.snap
+++ b/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>
--- a/src/components/ConfirmModal.jsx
+++ b/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 = ({
--- a/src/components/ConfirmModal.test.jsx
+++ b/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();
  });
 });
--- a/src/components/DemoAlert/index.jsx
+++ b/src/components/DemoAlert/index.jsx
@@ -6,7 +6,7 @@ import {
  ActionRow,
  AlertModal,
  Button,
-} from '@edx/paragon';
+} from '@openedx/paragon';

 import messages from './messages';

--- a/src/components/DemoAlert/index.test.jsx
+++ b/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();
  });
 });
--- a/src/components/FilePopoverContent/index.test.jsx
+++ b/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));
      });
    });
  });
--- a/src/components/FilePreview/Banners/ErrorBanner.jsx
+++ b/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({
--- a/src/components/FilePreview/Banners/ErrorBanner.test.jsx
+++ b/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);
    });
  });
 });
--- a/src/components/FilePreview/Banners/LoadingBanner.jsx
+++ b/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">
--- a/src/components/FilePreview/Banners/LoadingBanner.test.jsx
+++ b/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();
  });
 });
--- a/src/components/FilePreview/BaseRenderers/ImageRenderer.test.jsx
+++ b/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();
  });
 });
--- a/src/components/FilePreview/BaseRenderers/PDFRenderer.jsx
+++ b/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';
--- a/src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx
+++ b/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();
    });
  });
 });
--- a/src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx
+++ b/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();
  });
 });
--- a/src/components/FilePreview/FileCard.jsx
+++ b/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>
--- a/src/components/FilePreview/FileCard.scss
+++ b/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;
@@ -28,6 +28,6 @@

@include media-breakpoint-down(sm) {
  .file-card-title {
-    width: map-get($container-max-widths, "sm")/2;
+    width: calc(map-get($container-max-widths, "sm")/2);
  }
 }
--- a/src/components/FilePreview/FileCard.test.jsx
+++ b/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);
    });
  });
 });
--- a/src/components/FilePreview/FileInfo.jsx
+++ b/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';
--- a/src/components/FilePreview/FileInfo.test.jsx
+++ b/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>);
    });
--- a/src/components/FilePreview/FileRenderer.test.jsx
+++ b/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();
      });
    });
  });
--- a/src/components/FilePreview/snapshots/FileCard.test.jsx.snap
+++ b/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
--- a/src/components/Head/index.test.jsx
+++ b/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);
  });
 });
--- a/src/components/InfoPopover/snapshots/index.test.jsx.snap
+++ b/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]}
--- a/src/components/InfoPopover/index.jsx
+++ b/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}
--- a/src/components/InfoPopover/index.test.jsx
+++ b/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);
    });
  });
 });
--- a/src/components/LoadingMessage.jsx
+++ b/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';

 /**
--- a/src/components/StatusBadge.jsx
+++ b/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';
--- a/src/components/StatusBadge.test.jsx
+++ b/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();
      });
    });
  });
--- a/src/components/snapshots/StatusBadge.test.jsx.snap
+++ b/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
--- a/src/containers/CTA/CTA.test.jsx
+++ b/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();
  });
 });
--- a/src/containers/CTA/index.jsx
+++ b/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';

--- a/src/containers/CriterionContainer/CriterionFeedback.jsx
+++ b/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>
        )}
--- a/src/containers/CriterionContainer/CriterionFeedback.test.jsx
+++ b/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,
        );
      });
@@ -163,7 +154,7 @@ describe('Criterion Feedback', () => {
  });

  describe('mapStateToProps', () => {
-    const testState = { abitaryState: 'some data' };
+    const testState = { arbitraryState: 'some data' };
    const ownProps = { orderNum: props.orderNum };
    let mapped;
    beforeEach(() => {
--- a/src/containers/CriterionContainer/RadioCriterion.jsx
+++ b/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';
--- a/src/containers/CriterionContainer/RadioCriterion.test.jsx
+++ b/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';
@@ -40,14 +40,14 @@ describe('Radio Criterion Container', () => {
      feedback: 'feedback mock',
      options: [
        {
-          explanation: 'explaination',
+          explanation: 'explanation',
          feedback: 'option feedback',
          label: 'this label',
          name: 'option name',
          points: 1,
        },
        {
-          explanation: 'explaination 2',
+          explanation: 'explanation 2',
          feedback: 'option feedback 2',
          label: 'this label 2',
          name: 'option name 2',
@@ -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',
          },
@@ -129,7 +122,7 @@ describe('Radio Criterion Container', () => {
  });

  describe('mapStateToProps', () => {
-    const testState = { arbitary: 'some data' };
+    const testState = { arbitrary: 'some data' };
    const ownProps = { orderNum: props.orderNum };
    let mapped;
    beforeEach(() => {
--- a/src/containers/CriterionContainer/ReviewCriterion.jsx
+++ b/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>
--- a/src/containers/CriterionContainer/ReviewCriterion.test.jsx
+++ b/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';
@@ -29,14 +29,14 @@ describe('Review Crition Container', () => {
      feedback: 'feedback mock',
      options: [
        {
-          explanation: 'explaination',
+          explanation: 'explanation',
          feedback: 'option feedback',
          label: 'this label',
          name: 'option name',
          points: 1,
        },
        {
-          explanation: 'explaination 2',
+          explanation: 'explanation 2',
          feedback: 'option feedback 2',
          label: 'this label 2',
          name: 'option name 2',
@@ -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 },
        });
@@ -78,7 +78,7 @@ describe('Review Crition Container', () => {
  });

  describe('mapStateToProps', () => {
-    const testState = { arbitary: 'some data' };
+    const testState = { arbitrary: 'some data' };
    const ownProps = { orderNum: props.orderNum };
    let mapped;
    beforeEach(() => {
--- a/src/containers/CriterionContainer/snapshots/CriterionFeedback.test.jsx.snap
+++ b/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>
--- a/src/containers/CriterionContainer/snapshots/RadioCriterion.test.jsx.snap
+++ b/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
--- a/src/containers/CriterionContainer/snapshots/ReviewCriterion.test.jsx.snap
+++ b/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"
--- a/src/containers/CriterionContainer/snapshots/index.test.jsx.snap
+++ b/src/containers/CriterionContainer/snapshots/index.test.jsx.snap
@@ -13,28 +13,31 @@ 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>
          this label
        </strong>
        <br />
-        explaination
+        explanation
      </div>
      <div
        className="help-popover-option"
+        data-testid="help-popover-option"
        key="option name 2"
      >
        <strong>
          this label 2
        </strong>
        <br />
-        explaination 2
+        explanation 2
      </div>
    </InfoPopover>
  </Form.Label>
  <div
    className="rubric-criteria"
+    data-testid="rubric-criteria"
  >
    <RadioCriterion
      isGrading={false}
@@ -61,28 +64,31 @@ 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>
          this label
        </strong>
        <br />
-        explaination
+        explanation
      </div>
      <div
        className="help-popover-option"
+        data-testid="help-popover-option"
        key="option name 2"
      >
        <strong>
          this label 2
        </strong>
        <br />
-        explaination 2
+        explanation 2
      </div>
    </InfoPopover>
  </Form.Label>
  <div
    className="rubric-criteria"
+    data-testid="rubric-criteria"
  >
    <RadioCriterion
      isGrading={true}
@@ -109,28 +115,31 @@ 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>
          this label
        </strong>
        <br />
-        explaination
+        explanation
      </div>
      <div
        className="help-popover-option"
+        data-testid="help-popover-option"
        key="option name 2"
      >
        <strong>
          this label 2
        </strong>
        <br />
-        explaination 2
+        explanation 2
      </div>
    </InfoPopover>
  </Form.Label>
  <div
    className="rubric-criteria"
+    data-testid="rubric-criteria"
  >
    <ReviewCriterion
      orderNum={1}
--- a/src/containers/CriterionContainer/index.jsx
+++ b/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} />
        ) : (
--- a/src/containers/CriterionContainer/index.test.jsx
+++ b/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';
@@ -34,14 +34,14 @@ describe('Criterion Container', () => {
      feedback: 'feedback mock',
      options: [
        {
-          explanation: 'explaination',
+          explanation: 'explanation',
          feedback: 'option feedback',
          label: 'this label',
          name: 'option name',
          points: 2,
        },
        {
-          explanation: 'explaination 2',
+          explanation: 'explanation 2',
          feedback: 'option feedback 2',
          label: 'this label 2',
          name: 'option name 2',
@@ -58,61 +58,51 @@ 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 rubricCritera = el.find('.rubric-criteria');
-      expect(rubricCritera.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 rubricCritera = el.find('.rubric-criteria');
-      expect(rubricCritera.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 rubricCritera = el.find('.rubric-criteria');
-      expect(rubricCritera.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');
    });
  });

  describe('mapStateToProps', () => {
-    const testState = { abitaryState: 'some data' };
+    const testState = { arbitraryState: 'some data' };
    const ownProps = { orderNum: props.orderNum };
    let mapped;
    beforeEach(() => {
--- a/src/containers/CriterionContainer/messages.js
+++ b/src/containers/CriterionContainer/messages.js
@@ -14,7 +14,7 @@ const messages = defineMessages({
  optional: {
    id: 'ora-grading.CriterionFeedback.optional',
    defaultMessage: '(Optional)',
-    description: 'addtional label for optional feedback field',
+    description: 'additional label for optional feedback field',
  },
  optionPoints: {
    id: 'ora-grading.RadioCriterion.optionPoints',
--- a/src/containers/DemoWarning/DemoWarning.test.jsx
+++ b/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);
    });
  });
--- a/src/containers/DemoWarning/snapshots/DemoWarning.test.jsx.snap
+++ b/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
--- a/src/containers/DemoWarning/index.jsx
+++ b/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';
--- a/src/containers/ListView/EmptySubmission.jsx
+++ b/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';
--- a/src/containers/ListView/EmptySubmission.test.jsx
+++ b/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));
    });
  });
--- a/src/containers/ListView/FilterStatusComponent.jsx
+++ b/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';

--- a/src/containers/ListView/FilterStatusComponent.test.jsx
+++ b/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);
    });
  });
--- a/src/containers/ListView/ListError.jsx
+++ b/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';
--- a/src/containers/ListView/ListError.test.jsx
+++ b/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();
      });
    });
  });
--- a/src/containers/ListView/ListView.scss
+++ b/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;
--- a/src/containers/ListView/ListViewBreadcrumb.jsx
+++ b/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';
--- a/src/containers/ListView/ListViewBreadcrumb.test.jsx
+++ b/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()));
    });
  });
--- a/src/containers/ListView/SelectedBulkAction.jsx
+++ b/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';

--- a/src/containers/ListView/SelectedBulkAction.test.jsx
+++ b/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', () => {
--- a/src/containers/ListView/SubmissionsTable.jsx
+++ b/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';
@@ -63,8 +63,8 @@ export class SubmissionsTable extends React.Component {
  translate = (...args) => this.props.intl.formatMessage(...args);

  handleViewAllResponsesClick = (data) => () => {
-    const getsubmissionUUID = (row) => row.original.submissionUUID;
-    this.props.loadSelectionForReview(data.map(getsubmissionUUID));
+    const getSubmissionUUID = (row) => row.original.submissionUUID;
+    this.props.loadSelectionForReview(data.map(getSubmissionUUID));
  };

  render() {
@@ -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}
--- a/src/containers/ListView/SubmissionsTable.test.jsx
+++ b/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
        });
      });
    });
--- a/src/containers/ListView/TableAction.jsx
+++ b/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>
--- a/src/containers/ListView/TableAction.test.jsx
+++ b/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', () => {
--- a/src/containers/ListView/snapshots/FilterStatusComponent.test.jsx.snap
+++ b/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`;
--- a/src/containers/ListView/snapshots/SubmissionsTable.test.jsx.snap
+++ b/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]}
        />,
      ]
    }
--- a/src/containers/ListView/snapshots/TableAction.test.jsx.snap
+++ b/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"
 >
--- a/src/containers/ListView/snapshots/index.test.jsx.snap
+++ b/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>
 `;
--- a/src/containers/ListView/index.jsx
+++ b/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';
--- a/src/containers/ListView/index.test.jsx
+++ b/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', () => {
--- a/src/containers/NotificationsBanner/NotificationsBanner.test.jsx
+++ b/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();
+  });
+});
--- a/src/containers/NotificationsBanner/snapshots/NotificationsBanner.test.jsx.snap
+++ b/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>
+`;
--- a/src/containers/NotificationsBanner/index.jsx
+++ b/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;
--- a/src/containers/NotificationsBanner/messages.js
+++ b/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);
--- a/src/containers/ResponseDisplay/FileDownload.jsx
+++ b/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';
--- a/src/containers/ResponseDisplay/FileDownload.test.jsx
+++ b/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]);
      });
    });
  });
--- a/src/containers/ResponseDisplay/PreviewDisplay.test.jsx
+++ b/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]);
        });
      });
--- a/src/containers/ResponseDisplay/ResponseDisplay.scss
+++ b/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);
--- a/src/containers/ResponseDisplay/SubmissionFiles.jsx
+++ b/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>
                )
--- a/src/containers/ResponseDisplay/SubmissionFiles.test.jsx
+++ b/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);
        });
      });
    });
--- a/src/containers/ResponseDisplay/snapshots/FileDownload.test.jsx.snap
+++ b/src/containers/ResponseDisplay/snapshots/FileDownload.test.jsx.snap
@@ -43,7 +43,7 @@ exports[`FileDownload component snapshot download is completed 1`] = `
      />,
      "pending": <FormattedMessage
        defaultMessage="Downloading"
-        description="Download files penging state label"
+        description="Download files pending state label"
        id="ora-grading.ResponseDisplay.SubmissionFiles.downloading"
      />,
    }
@@ -96,7 +96,7 @@ exports[`FileDownload component snapshot download is failed 1`] = `
      />,
      "pending": <FormattedMessage
        defaultMessage="Downloading"
-        description="Download files penging state label"
+        description="Download files pending state label"
        id="ora-grading.ResponseDisplay.SubmissionFiles.downloading"
      />,
    }
@@ -149,7 +149,7 @@ exports[`FileDownload component snapshot download is inactive 1`] = `
      />,
      "pending": <FormattedMessage
        defaultMessage="Downloading"
-        description="Download files penging state label"
+        description="Download files pending state label"
        id="ora-grading.ResponseDisplay.SubmissionFiles.downloading"
      />,
    }
@@ -202,7 +202,7 @@ exports[`FileDownload component snapshot download is pending 1`] = `
      />,
      "pending": <FormattedMessage
        defaultMessage="Downloading"
-        description="Download files penging state label"
+        description="Download files pending state label"
        id="ora-grading.ResponseDisplay.SubmissionFiles.downloading"
      />,
    }
--- a/src/containers/ResponseDisplay/snapshots/SubmissionFiles.test.jsx.snap
+++ b/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>
 `;
--- a/src/containers/ResponseDisplay/snapshots/index.test.jsx.snap
+++ b/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>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Adolfo R. Brandes	36d676b064	feat: use frontend-plugin-framework to provide a FooterSlot (#332 ) Co-authored-by: Brian Smith <bsmith@axim.org>	2024-06-06 15:06:24 -03:00
Awais Ansari	1d924b4812	Merge pull request #329 from openedx/aansari/INF-1375 feat: added info banner for ORA notifications	2024-04-30 21:09:29 +05:00
Awais Ansari	31ed9410a4	test: added test cases for NotificationsBanner	2024-04-30 20:07:23 +05:00
Awais Ansari	0ba3cac532	feat: added info banner for ORA notifications	2024-04-30 19:59:26 +05:00
alipov_d	9cfab58663	fix: request error for empty user list responses	2024-04-03 15:25:01 -03:00
Samir Sabri	59a7d0751b	feat!: remove Transifex calls for OEP-58	2024-03-18 15:01:30 -04:00
Jeremy Ristau	9d673e803e	Merge pull request #320 from openedx/ownership-update chore: update catalog-info owner	2024-03-15 12:54:11 -04:00
Jeremy Ristau	8438915f72	fix: use correct yaml	2024-03-15 09:25:01 -04:00
Jeremy Ristau	cc6dd20f12	chore: update catalog-info owner Continuing maintainership updates for 2U 2024.	2024-03-11 21:34:25 -04:00
Mashal Malik	f67ffdd480	refactor: replace @edx/paragon and @edx/frontend-build (#294 ) * refactor: replace @edx/paragon and @edx/frontend-build * refactor: updated edx packages * fix: fixed failing test cases by remmoving paragon mock * fix: updated lock file to fix build issues --------- Co-authored-by: mashal-m <mashal.malik@arbisoft.com> Co-authored-by: Bilal Qamar <59555732+BilalQamar95@users.noreply.github.com> Co-authored-by: Muhammad Abdullah Waheed <abdullah.waheed@arbisoft.com>	2024-02-28 13:04:23 -03:00
renovate[bot]	836df49829	fix(deps): update dependency axios to ^0.28.0 [security]	2024-02-21 22:18:09 -05:00
Syed Ali Abbas Zaidi	5bed90b659	feat: migrate enzyme to edx/react-unit-test-utils (#295 ) * feat: migrate enzyme to edx/react-unit-test-utils * refactor: remove shallowWrapper usage * refactor: remove unnecessary _instance usage	2024-02-10 00:35:02 +05:00
Feanil Patel	3b39c79fbf	Merge pull request #262 from openedx/abdullahwaheed/react-intl-to-formatjs feat: babel-plugin-react-intl to babel-plugin-formatjs migration	2024-02-08 14:58:54 -05:00
Abdullah Waheed	df7a189bcd	fix: upgraded frontend-build to fix security issue	2024-02-08 14:43:21 -05:00
Abdullah Waheed	08c51b6492	fix: reverted install package functionality	2024-02-08 14:43:21 -05:00
Abdullah Waheed	3bb3d90f3a	feat: babel-plugin-react-intl to babel-plugin-formatjs migration	2024-02-08 14:43:19 -05:00
Feanil Patel	2f48cc5767	Merge pull request #247 from openedx/mashal-m/update_lockfile refactor: updated lock file version check to use new workflow	2024-02-08 14:19:55 -05:00
mashal-m	ea43ebb031	refactor: update lock file version	2024-02-08 14:10:50 -05:00
Omar Al-Ithawi	4a708da50c	feat: tutor-mfe compatiblilty for `atlas pull` (#312 ) - install atlas - remove `--filter` to pull all languages by default - use ATLAS_OPTIONS to allow custom `--filter` - include frontend-platform in `atlas pull` Refs: FC-0012 OEP-58	2024-02-05 16:58:28 -05:00
Jenkins	f135f9a111	chore(i18n): update translations	2024-02-04 10:46:33 -05:00
Jhon Vente	44d6dc616c	fix: test problems jest dom and paragon (#311 )	2024-02-02 12:13:12 -05:00
renovate[bot]	a9771fbf49	chore(deps): update dependency @testing-library/jest-dom to v6	2024-01-26 07:48:36 -05:00
renovate[bot]	8f58b72919	fix(deps): update react-router monorepo to v6.21.3	2024-01-26 05:59:50 -05:00
renovate[bot]	8da2a60b37	fix(deps): update dependency moment to v2.30.1	2024-01-26 03:17:56 -05:00
renovate[bot]	ff3e56c3f7	fix(deps): update dependency classnames to v2.5.1	2024-01-25 22:31:21 -05:00
renovate[bot]	204586e79b	fix(deps): update dependency @edx/frontend-component-header to v4.11.1	2024-01-25 20:25:00 -05:00
renovate[bot]	31be6daac3	fix(deps): update dependency @edx/frontend-component-footer to v12.7.1	2024-01-25 17:43:59 -05:00
renovate[bot]	9f1c950080	chore(deps): update dependency node to 18.19	2024-01-25 14:50:00 -05:00
renovate[bot]	66b793a1d4	fix(deps): update dependency whatwg-fetch to v3.6.20	2024-01-25 10:24:19 -05:00
renovate[bot]	72db51b65c	fix(deps): update dependency regenerator-runtime to v0.14.1	2024-01-25 06:08:35 -05:00
renovate[bot]	9121b3f1e7	fix(deps): update dependency @zip.js/zip.js to v2.7.32	2024-01-25 04:41:05 -05:00
renovate[bot]	f7e51fd1d0	fix(deps): update dependency @testing-library/user-event to v14.5.2	2024-01-25 01:58:02 -05:00
renovate[bot]	77b4f9b47e	fix(deps): update dependency core-js to v3.35.1	2024-01-25 01:25:50 -05:00
Jenkins	3ef24a626b	chore(i18n): update translations	2023-12-17 10:46:17 -05:00
renovate[bot]	d810913038	fix(deps): update dependency @edx/brand to v1.2.3	2023-10-29 15:44:21 -04:00
renovate[bot]	a6436997bb	fix(deps): update dependency core-js to v3.33.1	2023-10-23 15:16:43 -04:00
renovate[bot]	7959a39267	fix(deps): update react-router monorepo to v6.17.0	2023-10-23 13:51:41 -04:00
Feanil Patel	3a1dbfdee5	chore: Update to the new version of brand-openedx in the new scope. (#277 ) Part of https://github.com/openedx/axim-engineering/issues/23 This updates the `@edx/brand` alias to point to the `brand-openedx` package at the `openedx` scope. This does not impact imports because this package is used via an alias.	2023-10-20 17:26:09 -04:00
renovate[bot]	9b326f1ee8	fix(deps): update dependency core-js to v3.33.0	2023-10-19 03:14:33 -04:00
renovate[bot]	3a87ebda1a	fix(deps): update dependency @testing-library/user-event to v14.5.1	2023-10-19 00:43:26 -04:00
renovate[bot]	25389ff296	fix(deps): update dependency @edx/frontend-component-header to v4.8.0	2023-10-18 20:59:19 -04:00
renovate[bot]	80f782b87f	fix(deps): update dependency @edx/frontend-component-footer to v12.5.0	2023-10-18 18:57:41 -04:00
renovate[bot]	8a2d767263	chore(deps): update dependency node to 18.18	2023-10-18 15:38:22 -04:00
renovate[bot]	264bed987e	chore(deps): update dependency jest to v29.7.0	2023-10-18 11:37:15 -04:00
renovate[bot]	738d460505	chore(deps): update dependency axios-mock-adapter to v1.22.0	2023-10-18 11:34:18 -04:00
Syed Ali Abbas Zaidi	b8f43b92a1	feat: upgrade react router to v6 (#174 ) Co-authored-by: Matthew Carter <mcarter@edx.org>	2023-10-18 11:33:42 -04:00
renovate[bot]	7afffa4509	fix(deps): update dependency whatwg-fetch to v3.6.19	2023-10-18 08:44:56 -04:00
renovate[bot]	b9ad13e354	fix(deps): update dependency @zip.js/zip.js to v2.7.30	2023-10-18 05:50:38 -04:00
renovate[bot]	8ceb9e308f	fix(deps): update dependency @reduxjs/toolkit to v1.9.7	2023-10-18 03:25:31 -04:00
renovate[bot]	b58cab1249	fix(deps): update dependency @edx/paragon to v20.46.3	2023-10-17 20:47:07 -04:00
renovate[bot]	f6d8c324d9	fix(deps): update dependency @edx/frontend-platform to v4.6.3	2023-10-17 17:42:46 -04:00
renovate[bot]	0c8d2017db	chore(deps): update dependency @edx/frontend-build to v12.9.17	2023-10-17 15:28:45 -04:00
Leangseu Kim	c644da3dcc	fix: decodeURIComponent for locationId Squashed commit of the following: commit af4d469ef241a504112dceda2cb94bff24ba4a9c Author: Vu Nguyen <vu.nguyen@dmttek.com> Date: Wed Oct 4 11:27:58 2023 +0700 update test cases commit d0c28fb99bede979fbcc8f57036ecb8027996772 Merge: 1f4d50b `5492520` Author: vunguyen-dmt <34919039+vunguyen-dmt@users.noreply.github.com> Date: Wed Oct 4 11:22:24 2023 +0700 Merge branch 'openedx:master' into fix_location_id_error commit 1f4d50b36514a6e4e9e575b938bf93b81317a21c Merge: a280a35 eb73457 Author: Vu Nguyen <vu.nguyen@dmttek.com> Date: Fri Jul 21 03:45:05 2023 +0700 Merge branch 'fix_location_id_error' of https://github.com/vunguyen-dmt/frontend-app-ora-grading into fix_location_id_error commit a280a350fcf595dd2011018d113467a9cd88cd61 Author: Vu Nguyen <vu.nguyen@dmttek.com> Date: Fri Jul 21 03:44:28 2023 +0700 fix: decodeURIComponent for locationId commit eb734574bd0daae0c2523904763a8d755baa31f3 Author: Vu Nguyen <vu.nguyen@dmttek.com> Date: Fri Jul 21 03:41:28 2023 +0700 update src/data/constants/app.test.js commit 513dd324a5adc7312ac92c30164e0120784acd4b Merge: e899846 `78ada8c` Author: vunguyen-dmt <34919039+vunguyen-dmt@users.noreply.github.com> Date: Wed Jul 19 16:12:14 2023 +0700 Merge branch 'master' into fix_location_id_error commit e8998461de8ba9cbbe00a1726ad6266bde5d5ef5 Author: Vu Nguyen <vu.nguyen@dmttek.com> Date: Thu Jun 8 10:29:45 2023 +0700 fix: decodeURIComponent for locationId	2023-10-10 11:30:26 -04:00
Illia Shestakov	cc11ce0f81	fix(deps): replace edx.org brand dependency with openedx brand (#199 )	2023-10-10 10:48:33 -04:00
Jenkins	549252038f	chore(i18n): update translations	2023-10-01 11:51:20 -04:00
Jenkins	192c8b4601	chore(i18n): update translations	2023-09-24 11:51:22 -04:00
Jhon Vente	70e13eccfa	[DOCS] Readme updated according OEP-55 (#194 ) * docs: README updated * docs: update some badges and content * fix: getting help url --------- Co-authored-by: Edward Zarecor <ezarecor@tcril.org> Co-authored-by: Matthew Carter <mcarter@edx.org>	2023-09-12 13:01:10 -04:00
Emad Rad	e25a5a9549	Persian language (#246 ) * fix: corrected typos explaination -> explanation Critera -> Criteria addtional -> additional arbitary -> arbitrary penging -> pending downladFiles -> downloadFiles isLoadeed -> isLoaded selectror -> selector commnents -> comments stirng -> string isGragrding -> isGrading queu -> queue seleted -> selected feecback -> feedback * feat: Persian language (fa_IR) added * chore: Persian translations added * chore: sort language codes alphabetically * chore: camelCase variable used for translated messages * chore: deprecated styling updated --------- Co-authored-by: Leangseu Kim <lkim@edx.org>	2023-09-11 09:15:52 -04:00
renovate[bot]	358263de3c	fix(deps): update dependency regenerator-runtime to ^0.14.0	2023-09-05 11:35:20 -04:00
renovate[bot]	dc7fc94ab5	fix(deps): update dependency core-js to v3.32.1	2023-09-05 10:29:35 -04:00
renovate[bot]	b643afd1b8	fix(deps): update dependency @edx/frontend-component-header to v4.6.0	2023-09-05 05:30:04 -04:00
renovate[bot]	5ac1868d30	fix(deps): update dependency @edx/frontend-component-footer to v12.2.1	2023-09-05 03:35:52 -04:00
renovate[bot]	65063df731	chore(deps): update dependency node to 18.17	2023-09-05 00:55:32 -04:00
renovate[bot]	9aee97dccb	fix(deps): update dependency whatwg-fetch to v3.6.18	2023-09-04 20:24:14 -04:00
renovate[bot]	be1ce502c8	fix(deps): update dependency @zip.js/zip.js to v2.7.28	2023-09-04 18:32:59 -04:00
renovate[bot]	19e2f35522	fix(deps): update dependency @edx/frontend-platform to v4.6.1	2023-09-04 14:25:59 -04:00
renovate[bot]	d24ab3358b	chore(deps): update dependency jest to v29.6.4	2023-09-04 12:18:38 -04:00
renovate[bot]	56803fb874	chore(deps): update dependency @edx/frontend-build to v12.9.10	2023-09-04 09:43:58 -04:00
Bilal Qamar	b7b94531aa	feat: update react & react-dom to v17 (#190 ) * feat: update react & react-dom to v17 * build: update pkgs * fix: fix lint issue * build: update paragon * refactor: updated edx packages * build: update -react-redux * refactor: updated package-lock * refactor: updated package-lock * refactor: updated package-lock --------- Co-authored-by: mashal-m <mashal.malik@arbisoft.com> Co-authored-by: Mashal Malik <107556986+Mashal-m@users.noreply.github.com>	2023-08-28 10:36:11 -04:00
@@ -1 +1 @@
 .16
 .19