diff --git a/.github/workflows/frontend-deploy.yml b/.github/workflows/frontend-deploy.yml index b46a7bb..7cbe60a 100644 --- a/.github/workflows/frontend-deploy.yml +++ b/.github/workflows/frontend-deploy.yml @@ -23,4 +23,4 @@ jobs: context: ./client file: ./client/Dockerfile push: true - tags: ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_FRONTEND_REPO }}:latest + tags: ${{ secrets.DOCKERHUB_USERNAME }}/${{ secrets.DOCKERHUB_FRONTEND_REPO }}:latest \ No newline at end of file diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs new file mode 100644 index 0000000..43f6c4c --- /dev/null +++ b/client/.eslintrc.cjs @@ -0,0 +1,19 @@ +// eslint-disable-next-line no-undef +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parser: '@typescript-eslint/parser', + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/client/jest.config.cjs b/client/jest.config.cjs index 557c00d..6c635c8 100644 --- a/client/jest.config.cjs +++ b/client/jest.config.cjs @@ -13,7 +13,10 @@ module.exports = { setupFiles: ['./jest.setup.cjs'], moduleNameMapper: { '\\.(css|less|scss|sass)$': 'identity-obj-proxy', + // Permet de mocker les constantes pour les tests avec un chemin absolue (ex: import { ENV_VARIABLES } from 'src/constants';). Voir les "paths" dans tsconfig.json. '^src/constants$': '/src/__mocks__/constantsMock.tsx', + // Dû au fait que tous les imports de "src/" sont normalisés, Jest doit comprendre le chemin réel. TODO: Trouver une solution pour que Jest se fie à tsconfig.json. + '^src/(.*)$': '/src/$1', }, transformIgnorePatterns: ['node_modules/(?!nanoid/)'], }; diff --git a/client/package-lock.json b/client/package-lock.json index 261d611..edc30d8 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -2032,14 +2032,14 @@ } }, "node_modules/@emotion/cache": { - "version": "11.13.1", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz", - "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "version": "11.14.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz", + "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==", "license": "MIT", "dependencies": { "@emotion/memoize": "^0.9.0", "@emotion/sheet": "^1.4.0", - "@emotion/utils": "^1.4.0", + "@emotion/utils": "^1.4.2", "@emotion/weak-memoize": "^0.4.0", "stylis": "4.2.0" } @@ -2147,9 +2147,9 @@ } }, "node_modules/@emotion/utils": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz", - "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==", + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz", + "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==", "license": "MIT" }, "node_modules/@emotion/weak-memoize": { @@ -2719,22 +2719,22 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.6.8", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", - "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "version": "1.6.9", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz", + "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==", "license": "MIT", "dependencies": { - "@floating-ui/utils": "^0.2.8" + "@floating-ui/utils": "^0.2.9" } }, "node_modules/@floating-ui/dom": { - "version": "1.6.12", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", - "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "version": "1.6.13", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz", + "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==", "license": "MIT", "dependencies": { "@floating-ui/core": "^1.6.0", - "@floating-ui/utils": "^0.2.8" + "@floating-ui/utils": "^0.2.9" } }, "node_modules/@floating-ui/react-dom": { @@ -2751,9 +2751,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.2.8", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", - "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", + "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", "license": "MIT" }, "node_modules/@fortawesome/fontawesome-common-types": { @@ -3351,38 +3351,6 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@mui/base": { - "version": "5.0.0-beta.40", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", - "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@floating-ui/react-dom": "^2.0.8", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.15.14", - "@popperjs/core": "^2.11.8", - "clsx": "^2.1.0", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@mui/core-downloads-tracker": { "version": "6.1.6", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz", @@ -3460,6 +3428,38 @@ } } }, + "node_modules/@mui/lab/node_modules/@mui/base": { + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@popperjs/core": "^2.11.8", + "clsx": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/material": { "version": "6.1.6", "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz", @@ -3641,13 +3641,13 @@ } }, "node_modules/@mui/private-theming": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz", - "integrity": "sha512-rAk+Rh8Clg7Cd7shZhyt2HGTTE5wYKNSJ5sspf28Fqm/PZ69Er9o6KX25g03/FG2dfpg5GCwZh/xOojiTfm3hw==", + "version": "5.16.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.14.tgz", + "integrity": "sha512-12t7NKzvYi819IO5IapW2BcR33wP/KAVrU8d7gLhGHoAmhDxyXlRoKiRij3TOD8+uzk0B6R9wHUNKi4baJcRNg==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.16.6", + "@mui/utils": "^5.16.14", "prop-types": "^15.8.1" }, "engines": { @@ -3658,8 +3658,8 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -3668,13 +3668,13 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.6.tgz", - "integrity": "sha512-zaThmS67ZmtHSWToTiHslbI8jwrmITcN93LQaR2lKArbvS7Z3iLkwRoiikNWutx9MBs8Q6okKvbZq1RQYB3v7g==", + "version": "5.16.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.14.tgz", + "integrity": "sha512-UAiMPZABZ7p8mUW4akDV6O7N3+4DatStpXMZwPlt+H/dA0lt67qawN021MNND+4QTpjaiMYxbhKZeQcyWCbuKw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@emotion/cache": "^11.11.0", + "@emotion/cache": "^11.13.5", "csstype": "^3.1.3", "prop-types": "^15.8.1" }, @@ -3688,7 +3688,7 @@ "peerDependencies": { "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", - "react": "^17.0.0 || ^18.0.0" + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -3700,16 +3700,16 @@ } }, "node_modules/@mui/system": { - "version": "5.16.7", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz", - "integrity": "sha512-Jncvs/r/d/itkxh7O7opOunTqbbSSzMTHzZkNLM+FjAOg+cYAZHrPDlYe1ZGKUYORwwb2XexlWnpZp0kZ4AHuA==", + "version": "5.16.14", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.14.tgz", + "integrity": "sha512-KBxMwCb8mSIABnKvoGbvM33XHyT+sN0BzEBG+rsSc0lLQGzs7127KWkCA6/H8h6LZ00XpBEME5MAj8mZLiQ1tw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.16.6", - "@mui/styled-engine": "^5.16.6", + "@mui/private-theming": "^5.16.14", + "@mui/styled-engine": "^5.16.14", "@mui/types": "^7.2.15", - "@mui/utils": "^5.16.6", + "@mui/utils": "^5.16.14", "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -3724,8 +3724,8 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -3754,9 +3754,9 @@ } }, "node_modules/@mui/utils": { - "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz", - "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==", + "version": "5.16.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.14.tgz", + "integrity": "sha512-wn1QZkRzSmeXD1IguBVvJJHV3s6rxJrfb6YuC9Kk6Noh9f8Fb54nUs5JRkKm+BOerRhj5fLg05Dhx/H3Ofb8Mg==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.23.9", @@ -3764,7 +3764,7 @@ "@types/prop-types": "^15.7.12", "clsx": "^2.1.1", "prop-types": "^15.8.1", - "react-is": "^18.3.1" + "react-is": "^19.0.0" }, "engines": { "node": ">=12.0.0" @@ -3774,8 +3774,8 @@ "url": "https://opencollective.com/mui-org" }, "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -3783,6 +3783,12 @@ } } }, + "node_modules/@mui/utils/node_modules/react-is": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz", + "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==", + "license": "MIT" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4735,17 +4741,17 @@ "license": "MIT" }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.19.1.tgz", - "integrity": "sha512-tJzcVyvvb9h/PB96g30MpxACd9IrunT7GF9wfA9/0TJ1LxGOJx1TdPzSbBBnNED7K9Ka8ybJsnEpiXPktolTLg==", + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.20.0.tgz", + "integrity": "sha512-naduuphVw5StFfqp4Gq4WhIBE2gN1GEmMUExpJYknZJdRnc+2gDzB8Z3+5+/Kv33hPQRDGzQO/0opHE72lZZ6A==", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/regexpp": "^4.10.0", - "@typescript-eslint/scope-manager": "8.19.1", - "@typescript-eslint/type-utils": "8.19.1", - "@typescript-eslint/utils": "8.19.1", - "@typescript-eslint/visitor-keys": "8.19.1", + "@typescript-eslint/scope-manager": "8.20.0", + "@typescript-eslint/type-utils": "8.20.0", + "@typescript-eslint/utils": "8.20.0", + "@typescript-eslint/visitor-keys": "8.20.0", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", @@ -4765,16 +4771,16 @@ } }, "node_modules/@typescript-eslint/parser": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.19.1.tgz", - "integrity": "sha512-67gbfv8rAwawjYx3fYArwldTQKoYfezNUT4D5ioWetr/xCrxXxvleo3uuiFuKfejipvq+og7mjz3b0G2bVyUCw==", + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.20.0.tgz", + "integrity": "sha512-gKXG7A5HMyjDIedBi6bUrDcun8GIjnI8qOwVLiY3rx6T/sHP/19XLJOnIq/FgQvWLHja5JN/LSE7eklNBr612g==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/scope-manager": "8.19.1", - "@typescript-eslint/types": "8.19.1", - "@typescript-eslint/typescript-estree": "8.19.1", - "@typescript-eslint/visitor-keys": "8.19.1", + "@typescript-eslint/scope-manager": "8.20.0", + "@typescript-eslint/types": "8.20.0", + "@typescript-eslint/typescript-estree": "8.20.0", + "@typescript-eslint/visitor-keys": "8.20.0", "debug": "^4.3.4" }, "engines": { @@ -4790,14 +4796,14 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.19.1.tgz", - "integrity": "sha512-60L9KIuN/xgmsINzonOcMDSB8p82h95hoBfSBtXuO4jlR1R9L1xSkmVZKgCPVfavDlXihh4ARNjXhh1gGnLC7Q==", + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.20.0.tgz", + "integrity": "sha512-J7+VkpeGzhOt3FeG1+SzhiMj9NzGD/M6KoGn9f4dbz3YzK9hvbhVTmLj/HiTp9DazIzJ8B4XcM80LrR9Dm1rJw==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/types": "8.19.1", - "@typescript-eslint/visitor-keys": "8.19.1" + "@typescript-eslint/types": "8.20.0", + "@typescript-eslint/visitor-keys": "8.20.0" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -4808,14 +4814,14 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.19.1.tgz", - "integrity": "sha512-Rp7k9lhDKBMRJB/nM9Ksp1zs4796wVNyihG9/TU9R6KCJDNkQbc2EOKjrBtLYh3396ZdpXLtr/MkaSEmNMtykw==", + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.20.0.tgz", + "integrity": "sha512-bPC+j71GGvA7rVNAHAtOjbVXbLN5PkwqMvy1cwGeaxUoRQXVuKCebRoLzm+IPW/NtFFpstn1ummSIasD5t60GA==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/typescript-estree": "8.19.1", - "@typescript-eslint/utils": "8.19.1", + "@typescript-eslint/typescript-estree": "8.20.0", + "@typescript-eslint/utils": "8.20.0", "debug": "^4.3.4", "ts-api-utils": "^2.0.0" }, @@ -4832,9 +4838,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.19.1.tgz", - "integrity": "sha512-JBVHMLj7B1K1v1051ZaMMgLW4Q/jre5qGK0Ew6UgXz1Rqh+/xPzV1aW581OM00X6iOfyr1be+QyW8LOUf19BbA==", + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.20.0.tgz", + "integrity": "sha512-cqaMiY72CkP+2xZRrFt3ExRBu0WmVitN/rYPZErA80mHjHx/Svgp8yfbzkJmDoQ/whcytOPO9/IZXnOc+wigRA==", "dev": true, "license": "MIT", "engines": { @@ -4846,14 +4852,14 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.19.1.tgz", - "integrity": "sha512-jk/TZwSMJlxlNnqhy0Eod1PNEvCkpY6MXOXE/WLlblZ6ibb32i2We4uByoKPv1d0OD2xebDv4hbs3fm11SMw8Q==", + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.20.0.tgz", + "integrity": "sha512-Y7ncuy78bJqHI35NwzWol8E0X7XkRVS4K4P4TCyzWkOJih5NDvtoRDW4Ba9YJJoB2igm9yXDdYI/+fkiiAxPzA==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/types": "8.19.1", - "@typescript-eslint/visitor-keys": "8.19.1", + "@typescript-eslint/types": "8.20.0", + "@typescript-eslint/visitor-keys": "8.20.0", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", @@ -4886,16 +4892,16 @@ } }, "node_modules/@typescript-eslint/utils": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.19.1.tgz", - "integrity": "sha512-IxG5gLO0Ne+KaUc8iW1A+XuKLd63o4wlbI1Zp692n1xojCl/THvgIKXJXBZixTh5dd5+yTJ/VXH7GJaaw21qXA==", + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.20.0.tgz", + "integrity": "sha512-dq70RUw6UK9ei7vxc4KQtBRk7qkHZv447OUZ6RPQMQl71I3NZxQJX/f32Smr+iqWrB02pHKn2yAdHBb0KNrRMA==", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", - "@typescript-eslint/scope-manager": "8.19.1", - "@typescript-eslint/types": "8.19.1", - "@typescript-eslint/typescript-estree": "8.19.1" + "@typescript-eslint/scope-manager": "8.20.0", + "@typescript-eslint/types": "8.20.0", + "@typescript-eslint/typescript-estree": "8.20.0" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" @@ -4910,13 +4916,13 @@ } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.19.1.tgz", - "integrity": "sha512-fzmjU8CHK853V/avYZAvuVut3ZTfwN5YtMaoi+X9Y9MA9keaWNHC3zEQ9zvyX/7Hj+5JkNyK1l7TOR2hevHB6Q==", + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.20.0.tgz", + "integrity": "sha512-v/BpkeeYAsPkKCkR8BDwcno0llhzWVqPOamQrAEMdpZav2Y9OVjd9dwJyBLJWwf335B5DmlifECIkZRJCaGaHA==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/types": "8.19.1", + "@typescript-eslint/types": "8.20.0", "eslint-visitor-keys": "^4.2.0" }, "engines": { @@ -6478,9 +6484,9 @@ } }, "node_modules/es-object-atoms": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz", - "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", "dev": true, "license": "MIT", "dependencies": { @@ -6687,9 +6693,9 @@ } }, "node_modules/eslint-plugin-react": { - "version": "7.37.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.3.tgz", - "integrity": "sha512-DomWuTQPFYZwF/7c9W2fkKkStqZmBd3uugfqBYLdkZ3Hii23WzZuOLUskGxB8qkSKqftxEeGL1TB2kMhrce0jA==", + "version": "7.37.4", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz", + "integrity": "sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ==", "dev": true, "license": "MIT", "dependencies": { @@ -10320,9 +10326,9 @@ "license": "MIT" }, "node_modules/nanoid": { - "version": "5.0.9", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.9.tgz", - "integrity": "sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==", + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.8.tgz", + "integrity": "sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==", "funding": [ { "type": "github", @@ -12319,15 +12325,15 @@ } }, "node_modules/typescript-eslint": { - "version": "8.19.1", - "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.19.1.tgz", - "integrity": "sha512-LKPUQpdEMVOeKluHi8md7rwLcoXHhwvWp3x+sJkMuq3gGm9yaYJtPo8sRZSblMFJ5pcOGCAak/scKf1mvZDlQw==", + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.20.0.tgz", + "integrity": "sha512-Kxz2QRFsgbWj6Xcftlw3Dd154b3cEPFqQC+qMZrMypSijPd4UanKKvoKDrJ4o8AIfZFKAF+7sMaEIR8mTElozA==", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/eslint-plugin": "8.19.1", - "@typescript-eslint/parser": "8.19.1", - "@typescript-eslint/utils": "8.19.1" + "@typescript-eslint/eslint-plugin": "8.20.0", + "@typescript-eslint/parser": "8.20.0", + "@typescript-eslint/utils": "8.20.0" }, "engines": { "node": "^18.18.0 || ^20.9.0 || >=21.1.0" diff --git a/client/package.json b/client/package.json index 4513be3..052063d 100644 --- a/client/package.json +++ b/client/package.json @@ -69,4 +69,4 @@ "vite": "^5.4.5", "vite-plugin-environment": "^1.1.3" } -} +} \ No newline at end of file diff --git a/client/src/__tests__/components/ConfirmDialog/ConfirmDialog.test.tsx b/client/src/__tests__/components/ConfirmDialog/ConfirmDialog.test.tsx index e119ca8..539476f 100644 --- a/client/src/__tests__/components/ConfirmDialog/ConfirmDialog.test.tsx +++ b/client/src/__tests__/components/ConfirmDialog/ConfirmDialog.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; -import ConfirmDialog from '../../../components/ConfirmDialog/ConfirmDialog'; +import ConfirmDialog from 'src/components/ConfirmDialog/ConfirmDialog'; describe('ConfirmDialog Component', () => { const mockOnConfirm = jest.fn(); diff --git a/client/src/__tests__/components/Editor/Editor.test.tsx b/client/src/__tests__/components/Editor/Editor.test.tsx index 0a7c9b5..7548aac 100644 --- a/client/src/__tests__/components/Editor/Editor.test.tsx +++ b/client/src/__tests__/components/Editor/Editor.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; -import Editor from '../../../components/Editor/Editor'; +import Editor from 'src/components/Editor/Editor'; describe('Editor Component', () => { const mockOnEditorChange = jest.fn(); diff --git a/client/src/__tests__/components/GiftTemplate/GIFTTemplatePreview.test.tsx b/client/src/__tests__/components/GiftTemplate/GIFTTemplatePreview.test.tsx index f4eea86..586c8d1 100644 --- a/client/src/__tests__/components/GiftTemplate/GIFTTemplatePreview.test.tsx +++ b/client/src/__tests__/components/GiftTemplate/GIFTTemplatePreview.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; -import GIFTTemplatePreview from '../../../components/GiftTemplate/GIFTTemplatePreview'; +import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview'; describe('GIFTTemplatePreview Component', () => { test('renders error message when questions contain invalid syntax', () => { diff --git a/client/src/__tests__/components/GiftTemplate/TextType.test.ts b/client/src/__tests__/components/GiftTemplate/TextType.test.ts index ade4211..9909686 100644 --- a/client/src/__tests__/components/GiftTemplate/TextType.test.ts +++ b/client/src/__tests__/components/GiftTemplate/TextType.test.ts @@ -1,7 +1,7 @@ // TextType.test.ts import { TextFormat } from "gift-pegjs"; -import textType from "../../../components/GiftTemplate/templates/TextType"; +import textType from "src/components/GiftTemplate/templates/TextType"; describe('TextType', () => { it('should format text with basic characters correctly', () => { diff --git a/client/src/__tests__/components/GiftTemplate/constants/colors.test.tsx b/client/src/__tests__/components/GiftTemplate/constants/colors.test.tsx index dacd85d..44fa3f4 100644 --- a/client/src/__tests__/components/GiftTemplate/constants/colors.test.tsx +++ b/client/src/__tests__/components/GiftTemplate/constants/colors.test.tsx @@ -1,5 +1,5 @@ //color.test.tsx -import { colors } from "../../../../components/GiftTemplate/constants"; +import { colors } from "src/components/GiftTemplate/constants"; describe('Colors object', () => { test('All colors are defined', () => { diff --git a/client/src/__tests__/components/GiftTemplate/constants/styles.test.tsx b/client/src/__tests__/components/GiftTemplate/constants/styles.test.tsx index 7347b67..0bb5c54 100644 --- a/client/src/__tests__/components/GiftTemplate/constants/styles.test.tsx +++ b/client/src/__tests__/components/GiftTemplate/constants/styles.test.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import '@testing-library/jest-dom'; -import { ParagraphStyle } from '../../../../components/GiftTemplate/constants'; +import { ParagraphStyle } from 'src/components/GiftTemplate/constants'; describe('ParagraphStyle', () => { test('applies styles correctly', () => { diff --git a/client/src/__tests__/components/GiftTemplate/constants/theme.test.tsx b/client/src/__tests__/components/GiftTemplate/constants/theme.test.tsx index 6a3831a..727efc9 100644 --- a/client/src/__tests__/components/GiftTemplate/constants/theme.test.tsx +++ b/client/src/__tests__/components/GiftTemplate/constants/theme.test.tsx @@ -1,6 +1,6 @@ import '@testing-library/jest-dom'; -import { theme } from '../../../../components/GiftTemplate/constants/theme'; -import { colors } from '../../../../components/GiftTemplate/constants/colors'; +import { theme } from 'src/components/GiftTemplate/constants/theme'; +import { colors } from 'src/components/GiftTemplate/constants/colors'; describe('Theme', () => { test('returns correct light color', () => { diff --git a/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx index 36fcfa8..0a9226b 100644 --- a/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx +++ b/client/src/__tests__/components/GiftTemplate/templates/AnswerIcon.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import '@testing-library/jest-dom'; -import AnswerIcon from '../../../../components/GiftTemplate/templates/AnswerIcon'; +import AnswerIcon from 'src/components/GiftTemplate/templates/AnswerIcon'; import DOMPurify from 'dompurify'; describe('AnswerIcon', () => { diff --git a/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx new file mode 100644 index 0000000..53c86c0 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/MultipleChoice.test.tsx @@ -0,0 +1,133 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { MultipleChoice } from 'src/components/GiftTemplate/templates'; +import { TemplateOptions, MultipleChoice as MultipleChoiceType } from 'src/components/GiftTemplate/templates/types'; + +// Mock the nanoid function +jest.mock('nanoid', () => ({ + nanoid: jest.fn(() => 'mocked-id') + })); + +const mockProps: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title', + stem: { format: 'plain' , text: 'Sample Stem'}, + choices: [ + { text: { format: 'plain' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + +const katekMock: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title', + stem: { format: 'plain' , text: '$$\\frac{zzz}{yyy}$$'}, + choices: [ + { text: { format: 'plain' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'plain', text: 'Choice 2' }, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + +const imageMock: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title with Image', + stem: { format: 'plain', text: 'Sample Stem with Image' }, + choices: [ + { text: { format: 'plain', text: 'Choice 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }, + { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain', text: 'Incorrect!' }, weight: 1 }, + { text: { format: 'plain', text: 'Sample Image' }, isCorrect: false, feedback: { format: 'plain', text: 'Image Feedback' }, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' } +}; + +const mockMoodle: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title', + stem: { format: 'moodle' , text: 'Sample Stem'}, + choices: [ + { text: { format: 'moodle' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'plain', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + + +const mockHTML: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title', + stem: { format: 'html' , text: '$$\\frac{zzz}{yyy}$$'}, + choices: [ + { text: { format: 'html' , text: 'Choice 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'html', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain' , text: 'InCorrect!'}, weight: 1 } + ], + globalFeedback: { format: 'html', text: 'Sample Global Feedback' } +}; + +const mockMarkdown: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title with Image', + stem: { format: 'markdown', text: 'Sample Stem with Image' }, + choices: [ + { text: { format: 'markdown', text: 'Choice 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain', text: 'Incorrect!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Sample Image' }, isCorrect: false, feedback: { format: 'plain', text: 'Image Feedback' }, weight: 1 } + ], + globalFeedback: { format: 'markdown', text: 'Sample Global Feedback with Image' } +}; + +const mockMarkdownTwoImages: TemplateOptions & MultipleChoiceType = { + type: 'MC', + hasEmbeddedAnswers: false, + title: 'Sample Title with Image', + stem: { format: 'markdown', text: 'Sample Image' }, + choices: [ + { text: { format: 'markdown', text: 'Choice 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Choice 2' }, isCorrect: false, feedback: { format: 'plain', text: 'Incorrect!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Sample Image' }, isCorrect: false, feedback: { format: 'plain', text: 'Image Feedback' }, weight: 1 } + ], + globalFeedback: { format: 'markdown', text: 'Sample Global Feedback with Image' } +}; + +test('MultipleChoice snapshot test', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with katex', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with image', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with Moodle text format', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with katex, using html text format', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with image using markdown text format', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('MultipleChoice snapshot test with 2 images using markdown text format', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx new file mode 100644 index 0000000..e28f80f --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import Numerical from 'src/components/GiftTemplate/templates/Numerical'; +import { TemplateOptions, Numerical as NumericalType } from 'src/components/GiftTemplate/templates/types'; + +// Mock the nanoid function +jest.mock('nanoid', () => ({ + nanoid: jest.fn(() => 'mocked-id') + })); + +const plainTextMock: TemplateOptions & NumericalType = { + type: 'Numerical', + hasEmbeddedAnswers: false, + title: 'Sample Numerical Title', + stem: { format: 'plain', text: 'Sample Stem' }, + choices: [ + { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'plain', text: 'Correct!' } }, + { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'plain', text: 'Incorrect!' } } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + +const htmlMock: TemplateOptions & NumericalType = { + type: 'Numerical', + hasEmbeddedAnswers: false, + title: 'Sample Numerical Title', + stem: { format: 'html', text: '$$\\frac{zzz}{yyy}$$' }, + choices: [ + { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'html', text: 'Correct!' } }, + { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'html', text: 'Incorrect!' } } + ], + globalFeedback: { format: 'html', text: 'Sample Global Feedback' } +}; + +const moodleMock: TemplateOptions & NumericalType = { + type: 'Numerical', + hasEmbeddedAnswers: false, + title: 'Sample Numerical Title', + stem: { format: 'moodle', text: 'Sample Stem' }, + choices: [ + { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'moodle', text: 'Correct!' } }, + { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'moodle', text: 'Incorrect!' } } + ], + globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' } +}; + +const imageMock: TemplateOptions & NumericalType = { + type: 'Numerical', + hasEmbeddedAnswers: false, + title: 'Sample Numerical Title with Image', + stem: { format: 'plain', text: 'Sample Stem with Image' }, + choices: [ + { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'plain', text: 'Correct!' } }, + { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'plain', text: 'Incorrect!' } }, + { isCorrect: false, weight: 1, text: { type: 'simple', number: 44}, feedback: { format: 'plain', text: 'Sample Image' } } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' } +}; + +test('Numerical snapshot test with plain text', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Numerical snapshot test with html', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Numerical snapshot test with moodle', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Numerical snapshot test with image', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx new file mode 100644 index 0000000..9928099 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import ShortAnswer from 'src/components/GiftTemplate/templates/ShortAnswer'; +import { TemplateOptions, ShortAnswer as ShortAnswerType } from 'src/components/GiftTemplate/templates/types'; + +// Mock the nanoid function +jest.mock('nanoid', () => ({ + nanoid: jest.fn(() => 'mocked-id') + })); + +const plainTextMock: TemplateOptions & ShortAnswerType = { + type: 'Short', + hasEmbeddedAnswers: false, + title: 'Sample Short Answer Title', + stem: { format: 'plain', text: 'Sample Stem' }, + choices: [ + { text: { format: 'plain' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'plain' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + +const katexMock: TemplateOptions & ShortAnswerType = { + type: 'Short', + hasEmbeddedAnswers: false, + title: 'Sample Short Answer Title', + stem: { format: 'html', text: '$$\\frac{zzz}{yyy}$$' }, + choices: [ + { text: { format: 'html' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'html' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'html' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'moodle' , text: 'Correct!'}, weight: 1 } + ], + globalFeedback: { format: 'html', text: 'Sample Global Feedback' } +}; + +const moodleMock: TemplateOptions & ShortAnswerType = { + type: 'Short', + hasEmbeddedAnswers: false, + title: 'Sample Short Answer Title', + stem: { format: 'moodle', text: 'Sample Stem' }, + choices: [ + { text: { format: 'moodle' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'moodle' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 } + ], + globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' } +}; + +const imageMock: TemplateOptions & ShortAnswerType = { + type: 'Short', + hasEmbeddedAnswers: false, + title: 'Sample Short Answer Title with Image', + stem: { format: 'markdown', text: 'Sample Stem with Image' }, + choices: [ + { text: { format: 'markdown', text: 'Answer 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Answer 2' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Sample Image' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' } +}; + + +test('ShortAnswer snapshot test with plain text', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('ShortAnswer snapshot test with katex', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('ShortAnswer snapshot test with moodle', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('ShortAnswer snapshot test with image', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx new file mode 100644 index 0000000..bbb717e --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import TrueFalse from 'src/components/GiftTemplate/templates'; +import { TemplateOptions, TrueFalse as TrueFalseType } from 'src/components/GiftTemplate/templates/types'; + +// Mock the nanoid function +jest.mock('nanoid', () => ({ + nanoid: jest.fn(() => 'mocked-id') + })); + +const plainTextMock: TemplateOptions & TrueFalseType = { + type: 'TF', + hasEmbeddedAnswers: false, + title: 'Sample True/False Title', + stem: { format: 'plain', text: 'Sample Stem' }, + isTrue: true, + trueFeedback: { format: 'plain', text: 'Correct!' }, + falseFeedback: { format: 'plain', text: 'Incorrect!' }, + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + +const katexMock: TemplateOptions & TrueFalseType = { + type: 'TF', + hasEmbeddedAnswers: false, + title: 'Sample True/False Title', + stem: { format: 'html', text: '$$\\frac{zzz}{yyy}$$' }, + isTrue: true, + trueFeedback: { format: 'moodle', text: 'Correct!' }, + falseFeedback: { format: 'html', text: 'Incorrect!' }, + globalFeedback: { format: 'markdown', text: 'Sample Global Feedback' } +}; + +const moodleMock: TemplateOptions & TrueFalseType = { + type: 'TF', + hasEmbeddedAnswers: false, + title: 'Sample True/False Title', + stem: { format: 'moodle', text: 'Sample Stem' }, + isTrue: true, + trueFeedback: { format: 'moodle', text: 'Correct!' }, + falseFeedback: { format: 'moodle', text: 'Incorrect!' }, + globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' } +}; + +const imageMock: TemplateOptions & TrueFalseType = { + type: 'TF', + hasEmbeddedAnswers: false, + title: 'Sample Short Answer Title with Image', + stem: { format: 'plain', text: 'Sample Stem with Image' }, + trueFeedback: { format: 'moodle', text: 'Correct!' }, + isTrue: true, + falseFeedback: { format: 'moodle', text: 'Incorrect!' }, + globalFeedback: { format: 'plain', text: 'Sample Image' } +}; + +test('TrueFalse snapshot test with plain text', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('TrueFalse snapshot test with katex', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('TrueFalse snapshot test with moodle', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('TrueFalse snapshot test with image', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap new file mode 100644 index 0000000..651b5bc --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap @@ -0,0 +1,1019 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MultipleChoice snapshot test 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 1 + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 2 + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">InCorrect!</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with 2 images using markdown text format 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><img src="https://via.placeholder.com/150" alt = "Sample Image"/></p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 1 + + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 2 + + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + <img src="https://via.placeholder.com/150" alt="Sample Image" /> + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Image Feedback</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback with Image +</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with Moodle text format 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 1 + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 2 + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">InCorrect!</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with image 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem with Image</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 1 + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 2 + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + <img src="https://via.placeholder.com/150" alt="Sample Image" /> + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Image Feedback</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback with Image</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with image using markdown text format 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem with Image +</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 1 + + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 2 + + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + <img src="https://via.placeholder.com/150" alt="Sample Image" /> + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Image Feedback</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback with Image +</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with katex 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 1 + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 2 + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`MultipleChoice snapshot test with katex, using html text format 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Choix multiple</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 1 + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + <span style=" + box-shadow: 0px 1px 1px hsl(0, 0%, 74%); + border-radius: 3px; + padding-left: 0.2rem; + padding-right: 0.2rem; + padding-top: 0.05rem; + padding-bottom: 0.05rem; + + color: hsl(35, 51%, 33%); + background-color: hsl(36, 84%, 93%); + ">1%</span> + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Choice 2 + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">InCorrect!</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap new file mode 100644 index 0000000..20ae2b9 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap @@ -0,0 +1,301 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Numerical snapshot test with html 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Numerical Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Numérique</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="42, 43"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`Numerical snapshot test with image 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Numerical Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Numérique</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem with Image</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="42, 43, 44"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback with Image</p> + </div></section> + +`; + +exports[`Numerical snapshot test with moodle 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Numerical Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Numérique</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="42, 43"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`Numerical snapshot test with plain text 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Numerical Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Numérique</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="42, 43"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap new file mode 100644 index 0000000..6204be4 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap @@ -0,0 +1,304 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ShortAnswer snapshot test with image 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Short Answer Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Réponse courte</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem with Image +</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="Answer 1 +, Answer 2 +, <img src="https://via.placeholder.com/150" alt="Sample Image" />"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback with Image</p> + </div></section> + +`; + +exports[`ShortAnswer snapshot test with katex 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Short Answer Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Réponse courte</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="Answer 1, Answer 2"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`ShortAnswer snapshot test with moodle 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Short Answer Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Réponse courte</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="Answer 1, Answer 2"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`ShortAnswer snapshot test with plain text 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Short Answer Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Réponse courte</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="Answer 1, Answer 2"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap new file mode 100644 index 0000000..c010906 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap @@ -0,0 +1,438 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TrueFalse snapshot test with image 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Short Answer Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Vrai/Faux</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem with Image</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Vrai + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Faux + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p><img src="https://via.placeholder.com/150" alt="Sample Image" /></p> + </div></section> + +`; + +exports[`TrueFalse snapshot test with katex 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample True/False Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Vrai/Faux</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Vrai + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Faux + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback +</p> + </div></section> + +`; + +exports[`TrueFalse snapshot test with moodle 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample True/False Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Vrai/Faux</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Vrai + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Faux + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`TrueFalse snapshot test with plain text 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample True/False Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Vrai/Faux</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Vrai + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idmocked-id" name="idmocked-id"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idmocked-id"> + Faux + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; diff --git a/client/src/__tests__/components/ImportModal/ImportModal.test.tsx b/client/src/__tests__/components/ImportModal/ImportModal.test.tsx index 400b586..f52bcd6 100644 --- a/client/src/__tests__/components/ImportModal/ImportModal.test.tsx +++ b/client/src/__tests__/components/ImportModal/ImportModal.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; -import DragAndDrop from '../../../components/ImportModal/ImportModal'; +import DragAndDrop from 'src/components/ImportModal/ImportModal'; describe('DragAndDrop Component', () => { diff --git a/client/src/__tests__/components/LaunchQuizDialog/LaunchQuizDialog.test.tsx b/client/src/__tests__/components/LaunchQuizDialog/LaunchQuizDialog.test.tsx index 9709cd0..cd78997 100644 --- a/client/src/__tests__/components/LaunchQuizDialog/LaunchQuizDialog.test.tsx +++ b/client/src/__tests__/components/LaunchQuizDialog/LaunchQuizDialog.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; -import LaunchQuizDialog from '../../../components/LaunchQuizDialog/LaunchQuizDialog'; +import LaunchQuizDialog from 'src/components/LaunchQuizDialog/LaunchQuizDialog'; // Mock the functions passed as props const mockHandleOnClose = jest.fn(); diff --git a/client/src/__tests__/components/LoadingCircle/LoadingCircle.test.tsx b/client/src/__tests__/components/LoadingCircle/LoadingCircle.test.tsx index 11c9ee5..a535b98 100644 --- a/client/src/__tests__/components/LoadingCircle/LoadingCircle.test.tsx +++ b/client/src/__tests__/components/LoadingCircle/LoadingCircle.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; -import LoadingCircle from '../../../components/LoadingCircle/LoadingCircle'; +import LoadingCircle from 'src/components/LoadingCircle/LoadingCircle'; describe('LoadingCircle', () => { it('displays the provided text correctly', () => { diff --git a/client/src/__tests__/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.test.tsx b/client/src/__tests__/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.test.tsx index 573bcae..784ea81 100644 --- a/client/src/__tests__/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.test.tsx +++ b/client/src/__tests__/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; -import MultipleChoiceQuestion from '../../../../components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion'; +import MultipleChoiceQuestion from 'src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion'; import { act } from 'react'; import { MemoryRouter } from 'react-router-dom'; diff --git a/client/src/__tests__/components/Questions/NumericalQuestion/NumericalQuestion.test.tsx b/client/src/__tests__/components/Questions/NumericalQuestion/NumericalQuestion.test.tsx index 5dbb5e7..e307ed8 100644 --- a/client/src/__tests__/components/Questions/NumericalQuestion/NumericalQuestion.test.tsx +++ b/client/src/__tests__/components/Questions/NumericalQuestion/NumericalQuestion.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; -import NumericalQuestion from '../../../../components/Questions/NumericalQuestion/NumericalQuestion'; +import NumericalQuestion from 'src/components/Questions/NumericalQuestion/NumericalQuestion'; describe('NumericalQuestion Component', () => { const mockHandleSubmitAnswer = jest.fn(); diff --git a/client/src/__tests__/components/Questions/Question.test.tsx b/client/src/__tests__/components/Questions/Question.test.tsx index c92606a..cd04c8a 100644 --- a/client/src/__tests__/components/Questions/Question.test.tsx +++ b/client/src/__tests__/components/Questions/Question.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; -import Questions from '../../../components/Questions/Question'; +import Questions from 'src/components/Questions/Question'; import { GIFTQuestion } from 'gift-pegjs'; // diff --git a/client/src/__tests__/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.test.tsx b/client/src/__tests__/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.test.tsx index bb45604..351f732 100644 --- a/client/src/__tests__/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.test.tsx +++ b/client/src/__tests__/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; -import ShortAnswerQuestion from '../../../../components/Questions/ShortAnswerQuestion/ShortAnswerQuestion'; +import ShortAnswerQuestion from 'src/components/Questions/ShortAnswerQuestion/ShortAnswerQuestion'; describe('ShortAnswerQuestion Component', () => { const mockHandleSubmitAnswer = jest.fn(); diff --git a/client/src/__tests__/components/Questions/TrueFalseQuestion/TrueFalseQuestion.test.tsx b/client/src/__tests__/components/Questions/TrueFalseQuestion/TrueFalseQuestion.test.tsx index afb015b..2a6ad77 100644 --- a/client/src/__tests__/components/Questions/TrueFalseQuestion/TrueFalseQuestion.test.tsx +++ b/client/src/__tests__/components/Questions/TrueFalseQuestion/TrueFalseQuestion.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, fireEvent, screen, act } from '@testing-library/react'; import '@testing-library/jest-dom'; -import TrueFalseQuestion from '../../../../components/Questions/TrueFalseQuestion/TrueFalseQuestion'; +import TrueFalseQuestion from 'src/components/Questions/TrueFalseQuestion/TrueFalseQuestion'; import { MemoryRouter } from 'react-router-dom'; describe('TrueFalseQuestion Component', () => { diff --git a/client/src/__tests__/components/ReturnButton/ReturnButton.test.tsx b/client/src/__tests__/components/ReturnButton/ReturnButton.test.tsx index d2861a9..8f8ef99 100644 --- a/client/src/__tests__/components/ReturnButton/ReturnButton.test.tsx +++ b/client/src/__tests__/components/ReturnButton/ReturnButton.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; -import ReturnButton from '../../../components/ReturnButton/ReturnButton'; +import ReturnButton from 'src/components/ReturnButton/ReturnButton'; import { useNavigate } from 'react-router-dom'; jest.mock('react-router-dom', () => ({ diff --git a/client/src/__tests__/components/StudentWaitPage/StudentWaitPage.test.tsx b/client/src/__tests__/components/StudentWaitPage/StudentWaitPage.test.tsx index 3e171c3..a52061a 100644 --- a/client/src/__tests__/components/StudentWaitPage/StudentWaitPage.test.tsx +++ b/client/src/__tests__/components/StudentWaitPage/StudentWaitPage.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; -import StudentWaitPage from '../../../components/StudentWaitPage/StudentWaitPage'; +import StudentWaitPage from 'src/components/StudentWaitPage/StudentWaitPage'; import { StudentType, Answer } from '../../../Types/StudentType'; describe('StudentWaitPage Component', () => { diff --git a/client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx b/client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx index fa6475f..379cf5e 100644 --- a/client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx +++ b/client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx @@ -4,7 +4,7 @@ import '@testing-library/jest-dom'; import { parse } from 'gift-pegjs'; import { MemoryRouter } from 'react-router-dom'; import { QuestionType } from '../../../../Types/QuestionType'; -import StudentModeQuiz from '../../../../components/StudentModeQuiz/StudentModeQuiz'; +import StudentModeQuiz from 'src/components/StudentModeQuiz/StudentModeQuiz'; const mockGiftQuestions = parse( `::Sample Question 1:: Sample Question 1 {=Option A ~Option B} diff --git a/client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx b/client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx index 1524e2e..2339a70 100644 --- a/client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx +++ b/client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx @@ -5,7 +5,7 @@ import { screen } from '@testing-library/dom'; import '@testing-library/jest-dom'; import { parse } from 'gift-pegjs'; -import TeacherModeQuiz from '../../../../components/TeacherModeQuiz/TeacherModeQuiz'; +import TeacherModeQuiz from 'src/components/TeacherModeQuiz/TeacherModeQuiz'; import { MemoryRouter } from 'react-router-dom'; // import { mock } from 'node:test'; diff --git a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx index 418405f..6b8db94 100644 --- a/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx +++ b/client/src/components/StudentModeQuiz/StudentModeQuiz.tsx @@ -8,7 +8,7 @@ import { QuestionType } from '../../Types/QuestionType'; import { Button } from '@mui/material'; import QuestionNavigation from '../QuestionNavigation/QuestionNavigation'; import { ChevronLeft, ChevronRight } from '@mui/icons-material'; -import DisconnectButton from '../../components/DisconnectButton/DisconnectButton'; +import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton'; interface StudentModeQuizProps { questions: QuestionType[]; diff --git a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx index 82f12a6..1afab71 100644 --- a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx +++ b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx @@ -6,7 +6,7 @@ import QuestionComponent from '../Questions/Question'; import '../../pages/Student/JoinRoom/joinRoom.css'; import { QuestionType } from '../../Types/QuestionType'; // import { QuestionService } from '../../services/QuestionService'; -import DisconnectButton from '../../components/DisconnectButton/DisconnectButton'; +import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton'; import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material'; interface TeacherModeQuizProps { diff --git a/client/src/pages/Student/JoinRoom/JoinRoom.tsx b/client/src/pages/Student/JoinRoom/JoinRoom.tsx index 040f22e..f0ac8d7 100644 --- a/client/src/pages/Student/JoinRoom/JoinRoom.tsx +++ b/client/src/pages/Student/JoinRoom/JoinRoom.tsx @@ -3,17 +3,17 @@ import React, { useEffect, useState } from 'react'; import { Socket } from 'socket.io-client'; import { ENV_VARIABLES } from 'src/constants'; -import StudentModeQuiz from '../../../components/StudentModeQuiz/StudentModeQuiz'; -import TeacherModeQuiz from '../../../components/TeacherModeQuiz/TeacherModeQuiz'; +import StudentModeQuiz from 'src/components/StudentModeQuiz/StudentModeQuiz'; +import TeacherModeQuiz from 'src/components/TeacherModeQuiz/TeacherModeQuiz'; import webSocketService, { AnswerSubmissionToBackendType } from '../../../services/WebsocketService'; -import DisconnectButton from '../../../components/DisconnectButton/DisconnectButton'; +import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton'; import './joinRoom.css'; import { QuestionType } from '../../../Types/QuestionType'; import { TextField } from '@mui/material'; import LoadingButton from '@mui/lab/LoadingButton'; -import LoginContainer from '../../../components/LoginContainer/LoginContainer' +import LoginContainer from 'src/components/LoginContainer/LoginContainer' const JoinRoom: React.FC = () => { const [roomName, setRoomName] = useState(''); diff --git a/client/src/pages/Teacher/Dashboard/Dashboard.tsx b/client/src/pages/Teacher/Dashboard/Dashboard.tsx index 4b9583a..be9574d 100644 --- a/client/src/pages/Teacher/Dashboard/Dashboard.tsx +++ b/client/src/pages/Teacher/Dashboard/Dashboard.tsx @@ -3,14 +3,14 @@ import { useNavigate } from 'react-router-dom'; import React, { useState, useEffect, useMemo } from 'react'; import { parse } from 'gift-pegjs'; -import Template from '../../../components/GiftTemplate/templates'; +import Template from 'src/components/GiftTemplate/templates'; import { QuizType } from '../../../Types/QuizType'; import { FolderType } from '../../../Types/FolderType'; // import { QuestionService } from '../../../services/QuestionService'; import ApiService from '../../../services/ApiService'; import './dashboard.css'; -import ImportModal from '../../../components/ImportModal/ImportModal'; +import ImportModal from 'src/components/ImportModal/ImportModal'; //import axios from 'axios'; import { diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx index 88311fa..8bd6003 100644 --- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx +++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx @@ -4,15 +4,15 @@ import { useParams, useNavigate } from 'react-router-dom'; import { FolderType } from '../../../Types/FolderType'; -import Editor from '../../../components/Editor/Editor'; -import GiftCheatSheet from '../../../components/GIFTCheatSheet/GiftCheatSheet'; -import GIFTTemplatePreview from '../../../components/GiftTemplate/GIFTTemplatePreview'; +import Editor from 'src/components/Editor/Editor'; +import GiftCheatSheet from 'src/components/GIFTCheatSheet/GiftCheatSheet'; +import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview'; import { QuizType } from '../../../Types/QuizType'; import './editorQuiz.css'; import { Button, TextField, NativeSelect, Divider, Dialog, DialogTitle, DialogActions, DialogContent } from '@mui/material'; -import ReturnButton from '../../../components/ReturnButton/ReturnButton'; +import ReturnButton from 'src/components/ReturnButton/ReturnButton'; import ApiService from '../../../services/ApiService'; import { escapeForGIFT } from '../../../utils/giftUtils'; diff --git a/client/src/pages/Teacher/Login/Login.tsx b/client/src/pages/Teacher/Login/Login.tsx index 8e914b8..7c82a24 100644 --- a/client/src/pages/Teacher/Login/Login.tsx +++ b/client/src/pages/Teacher/Login/Login.tsx @@ -7,7 +7,7 @@ import './Login.css'; import { TextField } from '@mui/material'; import LoadingButton from '@mui/lab/LoadingButton'; -import LoginContainer from '../../../components/LoginContainer/LoginContainer' +import LoginContainer from 'src/components/LoginContainer/LoginContainer' import ApiService from '../../../services/ApiService'; const Login: React.FC = () => { diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index 73ac6e0..30add4e 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -4,7 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom'; import { Socket } from 'socket.io-client'; import { GIFTQuestion, parse } from 'gift-pegjs'; import { QuestionType } from '../../../Types/QuestionType'; -import LiveResultsComponent from '../../../components/LiveResults/LiveResults'; +import LiveResultsComponent from 'src/components/LiveResults/LiveResults'; // import { QuestionService } from '../../../services/QuestionService'; import webSocketService, { AnswerReceptionFromBackendType } from '../../../services/WebsocketService'; import { QuizType } from '../../../Types/QuizType'; @@ -13,12 +13,12 @@ import './manageRoom.css'; import { ENV_VARIABLES } from 'src/constants'; import { StudentType, Answer } from '../../../Types/StudentType'; import { Button } from '@mui/material'; -import LoadingCircle from '../../../components/LoadingCircle/LoadingCircle'; +import LoadingCircle from 'src/components/LoadingCircle/LoadingCircle'; import { Refresh, Error } from '@mui/icons-material'; -import StudentWaitPage from '../../../components/StudentWaitPage/StudentWaitPage'; -import DisconnectButton from '../../../components/DisconnectButton/DisconnectButton'; -import QuestionNavigation from '../../../components/QuestionNavigation/QuestionNavigation'; -import Question from '../../../components/Questions/Question'; +import StudentWaitPage from 'src/components/StudentWaitPage/StudentWaitPage'; +import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton'; +import QuestionNavigation from 'src/components/QuestionNavigation/QuestionNavigation'; +import Question from 'src/components/Questions/Question'; import ApiService from '../../../services/ApiService'; const ManageRoom: React.FC = () => { diff --git a/client/src/pages/Teacher/Register/Register.tsx b/client/src/pages/Teacher/Register/Register.tsx index 76a683c..e09b316 100644 --- a/client/src/pages/Teacher/Register/Register.tsx +++ b/client/src/pages/Teacher/Register/Register.tsx @@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react'; import { TextField } from '@mui/material'; import LoadingButton from '@mui/lab/LoadingButton'; -import LoginContainer from '../../../components/LoginContainer/LoginContainer' +import LoginContainer from 'src/components/LoginContainer/LoginContainer' import ApiService from '../../../services/ApiService'; const Register: React.FC = () => { diff --git a/client/src/pages/Teacher/ResetPassword/ResetPassword.tsx b/client/src/pages/Teacher/ResetPassword/ResetPassword.tsx index 27fe796..c5d9f6e 100644 --- a/client/src/pages/Teacher/ResetPassword/ResetPassword.tsx +++ b/client/src/pages/Teacher/ResetPassword/ResetPassword.tsx @@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react'; import { TextField } from '@mui/material'; import LoadingButton from '@mui/lab/LoadingButton'; -import LoginContainer from '../../../components/LoginContainer/LoginContainer' +import LoginContainer from 'src/components/LoginContainer/LoginContainer' import ApiService from '../../../services/ApiService'; const ResetPassword: React.FC = () => { diff --git a/client/src/pages/Teacher/Share/Share.tsx b/client/src/pages/Teacher/Share/Share.tsx index d8efcd2..31bb72c 100644 --- a/client/src/pages/Teacher/Share/Share.tsx +++ b/client/src/pages/Teacher/Share/Share.tsx @@ -7,7 +7,7 @@ import { FolderType } from '../../../Types/FolderType'; import './share.css'; import { Button, NativeSelect } from '@mui/material'; -import ReturnButton from '../../../components/ReturnButton/ReturnButton'; +import ReturnButton from 'src/components/ReturnButton/ReturnButton'; import ApiService from '../../../services/ApiService';