#346 - Cypress upgrade, incl other dependencies

.github/workflows/main.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.13.0]
+        node-version: [16.14.0]
     steps:
       - uses: actions/[email protected]
         with:

cypress.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  projectId: 'fcqzr8',
+  defaultCommandTimeout: 10000,
+  video: true,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:3000',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+})

package.json

@@ -24,19 +24,25 @@
     "report:combined": "npx nyc report --reporter lcov --reporter text --report-dir coverage"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
-    "@sendgrid/mail": "^7.4.2",
-    "autoprefixer": "^10.1.0",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.89",
+    "@mui/material": "^5.8.7",
+    "@mui/styles": "^5.8.7",
+    "@sendgrid/mail": "^7.7.0",
+    "autoprefixer": "^10.4.7",
     "bible-reference-rcl": "1.1.0",
-    "core-js": "^3.8.3",
+    "core-js": "^3.23.3",
     "deep-equal": "^2.0.5",
     "gitea-react-toolkit": "1.11.0",
     "localforage": "^1.9.0",
-    "markdown-translatable": "^2.0.3",
+    "markdown-translatable": "^2.1.1",
     "next": "10.2.0",
-    "postcss": "^8.2.1",
+    "postcss": "^8.4.14",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "regenerator-runtime": "^0.13.7",
@@ -45,40 +51,40 @@
     "single-scripture-rcl": "3.2.0",
     "tailwindcss": "^2.0.4",
     "tc-ui-toolkit": "5.3.3",
-    "translation-helps-rcl": "3.2.0",
+    "translation-helps-rcl": "3.3.2-alpha",
     "use-deep-compare-effect": "^1.3.1",
     "word-aligner": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@cypress/code-coverage": "^3.9.11",
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@cypress/code-coverage": "^3.10.0",
     "@cypress/instrument-cra": "^1.4.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.0.2",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.3.1",
     "babel-plugin-istanbul": "^6.1.1",
     "cross-env": "7.0.3",
-    "cypress": "^8.6.0",
-    "eslint": "^7.16.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-config-react-app": "^6.0.0",
+    "cypress": "^10.4.0",
+    "eslint": "^8.21.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-jsdoc": "^31.4.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.7.0",
+    "eslint-plugin-jsdoc": "^39.3.4",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^5.2.0",
-    "jest": "^27.3.1",
+    "jest": "^28.1.2",
     "nyc": "^15.1.0",
