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

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

.env

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

.env.development

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

.env.test

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

.eslintrc.js

@@ -1,4 +1,5 @@
-const { createConfig } = require('@edx/frontend-build');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('eslint', {
   rules: {
@@ -11,6 +12,7 @@ const config = createConfig('eslint', {
     "react/forbid-prop-types": ["error", { "forbid": ["any", "array"] }], // arguable object proptype is use when I do not care about the shape of the object
     'no-import-assign': 'off',
     'no-promise-executor-return': 'off',
+    'import/no-cycle': 'off',
   },
 });
 

.github/workflows/ci.yml

@@ -11,17 +11,16 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node: [16]
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
-
+      uses: actions/checkout@v3
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
+# Because of node 18 bug (https://github.com/nodejs/node/issues/47563), Pinning node version 18.15 until the next release of node
       with:
-        node-version: ${{ matrix.node }}
+        node-version: 18.15
 
     - name: Install dependencies
       run: npm ci

.github/workflows/lockfileversion-check.yml

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

.gitignore

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

.nvmrc

@@ -0,0 +1 @@
+18.19

.tx/config

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

Makefile

@@ -2,15 +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"
-
+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
 
@@ -42,20 +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
-
-# Pulls translations from Transifex.
 pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	  && 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 frontend-platform paragon frontend-app-ora-grading
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.md

@@ -1,21 +0,0 @@
-# frontend-app-ora-grading
-
-The ORA Staff Grading App is a microfrontend (MFE) staff grading experience for Open Response Assessments (ORAs). This experience was designed to streamline the grading process and enable richer previews of submission content. 
-
-When enabled, ORAs with a staff grading step will link to this new MFE when clicking "Grade Available Responses" from the ORA or link in the instructor dashboard.
-
-## Quickstart
-
-To start the MFE and enable the feature in LMS:
-
-1. Start the MFE with `npm run start`. Take a note of the path/port (defaults to `http://localhost:1993`).
-
-2. Add the route root to `edx-platform` settings: In `edx-platform/lms/envs/private.py` or similar, add `ORA_GRADING_MICROFRONTEND_URL = 'http://localhost:1993'`
-
-3. Enable the feature: In Django Admin go to django-waffle > Flags and add/enable a new flag called `openresponseassessment.enhanced_staff_grader`.
-
-From there, visit the new experience by going to the Instructor Dashboard > Open Responses or an ORA with a Staff Graded Step and click a link to begin grading.
-
-## Resources
-
-See the [ORA Staff Grading](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/open_response_assessments/ORA_Staff_Grading.html#ora-staff-grading) section on ReadTheDocs for usage information.

README.rst

@@ -0,0 +1,239 @@
+frontend-app-ora-grading
+#############################
+
+|license-badge| |status-badge| |ci-badge| |codecov-badge|
+
+
+Purpose
+*******
+
+The ORA Staff Grading App is a micro-frontend (MFE) staff grading experience
+for Open Response Assessments (ORAs). This experience was designed to
+streamline the grading process and enable richer previews of submission content
+and, eventually, replace on-platform grading workflows for ORA.
+
+When enabled, ORAs with a staff grading step will link to this new MFE when
+clicking "Grade Available Responses" from the ORA or link in the instructor
+dashboard.
+
+The ORA Staff Grader depends on the `lms/djangoapps/ora_staff_grader
+<https://github.com/openedx/edx-platform/tree/master/lms/djangoapps/ora_staff_grader>`_
+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
+==========
+
+Cloning and Startup
+--------------
+
+First, clone the repo, install code prerequisites, and start the app.
+
+.. code-block::
+
+
+  1. Clone your new repo:
+
+  ``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``.
+
+Next, enable the ORA Grading micro-frontend in `edx-platform`
+
+#. Add the path to the ORA Grading app in `edx-platform`:
+
+   #. Go to your environment settings (e.g. `edx-platform/lms/envs/private.py`)
+
+   #. Add the environment variable, ``ORA_GRADING_MICROFRONTEND_URL`` pointing
+      to the ORA Grading app location (e.g. ``http://localhost:1993``).
+
+#. Start / restart the ``edx-platform`` ``lms``.
+
+#. Enable the ORA Grading feature in Django Admin.
+
+   #. Go to Django Admin (`{lms-root}/admin`)
+
+   #. Navigate to ``django-waffle`` > ``Flags`` and click ``add/enable a new
+      flag``.
+
+   #. Add a new flag called ``openresponseassessment.enhanced_staff_grader``
+      and enable it.
+
+From there, visit an Open Response Assessment with a Staff Graded Step and
+click the "View and grade responses" button to begin grading in the ORA Staff
+Grader experience.
+
+
+Making Changes
+--------------
+
+Get / install the latest code:
+
+.. code-block::
+
+  # Grab the latest code
+  git checkout master
+  git pull
+
+  # Install/update the dev requirements
+  npm install
+
+
+Before committing:
+
+.. code-block::
+
+  # Make a new branch for your changes
+  git checkout -b <your_github_username>/<short_description>
+
+  # Using your favorite editor, edit the code to make your change.
+
+  # Run your new tests
+  npm test
+
+  # Commit all your changes
+  git commit ...
+  git push
+
+  # Open a PR and ask for review.
+
+Deploying
+=========
+
+This component follows the standard deploy process for MFEs. For details, see
+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
+************
+
+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`_.  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.
+
+https://github.com/openedx/frontend-app-ora-grading/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#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 AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+Contributing
+************
+
+Contributions are very welcome.  Please read `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
+****************************
+
+All community members are expected to follow the `Open edX Code of Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+People
+******
+
+The assigned maintainers for this component and other project details may be
+found in `Backstage`_. Backstage pulls this data from the ``catalog-info.yaml``
+file in this repo.
+
+.. _Backstage: https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-app-ora-grading
+
+Reporting Security Issues
+*************************
+
+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

catalog-info.yaml

@@ -0,0 +1,19 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: 'frontend-app-ora-grading'
+  description: "Frontend grading experience for Open Response Assessments (ORAs)"
+  links:
+    - url: "https://ora-grading.edx.org"
+      title: "Production Site"
+      icon: "Web"
+    - url: "https://ora-grading.stage.edx.org"
+      title: "Stage Site"
+      icon: "Web"
+spec:
+  owner: ~
+  type: 'website'
+  lifecycle: 'production'

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.
-

jest.config.js

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

package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "semantic-release": "semantic-release",
@@ -24,68 +24,68 @@
     "access": "public"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
-    "@edx/frontend-component-footer": "^11.1.1",
-    "@edx/frontend-component-header": "^3.1.1",
-    "@edx/frontend-platform": "^2.5.1",
-    "@edx/paragon": "^19.9.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.1.15",
+    "@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": "^13.5.0",
+    "@testing-library/user-event": "^14.0.0",
     "@zip.js/zip.js": "^2.4.6",
-    "axios": "^0.21.4",
+    "axios": "^0.28.0",
     "classnames": "^2.3.1",
-    "core-js": "3.16.2",
+    "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",
-    "history": "5.0.1",
+    "history": "5.3.0",
     "html-react-parser": "^1.3.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.3",
-    "prop-types": "15.7.2",
-    "query-string": "7.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "prop-types": "15.8.1",
+    "query-string": "7.1.3",
+    "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.2.0",
-    "react-router-dom": "5.2.0",
+    "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.1.1",
+    "redux": "4.2.1",
     "redux-beacon": "^2.1.0",
     "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
-    "redux-thunk": "2.3.0",
-    "regenerator-runtime": "^0.13.9",
+    "redux-thunk": "2.4.2",
+    "regenerator-runtime": "^0.14.0",
     "reselect": "^4.0.0",
     "util": "^0.12.4",
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/frontend-build": "12.4",
+    "@edx/browserslist-config": "^1.2.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.0",
+    "@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": "27.0.6",
+    "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"

renovate.json

@@ -0,0 +1,34 @@
+{
+  "extends": [
+    "config:base",
+    "schedule:weekly",
+    ":automergeLinters",
+    ":automergeMinor",
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
+  ],
+  "packageRules": [
+    {
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
+    }
+  ],
+  "timezone": "America/New_York",
+  "schedule": ["before 11pm"]
+}

src/App.jsx

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

src/App.scss

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

src/App.test.jsx

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

src/__snapshots__/App.test.jsx.snap

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

src/__snapshots__/index.test.jsx.snap

@@ -7,29 +7,18 @@ exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPag
 `;
 
 exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<IntlProvider
-  defaultFormats={Object {}}
-  defaultLocale="en"
-  fallbackOnEmptyString={true}
-  formats={Object {}}
-  locale="en"
-  messages={Object {}}
-  onError={[Function]}
-  onWarn={[Function]}
-  textComponent={Symbol(react.fragment)}
->
-  <AppProvider
-    store={
-      Object {
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-        Symbol(Symbol.observable): [Function],
-      }
+<AppProvider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
     }
-  >
-    <App />
-  </AppProvider>
-</IntlProvider>
+  }
+  wrapWithRouter={false}
+>
+  <App />
+</AppProvider>
 `;

src/components/ConfirmModal.jsx

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

src/components/ConfirmModal.test.jsx

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

src/components/DemoAlert/index.jsx

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

src/components/DemoAlert/index.test.jsx

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

src/components/FilePopoverContent/index.test.jsx

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

src/components/FilePreview/Banners/ErrorBanner.jsx

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

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

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

src/components/FilePreview/Banners/LoadingBanner.jsx

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

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

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

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

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

src/components/FilePreview/BaseRenderers/PDFRenderer.jsx

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

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

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

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

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

src/components/FilePreview/BaseRenderers/textHooks.test.js

@@ -81,13 +81,12 @@ describe('Text file preview hooks', () => {
         });
       });
       describe('onError', () => {
-        it('calls get on the passed url when it changes', async (done) => {
+        it('calls get on the passed url when it changes', async () => {
           axios.get.mockReturnValueOnce(Promise.reject(
             { response: { status: testValue } },
           ));
           await hooks.fetchFile({ ...props, setContent: state.setState.content });
           expect(props.onError).toHaveBeenCalledWith(testValue);
-          done();
         });
       });
     });

src/components/FilePreview/FileCard.jsx

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

src/components/FilePreview/FileCard.scss

@@ -1,4 +1,4 @@
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 
 .file-card {
   margin: map-get($spacers, 1) 0;
@@ -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);
   }
 }

src/components/FilePreview/FileCard.test.jsx

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

src/components/FilePreview/FileInfo.jsx

@@ -5,8 +5,8 @@ import {
   Button,
   OverlayTrigger,
   Popover,
-} from '@edx/paragon';
-import { InfoOutline } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { nullMethod } from 'hooks';
 import messages from './messages';
@@ -26,7 +26,7 @@ export const FileInfo = ({ onClick, children }) => (
     )}
   >
     <Button
-      size="small"
+      size="sm"
       variant="tertiary"
       onClick={onClick}
       iconAfter={InfoOutline}

src/components/FilePreview/FileInfo.test.jsx

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

src/components/FilePreview/FileRenderer.test.jsx

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

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

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

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

@@ -21,7 +21,7 @@ exports[`File Preview Card component snapshot 1`] = `
   <Button
     iconAfter={[MockFunction icons.InfoOutline]}
     onClick={[MockFunction this.props.onClick]}
-    size="small"
+    size="sm"
     variant="tertiary"
   >
     <FormattedMessage

src/components/Head/index.test.jsx

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

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

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

src/components/InfoPopover/index.jsx

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

src/components/InfoPopover/index.test.jsx

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

src/components/LoadingMessage.jsx

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

src/components/StatusBadge.jsx

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

src/components/StatusBadge.test.jsx

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

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

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

src/config/index.js

@@ -1,16 +0,0 @@
-const configuration = {
-  // BASE_URL: process.env.BASE_URL,
-  LMS_BASE_URL: process.env.LMS_BASE_URL,
-  // LOGIN_URL: process.env.LOGIN_URL,
-  // LOGOUT_URL: process.env.LOGOUT_URL,
-  // CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
-  // REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
-  // DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
-  // SECURE_COOKIES: process.env.NODE_ENV !== 'development',
-  // SEGMENT_KEY: process.env.SEGMENT_KEY,
-  // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
-};
-
-const features = {};
-
-export { configuration, features };

src/containers/CTA/CTA.test.jsx

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

src/containers/CTA/index.jsx

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

src/containers/CriterionContainer/CriterionFeedback.jsx

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

src/containers/CriterionContainer/CriterionFeedback.test.jsx

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

src/containers/CriterionContainer/RadioCriterion.jsx

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

src/containers/CriterionContainer/RadioCriterion.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { actions, selectors } from 'data/redux';
 import { formatMessage } from 'testUtils';
@@ -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(() => {

src/containers/CriterionContainer/ReviewCriterion.jsx

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

src/containers/CriterionContainer/ReviewCriterion.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { selectors } from 'data/redux';
 import { ReviewCriterion, mapStateToProps } from './ReviewCriterion';
@@ -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(() => {

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

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

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

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

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

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

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

@@ -13,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}

src/containers/CriterionContainer/index.jsx

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

src/containers/CriterionContainer/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { selectors } from 'data/redux';
 import { gradeStatuses } from 'data/services/lms/constants';
@@ -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(() => {

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',

src/containers/DemoWarning/DemoWarning.test.jsx

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

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

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

src/containers/DemoWarning/index.jsx

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

src/containers/ListView/EmptySubmission.jsx

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

src/containers/ListView/EmptySubmission.test.jsx

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

src/containers/ListView/FilterStatusComponent.jsx

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

src/containers/ListView/FilterStatusComponent.test.jsx

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

src/containers/ListView/ListError.jsx

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

src/containers/ListView/ListError.test.jsx

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

src/containers/ListView/ListView.scss

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

src/containers/ListView/ListViewBreadcrumb.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import { ArrowBack, Launch } from '@edx/paragon/icons';
-import { Hyperlink, Icon } from '@edx/paragon';
+import { ArrowBack, Launch } from '@openedx/paragon/icons';
+import { Hyperlink, Icon } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { selectors } from 'data/redux';
@@ -22,7 +22,7 @@ export const ListViewBreadcrumb = ({ courseId, oraName }) => (
     </Hyperlink>
     <p className="py-4">
       <span className="h3">{oraName}</span>
-      <Hyperlink className="align-middle" destination={urls.ora(courseId, locationId)}>
+      <Hyperlink className="align-middle" destination={urls.ora(courseId, locationId())}>
         <Icon src={Launch} className="d-inline-block" />
       </Hyperlink>
     </p>

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,17 +40,17 @@ 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,
-      ).toEqual(urls.ora(props.courseId, constants.locationId));
+        el.instance.findByType(Hyperlink)[1].props.destination,
+      ).toEqual(urls.ora(props.courseId, constants.locationId()));
     });
   });
   describe('mapStateToProps', () => {

src/containers/ListView/SelectedBulkAction.jsx

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

src/containers/ListView/SelectedBulkAction.test.jsx

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

src/containers/ListView/SubmissionsTable.jsx

@@ -7,7 +7,7 @@ import {
   DataTable,
   TextFilter,
   MultiSelectDropdownFilter,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import { gradingStatuses, submissionFields } from 'data/services/lms/constants';
@@ -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}

src/containers/ListView/SubmissionsTable.test.jsx

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

src/containers/ListView/TableAction.jsx

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

src/containers/ListView/TableAction.test.jsx

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

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

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

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

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

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

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

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

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

src/containers/ListView/index.jsx

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

src/containers/ListView/index.test.jsx

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

src/containers/NotificationsBanner/NotificationsBanner.test.jsx

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

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

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

src/containers/NotificationsBanner/index.jsx

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

src/containers/NotificationsBanner/messages.js

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

src/containers/ResponseDisplay/FileDownload.jsx

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

src/containers/ResponseDisplay/FileDownload.test.jsx

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

src/containers/ResponseDisplay/PreviewDisplay.test.jsx

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