Compare commits
1 Commits
release/te
...
Ali-Abbas/
| Author | SHA1 | Date | |
|---|---|---|---|
|
141518f890 |
1
.env
1
.env
@@ -32,4 +32,3 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
|
||||
ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
|
||||
APP_ID=''
|
||||
MFE_CONFIG_API_URL=''
|
||||
ACCOUNT_SETTINGS_URL=''
|
||||
|
||||
@@ -7,6 +7,7 @@ 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'
|
||||
@@ -37,4 +38,3 @@ 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
|
||||
|
||||
@@ -7,6 +7,7 @@ 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'
|
||||
@@ -35,4 +36,3 @@ 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
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
const { createConfig } = require('@openedx/frontend-build');
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
|
||||
const config = createConfig('eslint', {
|
||||
rules: {
|
||||
|
||||
12
.github/workflows/ci.yml
vendored
12
.github/workflows/ci.yml
vendored
@@ -10,18 +10,17 @@ on:
|
||||
|
||||
jobs:
|
||||
tests:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
runs-on: ubuntu-20.04
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
- name: Setup Nodejs Env
|
||||
run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
|
||||
- name: Setup Nodejs
|
||||
uses: actions/setup-node@v4
|
||||
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-file: '.nvmrc'
|
||||
node-version: 18.15
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
@@ -39,10 +38,7 @@ jobs:
|
||||
run: npm run build
|
||||
|
||||
- name: Run Coverage
|
||||
uses: codecov/codecov-action@v4
|
||||
with:
|
||||
token: ${{ secrets.CODECOV_TOKEN }}
|
||||
fail_ci_if_error: true
|
||||
uses: codecov/codecov-action@v3
|
||||
|
||||
- name: Send failure notification
|
||||
if: ${{ failure() }}
|
||||
|
||||
32
.github/workflows/npm-publish.yml
vendored
Normal file
32
.github/workflows/npm-publish.yml
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
name: Release CI
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- "*"
|
||||
|
||||
jobs:
|
||||
release:
|
||||
name: Release
|
||||
runs-on: ubuntu-20.04
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: 12
|
||||
|
||||
- name: Install dependencies
|
||||
run: npm ci
|
||||
|
||||
- name: Create Build
|
||||
run: npm run build
|
||||
|
||||
- name: Release Package
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
|
||||
NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
|
||||
run: npm semantic-release
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -25,5 +25,3 @@ module.config.js
|
||||
### transifex ###
|
||||
src/i18n/transifex_input.json
|
||||
temp
|
||||
|
||||
src/i18n/messages
|
||||
4
.husky/pre-push
Executable file
4
.husky/pre-push
Executable file
@@ -0,0 +1,4 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npm run lint
|
||||
27
.releaserc
Normal file
27
.releaserc
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"branch": "master",
|
||||
"tagFormat": "v${version}",
|
||||
"verifyConditions": [
|
||||
"@semantic-release/npm",
|
||||
{
|
||||
"path": "@semantic-release/github",
|
||||
"assets": {
|
||||
"path": "dist/*"
|
||||
}
|
||||
}
|
||||
],
|
||||
"analyzeCommits": "@semantic-release/commit-analyzer",
|
||||
"generateNotes": "@semantic-release/release-notes-generator",
|
||||
"prepare": "@semantic-release/npm",
|
||||
"publish": [
|
||||
"@semantic-release/npm",
|
||||
{
|
||||
"path": "@semantic-release/github",
|
||||
"assets": {
|
||||
"path": "dist/*"
|
||||
}
|
||||
}
|
||||
],
|
||||
"success": [],
|
||||
"fail": []
|
||||
}
|
||||
9
.tx/config
Normal file
9
.tx/config
Normal file
@@ -0,0 +1,9 @@
|
||||
[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
|
||||
|
||||
28
Makefile
28
Makefile
@@ -2,13 +2,16 @@ npm-install-%: ## install specified % npm package
|
||||
npm install $* --save-dev
|
||||
git add package.json
|
||||
|
||||
transifex_resource = frontend-app-ora-grading
|
||||
transifex_langs = "ar,fr,es_419,zh_CN,fr_CA,it_IT,pt_PT,de_DE,uk,ru,hi"
|
||||
|
||||
intl_imports = ./node_modules/.bin/intl-imports.js
|
||||
transifex_utils = ./node_modules/.bin/transifex-utils.js
|
||||
i18n = ./src/i18n
|
||||
transifex_input = $(i18n)/transifex_input.json
|
||||
|
||||
# This directory must match .babelrc .
|
||||
transifex_temp = ./temp/babel-plugin-formatjs
|
||||
transifex_temp = ./temp/babel-plugin-react-intl
|
||||
|
||||
NPM_TESTS=build i18n_extract lint test
|
||||
|
||||
@@ -40,18 +43,35 @@ detect_changed_source_translations:
|
||||
# Checking for changed translations...
|
||||
git diff --exit-code $(i18n)
|
||||
|
||||
# Pushes translations to Transifex. You must run make extract_translations first.
|
||||
push_translations:
|
||||
# Pushing strings to Transifex...
|
||||
tx push -s
|
||||
# Fetching hashes from Transifex...
|
||||
./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
|
||||
# Writing out comments to file...
|
||||
$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
|
||||
# Pushing comments to Transifex...
|
||||
./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
|
||||
|
||||
ifeq ($(OPENEDX_ATLAS_PULL),)
|
||||
# Pulls translations from Transifex.
|
||||
pull_translations:
|
||||
tx pull -t -f --mode reviewed --languages=$(transifex_langs)
|
||||
else
|
||||
# Experimental: OEP-58 Pulls translations using atlas
|
||||
pull_translations:
|
||||
rm -rf src/i18n/messages
|
||||
mkdir src/i18n/messages
|
||||
cd src/i18n/messages \
|
||||
&& atlas pull $(ATLAS_OPTIONS) \
|
||||
&& atlas pull --filter=$(transifex_langs) \
|
||||
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
|
||||
$(intl_imports) frontend-component-footer frontend-component-header paragon frontend-app-ora-grading
|
||||
endif
|
||||
|
||||
# This target is used by CI.
|
||||
validate-no-uncommitted-package-lock-changes:
|
||||
|
||||
125
README.rst
125
README.rst
@@ -1,8 +1,7 @@
|
||||
frontend-app-ora-grading
|
||||
#############################
|
||||
|
||||
|license-badge| |status-badge| |ci-badge| |codecov-badge|
|
||||
########################
|
||||
|
||||
|ci-badge| |codecov-badge| |doc-badge| |license-badge| |status-badge|
|
||||
|
||||
Purpose
|
||||
*******
|
||||
@@ -23,62 +22,25 @@ 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
|
||||
One Time Setup
|
||||
--------------
|
||||
|
||||
First, clone the repo, install code prerequisites, and start the app.
|
||||
|
||||
.. code-block::
|
||||
|
||||
# Clone the repository
|
||||
git clone git@github.com:openedx/frontend-app-ora-grading.git
|
||||
cd frontend-app-ora-grading
|
||||
|
||||
1. Clone your new repo:
|
||||
# Install prerequisites
|
||||
npm install
|
||||
|
||||
``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``
|
||||
# Start the MFE
|
||||
npm run start
|
||||
|
||||
The app will, by default, run on `http://localhost:1993` unless otherwise
|
||||
specified in ``.env.development:PORT`` and ``.env.development:BASE_URL``.
|
||||
@@ -150,24 +112,24 @@ the `MFE production deployment guide`_
|
||||
|
||||
.. _MFE production deployment guide: https://openedx.github.io/frontend-platform/#production-deployment-strategy
|
||||
|
||||
Internationalization
|
||||
====================
|
||||
|
||||
Please see refer to the `frontend-platform i18n howto`_ for documentation on
|
||||
internationalization.
|
||||
|
||||
.. _frontend-platform i18n howto: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst
|
||||
|
||||
Getting Help
|
||||
************
|
||||
|
||||
Documentation
|
||||
=============
|
||||
|
||||
See `ORA Staff Grading on ReadTheDocs`_ for more in-depth usage information.
|
||||
|
||||
.. _ORA Staff Grading on ReadTheDocs: https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/open_response_assessments/ORA_Staff_Grading.html#ora-staff-grading
|
||||
|
||||
More Help
|
||||
=========
|
||||
|
||||
If you're having trouble, we have discussion forums at
|
||||
https://discuss.openedx.org where you can connect with others in the community.
|
||||
|
||||
Our real-time conversations are on Slack. You can request a `Slack
|
||||
invitation`_, then join our `community Slack workspace`_. Because this is a
|
||||
frontend repository, the best place to discuss it would be in the `#wg-frontend
|
||||
channel`_.
|
||||
invitation`_, then join our `community Slack workspace`_.
|
||||
|
||||
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.
|
||||
@@ -178,30 +140,27 @@ 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
|
||||
.. _Getting Help: https://openedx.org/getting-help
|
||||
|
||||
License
|
||||
*******
|
||||
|
||||
The code in this repository is licensed under the AGPLv3 unless otherwise
|
||||
noted.
|
||||
The code in this repository is licensed under the GNU Affero General Public
|
||||
License v3.0 unless otherwise noted.
|
||||
|
||||
Please see `LICENSE <LICENSE>`_ for details.
|
||||
|
||||
Contributing
|
||||
************
|
||||
|
||||
Contributions are very welcome. Please read `How To Contribute`_ for details.
|
||||
This project is currently only accepting bug fixes, security fixes, and
|
||||
maintenance work. New features should be discussed in advance with the owning
|
||||
team and added to the public roadmap or they may not be accepted. You can start
|
||||
a conversation by creating a new issue on this repo summarizing your feature
|
||||
idea.
|
||||
|
||||
.. _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.
|
||||
Please read `How To Contribute <https://openedx.org/r/how-to-contribute>`_ for
|
||||
details.
|
||||
|
||||
The Open edX Code of Conduct
|
||||
****************************
|
||||
@@ -222,18 +181,22 @@ file in this repo.
|
||||
Reporting Security Issues
|
||||
*************************
|
||||
|
||||
Please do not report security issues in public, and email security@openedx.org instead.
|
||||
Please do not report security issues in public. Please email security@openedx.org.
|
||||
|
||||
.. |ci-badge| image:: https://github.com/openedx/frontend-app-ora-grading/actions/workflows/ci.yml/badge.svg
|
||||
:target: https://github.com/openedx/frontend-app-ora-grading/actions/workflows/ci.yml
|
||||
:alt: CI
|
||||
|
||||
.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-ora-grading/coverage.svg?branch=master
|
||||
:target: https://codecov.io/github/openedx/frontend-app-ora-grading?branch=master
|
||||
:alt: Codecov
|
||||
|
||||
.. |doc-badge| image:: https://readthedocs.org/projects/frontend-app-ora-grading/badge/?version=latest
|
||||
:target: https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/open_response_assessments/ORA_Staff_Grading.html
|
||||
:alt: Documentation
|
||||
|
||||
.. |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
|
||||
|
||||
@@ -13,9 +13,7 @@ metadata:
|
||||
- url: "https://ora-grading.stage.edx.org"
|
||||
title: "Stage Site"
|
||||
icon: "Web"
|
||||
annotations:
|
||||
openedx.org/release: "master"
|
||||
spec:
|
||||
owner: "user:codewithemad"
|
||||
owner: group:content-aurora
|
||||
type: 'website'
|
||||
lifecycle: 'production'
|
||||
|
||||
@@ -26,3 +26,4 @@ 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.
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const { createConfig } = require('@openedx/frontend-build');
|
||||
const { createConfig } = require('@edx/frontend-build');
|
||||
|
||||
module.exports = createConfig('jest', {
|
||||
setupFilesAfterEnv: [
|
||||
@@ -6,6 +6,9 @@ module.exports = createConfig('jest', {
|
||||
'<rootDir>/src/setupTest.js',
|
||||
],
|
||||
modulePaths: ['<rootDir>/src/'],
|
||||
snapshotSerializers: [
|
||||
'enzyme-to-json/serializer',
|
||||
],
|
||||
coveragePathIgnorePatterns: [
|
||||
'src/segment.js',
|
||||
'src/postcss.config.js',
|
||||
|
||||
9
openedx.yaml
Normal file
9
openedx.yaml
Normal file
@@ -0,0 +1,9 @@
|
||||
# This file describes this Open edX repo, as described in OEP-2:
|
||||
# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
|
||||
|
||||
tags:
|
||||
- frontend-app
|
||||
- masters
|
||||
oeps:
|
||||
oep-2: true # Repository metadata
|
||||
openedx-release: {ref: master}
|
||||
30178
package-lock.json
generated
30178
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
63
package.json
63
package.json
@@ -6,19 +6,16 @@
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/edx/frontend-app-ora-grading.git"
|
||||
},
|
||||
"browserslist": [
|
||||
"extends @edx/browserslist-config"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "fedx-scripts webpack",
|
||||
"i18n_extract": "fedx-scripts formatjs extract",
|
||||
"i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
|
||||
"lint": "fedx-scripts eslint --ext .jsx,.js src/",
|
||||
"lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
|
||||
"semantic-release": "semantic-release",
|
||||
"start": "fedx-scripts webpack-dev-server --progress",
|
||||
"dev": "PUBLIC_PATH=/ora-grading/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
|
||||
"test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
|
||||
"watch-tests": "jest --watch"
|
||||
"watch-tests": "jest --watch",
|
||||
"prepare": "husky install"
|
||||
},
|
||||
"author": "edX",
|
||||
"license": "AGPL-3.0",
|
||||
@@ -27,26 +24,26 @@
|
||||
"access": "public"
|
||||
},
|
||||
"dependencies": {
|
||||
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
|
||||
"@edx/frontend-component-footer": "^14.6.0",
|
||||
"@edx/frontend-component-header": "^6.2.0",
|
||||
"@edx/frontend-platform": "^8.3.1",
|
||||
"@edx/openedx-atlas": "^0.6.0",
|
||||
"@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
|
||||
"@edx/frontend-component-footer": "^12.0.0",
|
||||
"@edx/frontend-component-header": "^4.2.2",
|
||||
"@edx/frontend-platform": "^4.6.1",
|
||||
"@edx/paragon": "^20.30.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.4",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@openedx/paragon": "^22.16.0",
|
||||
"@redux-beacon/segment": "^1.1.0",
|
||||
"@redux-devtools/extension": "3.0.0",
|
||||
"@reduxjs/toolkit": "^1.6.1",
|
||||
"@testing-library/user-event": "^14.0.0",
|
||||
"@zip.js/zip.js": "^2.4.6",
|
||||
"axios": "^0.28.0",
|
||||
"axios": "^0.27.0",
|
||||
"classnames": "^2.3.1",
|
||||
"core-js": "3.35.1",
|
||||
"core-js": "3.31.1",
|
||||
"dompurify": "^2.3.1",
|
||||
"email-prop-type": "^3.0.1",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-to-json": "^3.6.2",
|
||||
"file-saver": "^2.0.5",
|
||||
"filesize": "^8.0.6",
|
||||
"font-awesome": "4.7.0",
|
||||
@@ -56,40 +53,42 @@
|
||||
"moment": "^2.29.3",
|
||||
"prop-types": "15.8.1",
|
||||
"query-string": "7.1.3",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-intl": "6.4.7",
|
||||
"react-pdf": "^7.0.0",
|
||||
"react-redux": "^7.2.9",
|
||||
"react-router": "6.21.3",
|
||||
"react-router-dom": "6.21.3",
|
||||
"react-intl": "^5.20.9",
|
||||
"react-pdf": "^5.5.0",
|
||||
"react-redux": "^7.2.4",
|
||||
"react-router": "5.3.4",
|
||||
"react-router-dom": "5.3.4",
|
||||
"react-router-redux": "^5.0.0-alpha.9",
|
||||
"redux": "4.2.1",
|
||||
"redux-beacon": "^2.1.0",
|
||||
"redux-devtools-extension": "2.13.9",
|
||||
"redux-logger": "3.0.6",
|
||||
"redux-thunk": "2.4.2",
|
||||
"regenerator-runtime": "^0.14.0",
|
||||
"regenerator-runtime": "^0.13.9",
|
||||
"reselect": "^4.0.0",
|
||||
"util": "^0.12.4",
|
||||
"whatwg-fetch": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@edx/browserslist-config": "^1.3.0",
|
||||
"@edx/react-unit-test-utils": "^4.0.0",
|
||||
"@edx/browserslist-config": "^1.2.0",
|
||||
"@edx/frontend-build": "^12.9.0-alpha.1",
|
||||
"@edx/reactifex": "^2.1.1",
|
||||
"@openedx/frontend-build": "^14.3.3",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.2.0",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^12.1.5",
|
||||
"axios-mock-adapter": "^1.20.0",
|
||||
"enzyme-adapter-react-16": "^1.15.6",
|
||||
"fetch-mock": "^9.11.0",
|
||||
"husky": "^7.0.0",
|
||||
"identity-obj-proxy": "^3.0.0",
|
||||
"jest": "29.7.0",
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"jest": "29.6.1",
|
||||
"jest-expect-message": "^1.0.2",
|
||||
"react-dev-utils": "^12.0.1",
|
||||
"react-test-renderer": "^18.3.1",
|
||||
"react-test-renderer": "^16.14.0",
|
||||
"reactifex": "1.1.1",
|
||||
"redux-mock-store": "^1.5.5"
|
||||
"redux-mock-store": "^1.5.4",
|
||||
"semantic-release": "^19.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
11
src/App.jsx
11
src/App.jsx
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
|
||||
import { FooterSlot } from '@edx/frontend-component-footer';
|
||||
import Footer from '@edx/frontend-component-footer';
|
||||
import { LearningHeader as Header } from '@edx/frontend-component-header';
|
||||
|
||||
import { selectors } from 'data/redux';
|
||||
|
||||
import DemoWarning from 'containers/DemoWarning';
|
||||
import NotificationsBanner from 'containers/NotificationsBanner';
|
||||
import CTA from 'containers/CTA';
|
||||
import ListView from 'containers/ListView';
|
||||
|
||||
import './App.scss';
|
||||
@@ -23,14 +23,13 @@ export const App = ({ courseMetadata, isEnabled }) => (
|
||||
courseTitle={courseMetadata.title}
|
||||
courseNumber={courseMetadata.number}
|
||||
courseOrg={courseMetadata.org}
|
||||
data-testid="header"
|
||||
/>
|
||||
{!isEnabled && <DemoWarning />}
|
||||
<NotificationsBanner />
|
||||
<main data-testid="main">
|
||||
<CTA />
|
||||
<main>
|
||||
<ListView />
|
||||
</main>
|
||||
<FooterSlot />
|
||||
<Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// frontend-app-*/src/index.scss
|
||||
@import "~@edx/brand/paragon/fonts";
|
||||
@import "~@edx/brand/paragon/variables";
|
||||
@import "~@openedx/paragon/scss/core/core";
|
||||
@import "~@edx/paragon/scss/core/core";
|
||||
@import "~@edx/brand/paragon/overrides";
|
||||
|
||||
$fa-font-path: "~font-awesome/fonts";
|
||||
@@ -10,7 +10,6 @@ $fa-font-path: "~font-awesome/fonts";
|
||||
$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
|
||||
|
||||
@import "~@edx/frontend-component-footer/dist/_footer";
|
||||
@import "~@edx/frontend-component-header/dist/index";
|
||||
|
||||
#root {
|
||||
display: flex;
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
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 { App } from './App';
|
||||
|
||||
@@ -15,13 +20,16 @@ jest.mock('data/redux', () => ({
|
||||
jest.mock('@edx/frontend-component-header', () => ({
|
||||
LearningHeader: 'Header',
|
||||
}));
|
||||
jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'FooterSlot' }));
|
||||
jest.mock('@edx/frontend-component-footer', () => '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 = {
|
||||
@@ -33,28 +41,34 @@ describe('App router component', () => {
|
||||
isEnabled: true,
|
||||
};
|
||||
test('snapshot: enabled', () => {
|
||||
expect(shallow(<App {...props} />).snapshot).toMatchSnapshot();
|
||||
expect(shallow(<App {...props} />)).toMatchSnapshot();
|
||||
});
|
||||
test('snapshot: disabled (show demo warning)', () => {
|
||||
expect(shallow(<App {...props} isEnabled={false} />).snapshot).toMatchSnapshot();
|
||||
expect(shallow(<App {...props} isEnabled={false} />)).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(el.instance.findByTestId('main')[0].children).toHaveLength(1);
|
||||
expect(el.instance.findByTestId('main')[0].children[0].type).toBe('ListView');
|
||||
expect(router.find('main')).toEqual(shallow(
|
||||
<main><ListView /></main>,
|
||||
));
|
||||
});
|
||||
});
|
||||
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,
|
||||
} = el.instance.findByTestId('header')[0].props;
|
||||
} = router.find(Header).props();
|
||||
expect(courseTitle).toEqual(props.courseMetadata.title);
|
||||
expect(courseNumber).toEqual(props.courseMetadata.number);
|
||||
expect(courseOrg).toEqual(props.courseMetadata.org);
|
||||
|
||||
@@ -8,16 +8,15 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
|
||||
courseNumber="course-number"
|
||||
courseOrg="course-org"
|
||||
courseTitle="course-title"
|
||||
data-testid="header"
|
||||
/>
|
||||
<DemoWarning />
|
||||
<NotificationsBanner />
|
||||
<main
|
||||
data-testid="main"
|
||||
>
|
||||
<CTA />
|
||||
<main>
|
||||
<ListView />
|
||||
</main>
|
||||
<FooterSlot />
|
||||
<Footer
|
||||
logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
|
||||
/>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
`;
|
||||
@@ -30,15 +29,14 @@ exports[`App router component snapshot: enabled 1`] = `
|
||||
courseNumber="course-number"
|
||||
courseOrg="course-org"
|
||||
courseTitle="course-title"
|
||||
data-testid="header"
|
||||
/>
|
||||
<NotificationsBanner />
|
||||
<main
|
||||
data-testid="main"
|
||||
>
|
||||
<CTA />
|
||||
<main>
|
||||
<ListView />
|
||||
</main>
|
||||
<FooterSlot />
|
||||
<Footer
|
||||
logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
|
||||
/>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
`;
|
||||
|
||||
@@ -1,28 +1,23 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`app registry subscribe: APP_INIT_ERROR. snapshot: displays an ErrorPage to root element 1`] = `
|
||||
<React Strict Mode>
|
||||
<ErrorPage
|
||||
message="test-error-message"
|
||||
/>
|
||||
</React Strict Mode>
|
||||
<ErrorPage
|
||||
message="test-error-message"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`app registry subscribe: APP_READY. links App to root element 1`] = `
|
||||
<React Strict Mode>
|
||||
<AppProvider
|
||||
store={
|
||||
{
|
||||
"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],
|
||||
}
|
||||
wrapWithRouter={false}
|
||||
>
|
||||
<App />
|
||||
</AppProvider>
|
||||
</React Strict Mode>
|
||||
}
|
||||
>
|
||||
<App />
|
||||
</AppProvider>
|
||||
`;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { AlertModal, ActionRow, Button } from '@openedx/paragon';
|
||||
import { AlertModal, ActionRow, Button } from '@edx/paragon';
|
||||
import { nullMethod } from 'hooks';
|
||||
|
||||
export const ConfirmModal = ({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { ConfirmModal } from './ConfirmModal';
|
||||
|
||||
@@ -13,9 +13,9 @@ describe('ConfirmModal', () => {
|
||||
onConfirm: jest.fn().mockName('this.props.onConfirm'),
|
||||
};
|
||||
test('snapshot: closed', () => {
|
||||
expect(shallow(<ConfirmModal {...props} />).snapshot).toMatchSnapshot();
|
||||
expect(shallow(<ConfirmModal {...props} />)).toMatchSnapshot();
|
||||
});
|
||||
test('snapshot: open', () => {
|
||||
expect(shallow(<ConfirmModal {...props} isOpen />).snapshot).toMatchSnapshot();
|
||||
expect(shallow(<ConfirmModal {...props} isOpen />)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
ActionRow,
|
||||
AlertModal,
|
||||
Button,
|
||||
} from '@openedx/paragon';
|
||||
} from '@edx/paragon';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
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} />).snapshot).toMatchSnapshot();
|
||||
expect(shallow(<DemoAlert {...props} />)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import filesize from 'filesize';
|
||||
import FilePopoverContent from '.';
|
||||
@@ -19,19 +19,20 @@ describe('FilePopoverContent', () => {
|
||||
el = shallow(<FilePopoverContent {...props} />);
|
||||
});
|
||||
describe('snapshot', () => {
|
||||
test('default', () => expect(el.snapshot).toMatchSnapshot());
|
||||
test('default', () => expect(el).toMatchSnapshot());
|
||||
test('invalid size', () => {
|
||||
el = shallow(<FilePopoverContent {...props} size={null} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
el.setProps({
|
||||
size: null,
|
||||
});
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('behavior', () => {
|
||||
test('content', () => {
|
||||
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));
|
||||
expect(el.text()).toContain(props.name);
|
||||
expect(el.text()).toContain(props.description);
|
||||
expect(el.text()).toContain(filesize(props.size));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Alert, Button } from '@openedx/paragon';
|
||||
import { Info } from '@openedx/paragon/icons';
|
||||
import { Alert, Button } from '@edx/paragon';
|
||||
import { Info } from '@edx/paragon/icons';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
const messageShape = PropTypes.shape({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import ErrorBanner from './ErrorBanner';
|
||||
|
||||
@@ -31,20 +31,16 @@ describe('Error Banner component', () => {
|
||||
});
|
||||
|
||||
test('snapshot', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('component', () => {
|
||||
test('children node', () => {
|
||||
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);
|
||||
expect(el.containsMatchingElement(children)).toEqual(true);
|
||||
});
|
||||
|
||||
test('verify actions', () => {
|
||||
const { actions } = el.instance.findByType('Alert')[0].props;
|
||||
const actions = el.find('Alert').prop('actions');
|
||||
expect(actions).toHaveLength(props.actions.length);
|
||||
|
||||
actions.forEach((action, index) => {
|
||||
@@ -56,8 +52,8 @@ describe('Error Banner component', () => {
|
||||
});
|
||||
|
||||
test('verify heading', () => {
|
||||
const heading = el.instance.findByType('FormattedMessage')[0];
|
||||
expect(heading.props).toEqual(props.headingMessage);
|
||||
const heading = el.find('FormattedMessage');
|
||||
expect(heading.props()).toEqual(props.headingMessage);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Alert, Spinner } from '@openedx/paragon';
|
||||
import { Alert, Spinner } from '@edx/paragon';
|
||||
|
||||
export const LoadingBanner = () => (
|
||||
<Alert variant="info">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import LoadingBanner from './LoadingBanner';
|
||||
|
||||
describe('Loading Banner component', () => {
|
||||
test('snapshot', () => {
|
||||
const el = shallow(<LoadingBanner />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
exports[`Error Banner component snapshot 1`] = `
|
||||
<Alert
|
||||
actions={
|
||||
[
|
||||
Array [
|
||||
<Button
|
||||
onClick={[MockFunction action1.onClick]}
|
||||
variant="outline-primary"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import ImageRenderer from './ImageRenderer';
|
||||
|
||||
@@ -16,6 +16,6 @@ describe('Image Renderer Component', () => {
|
||||
el = shallow(<ImageRenderer {...props} />);
|
||||
});
|
||||
test('snapshot', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Document, Page, pdfjs } from 'react-pdf';
|
||||
|
||||
import { pdfjs, Document, Page } from 'react-pdf';
|
||||
import {
|
||||
Icon, Form, ActionRow, IconButton,
|
||||
} from '@openedx/paragon';
|
||||
import { ChevronLeft, ChevronRight } from '@openedx/paragon/icons';
|
||||
} from '@edx/paragon';
|
||||
import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
|
||||
import pdfjsWorker from 'react-pdf/dist/esm/pdf.worker.entry';
|
||||
|
||||
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
|
||||
import { rendererHooks } from './pdfHooks';
|
||||
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
|
||||
|
||||
/**
|
||||
* <PDFRenderer />
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
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} />).snapshot).toMatchSnapshot();
|
||||
expect(shallow(<PDFRenderer {...props} />)).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} />).snapshot).toMatchSnapshot();
|
||||
expect(shallow(<PDFRenderer {...props} />)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
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} />).snapshot).toMatchSnapshot();
|
||||
expect(shallow(<TXTRenderer {...props} />)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -12,7 +12,7 @@ exports[`PDF Renderer Component snapshots first page, prev is disabled 1`] = `
|
||||
<div
|
||||
className="page-wrapper"
|
||||
style={
|
||||
{
|
||||
Object {
|
||||
"height": 200,
|
||||
}
|
||||
}
|
||||
@@ -80,7 +80,7 @@ exports[`PDF Renderer Component snapshots on last page, next is disabled 1`] = `
|
||||
<div
|
||||
className="page-wrapper"
|
||||
style={
|
||||
{
|
||||
Object {
|
||||
"height": 200,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
import { useState, useRef } from 'react';
|
||||
|
||||
import { pdfjs } from 'react-pdf';
|
||||
import pdfjsWorker from 'react-pdf/dist/esm/pdf.worker.entry';
|
||||
|
||||
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
|
||||
|
||||
import { ErrorStatuses } from 'data/constants/requests';
|
||||
import { StrictDict } from 'utils';
|
||||
import * as module from './pdfHooks';
|
||||
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
|
||||
|
||||
export const errors = StrictDict({
|
||||
missingPDF: 'MissingPDFException',
|
||||
});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Card, Collapsible } from '@openedx/paragon';
|
||||
import { Card, Collapsible } from '@edx/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" data-testid="preview-panel">
|
||||
<div className="preview-panel">
|
||||
<FileInfo><FilePopoverContent {...file} /></FileInfo>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "@openedx/paragon/scss/core/core";
|
||||
@import "@edx/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: calc(map-get($container-max-widths, "sm")/2);
|
||||
width: map-get($container-max-widths, "sm")/2;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { Collapsible } from '@openedx/paragon';
|
||||
import { Collapsible } from '@edx/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.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
describe('Component', () => {
|
||||
test('collapsible title is name header', () => {
|
||||
const { title } = el.instance.findByType(Collapsible)[0].props;
|
||||
const title = el.find(Collapsible).prop('title');
|
||||
expect(title).toEqual(<h3 className="file-card-title">{props.file.name}</h3>);
|
||||
});
|
||||
test('forwards children into preview-panel', () => {
|
||||
const previewPanelChildren = el.instance.findByTestId('preview-panel')[0].children;
|
||||
expect(previewPanelChildren[0].matches(
|
||||
const previewPanelChildren = el.find('.preview-panel').children();
|
||||
expect(previewPanelChildren.at(0).equals(
|
||||
<FileInfo><FilePopoverContent file={props.file} /></FileInfo>,
|
||||
));
|
||||
expect(previewPanelChildren[1].matches(shallow(children))).toEqual(true);
|
||||
expect(previewPanelChildren.at(1).equals(children)).toEqual(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -5,8 +5,8 @@ import {
|
||||
Button,
|
||||
OverlayTrigger,
|
||||
Popover,
|
||||
} from '@openedx/paragon';
|
||||
import { InfoOutline } from '@openedx/paragon/icons';
|
||||
} from '@edx/paragon';
|
||||
import { InfoOutline } from '@edx/paragon/icons';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { nullMethod } from 'hooks';
|
||||
import messages from './messages';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { Popover } from '@openedx/paragon';
|
||||
import { Popover } from '@edx/paragon';
|
||||
|
||||
import FileInfo from './FileInfo';
|
||||
|
||||
@@ -13,11 +13,11 @@ describe('File Preview Card component', () => {
|
||||
el = shallow(<FileInfo {...props}>{children}</FileInfo>);
|
||||
});
|
||||
test('snapshot', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
describe('Component', () => {
|
||||
test('overlay with passed children', () => {
|
||||
const { overlay } = el.instance.props;
|
||||
const { overlay } = el.at(0).props();
|
||||
expect(overlay.type).toEqual(Popover);
|
||||
expect(overlay.props.children).toEqual(<Popover.Content>{children}</Popover.Content>);
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
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} />).snapshot).toMatchSnapshot();
|
||||
expect(shallow(<FileRenderer {...props} />)).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} />).snapshot).toMatchSnapshot();
|
||||
expect(shallow(<FileRenderer {...props} />)).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -18,7 +18,6 @@ exports[`File Preview Card component snapshot 1`] = `
|
||||
>
|
||||
<div
|
||||
className="preview-panel"
|
||||
data-testid="preview-panel"
|
||||
>
|
||||
<FileInfo>
|
||||
<FilePopoverContent
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
exports[`FileRenderer component snapshot is not loading, with error 1`] = `
|
||||
<FileCard
|
||||
file={
|
||||
{
|
||||
Object {
|
||||
"downloadUrl": "file download url",
|
||||
"name": "filename.txt",
|
||||
}
|
||||
@@ -19,7 +19,7 @@ exports[`FileRenderer component snapshot is not loading, with error 1`] = `
|
||||
exports[`FileRenderer component snapshot isLoading, no Error 1`] = `
|
||||
<FileCard
|
||||
file={
|
||||
{
|
||||
Object {
|
||||
"downloadUrl": "file download url",
|
||||
"name": "filename.txt",
|
||||
}
|
||||
|
||||
@@ -79,7 +79,7 @@ export const renderHooks = ({
|
||||
message: messages.retryButton,
|
||||
};
|
||||
const error = {
|
||||
headingMessage: errorMessage,
|
||||
headerMessage: errorMessage,
|
||||
children: intl.formatMessage(errorMessage),
|
||||
actions: [errorAction],
|
||||
};
|
||||
|
||||
@@ -55,7 +55,7 @@ describe('FilePreview hooks', () => {
|
||||
});
|
||||
describe('error', () => {
|
||||
it('loads message from current error status, if valid, else from serverError', () => {
|
||||
expect(hook.error.headingMessage).toEqual(
|
||||
expect(hook.error.headerMessage).toEqual(
|
||||
hooks.ERROR_STATUSES[ErrorStatuses.serverError],
|
||||
);
|
||||
expect(hook.error.children).toEqual(
|
||||
@@ -63,7 +63,7 @@ describe('FilePreview hooks', () => {
|
||||
);
|
||||
state.mockVal(state.keys.errorStatus, ErrorStatuses.notFound);
|
||||
hook = hooks.renderHooks({ intl: { formatMessage }, file });
|
||||
expect(hook.error.headingMessage).toEqual(
|
||||
expect(hook.error.headerMessage).toEqual(
|
||||
hooks.ERROR_STATUSES[ErrorStatuses.notFound],
|
||||
);
|
||||
expect(hook.error.children).toEqual(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
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.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
|
||||
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);
|
||||
expect(el.find('title').text()).toContain(getConfig().SITE_NAME);
|
||||
expect(el.find('link').prop('href')).toEqual(getConfig().FAVICON_URL);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -21,7 +21,6 @@ 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]}
|
||||
|
||||
@@ -6,8 +6,8 @@ import {
|
||||
Popover,
|
||||
Icon,
|
||||
IconButton,
|
||||
} from '@openedx/paragon';
|
||||
import { InfoOutline } from '@openedx/paragon/icons';
|
||||
} from '@edx/paragon';
|
||||
import { InfoOutline } from '@edx/paragon/icons';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { nullMethod } from 'hooks';
|
||||
@@ -30,7 +30,6 @@ 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}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
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.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
describe('Component', () => {
|
||||
test('Test component render', () => {
|
||||
expect(el.instance.children.length).toEqual(1);
|
||||
expect(el.instance.findByTestId('esg-help-icon').length).toEqual(1);
|
||||
expect(el.length).toEqual(1);
|
||||
expect(el.find('.esg-help-icon').length).toEqual(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Spinner } from '@openedx/paragon';
|
||||
import { Spinner } from '@edx/paragon';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { Badge } from '@openedx/paragon';
|
||||
import { Badge } from '@edx/paragon';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { StrictDict } from 'utils';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
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.snapshot).toMatchSnapshot();
|
||||
expect(el).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.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
test('`locked` shows light button variant and message', () => {
|
||||
const el = render(gradingStatuses.locked);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
test('`graded` shows success button variant and message', () => {
|
||||
const el = render(gradingStatuses.graded);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
test('`inProgress` shows warning button variant and message', () => {
|
||||
const el = render(gradingStatuses.inProgress);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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`] = `null`;
|
||||
exports[`StatusBadge component behavior does not render if status does not have configured variant 1`] = `""`;
|
||||
|
||||
exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`graded\` shows success button variant and message 1`] = `
|
||||
<Badge
|
||||
|
||||
11
src/containers/CTA/CTA.test.jsx
Normal file
11
src/containers/CTA/CTA.test.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { CTA } from '.';
|
||||
|
||||
describe('CTA component', () => {
|
||||
test('snapshots', () => {
|
||||
const el = shallow(<CTA hide />);
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
31
src/containers/CTA/__snapshots__/CTA.test.jsx.snap
Normal file
31
src/containers/CTA/__snapshots__/CTA.test.jsx.snap
Normal file
@@ -0,0 +1,31 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CTA component snapshots 1`] = `
|
||||
<PageBanner>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
defaultMessage="Thanks for using the new ORA staff grading experience. "
|
||||
description="Thank user for using ora and ask for feed back"
|
||||
id="ora-grading.CTA.feedbackMessage"
|
||||
/>
|
||||
<Hyperlink
|
||||
destination="https://docs.google.com/forms/d/1Hu1rgJcCHl5_EtDb5Up3hiZ40sSUtkZQfRHJ3fWOvfQ/edit"
|
||||
isInline={true}
|
||||
showLaunchIcon={false}
|
||||
target="_blank"
|
||||
variant="muted"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Provide some feedback"
|
||||
description="placeholder for the feedback anchor link"
|
||||
id="ora-grading.CTA.linkMessage"
|
||||
/>
|
||||
</Hyperlink>
|
||||
<FormattedMessage
|
||||
defaultMessage=" and let us know what you think!"
|
||||
description="inform user to provide feedback"
|
||||
id="ora-grading.CTA.letUsKnowMessage"
|
||||
/>
|
||||
</span>
|
||||
</PageBanner>
|
||||
`;
|
||||
29
src/containers/CTA/index.jsx
Normal file
29
src/containers/CTA/index.jsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { PageBanner, Hyperlink } from '@edx/paragon';
|
||||
|
||||
import messages from './messages';
|
||||
|
||||
/**
|
||||
* <CTA />
|
||||
*/
|
||||
export const CTA = () => (
|
||||
<PageBanner>
|
||||
<span>
|
||||
<FormattedMessage {...messages.ctaFeedbackMessage} />
|
||||
<Hyperlink
|
||||
isInline
|
||||
variant="muted"
|
||||
destination="https://docs.google.com/forms/d/1Hu1rgJcCHl5_EtDb5Up3hiZ40sSUtkZQfRHJ3fWOvfQ/edit"
|
||||
target="_blank"
|
||||
showLaunchIcon={false}
|
||||
>
|
||||
<FormattedMessage {...messages.ctaLinkMessage} />
|
||||
</Hyperlink>
|
||||
<FormattedMessage {...messages.ctaLetUsKnowMessage} />
|
||||
</span>
|
||||
</PageBanner>
|
||||
);
|
||||
|
||||
export default CTA;
|
||||
23
src/containers/CTA/messages.js
Normal file
23
src/containers/CTA/messages.js
Normal file
@@ -0,0 +1,23 @@
|
||||
/* eslint-disable quotes */
|
||||
import { defineMessages } from '@edx/frontend-platform/i18n';
|
||||
import { StrictDict } from 'utils';
|
||||
|
||||
const messages = defineMessages({
|
||||
ctaFeedbackMessage: {
|
||||
id: 'ora-grading.CTA.feedbackMessage',
|
||||
defaultMessage: 'Thanks for using the new ORA staff grading experience. ',
|
||||
description: 'Thank user for using ora and ask for feed back',
|
||||
},
|
||||
ctaLinkMessage: {
|
||||
id: 'ora-grading.CTA.linkMessage',
|
||||
defaultMessage: 'Provide some feedback',
|
||||
description: 'placeholder for the feedback anchor link',
|
||||
},
|
||||
ctaLetUsKnowMessage: {
|
||||
id: 'ora-grading.CTA.letUsKnowMessage',
|
||||
defaultMessage: ' and let us know what you think!',
|
||||
description: 'inform user to provide feedback',
|
||||
},
|
||||
});
|
||||
|
||||
export default StrictDict(messages);
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Form } from '@openedx/paragon';
|
||||
import { Form } from '@edx/paragon';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { feedbackRequirement } from 'data/services/lms/constants';
|
||||
@@ -51,14 +51,13 @@ 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" data-testid="criterion-feedback-error-msg">
|
||||
<Form.Control.Feedback type="invalid" className="feedback-error-msg">
|
||||
{this.translate(messages.criterionFeedbackError)}
|
||||
</Form.Control.Feedback>
|
||||
)}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { actions, selectors } from 'data/redux';
|
||||
import {
|
||||
@@ -48,27 +48,34 @@ 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.snapshot).toMatchSnapshot();
|
||||
expect(el.instance().render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('is graded', () => {
|
||||
el = shallow(<CriterionFeedback {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
el.setProps({
|
||||
isGrading: false,
|
||||
gradeStatus: gradeStatuses.graded,
|
||||
});
|
||||
expect(el.instance().render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('feedback value is invalid', () => {
|
||||
el = shallow(<CriterionFeedback {...props} isInvalid />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
el.setProps({
|
||||
isInvalid: true,
|
||||
});
|
||||
expect(el.instance().render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
Object.values(feedbackRequirement).forEach((requirement) => {
|
||||
test(`feedback is configured to ${requirement}`, () => {
|
||||
el = shallow(<CriterionFeedback {...props} config={requirement} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
el.setProps({
|
||||
config: requirement,
|
||||
});
|
||||
expect(el.instance().render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -77,23 +84,33 @@ describe('Criterion Feedback', () => {
|
||||
describe('render', () => {
|
||||
test('is grading (the feedback input is not disabled)', () => {
|
||||
expect(el.isEmptyRender()).toEqual(false);
|
||||
const controlEl = el.instance.findByTestId('criterion-feedback-input')[0];
|
||||
expect(controlEl.props.disabled).toEqual(false);
|
||||
expect(controlEl.props.value).toEqual(props.value);
|
||||
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);
|
||||
});
|
||||
test('is graded (the input is disabled)', () => {
|
||||
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);
|
||||
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);
|
||||
});
|
||||
test('is having invalid feedback (feedback get render)', () => {
|
||||
el = shallow(<CriterionFeedback {...props} isInvalid />);
|
||||
const feedbackErrorEl = el.instance.findByTestId('criterion-feedback-error-msg');
|
||||
el.setProps({
|
||||
isInvalid: true,
|
||||
});
|
||||
const feedbackErrorEl = el.find('.feedback-error-msg');
|
||||
expect(el.instance().props.isInvalid).toEqual(true);
|
||||
expect(feedbackErrorEl).toBeDefined();
|
||||
});
|
||||
test('is configure to disabled (the input does not get render)', () => {
|
||||
el = shallow(<CriterionFeedback {...props} config={feedbackRequirement.disabled} />);
|
||||
el.setProps({
|
||||
config: feedbackRequirement.disabled,
|
||||
});
|
||||
expect(el.isEmptyRender()).toEqual(true);
|
||||
});
|
||||
});
|
||||
@@ -101,7 +118,7 @@ describe('Criterion Feedback', () => {
|
||||
describe('behavior', () => {
|
||||
test('onChange call set value', () => {
|
||||
el = shallow(<CriterionFeedback {...props} />);
|
||||
el.instance.findByTestId('criterion-feedback-input')[0].props.onChange({
|
||||
el.instance().onChange({
|
||||
target: {
|
||||
value: 'some value',
|
||||
},
|
||||
@@ -112,41 +129,33 @@ describe('Criterion Feedback', () => {
|
||||
|
||||
describe('getter commentMessage', () => {
|
||||
test('is grading', () => {
|
||||
let commentMessage;
|
||||
|
||||
el = shallow(<CriterionFeedback {...props} isGrading config={feedbackRequirement.optional} />);
|
||||
commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
|
||||
expect(commentMessage).toContain(
|
||||
el.setProps({ config: feedbackRequirement.optional, isGrading: true });
|
||||
expect(el.instance().commentMessage).toContain(
|
||||
messages.optional.defaultMessage,
|
||||
);
|
||||
|
||||
el = shallow(<CriterionFeedback {...props} config={feedbackRequirement.required} />);
|
||||
commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
|
||||
expect(commentMessage).not.toContain(
|
||||
el.setProps({ config: feedbackRequirement.required });
|
||||
expect(el.instance().commentMessage).not.toContain(
|
||||
messages.optional.defaultMessage,
|
||||
);
|
||||
|
||||
expect(commentMessage).toContain(
|
||||
expect(el.instance().commentMessage).toContain(
|
||||
messages.addComments.defaultMessage,
|
||||
);
|
||||
});
|
||||
|
||||
test('is not grading', () => {
|
||||
let commentMessage;
|
||||
|
||||
el = shallow(<CriterionFeedback {...props} isGrading={false} config={feedbackRequirement.optional} />);
|
||||
commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
|
||||
expect(commentMessage).toContain(
|
||||
el.setProps({ config: feedbackRequirement.optional, isGrading: false });
|
||||
expect(el.instance().commentMessage).toContain(
|
||||
messages.optional.defaultMessage,
|
||||
);
|
||||
|
||||
el = shallow(<CriterionFeedback {...props} isGrading={false} config={feedbackRequirement.required} />);
|
||||
commentMessage = el.instance.findByTestId('criterion-feedback-input')[0].props.floatingLabel;
|
||||
expect(commentMessage).not.toContain(
|
||||
el.setProps({ config: feedbackRequirement.required });
|
||||
expect(el.instance().commentMessage).not.toContain(
|
||||
messages.optional.defaultMessage,
|
||||
);
|
||||
|
||||
expect(commentMessage).toContain(
|
||||
expect(el.instance().commentMessage).toContain(
|
||||
messages.comments.defaultMessage,
|
||||
);
|
||||
});
|
||||
@@ -154,7 +163,7 @@ describe('Criterion Feedback', () => {
|
||||
});
|
||||
|
||||
describe('mapStateToProps', () => {
|
||||
const testState = { arbitraryState: 'some data' };
|
||||
const testState = { abitaryState: 'some data' };
|
||||
const ownProps = { orderNum: props.orderNum };
|
||||
let mapped;
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Form } from '@openedx/paragon';
|
||||
import { Form } from '@edx/paragon';
|
||||
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { actions, selectors } from 'data/redux';
|
||||
@@ -36,13 +36,12 @@ export class RadioCriterion extends React.Component {
|
||||
<Form.RadioSet name={config.name} value={data}>
|
||||
{config.options.map((option) => (
|
||||
<Form.Radio
|
||||
className="criteria-option align-items-center"
|
||||
className="criteria-option"
|
||||
key={option.name}
|
||||
value={option.name}
|
||||
description={intl.formatMessage(messages.optionPoints, { points: option.points })}
|
||||
onChange={this.onChange}
|
||||
disabled={!isGrading}
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
{option.label}
|
||||
</Form.Radio>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { actions, selectors } from 'data/redux';
|
||||
import { formatMessage } from 'testUtils';
|
||||
@@ -40,14 +40,14 @@ describe('Radio Criterion Container', () => {
|
||||
feedback: 'feedback mock',
|
||||
options: [
|
||||
{
|
||||
explanation: 'explanation',
|
||||
explanation: 'explaination',
|
||||
feedback: 'option feedback',
|
||||
label: 'this label',
|
||||
name: 'option name',
|
||||
points: 1,
|
||||
},
|
||||
{
|
||||
explanation: 'explanation 2',
|
||||
explanation: 'explaination 2',
|
||||
feedback: 'option feedback 2',
|
||||
label: 'this label 2',
|
||||
name: 'option name 2',
|
||||
@@ -63,21 +63,25 @@ 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.snapshot).toMatchSnapshot();
|
||||
expect(el.instance().render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('is not grading', () => {
|
||||
el = shallow(<RadioCriterion {...props} isGrading={false} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
el.setProps({
|
||||
isGrading: false,
|
||||
});
|
||||
expect(el.instance().render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('radio contain invalid response', () => {
|
||||
el = shallow(<RadioCriterion {...props} isInvalid />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
el.setProps({
|
||||
isInvalid: true,
|
||||
});
|
||||
expect(el.instance().render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -85,33 +89,36 @@ describe('Radio Criterion Container', () => {
|
||||
describe('rendering', () => {
|
||||
test('is grading (all options are not disabled)', () => {
|
||||
expect(el.isEmptyRender()).toEqual(false);
|
||||
const optionsEl = el.instance.children;
|
||||
const optionsEl = el.find('.criteria-option');
|
||||
expect(optionsEl.length).toEqual(props.config.options.length);
|
||||
optionsEl.forEach((optionEl) => expect(optionEl.props.disabled).toEqual(false));
|
||||
optionsEl.forEach((optionEl) => expect(optionEl.prop('disabled')).toEqual(false));
|
||||
});
|
||||
|
||||
test('is not grading (all options are disabled)', () => {
|
||||
el = shallow(<RadioCriterion {...props} isGrading={false} />);
|
||||
el.setProps({
|
||||
isGrading: false,
|
||||
});
|
||||
expect(el.isEmptyRender()).toEqual(false);
|
||||
const optionsEl = el.instance.children;
|
||||
const optionsEl = el.find('.criteria-option');
|
||||
expect(optionsEl.length).toEqual(props.config.options.length);
|
||||
optionsEl.forEach((optionEl) => expect(optionEl.props.disabled).toEqual(true));
|
||||
optionsEl.forEach((optionEl) => expect(optionEl.prop('disabled')).toEqual(true));
|
||||
});
|
||||
|
||||
test('radio contain invalid response (error response get render)', () => {
|
||||
el = shallow(<RadioCriterion {...props} isInvalid />);
|
||||
el.setProps({
|
||||
isInvalid: true,
|
||||
});
|
||||
expect(el.isEmptyRender()).toEqual(false);
|
||||
const radioErrorEl = el.instance.children[2];
|
||||
expect(radioErrorEl.props.type).toBe('invalid');
|
||||
expect(radioErrorEl.props.className).toBe('feedback-error-msg');
|
||||
expect(radioErrorEl).toBeTruthy();
|
||||
const radioErrorEl = el.find('.feedback-error-msg');
|
||||
expect(el.instance().props.isInvalid).toEqual(true);
|
||||
expect(radioErrorEl).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('behavior', () => {
|
||||
test('onChange call set crition option', () => {
|
||||
el = shallow(<RadioCriterion {...props} />);
|
||||
el.instance.children[0].props.onChange({
|
||||
el.instance().onChange({
|
||||
target: {
|
||||
value: 'some value',
|
||||
},
|
||||
@@ -122,7 +129,7 @@ describe('Radio Criterion Container', () => {
|
||||
});
|
||||
|
||||
describe('mapStateToProps', () => {
|
||||
const testState = { arbitrary: 'some data' };
|
||||
const testState = { arbitary: 'some data' };
|
||||
const ownProps = { orderNum: props.orderNum };
|
||||
let mapped;
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Form, FormControlFeedback } from '@openedx/paragon';
|
||||
import { Form, FormControlFeedback } from '@edx/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" data-testid="criteria-option">
|
||||
<div key={option.name} className="criteria-option">
|
||||
<div>
|
||||
<Form.Label className="option-label" data-testid="option-label">{option.label}</Form.Label>
|
||||
<FormControlFeedback className="option-points" data-testid="option-points">
|
||||
<Form.Label className="option-label">{option.label}</Form.Label>
|
||||
<FormControlFeedback className="option-points">
|
||||
<FormattedMessage {...messages.optionPoints} values={{ points: option.points }} />
|
||||
</FormControlFeedback>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { selectors } from 'data/redux';
|
||||
import { ReviewCriterion, mapStateToProps } from './ReviewCriterion';
|
||||
@@ -29,14 +29,14 @@ describe('Review Crition Container', () => {
|
||||
feedback: 'feedback mock',
|
||||
options: [
|
||||
{
|
||||
explanation: 'explanation',
|
||||
explanation: 'explaination',
|
||||
feedback: 'option feedback',
|
||||
label: 'this label',
|
||||
name: 'option name',
|
||||
points: 1,
|
||||
},
|
||||
{
|
||||
explanation: 'explanation 2',
|
||||
explanation: 'explaination 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.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('component', () => {
|
||||
test('rendering (everything show up)', () => {
|
||||
expect(el.isEmptyRender()).toEqual(false);
|
||||
const optionsEl = el.instance.findByTestId('criteria-option');
|
||||
const optionsEl = el.find('.criteria-option');
|
||||
expect(optionsEl.length).toEqual(props.config.options.length);
|
||||
optionsEl.forEach((optionEl, i) => {
|
||||
const option = props.config.options[i];
|
||||
expect(optionEl.props.key).toEqual(option.name);
|
||||
expect(optionEl.findByTestId('option-label')[0].children[0].el).toEqual(
|
||||
expect(optionEl.key()).toEqual(option.name);
|
||||
expect(optionEl.find('.option-label').childAt(0).text()).toEqual(
|
||||
option.label,
|
||||
);
|
||||
expect(optionEl.findByTestId('option-points')[0].children[0].props).toEqual({
|
||||
expect(optionEl.find('.option-points').childAt(0).props()).toEqual({
|
||||
...messages.optionPoints,
|
||||
values: { points: option.points },
|
||||
});
|
||||
@@ -78,7 +78,7 @@ describe('Review Crition Container', () => {
|
||||
});
|
||||
|
||||
describe('mapStateToProps', () => {
|
||||
const testState = { arbitrary: 'some data' };
|
||||
const testState = { arbitary: 'some data' };
|
||||
const ownProps = { orderNum: props.orderNum };
|
||||
let mapped;
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -7,10 +7,9 @@ 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={[Function]}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="criterion value"
|
||||
/>
|
||||
</Form.Group>
|
||||
@@ -21,10 +20,9 @@ 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={[Function]}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="criterion value"
|
||||
/>
|
||||
</Form.Group>
|
||||
@@ -35,15 +33,13 @@ 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={[Function]}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="criterion value"
|
||||
/>
|
||||
<Form.Control.Feedback
|
||||
className="feedback-error-msg"
|
||||
data-testid="criterion-feedback-error-msg"
|
||||
type="invalid"
|
||||
>
|
||||
The feedback is required
|
||||
@@ -56,10 +52,9 @@ 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={[Function]}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="criterion value"
|
||||
/>
|
||||
</Form.Group>
|
||||
@@ -70,10 +65,9 @@ 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={[Function]}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="criterion value"
|
||||
/>
|
||||
</Form.Group>
|
||||
|
||||
@@ -6,31 +6,19 @@ exports[`Radio Criterion Container snapshot is grading 1`] = `
|
||||
value="selected radio option"
|
||||
>
|
||||
<Form.Radio
|
||||
className="criteria-option align-items-center"
|
||||
className="criteria-option"
|
||||
description="1 points"
|
||||
disabled={false}
|
||||
key="option name"
|
||||
onChange={[Function]}
|
||||
style={
|
||||
{
|
||||
"flexShrink": 0,
|
||||
}
|
||||
}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="option name"
|
||||
>
|
||||
this label
|
||||
</Form.Radio>
|
||||
<Form.Radio
|
||||
className="criteria-option align-items-center"
|
||||
className="criteria-option"
|
||||
description="2 points"
|
||||
disabled={false}
|
||||
key="option name 2"
|
||||
onChange={[Function]}
|
||||
style={
|
||||
{
|
||||
"flexShrink": 0,
|
||||
}
|
||||
}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="option name 2"
|
||||
>
|
||||
this label 2
|
||||
@@ -44,31 +32,19 @@ exports[`Radio Criterion Container snapshot is not grading 1`] = `
|
||||
value="selected radio option"
|
||||
>
|
||||
<Form.Radio
|
||||
className="criteria-option align-items-center"
|
||||
className="criteria-option"
|
||||
description="1 points"
|
||||
disabled={true}
|
||||
key="option name"
|
||||
onChange={[Function]}
|
||||
style={
|
||||
{
|
||||
"flexShrink": 0,
|
||||
}
|
||||
}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="option name"
|
||||
>
|
||||
this label
|
||||
</Form.Radio>
|
||||
<Form.Radio
|
||||
className="criteria-option align-items-center"
|
||||
className="criteria-option"
|
||||
description="2 points"
|
||||
disabled={true}
|
||||
key="option name 2"
|
||||
onChange={[Function]}
|
||||
style={
|
||||
{
|
||||
"flexShrink": 0,
|
||||
}
|
||||
}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="option name 2"
|
||||
>
|
||||
this label 2
|
||||
@@ -82,31 +58,19 @@ exports[`Radio Criterion Container snapshot radio contain invalid response 1`] =
|
||||
value="selected radio option"
|
||||
>
|
||||
<Form.Radio
|
||||
className="criteria-option align-items-center"
|
||||
className="criteria-option"
|
||||
description="1 points"
|
||||
disabled={false}
|
||||
key="option name"
|
||||
onChange={[Function]}
|
||||
style={
|
||||
{
|
||||
"flexShrink": 0,
|
||||
}
|
||||
}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="option name"
|
||||
>
|
||||
this label
|
||||
</Form.Radio>
|
||||
<Form.Radio
|
||||
className="criteria-option align-items-center"
|
||||
className="criteria-option"
|
||||
description="2 points"
|
||||
disabled={false}
|
||||
key="option name 2"
|
||||
onChange={[Function]}
|
||||
style={
|
||||
{
|
||||
"flexShrink": 0,
|
||||
}
|
||||
}
|
||||
onChange={[MockFunction this.onChange]}
|
||||
value="option name 2"
|
||||
>
|
||||
this label 2
|
||||
|
||||
@@ -6,26 +6,23 @@ 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"
|
||||
description="criterion option point value display"
|
||||
id="ora-grading.RadioCriterion.optionPoints"
|
||||
values={
|
||||
{
|
||||
Object {
|
||||
"points": 1,
|
||||
}
|
||||
}
|
||||
@@ -35,26 +32,23 @@ 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"
|
||||
description="criterion option point value display"
|
||||
id="ora-grading.RadioCriterion.optionPoints"
|
||||
values={
|
||||
{
|
||||
Object {
|
||||
"points": 2,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,31 +13,28 @@ 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 />
|
||||
explanation
|
||||
explaination
|
||||
</div>
|
||||
<div
|
||||
className="help-popover-option"
|
||||
data-testid="help-popover-option"
|
||||
key="option name 2"
|
||||
>
|
||||
<strong>
|
||||
this label 2
|
||||
</strong>
|
||||
<br />
|
||||
explanation 2
|
||||
explaination 2
|
||||
</div>
|
||||
</InfoPopover>
|
||||
</Form.Label>
|
||||
<div
|
||||
className="rubric-criteria"
|
||||
data-testid="rubric-criteria"
|
||||
>
|
||||
<RadioCriterion
|
||||
isGrading={false}
|
||||
@@ -64,31 +61,28 @@ 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 />
|
||||
explanation
|
||||
explaination
|
||||
</div>
|
||||
<div
|
||||
className="help-popover-option"
|
||||
data-testid="help-popover-option"
|
||||
key="option name 2"
|
||||
>
|
||||
<strong>
|
||||
this label 2
|
||||
</strong>
|
||||
<br />
|
||||
explanation 2
|
||||
explaination 2
|
||||
</div>
|
||||
</InfoPopover>
|
||||
</Form.Label>
|
||||
<div
|
||||
className="rubric-criteria"
|
||||
data-testid="rubric-criteria"
|
||||
>
|
||||
<RadioCriterion
|
||||
isGrading={true}
|
||||
@@ -115,31 +109,28 @@ 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 />
|
||||
explanation
|
||||
explaination
|
||||
</div>
|
||||
<div
|
||||
className="help-popover-option"
|
||||
data-testid="help-popover-option"
|
||||
key="option name 2"
|
||||
>
|
||||
<strong>
|
||||
this label 2
|
||||
</strong>
|
||||
<br />
|
||||
explanation 2
|
||||
explaination 2
|
||||
</div>
|
||||
</InfoPopover>
|
||||
</Form.Label>
|
||||
<div
|
||||
className="rubric-criteria"
|
||||
data-testid="rubric-criteria"
|
||||
>
|
||||
<ReviewCriterion
|
||||
orderNum={1}
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Form } from '@openedx/paragon';
|
||||
import { Form } from '@edx/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" data-testid="help-popover-option">
|
||||
<div key={option.name} className="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" data-testid="rubric-criteria">
|
||||
<div className="rubric-criteria">
|
||||
{isGrading || gradeStatus === gradeStatuses.graded ? (
|
||||
<RadioCriterion orderNum={orderNum} isGrading={isGrading} />
|
||||
) : (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { selectors } from 'data/redux';
|
||||
import { gradeStatuses } from 'data/services/lms/constants';
|
||||
@@ -34,14 +34,14 @@ describe('Criterion Container', () => {
|
||||
feedback: 'feedback mock',
|
||||
options: [
|
||||
{
|
||||
explanation: 'explanation',
|
||||
explanation: 'explaination',
|
||||
feedback: 'option feedback',
|
||||
label: 'this label',
|
||||
name: 'option name',
|
||||
points: 2,
|
||||
},
|
||||
{
|
||||
explanation: 'explanation 2',
|
||||
explanation: 'explaination 2',
|
||||
feedback: 'option feedback 2',
|
||||
label: 'this label 2',
|
||||
name: 'option name 2',
|
||||
@@ -58,51 +58,61 @@ describe('Criterion Container', () => {
|
||||
|
||||
describe('snapshot', () => {
|
||||
test('is ungraded and is grading', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('is ungraded and is not grading', () => {
|
||||
el = shallow(<CriterionContainer {...props} isGrading={false} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
el.setProps({
|
||||
isGrading: false,
|
||||
});
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('is graded and is not grading', () => {
|
||||
el = shallow(<CriterionContainer {...props} isGrading={false} gradeStatus={gradeStatuses.graded} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
el.setProps({
|
||||
isGrading: false,
|
||||
gradeStatus: gradeStatuses.graded,
|
||||
});
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('component', () => {
|
||||
test('rendering and all of the option show up', () => {
|
||||
expect(el.isEmptyRender()).toEqual(false);
|
||||
const optionsEl = el.instance.findByTestId('help-popover-option');
|
||||
const optionsEl = el.find('.help-popover-option');
|
||||
expect(optionsEl.length).toEqual(props.config.options.length);
|
||||
optionsEl.forEach((optionEl, i) => {
|
||||
expect(optionEl.props.key).toEqual(props.config.options[i].name);
|
||||
expect(optionEl.children[2].el).toContain(props.config.options[i].explanation);
|
||||
expect(optionEl.key()).toEqual(props.config.options[i].name);
|
||||
expect(optionEl.text()).toContain(props.config.options[i].explanation);
|
||||
});
|
||||
});
|
||||
|
||||
test('is ungraded and is grading (Radio criterion get render)', () => {
|
||||
const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
|
||||
expect(rubricCriteria.children[0].el.type).toEqual('RadioCriterion');
|
||||
const rubricCritera = el.find('.rubric-criteria');
|
||||
expect(rubricCritera.children(0).name()).toEqual('RadioCriterion');
|
||||
});
|
||||
|
||||
test('is ungraded and is not grading (Review criterion get render)', () => {
|
||||
el = shallow(<CriterionContainer {...props} isGrading={false} />);
|
||||
const rubricCriteria = el.instance.findByTestId('rubric-criteria')[0];
|
||||
expect(rubricCriteria.children[0].el.type).toEqual('ReviewCriterion');
|
||||
el.setProps({
|
||||
isGrading: false,
|
||||
});
|
||||
const rubricCritera = el.find('.rubric-criteria');
|
||||
expect(rubricCritera.children(0).name()).toEqual('ReviewCriterion');
|
||||
});
|
||||
|
||||
test('is graded and is not grading (Radio criterion get render)', () => {
|
||||
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');
|
||||
el.setProps({
|
||||
isGrading: false,
|
||||
gradeStatus: gradeStatuses.graded,
|
||||
});
|
||||
const rubricCritera = el.find('.rubric-criteria');
|
||||
expect(rubricCritera.children(0).name()).toEqual('RadioCriterion');
|
||||
});
|
||||
});
|
||||
|
||||
describe('mapStateToProps', () => {
|
||||
const testState = { arbitraryState: 'some data' };
|
||||
const testState = { abitaryState: 'some data' };
|
||||
const ownProps = { orderNum: props.orderNum };
|
||||
let mapped;
|
||||
beforeEach(() => {
|
||||
|
||||
@@ -14,7 +14,7 @@ const messages = defineMessages({
|
||||
optional: {
|
||||
id: 'ora-grading.CriterionFeedback.optional',
|
||||
defaultMessage: '(Optional)',
|
||||
description: 'additional label for optional feedback field',
|
||||
description: 'addtional label for optional feedback field',
|
||||
},
|
||||
optionPoints: {
|
||||
id: 'ora-grading.RadioCriterion.optionPoints',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
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.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
expect(el.isEmptyRender()).toEqual(true);
|
||||
});
|
||||
test('snapshot: disabled flag is present', () => {
|
||||
el = shallow(<DemoWarning hide={false} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
expect(el.isEmptyRender()).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`DemoWarning component snapshots does not render if disabled flag is missing 1`] = `null`;
|
||||
exports[`DemoWarning component snapshots does not render if disabled flag is missing 1`] = `""`;
|
||||
|
||||
exports[`DemoWarning component snapshots snapshot: disabled flag is present 1`] = `
|
||||
<Alert
|
||||
|
||||
@@ -3,8 +3,8 @@ import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { Alert } from '@openedx/paragon';
|
||||
import { Info } from '@openedx/paragon/icons';
|
||||
import { Alert } from '@edx/paragon';
|
||||
import { Info } from '@edx/paragon/icons';
|
||||
|
||||
import { selectors } from 'data/redux';
|
||||
import messages from './messages';
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
import { Hyperlink, Button } from '@openedx/paragon';
|
||||
import { Hyperlink, Button } from '@edx/paragon';
|
||||
|
||||
import urls from 'data/services/lms/urls';
|
||||
import emptyStateSVG from './assets/empty-state.svg';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { Hyperlink } from '@openedx/paragon';
|
||||
import { Hyperlink } from '@edx/paragon';
|
||||
|
||||
import urls from 'data/services/lms/urls';
|
||||
|
||||
@@ -22,11 +22,11 @@ describe('EmptySubmission component', () => {
|
||||
el = shallow(<EmptySubmission {...props} />);
|
||||
});
|
||||
test('snapshot', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
test('openResponse destination', () => {
|
||||
expect(
|
||||
el.instance.findByType(Hyperlink)[0].props.destination,
|
||||
el.find(Hyperlink).at(0).props().destination,
|
||||
).toEqual(urls.openResponse(props.courseId));
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, DataTableContext } from '@openedx/paragon';
|
||||
import { Button, DataTableContext } from '@edx/paragon';
|
||||
|
||||
import * as module from './FilterStatusComponent';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import * as module from './FilterStatusComponent';
|
||||
|
||||
@@ -71,20 +71,20 @@ describe('FilterStatusComponent component', () => {
|
||||
test('showFilteredFields', () => {
|
||||
mockHooks(hookProps);
|
||||
const el = shallow(<FilterStatusComponent {...props} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
test('showFilteredFields=false - hide filterTexts', () => {
|
||||
mockHooks(hookProps);
|
||||
const el = shallow(
|
||||
<FilterStatusComponent {...props} showFilteredFields={false} />,
|
||||
);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
test('without filters', () => {
|
||||
mockHooks({});
|
||||
const el = shallow(<FilterStatusComponent {...props} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
expect(el.isEmptyRender()).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -6,8 +6,8 @@ import {
|
||||
Alert,
|
||||
Button,
|
||||
Hyperlink,
|
||||
} from '@openedx/paragon';
|
||||
import { Info } from '@openedx/paragon/icons';
|
||||
} from '@edx/paragon';
|
||||
import { Info } from '@edx/paragon/icons';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import urls from 'data/services/lms/urls';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { selectors, thunkActions } from 'data/redux';
|
||||
|
||||
@@ -45,7 +45,7 @@ describe('ListError component', () => {
|
||||
el = shallow(<ListError {...props} />);
|
||||
});
|
||||
test('snapshot', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "@openedx/paragon/scss/core/core";
|
||||
@import "@edx/paragon/scss/core/core";
|
||||
|
||||
span.pgn__icon.breadcrumb-arrow {
|
||||
width: 16px !important;
|
||||
|
||||
@@ -2,8 +2,8 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { ArrowBack, Launch } from '@openedx/paragon/icons';
|
||||
import { Hyperlink, Icon } from '@openedx/paragon';
|
||||
import { ArrowBack, Launch } from '@edx/paragon/icons';
|
||||
import { Hyperlink, Icon } from '@edx/paragon';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { selectors } from 'data/redux';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { Hyperlink } from '@openedx/paragon';
|
||||
import { Hyperlink } from '@edx/paragon';
|
||||
|
||||
import * as constants from 'data/constants/app';
|
||||
import urls from 'data/services/lms/urls';
|
||||
@@ -40,16 +40,16 @@ describe('ListViewBreadcrumb component', () => {
|
||||
el = shallow(<ListViewBreadcrumb {...props} />);
|
||||
});
|
||||
test('snapshot: empty (no list data)', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
test('openResponse destination', () => {
|
||||
expect(
|
||||
el.instance.findByType(Hyperlink)[0].props.destination,
|
||||
el.find(Hyperlink).at(0).props().destination,
|
||||
).toEqual(urls.openResponse(props.courseId));
|
||||
});
|
||||
test('ora destination', () => {
|
||||
expect(
|
||||
el.instance.findByType(Hyperlink)[1].props.destination,
|
||||
el.find(Hyperlink).at(1).props().destination,
|
||||
).toEqual(urls.ora(props.courseId, constants.locationId()));
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button } from '@openedx/paragon';
|
||||
import { Button } from '@edx/paragon';
|
||||
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { SelectedBulkAction } from './SelectedBulkAction';
|
||||
|
||||
@@ -10,7 +10,7 @@ describe('SelectedBulkAction component', () => {
|
||||
};
|
||||
test('snapshots', () => {
|
||||
const el = shallow(<SelectedBulkAction {...props} handleClick={() => jest.fn()} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('handleClick', () => {
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
DataTable,
|
||||
TextFilter,
|
||||
MultiSelectDropdownFilter,
|
||||
} from '@openedx/paragon';
|
||||
} from '@edx/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,7 +74,6 @@ export class SubmissionsTable extends React.Component {
|
||||
return (
|
||||
<div className="submissions-table">
|
||||
<DataTable
|
||||
data-testid="data-table"
|
||||
isFilterable
|
||||
FilterStatusComponent={FilterStatusComponent}
|
||||
numBreakoutFilters={2}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import {
|
||||
DataTable,
|
||||
MultiSelectDropdownFilter,
|
||||
TextFilter,
|
||||
} from '@openedx/paragon';
|
||||
} from '@edx/paragon';
|
||||
|
||||
import { selectors, thunkActions } from 'data/redux';
|
||||
import { gradingStatuses as statuses, submissionFields } from 'data/services/lms/constants';
|
||||
@@ -121,7 +122,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} />);
|
||||
@@ -135,21 +136,23 @@ describe('SubmissionsTable component', () => {
|
||||
});
|
||||
test('snapshot: empty (no list data)', () => {
|
||||
el = shallow(<SubmissionsTable {...props} listData={[]} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el).toMatchSnapshot();
|
||||
expect(el.isEmptyRender()).toEqual(true);
|
||||
});
|
||||
test('snapshot: happy path', () => {
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
expect(el.instance().render()).toMatchSnapshot();
|
||||
});
|
||||
test('snapshot: team happy path', () => {
|
||||
el = shallow(<SubmissionsTable {...props} isIndividual={false} listData={[...teamData]} />);
|
||||
expect(el.snapshot).toMatchSnapshot();
|
||||
el.setProps({ isIndividual: false, listData: [...teamData] });
|
||||
expect(el.instance().render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
describe('DataTable', () => {
|
||||
let table;
|
||||
let tableProps;
|
||||
beforeEach(() => {
|
||||
tableProps = el.instance.findByTestId('data-table')[0].props;
|
||||
table = el.find(DataTable);
|
||||
tableProps = table.props();
|
||||
});
|
||||
test.each([
|
||||
'isFilterable',
|
||||
@@ -178,7 +181,7 @@ describe('SubmissionsTable component', () => {
|
||||
expect(columns[1]).toEqual({
|
||||
Header: messages.learnerSubmissionDate.defaultMessage,
|
||||
accessor: submissionFields.dateSubmitted,
|
||||
Cell: el.instance.children[0].props.columns[1].Cell,
|
||||
Cell: el.instance().formatDate,
|
||||
disableFilters: true,
|
||||
});
|
||||
});
|
||||
@@ -186,7 +189,7 @@ describe('SubmissionsTable component', () => {
|
||||
expect(columns[2]).toEqual({
|
||||
Header: messages.grade.defaultMessage,
|
||||
accessor: submissionFields.score,
|
||||
Cell: el.instance.children[0].props.columns[2].Cell,
|
||||
Cell: el.instance().formatGrade,
|
||||
disableFilters: true,
|
||||
});
|
||||
});
|
||||
@@ -194,18 +197,18 @@ describe('SubmissionsTable component', () => {
|
||||
expect(columns[3]).toEqual({
|
||||
Header: messages.gradingStatus.defaultMessage,
|
||||
accessor: submissionFields.gradingStatus,
|
||||
Cell: el.instance.children[0].props.columns[3].Cell,
|
||||
Cell: el.instance().formatStatus,
|
||||
Filter: MultiSelectDropdownFilter,
|
||||
filter: 'includesValue',
|
||||
filterChoices: el.instance.children[0].props.columns[3].filterChoices,
|
||||
filterChoices: el.instance().gradeStatusOptions,
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('team columns', () => {
|
||||
let columns;
|
||||
beforeEach(() => {
|
||||
el = shallow(<SubmissionsTable {...props} isIndividual={false} listData={[...teamData]} />);
|
||||
columns = el.instance.findByTestId('data-table')[0].props.columns;
|
||||
el.setProps({ isIndividual: false, listData: [...teamData] });
|
||||
columns = el.find(DataTable).props().columns;
|
||||
});
|
||||
test('teamName column', () => {
|
||||
expect(columns[0]).toEqual({
|
||||
@@ -217,7 +220,7 @@ describe('SubmissionsTable component', () => {
|
||||
expect(columns[1]).toEqual({
|
||||
Header: messages.teamSubmissionDate.defaultMessage,
|
||||
accessor: submissionFields.dateSubmitted,
|
||||
Cell: el.instance.children[0].props.columns[1].Cell,
|
||||
Cell: el.instance().formatDate,
|
||||
disableFilters: true,
|
||||
});
|
||||
});
|
||||
@@ -225,7 +228,7 @@ describe('SubmissionsTable component', () => {
|
||||
expect(columns[2]).toEqual({
|
||||
Header: messages.grade.defaultMessage,
|
||||
accessor: submissionFields.score,
|
||||
Cell: el.instance.children[0].props.columns[2].Cell,
|
||||
Cell: el.instance().formatGrade,
|
||||
disableFilters: true,
|
||||
});
|
||||
});
|
||||
@@ -233,10 +236,10 @@ describe('SubmissionsTable component', () => {
|
||||
expect(columns[3]).toEqual({
|
||||
Header: messages.gradingStatus.defaultMessage,
|
||||
accessor: submissionFields.gradingStatus,
|
||||
Cell: el.instance.children[0].props.columns[3].Cell,
|
||||
Cell: el.instance().formatStatus,
|
||||
Filter: MultiSelectDropdownFilter,
|
||||
filter: 'includesValue',
|
||||
filterChoices: el.instance.children[0].props.columns[3].filterChoices,
|
||||
filterChoices: el.instance().gradeStatusOptions,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -248,24 +251,24 @@ describe('SubmissionsTable component', () => {
|
||||
const fakeDate = 16131215154955;
|
||||
const fakeDateString = 'test-date-string';
|
||||
const mock = jest.spyOn(Date.prototype, 'toLocaleString').mockReturnValue(fakeDateString);
|
||||
expect(el.instance.children[0].props.columns[1].Cell({ value: fakeDate })).toEqual(fakeDateString);
|
||||
expect(el.instance().formatDate({ value: fakeDate })).toEqual(fakeDateString);
|
||||
mock.mockRestore();
|
||||
});
|
||||
});
|
||||
describe('formatGrade method', () => {
|
||||
it('returns "-" if grade is null', () => {
|
||||
expect(el.instance.children[0].props.columns[2].Cell({ value: null })).toEqual('-');
|
||||
expect(el.instance().formatGrade({ value: null })).toEqual('-');
|
||||
});
|
||||
it('returns <pointsEarned>/<pointsPossible> if grade exists', () => {
|
||||
expect(
|
||||
el.instance.children[0].props.columns[2].Cell({ value: { pointsEarned: 1, pointsPossible: 10 } }),
|
||||
el.instance().formatGrade({ 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.children[0].props.columns[3].Cell({ value: 'graded' })).toEqual(
|
||||
expect(el.instance().formatStatus({ value: 'graded' })).toEqual(
|
||||
<StatusBadge status={status} />,
|
||||
);
|
||||
});
|
||||
@@ -277,8 +280,8 @@ describe('SubmissionsTable component', () => {
|
||||
{ original: { submissionUUID: '456' } },
|
||||
{ original: { submissionUUID: '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
|
||||
el.instance().handleViewAllResponsesClick(data)();
|
||||
expect(el.instance().props.loadSelectionForReview).toHaveBeenCalledWith(['123', '456', '789']);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button } from '@openedx/paragon';
|
||||
import { Button } from '@edx/paragon';
|
||||
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
@@ -11,7 +11,6 @@ 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>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from '@edx/react-unit-test-utils';
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { TableAction } from './TableAction';
|
||||
|
||||
@@ -10,16 +10,7 @@ describe('TableAction component', () => {
|
||||
};
|
||||
test('snapshots', () => {
|
||||
const el = shallow(<TableAction {...props} handleClick={() => jest.fn()} />);
|
||||
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();
|
||||
expect(el).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('handleClick', () => {
|
||||
|
||||
@@ -34,4 +34,4 @@ exports[`FilterStatusComponent component snapshot with filters showFilteredField
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`FilterStatusComponent component snapshot without filters 1`] = `null`;
|
||||
exports[`FilterStatusComponent component snapshot without filters 1`] = `""`;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
exports[`ListError component component render tests snapshot 1`] = `
|
||||
<Alert
|
||||
actions={
|
||||
[
|
||||
Array [
|
||||
<Button
|
||||
onClick={[MockFunction]}
|
||||
>
|
||||
@@ -30,7 +30,7 @@ exports[`ListError component component render tests snapshot 1`] = `
|
||||
description="Initialization failure alert message line 2"
|
||||
id="ora-grading.ListView.loadErrorMessage1"
|
||||
values={
|
||||
{
|
||||
Object {
|
||||
"backToResponses": <Hyperlink
|
||||
destination="api/openResponse/test-course-id"
|
||||
>
|
||||
|
||||
@@ -11,7 +11,7 @@ exports[`SelectedBulkAction component snapshots 1`] = `
|
||||
description="Button text to load selected responses for review/grading"
|
||||
id="ora-grading.ListView.viewSelectedResponses"
|
||||
values={
|
||||
{
|
||||
Object {
|
||||
"value": 2,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SubmissionsTable component component render tests snapshots snapshot: empty (no list data) 1`] = `null`;
|
||||
exports[`SubmissionsTable component component render tests snapshots snapshot: empty (no list data) 1`] = `""`;
|
||||
|
||||
exports[`SubmissionsTable component component render tests snapshots snapshot: happy path 1`] = `
|
||||
<div
|
||||
@@ -9,50 +9,50 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
|
||||
<DataTable
|
||||
FilterStatusComponent={[MockFunction FilterStatusComponent]}
|
||||
bulkActions={
|
||||
[
|
||||
Array [
|
||||
<mockConstructor
|
||||
handleClick={[Function]}
|
||||
handleClick={[MockFunction this.handleViewAllResponsesClick]}
|
||||
/>,
|
||||
]
|
||||
}
|
||||
columns={
|
||||
[
|
||||
{
|
||||
Array [
|
||||
Object {
|
||||
"Header": "Username",
|
||||
"accessor": "username",
|
||||
},
|
||||
{
|
||||
"Cell": [Function],
|
||||
Object {
|
||||
"Cell": [MockFunction this.formatDate],
|
||||
"Header": "Learner submission date",
|
||||
"accessor": "dateSubmitted",
|
||||
"disableFilters": true,
|
||||
},
|
||||
{
|
||||
"Cell": [Function],
|
||||
Object {
|
||||
"Cell": [MockFunction this.formatGrade],
|
||||
"Header": "Grade",
|
||||
"accessor": "score",
|
||||
"disableFilters": true,
|
||||
},
|
||||
{
|
||||
"Cell": [Function],
|
||||
Object {
|
||||
"Cell": [MockFunction this.formatStatus],
|
||||
"Filter": "MultiSelectDropdownFilter",
|
||||
"Header": "Grading status",
|
||||
"accessor": "gradingStatus",
|
||||
"filter": "includesValue",
|
||||
"filterChoices": [
|
||||
{
|
||||
"filterChoices": Array [
|
||||
Object {
|
||||
"name": "Ungraded",
|
||||
"value": "ungraded",
|
||||
},
|
||||
{
|
||||
Object {
|
||||
"name": "Grading Completed",
|
||||
"value": "graded",
|
||||
},
|
||||
{
|
||||
Object {
|
||||
"name": "Currently being graded by someone else",
|
||||
"value": "locked",
|
||||
},
|
||||
{
|
||||
Object {
|
||||
"name": "You are currently grading this response",
|
||||
"value": "in-progress",
|
||||
},
|
||||
@@ -61,29 +61,29 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
|
||||
]
|
||||
}
|
||||
data={
|
||||
[
|
||||
{
|
||||
Array [
|
||||
Object {
|
||||
"dateSubmitted": "2021-12-08 09:06:15.319213+00:00",
|
||||
"gradingStatus": "ungraded",
|
||||
"score": {
|
||||
"score": Object {
|
||||
"pointsEarned": 1,
|
||||
"pointsPossible": 10,
|
||||
},
|
||||
"username": "username-1",
|
||||
},
|
||||
{
|
||||
Object {
|
||||
"dateSubmitted": "2021-12-10 18:06:15.319213+00:00",
|
||||
"gradingStatus": "graded",
|
||||
"score": {
|
||||
"score": Object {
|
||||
"pointsEarned": 2,
|
||||
"pointsPossible": 10,
|
||||
},
|
||||
"username": "username-2",
|
||||
},
|
||||
{
|
||||
Object {
|
||||
"dateSubmitted": "2021-12-11 07:06:15.319213+00:00",
|
||||
"gradingStatus": "in-progress",
|
||||
"score": {
|
||||
"score": Object {
|
||||
"pointsEarned": 3,
|
||||
"pointsPossible": 10,
|
||||
},
|
||||
@@ -91,14 +91,13 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
|
||||
},
|
||||
]
|
||||
}
|
||||
data-testid="data-table"
|
||||
defaultColumnValues={
|
||||
{
|
||||
Object {
|
||||
"Filter": "TextFilter",
|
||||
}
|
||||
}
|
||||
initialState={
|
||||
{
|
||||
Object {
|
||||
"pageIndex": 0,
|
||||
"pageSize": 10,
|
||||
}
|
||||
@@ -110,9 +109,9 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
|
||||
itemCount={3}
|
||||
numBreakoutFilters={2}
|
||||
tableActions={
|
||||
[
|
||||
Array [
|
||||
<mockConstructor
|
||||
handleClick={[Function]}
|
||||
handleClick={[MockFunction this.handleViewAllResponsesClick]}
|
||||
/>,
|
||||
]
|
||||
}
|
||||
@@ -131,50 +130,50 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
|
||||
<DataTable
|
||||
FilterStatusComponent={[MockFunction FilterStatusComponent]}
|
||||
bulkActions={
|
||||
[
|
||||
Array [
|
||||
<mockConstructor
|
||||
handleClick={[Function]}
|
||||
handleClick={[MockFunction this.handleViewAllResponsesClick]}
|
||||
/>,
|
||||
]
|
||||
}
|
||||
columns={
|
||||
[
|
||||
{
|
||||
Array [
|
||||
Object {
|
||||
"Header": "Team name",
|
||||
"accessor": "teamName",
|
||||
},
|
||||
{
|
||||
"Cell": [Function],
|
||||
Object {
|
||||
"Cell": [MockFunction this.formatDate],
|
||||
"Header": "Team submission date",
|
||||
"accessor": "dateSubmitted",
|
||||
"disableFilters": true,
|
||||
},
|
||||
{
|
||||
"Cell": [Function],
|
||||
Object {
|
||||
"Cell": [MockFunction this.formatGrade],
|
||||
"Header": "Grade",
|
||||
"accessor": "score",
|
||||
"disableFilters": true,
|
||||
},
|
||||
{
|
||||
"Cell": [Function],
|
||||
Object {
|
||||
"Cell": [MockFunction this.formatStatus],
|
||||
"Filter": "MultiSelectDropdownFilter",
|
||||
"Header": "Grading status",
|
||||
"accessor": "gradingStatus",
|
||||
"filter": "includesValue",
|
||||
"filterChoices": [
|
||||
{
|
||||
"filterChoices": Array [
|
||||
Object {
|
||||
"name": "Ungraded",
|
||||
"value": "ungraded",
|
||||
},
|
||||
{
|
||||
Object {
|
||||
"name": "Grading Completed",
|
||||
"value": "graded",
|
||||
},
|
||||
{
|
||||
Object {
|
||||
"name": "Currently being graded by someone else",
|
||||
"value": "locked",
|
||||
},
|
||||
{
|
||||
Object {
|
||||
"name": "You are currently grading this response",
|
||||
"value": "in-progress",
|
||||
},
|
||||
@@ -183,29 +182,29 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
|
||||
]
|
||||
}
|
||||
data={
|
||||
[
|
||||
{
|
||||
Array [
|
||||
Object {
|
||||
"dateSubmitted": "2021-12-08 09:06:15.319213+00:00",
|
||||
"gradingStatus": "ungraded",
|
||||
"score": {
|
||||
"score": Object {
|
||||
"pointsEarned": 1,
|
||||
"pointsPossible": 10,
|
||||
},
|
||||
"teamName": "teamName-1",
|
||||
},
|
||||
{
|
||||
Object {
|
||||
"dateSubmitted": "2021-12-10 18:06:15.319213+00:00",
|
||||
"gradingStatus": "graded",
|
||||
"score": {
|
||||
"score": Object {
|
||||
"pointsEarned": 2,
|
||||
"pointsPossible": 10,
|
||||
},
|
||||
"teamName": "teamName-2",
|
||||
},
|
||||
{
|
||||
Object {
|
||||
"dateSubmitted": "2021-12-11 07:06:15.319213+00:00",
|
||||
"gradingStatus": "in-progress",
|
||||
"score": {
|
||||
"score": Object {
|
||||
"pointsEarned": 3,
|
||||
"pointsPossible": 10,
|
||||
},
|
||||
@@ -213,14 +212,13 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
|
||||
},
|
||||
]
|
||||
}
|
||||
data-testid="data-table"
|
||||
defaultColumnValues={
|
||||
{
|
||||
Object {
|
||||
"Filter": "TextFilter",
|
||||
}
|
||||
}
|
||||
initialState={
|
||||
{
|
||||
Object {
|
||||
"pageIndex": 0,
|
||||
"pageSize": 10,
|
||||
}
|
||||
@@ -232,9 +230,9 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
|
||||
itemCount={3}
|
||||
numBreakoutFilters={2}
|
||||
tableActions={
|
||||
[
|
||||
Array [
|
||||
<mockConstructor
|
||||
handleClick={[Function]}
|
||||
handleClick={[MockFunction this.handleViewAllResponsesClick]}
|
||||
/>,
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,23 +1,8 @@
|
||||
// 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"
|
||||
>
|
||||
|
||||
@@ -13,10 +13,10 @@ exports[`ListView component component snapshots loaded has data 1`] = `
|
||||
<Container
|
||||
className="py-4"
|
||||
>
|
||||
<Fragment>
|
||||
<React.Fragment>
|
||||
<ListViewBreadcrumb />
|
||||
<SubmissionsTable />
|
||||
</Fragment>
|
||||
</React.Fragment>
|
||||
<ReviewModal />
|
||||
</Container>
|
||||
`;
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Container, Spinner } from '@openedx/paragon';
|
||||
import { Container, Spinner } from '@edx/paragon';
|
||||
import { FormattedMessage } from '@edx/frontend-platform/i18n';
|
||||
|
||||
import { selectors, thunkActions } from 'data/redux';
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user