chore: fix cypress tests

v3/cypress/support/e2e.ts

@@ -22,6 +22,9 @@ import "./commands"
 // add code coverage support
 import "@cypress/code-coverage/support"
 
+// add support for dispatching native events (https://github.com/dmtrKovalenko/cypress-real-events)
+import "cypress-real-events"
+
 // https://github.com/quasarframework/quasar/issues/2233#issuecomment-1006506083
 Cypress.on("uncaught:exception", err => !err.message.includes("ResizeObserver"))
 

v3/cypress/support/elements/table-tile.ts

@@ -387,19 +387,20 @@ export const TableTileElements = {
   },
   addFormulaInModal(attributeName: string, formula: string) {
     cy.get("[data-testid=attr-name-input]").invoke("attr", "value").should("eq", attributeName)
-    cy.get("[data-testid=formula-editor-input]").type(formula, {force:true})
+    cy.get("[data-testid=formula-editor-input] .cm-content").should("be.visible").and("have.focus")
+    cy.get("[data-testid=formula-editor-input] .cm-content").realType(formula)
     cy.get("[data-testid=Apply-button]").click()
     cy.get("[data-testid=attr-name-input]").should("not.exist")
   },
   clearFormulaInModal(attributeName: string) {
     cy.get("[data-testid=attr-name-input]").invoke("attr", "value").should("eq", attributeName)
-    cy.get("[data-testid=formula-editor-input]").type(`{selectAll}{del}`)
+    cy.get("[data-testid=formula-editor-input] .cm-content").type(`{selectAll}{del}`)
     cy.get("[data-testid=Apply-button]").click()
     cy.get("[data-testid=attr-name-input]").should("not.exist")
   },
   checkFormulaInModal(attributeName: string, formula: string) {
     cy.get("[data-testid=attr-name-input]").invoke("attr", "value").should("eq", attributeName)
-    cy.get("[data-testid=formula-editor-input]").should("have.text", formula)
+    cy.get("[data-testid=formula-editor-input] .cm-content").should("have.text", formula)
     cy.get("[data-testid=Cancel-button]").click()
     cy.get("[data-testid=attr-name-input]").should("not.exist")
   },

v3/cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "sourceMap": false,
-    "types": ["cypress"]
+    "types": ["cypress", "cypress-real-events"]
   },
   "include": [
     "./**/*"

v3/package.json

@@ -133,6 +133,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^7.1.2",
     "cypress": "^13.13.3",
+    "cypress-real-events": "^1.13.0",
     "dotenv-webpack": "^8.1.0",
     "eslint": "^8.57.0",
     "eslint-config-react": "^1.1.7",

v3/src/components/common/formula-editor.tsx

@@ -232,11 +232,17 @@ export function FormulaEditor({ formula, setFormula, options: _options }: IProps
     const { attributes = true, constants = true, functions = true, globals = true, specials = true } = options || {}
     const fullOptions: ICompletionOptions = { attributes, constants, functions, globals, specials }
     view.dispatch({ effects: cmUpdateOptionsEffect.of(fullOptions) })
+
+    // https://discuss.codemirror.net/t/how-to-autofocus-in-cm6/2966
+    const focusTimer = setInterval(() => {
+      view.focus()
+      if (view.hasFocus) clearInterval(focusTimer)
+    }, 100)
   }, [dataSet, options])
 
   const handleFormulaChange = (value: string, viewUpdate: ViewUpdate) => setFormula(value)
 
-  return <CodeMirror ref={cmRef} value={formula} data-test-id="formula-editor-input" height="70px"
+  return <CodeMirror ref={cmRef} value={formula} data-testid="formula-editor-input" height="70px"
                      basicSetup={false} extensions={cmExtensionsSetup()}
                      onCreateEditor={handleCreateEditor} onChange={handleFormulaChange} />
 }