From 82e2bd8a5db2211ea7b6977cc7e6c238d1ca83b3 Mon Sep 17 00:00:00 2001
From: Clemens Wolff <clewolff@microsoft.com>
Date: Tue, 21 Jan 2020 12:48:25 -0500
Subject: [PATCH] Enable saving formula by hitting the enter key (#31)

* Split tests into multiple suites

* Enable saving formula by hitting the enter key
---
 mathquill4quill.js             | 13 +++++++++++--
 package.json                   |  2 +-
 tests/editor.test.js           | 21 +++++++++++++++++++++
 tests/enter.test.js            | 24 ++++++++++++++++++++++++
 tests.js => tests/math.test.js |  9 ---------
 5 files changed, 57 insertions(+), 12 deletions(-)
 create mode 100644 tests/editor.test.js
 create mode 100644 tests/enter.test.js
 rename tests.js => tests/math.test.js (73%)

diff --git a/mathquill4quill.js b/mathquill4quill.js
index 3a166cb..3b13e18 100644
--- a/mathquill4quill.js
+++ b/mathquill4quill.js
@@ -47,6 +47,11 @@ window.mathquill4quill = function(dependencies) {
       return quill.container.getElementsByClassName("ql-tooltip")[0];
     }
 
+    function getSaveButton() {
+      const tooltip = getTooltip();
+      return tooltip.getElementsByClassName("ql-action")[0];
+    }
+
     function getLatexInput() {
       const tooltip = getTooltip();
       return tooltip.getElementsByTagName("input")[0];
@@ -74,11 +79,14 @@ window.mathquill4quill = function(dependencies) {
         );
       }
 
-      function syncMathquillToQuill(latexInput) {
+      function syncMathquillToQuill(latexInput, saveButton) {
         const mqField = MathQuill.getInterface(2).MathField(mqInput, {
           handlers: {
             edit() {
               latexInput.value = mqField.latex();
+            },
+            enter() {
+              saveButton.click();
             }
           }
         });
@@ -101,6 +109,7 @@ window.mathquill4quill = function(dependencies) {
           }
 
           const latexInput = getLatexInput();
+          const saveButton = getSaveButton();
 
           mqInput = document.createElement("span");
           applyMathquillInputStyles(mqInput);
@@ -108,7 +117,7 @@ window.mathquill4quill = function(dependencies) {
           latexInputStyle = latexInput.style.all;
           applyLatexInputStyles(latexInput);
 
-          mqField = syncMathquillToQuill(latexInput);
+          mqField = syncMathquillToQuill(latexInput, saveButton);
           autofocusFormulaField(mqField);
 
           insertAfter(mqInput, latexInput);
diff --git a/package.json b/package.json
index 4d263ff..23202b5 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "build.babel": "babel mathquill4quill.js > build/mathquill4quill.js",
     "build.uglify": "uglifyjs --compress --mangle -- build/mathquill4quill.js > build/mathquill4quill.min.js",
     "build": "run-s build.babel build.uglify",
-    "test": "concurrently --kill-others --success first \"serve -n -l 8000\" \"nightwatch -e chrome tests.js\""
+    "test": "concurrently --kill-others --success first \"serve -n -l 8000\" \"nightwatch -e chrome tests\""
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
diff --git a/tests/editor.test.js b/tests/editor.test.js
new file mode 100644
index 0000000..7ddb9fa
--- /dev/null
+++ b/tests/editor.test.js
@@ -0,0 +1,21 @@
+/* eslint-env node */
+
+module.exports = {
+  "Is the formula editor visible": function(browser) {
+    browser
+      .useXpath()
+      .url("http://localhost:8000")
+      .waitForElementVisible('//*[@id="editor"]')
+      .click('//button[@class="ql-formula"]')
+      .waitForElementVisible('//div[@data-mode="formula"]');
+  },
+  "Is the formula editor using mathquill": function(browser) {
+    browser
+      .useXpath()
+      .assert.attributeContains(
+        '//div[@data-mode="formula"]/span',
+        "class",
+        "mq-editable-field mq-math-mode"
+      );
+  }
+};
diff --git a/tests/enter.test.js b/tests/enter.test.js
new file mode 100644
index 0000000..7348671
--- /dev/null
+++ b/tests/enter.test.js
@@ -0,0 +1,24 @@
+/* eslint-env node */
+
+module.exports = {
+  "Is the formula editor visible": function(browser) {
+    browser
+      .useXpath()
+      .url("http://localhost:8000")
+      .waitForElementVisible('//*[@id="editor"]')
+      .click('//button[@class="ql-formula"]')
+      .waitForElementVisible('//div[@data-mode="formula"]');
+  },
+  "Can an equation be inserted": function(browser) {
+    browser
+      .useXpath()
+      .keys(["x", "^", "3", browser.Keys.RETURN])
+      .waitForElementVisible('//span[@class="ql-formula"]')
+      .assert.attributeContains(
+        '//span[@class="ql-formula"]',
+        "data-value",
+        "x^3"
+      )
+      .end();
+  }
+};
diff --git a/tests.js b/tests/math.test.js
similarity index 73%
rename from tests.js
rename to tests/math.test.js
index 8053809..6a7a0e4 100644
--- a/tests.js
+++ b/tests/math.test.js
@@ -9,15 +9,6 @@ module.exports = {
       .click('//button[@class="ql-formula"]')
       .waitForElementVisible('//div[@data-mode="formula"]');
   },
-  "Is the formula editor using mathquill": function(browser) {
-    browser
-      .useXpath()
-      .assert.attributeContains(
-        '//div[@data-mode="formula"]/span',
-        "class",
-        "mq-editable-field mq-math-mode"
-      );
-  },
   "Can an equation be inserted": function(browser) {
     browser
       .useXpath()