Enable saving formula by hitting the enter key (#31)

* Split tests into multiple suites

* Enable saving formula by hitting the enter key

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,14 +109,15 @@ window.mathquill4quill = function(dependencies) {
           }
 
           const latexInput = getLatexInput();
+          const saveButton = getSaveButton();
 
           mqInput = document.createElement("span");
           applyMathquillInputStyles(mqInput);
 
           latexInputStyle = latexInput.style.all;
           applyLatexInputStyles(latexInput);
 
-          mqField = syncMathquillToQuill(latexInput);
+          mqField = syncMathquillToQuill(latexInput, saveButton);
           autofocusFormulaField(mqField);
 
           insertAfter(mqInput, latexInput);

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",

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"
+      );
+  }
+};

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();
+  }
+};

tests.js → 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()