Search testing too

src/web/HTMLOperation.mjs

@@ -27,6 +27,7 @@ class HTMLOperation {
         this.manager     = manager;
 
         this.name        = name;
+        this.title       = name;
         this.description = config.description;
         this.infoURL     = config.infoURL;
         this.manualBake  = config.manualBake || false;
@@ -46,7 +47,7 @@ class HTMLOperation {
      * @returns {string}
      */
     toStubHtml(removeIcon) {
-        let html = `<li class='operation' data-opName="${this.name}"`;
+        let html = `<li class='operation' data-opname="${this.name}"`;
 
         if (this.description) {
             const infoLink = this.infoURL ? `<hr>${titleFromWikiLink(this.infoURL)}` : "";
@@ -56,24 +57,25 @@ class HTMLOperation {
                 data-boundary='viewport'`;
         }
 
-        html += ">" + this.name;
+        html += ">" + this.title;
 
-        html += `<span class='float-right'>
+        // Ensure add button only appears in sidebar, not fav edit
+        if (removeIcon) {
+            // Remove button
+            html += "<i class='material-icons remove-icon op-icon'>delete</i>";
+        } else {
+            // Add buttob
+            html += `<span class='float-right'>
                 <button type="button" class="btn btn-primary bmd-btn-icon accessibleUX" data-toggle="tooltip" data-original-title="Add to recipe">
                     <i class='material-icons'>add_box</i>
                 </button>
             </span>`;
-
-        if (removeIcon) {
-            html += "<i class='material-icons remove-icon op-icon'>delete</i>";
         }
 
         html += "</li>";
 
         return html;
     }
-
-
     /**
      * Renders the operation in HTML as a full operation with ingredients.
      *
@@ -109,18 +111,18 @@ class HTMLOperation {
      */
     highlightSearchStrings(nameIdxs, descIdxs) {
         if (nameIdxs.length && typeof nameIdxs[0][0] === "number") {
-            let opName = "",
+            let title = "",
                 pos = 0;
 
             nameIdxs.forEach(idxs => {
                 const [start, length] = idxs;
                 if (typeof start !== "number") return;
-                opName += this.name.slice(pos, start) + "<b>" +
-                    this.name.slice(start, start + length) + "</b>";
+                title += this.title.slice(pos, start) + "<b>" +
+                    this.title.slice(start, start + length) + "</b>";
                 pos = start + length;
             });
-            opName += this.name.slice(pos, this.name.length);
-            this.name = opName;
+            title += this.title.slice(pos, this.title.length);
+            this.title = title;
         }
 
         if (this.description && descIdxs.length && descIdxs[0][0] >= 0) {

src/web/waiters/OperationsWaiter.mjs

@@ -44,7 +44,7 @@ class OperationsWaiter {
             if (ops.length) {
                 selected = this.getSelectedOp(ops);
                 if (selected > -1) {
-                    this.manager.recipe.addOperation(ops[selected].innerHTML);
+                    this.manager.recipe.addOperation($(ops[selected]).data("opname"));
                 }
             }
         }
@@ -216,7 +216,6 @@ class OperationsWaiter {
      * @param {event} e
      */
     operationAdd(e) {
-        log.info("add");
         const li = e.target.parentNode.parentNode.parentNode;
         // get operation name from <li> data
         this.manager.recipe.addOperation($(li).data("opname"));

tests/browser/nightwatch.js

@@ -59,8 +59,10 @@ module.exports = {
     "Accessible user experience": browser => {
         const addOp = "#catFavourites li.operation";
         const recOp = "#rec-list li:nth-child(1)";
+        const searchOp = "#search-results";
         const down = " i.move-down.accessibleUX";
         const remove = " i.remove-icon.accessibleUX";
+        const favCat = "#categories div:nth-child(1)"
 
         // Switch UX on
         browser
@@ -68,8 +70,7 @@ module.exports = {
             .click("#options")
             .waitForElementVisible("#options-modal", 1000)
             .click("#reset-options")
-            .pause(500)
-            // Using label for checkbox click because nightwatch thinks #acessibleUX isn't visible
+            // Using label for checkbox click because nightwatch thinks #accessibleUX isn't visible
             .click('label[for="accessibleUX"]')
             .click("#options-modal .modal-footer button:last-child")
             .waitForElementNotVisible("#options-modal")
@@ -88,6 +89,16 @@ module.exports = {
             .click(recOp + remove)
             .click(recOp + remove)
             .waitForElementNotPresent(recOp);
+
+        // Search for an op
+        browser
+            .useCss()
+            .clearValue("#search")
+            .setValue("#search", "md5")
+            .click(searchOp + " button")
+            .click(recOp + remove)
+            .click(favCat)
+            .expect.element(searchOp).text.to.contain("MD5");
     },
 
     "Recipe can be run": browser => {
@@ -245,16 +256,6 @@ module.exports = {
         browser.click("#clr-recipe");
     },
 
-    "Search": browser => {
-        // Search for an op
-        browser
-            .useCss()
-            .clearValue("#search")
-            .setValue("#search", "md5")
-            .useXpath()
-            .waitForElementVisible("//ul[@id='search-results']//b[text()='MD5']", 1000);
-    },
-
     after: browser => {
         browser.end();
     }