-    "prettier": "^2.2.1",
-    "prop-types": "^15.7.2",
+    "prettier": "^2.7.1",
+    "prop-types": "^15.8.1",
     "start-server-and-test": "^1.14.0"
   },
   "nyc": {

src/components/ResourceCard.js

@@ -13,7 +13,10 @@ import {
 import { useEdit } from 'gitea-react-toolkit'
 import { getResourceErrorMessage } from 'single-scripture-rcl'
 import { getResourceMessage } from '@utils/resources'
-import { RESOURCE_HTTP_CONFIG, SERVER_MAX_WAIT_TIME_RETRY } from '@common/constants'
+import {
+  RESOURCE_HTTP_CONFIG,
+  SERVER_MAX_WAIT_TIME_RETRY,
+} from '@common/constants'
 import generateEditFilePath from '@utils/generateEditFilePath'
 import getSha from '@utils/getSha'
 
@@ -48,7 +51,8 @@ export default function ResourceCard({
 }) {
   const [content, setContent] = useState('')
   const [saved, setSaved] = useState(true)
-  const cardResourceId = (resourceId === 'twl') && (viewMode === 'markdown') ? 'tw' : resourceId
+  const cardResourceId =
+    resourceId === 'twl' && viewMode === 'markdown' ? 'tw' : resourceId
 
   function updateTempContent(c) {
     setContent(c)
@@ -78,12 +82,7 @@ export default function ResourceCard({
   }, [cardResourceId, selectedQuote?.quote, selectedQuote?.occurrence])
 
   const {
-    state: {
-      listRef,
-      contentRef,
-      usingUserBranch,
-      workingResourceBranch,
-    },
+    state: { listRef, contentRef, usingUserBranch, workingResourceBranch },
     actions: { startEdit },
   } = useUserBranch({
     owner,
@@ -126,12 +125,8 @@ export default function ResourceCard({
   })
 
   const {
-    state: {
-      item, headers, filters, fontSize, itemIndex, markdownView,
-    },
-    actions: {
-      setFilters, setFontSize, setItemIndex, setMarkdownView,
-    },
+    state: { item, headers, filters, fontSize, itemIndex, markdownView },
+    actions: { setFilters, setFontSize, setItemIndex, setMarkdownView },
   } = useCardState({
     id,
     items,
@@ -145,7 +140,9 @@ export default function ResourceCard({
   })
 
   const sha = getSha({
-    item, fetchResponse, cardResourceId,
+    item,
+    fetchResponse,
+    cardResourceId,
   })
   const editFilePath = generateEditFilePath({
     item,
@@ -155,10 +152,7 @@ export default function ResourceCard({
     cardResourceId,
   })
 
-  const {
-    isEditing,
-    onSaveEdit,
-  } = useEdit({
+  const { isEditing, onSaveEdit } = useEdit({
     sha,
     owner,
     content,
@@ -186,7 +180,10 @@ export default function ResourceCard({
   useEffect(() => {
     if (updateTaDetails) {
       const {
-        Quote, OrigQuote, Occurrence, SupportReference = null,
+        Quote,
+        OrigQuote,
+        Occurrence,
+        SupportReference = null,
       } = item || {}
       updateTaDetails(SupportReference)
       setQuote({
@@ -200,19 +197,29 @@ export default function ResourceCard({
   useEffect(() => {
     const error = resourceStatus?.[ERROR_STATE]
 
-    if (error) { // if error was found do callback
-      const message = getResourceErrorMessage(resourceStatus) + ` ${owner}/${languageId}/${projectId}/${workingResourceBranch}`
+    if (error) {
+      // if error was found do callback
+      const message =
+        getResourceErrorMessage(resourceStatus) +
+        ` ${owner}/${languageId}/${projectId}/${workingResourceBranch}`
       const isAccessError = resourceStatus[MANIFEST_NOT_LOADED_ERROR]
       onResourceError && onResourceError(message, isAccessError, resourceStatus)
     }
   }, [resourceStatus?.[ERROR_STATE]])
 
-  const message = getResourceMessage(resourceStatus, owner, languageId, resourceId, server, workingResourceBranch)
+  const message = getResourceMessage(
+    resourceStatus,
+    owner,
+    languageId,
+    resourceId,
+    server,
+    workingResourceBranch
+  )
 
   async function handleSaveEdit() {
     // Save edit, if succesful trigger resource reload and set saved to true.
-    const saveEdit = async (branch) => {
-      await onSaveEdit(branch).then((success) => {
+    const saveEdit = async branch => {
+      await onSaveEdit(branch).then(success => {
         if (success) {
           console.info('Reloading resource')
           reloadResource()
@@ -226,8 +233,9 @@ export default function ResourceCard({
 
     // If not using user branch create it then save the edit.
     if (!usingUserBranch) {
-      await startEdit().then((branch) => saveEdit(branch))
-    } else {// Else just save the edit.
+      await startEdit().then(branch => saveEdit(branch))
+    } else {
+      // Else just save the edit.
       await saveEdit()
     }
   }
@@ -280,8 +288,15 @@ export default function ResourceCard({
         cardResourceId={cardResourceId}
         updateTaDetails={updateTaDetails}
         showSaveChangesPrompt={showSaveChangesPrompt}
-        errorMessage={isEditing ? 'Saving Resource...' : message || errorMessage}
-        markdown={(cardResourceId == 'ta' || cardResourceId == 'tw') && content.length > 0 ? content : markdown}// Adding content value to maintain edit changes even when switching between markdown and html views on tA.
+        errorMessage={
+          isEditing ? 'Saving Resource...' : message || errorMessage
+        }
+        markdown={
+          (cardResourceId == 'ta' || cardResourceId == 'tw') &&
+          content.length > 0
+            ? content
+            : markdown
+        } // Adding content value to maintain edit changes even when switching between markdown and html views on tA.
       />
     </Card>
   )
@@ -331,4 +346,4 @@ ResourceCard.propTypes = {
   showSaveChangesPrompt: PropTypes.func,
   /** function to minimize the card (optional) */
   onMinimize: PropTypes.func,
-}
+}