chore: fix cypress tests

v3/cypress/e2e/formula/formula-errors.spec.ts

@@ -3,7 +3,7 @@ import { FormulaHelper as fh } from "../../support/helpers/formula-helper"
 context("Formula Engine", () => {
   describe("Errors Formula Tests", () => {
     it("Check invalid functions", () => {
-      fh.visitURL("?sample=four&dashboard")
+      fh.visitURL("?sample=four")
       fh.addNewAttribute()
       fh.renameAttribute("newAttr", "Formula")
       fh.addFormula("Formula", "count(aaa)")
@@ -22,7 +22,8 @@ context("Formula Engine", () => {
         "❌ Undefined function c",
         "❌ Undefined function c"
       ])
-      fh.editFormula("Formula", "count(a")
+      // need to add {del} because CodeMirror auto-matches parentheses
+      fh.editFormula("Formula", "count(a{del}")
       fh.verifyValues("Formula", [
         "❌ Syntax error: 'Parenthesis ) expected (char 8)'",
         "❌ Syntax error: 'Parenthesis ) expected (char 8)'",

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

@@ -4,6 +4,9 @@ type TestValues = Record<string, string[]>
 
 type OptString = string | null | undefined
 
+const isMac = navigator.platform.toLowerCase().includes("mac")
+const metaCtrlKey = isMac ? "Meta" : "Control"
+
 export const TableTileElements = {
   getTableTile(index = 0) {
     return c.getComponentTile("table", index)
@@ -387,19 +390,22 @@ 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").should("be.visible").and("have.focus")
+    cy.get("[data-testid=formula-editor-input] .cm-content").realPress([metaCtrlKey, "A"])
+    cy.get("[data-testid=formula-editor-input] .cm-content").realType("{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} />
 }