adds a dsl to simplify testing of the select-box

test/javascripts/components/pinned-button-test.js.es6

@@ -21,24 +21,20 @@ componentTest('updating the content refreshes the list', {
   },
 
   test(assert) {
-    andThen(() => {
-      assert.equal(find(".pinned-button").hasClass("is-hidden"), false);
-    });
+    andThen(() => assert.notOk(selectBox().isHidden) );
 
-    click(".select-box-header");
+    expandSelectBox();
 
-    andThen(() => {
-      assert.equal(find(".select-box-row.is-selected .title").html().trim(), "Pinned");
-    });
+    andThen(() => assert.equal(selectBox().selectedRow.el().find(".title").text(), "Pinned") );
 
     andThen(() => {
       this.set("topic.pinned", false);
-      assert.equal(find(".select-box-row.is-selected .title").html().trim(), "Unpinned");
+      assert.equal(selectBox().selectedRow.el().find(".title").text(), "Unpinned");
     });
 
     andThen(() => {
       this.set("topic.deleted", true);
-      assert.equal(find(".pinned-button").hasClass("is-hidden"), true);
+      assert.ok(find(".pinned-button").hasClass("is-hidden"), "it hides the button when topic is deleted");
     });
   }
 });

test/javascripts/components/select-box-test.js.es6

@@ -10,12 +10,12 @@ componentTest('updating the content refreshes the list', {
   },
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
     andThen(() => {
-      assert.equal(find(".select-box-row .text").html().trim(), "robin");
+      assert.equal(selectBox().row(1).text(), "robin");
       this.set("content", [{ id: 1, text: "regis" }]);
-      assert.equal(find(".select-box-row .text").html().trim(), "regis");
+      assert.equal(selectBox().row(1).text(), "regis");
     });
   }
 });
@@ -29,16 +29,16 @@ componentTest('accepts a value by reference', {
   },
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
     andThen(() => {
       assert.equal(
-        find(".select-box-row.is-selected .text").html().trim(), "robin",
+        selectBox().selectedRow.text(), "robin",
         "it highlights the row corresponding to the value"
       );
     });
 
-    click(".select-box-row[title='robin']");
+    selectBoxSelectRow(1);
 
     andThen(() => {
       assert.equal(this.get("value"), 1, "it mutates the value");
@@ -54,21 +54,19 @@ componentTest('select-box can be filtered', {
   },
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
     andThen(() => assert.equal(find(".filter-query").length, 1, "it has a search input"));
 
-    fillIn(".filter-query", "regis");
-    triggerEvent('.filter-query', 'keyup');
+    selectBoxFillInFilter("regis");
 
-    andThen(() => assert.equal(find(".select-box-row").length, 1, "it filters results"));
+    andThen(() => assert.equal(selectBox().rows.length, 1, "it filters results"));
 
-    fillIn(".filter-query", "");
-    triggerEvent('.filter-query', 'keyup');
+    selectBoxFillInFilter("");
 
     andThen(() => {
       assert.equal(
-        find(".select-box-row").length, 2,
+        selectBox().rows.length, 2,
         "it returns to original content when filter is empty"
       );
     });
@@ -79,7 +77,7 @@ componentTest('no default icon', {
   template: '{{select-box}}',
 
   test(assert) {
-    assert.equal(find(".select-box-header .icon").length, 0, "it doesn’t have an icon if not specified");
+    assert.equal(selectBox().header.icon().length, 0, "it doesn’t have an icon if not specified");
   }
 });
 
@@ -87,7 +85,7 @@ componentTest('customisable icon', {
   template: '{{select-box icon="shower"}}',
 
   test(assert) {
-    assert.equal(find(".select-box-header .icon").hasClass("d-icon-shower"), true, "it has a the correct icon");
+    assert.ok(selectBox().header.icon().hasClass("d-icon-shower"), "it has a the correct icon");
   }
 });
 
@@ -95,22 +93,22 @@ componentTest('default search icon', {
   template: '{{select-box filterable=true}}',
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
     andThen(() => {
-      assert.equal(find(".select-box-filter .d-icon-search").length, 1, "it has a the correct icon");
+      assert.ok(selectBox().filter.icon().hasClass("d-icon-search"), "it has a the correct icon");
     });
   }
 });
 
 componentTest('with no search icon', {
-  template: '{{select-box filterable=true searchIcon=null}}',
+  template: '{{select-box filterable=true filterIcon=null}}',
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
     andThen(() => {
-      assert.equal(find(".search-icon").length, 0, "it has no icon");
+      assert.equal(selectBox().filter.icon().length, 0, "it has no icon");
     });
   }
 });
@@ -119,10 +117,10 @@ componentTest('custom search icon', {
   template: '{{select-box filterable=true filterIcon="shower"}}',
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
     andThen(() => {
-      assert.equal(find(".select-box-filter .d-icon-shower").length, 1, "it has a the correct icon");
+      assert.ok(selectBox().filter.icon().hasClass("d-icon-shower"), "it has a the correct icon");
     });
   }
 });
@@ -130,29 +128,22 @@ componentTest('custom search icon', {
 componentTest('not filterable by default', {
   template: '{{select-box}}',
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
-    andThen(() => {
-      assert.equal(find(".select-box-filter").length, 0);
-    });
+    andThen(() => assert.notOk(selectBox().filter.exists()) );
   }
 });
 
-
 componentTest('select-box is expandable', {
   template: '{{select-box}}',
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
-    andThen(() => {
-      assert.equal(find(".select-box").hasClass("is-expanded"), true);
-    });
+    andThen(() => assert.ok(selectBox().isExpanded) );
 
-    click(".select-box-header");
+    collapseSelectBox();
 
-    andThen(() => {
-      assert.equal(find(".select-box").hasClass("is-expanded"), false);
-    });
+    andThen(() => assert.notOk(selectBox().isExpanded) );
   }
 });
 
@@ -165,10 +156,10 @@ componentTest('accepts custom id/text keys', {
   },
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
     andThen(() => {
-      assert.equal(find(".select-box-row.is-selected .text").html().trim(), "robin");
+      assert.equal(selectBox().selectedRow.text(), "robin");
     });
   }
 });
@@ -181,12 +172,12 @@ componentTest('doesn’t render collection content before first expand', {
   },
 
   test(assert) {
-    assert.equal(find(".select-box-body .collection").length, 0);
+    assert.notOk(exists(find(".collection")));
 
-    click(".select-box-header");
+    expandSelectBox();
 
     andThen(() => {
-      assert.equal(find(".select-box-body .collection").length, 1);
+      assert.ok(exists(find(".collection")));
     });
   }
 });
@@ -199,25 +190,19 @@ componentTest('persists filter state when expandind/collapsing', {
   },
 
   test(assert) {
-    click(".select-box-header");
-    fillIn('.filter-query', 'rob');
-    triggerEvent('.filter-query', 'keyup');
+    expandSelectBox();
 
-    andThen(() => {
-      assert.equal(find(".select-box-row").length, 1);
-    });
+    selectBoxFillInFilter("rob");
 
-    click(".select-box-header");
+    andThen(() => assert.equal(selectBox().rows.length, 1) );
 
-    andThen(() => {
-      assert.equal(find(".select-box").hasClass("is-expanded"), false);
-    });
+    collapseSelectBox();
 
-    click(".select-box-header");
+    andThen(() => assert.notOk(selectBox().isExpanded) );
 
-    andThen(() => {
-      assert.equal(find(".select-box-row").length, 1);
-    });
+    expandSelectBox();
+
+    andThen(() => assert.equal(selectBox().rows.length, 1) );
   }
 });
 
@@ -229,10 +214,11 @@ componentTest('supports options to limit size', {
   },
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
     andThen(() => {
-      assert.equal(parseInt(find(".select-box-body").height()), 20, "it limits the height");
+      const body = find(".select-box-body");
+      assert.equal(parseInt(body.height()), 20, "it limits the height");
     });
   }
 });
@@ -248,11 +234,9 @@ componentTest('supports custom row template', {
   },
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
-    andThen(() => {
-      assert.equal(find(".select-box-row").html().trim(), "<b>robin</b>");
-    });
+    andThen(() => assert.equal(selectBox().row(1).el().html(), "<b>robin</b>") );
   }
 });
 
@@ -265,11 +249,9 @@ componentTest('supports converting select value to integer', {
   },
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
-    andThen(() => {
-      assert.equal(find(".select-box-row.is-selected .text").text(), "régis");
-    });
+    andThen(() => assert.equal(selectBox().selectedRow.text(), "régis") );
 
     andThen(() => {
       this.set("value", 3);
@@ -277,7 +259,7 @@ componentTest('supports converting select value to integer', {
     });
 
     andThen(() => {
-      assert.equal(find(".select-box-row.is-selected .text").text(), "jeff", "it works with dynamic content");
+      assert.equal(selectBox().selectedRow.text(), "jeff", "it works with dynamic content");
     });
   }
 });
@@ -290,14 +272,14 @@ componentTest('dynamic headerText', {
   },
 
   test(assert) {
-    click(".select-box-header");
-    andThen(() => {
-      assert.equal(find(".select-box-header .current-selection").html().trim(), "robin");
-    });
+    expandSelectBox();
+
+    andThen(() => assert.equal(selectBox().header.text(), "robin") );
+
+    selectBoxSelectRow(2);
 
-    click(".select-box-row[title='regis']");
     andThen(() => {
-      assert.equal(find(".select-box-header .current-selection").html().trim(), "regis", "it changes header text");
+      assert.equal(selectBox().header.text(), "regis", "it changes header text");
     });
   }
 });
@@ -311,14 +293,16 @@ componentTest('static headerText', {
   },
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
+
     andThen(() => {
-      assert.equal(find(".select-box-header .current-selection").html().trim(), "Choose...");
+      assert.equal(selectBox().header.text(), "Choose...");
     });
 
-    click(".select-box-row[title='regis']");
+    selectBoxSelectRow(2);
+
     andThen(() => {
-      assert.equal(find(".select-box-header .current-selection").html().trim(), "Choose...", "it doesn’t change header text");
+      assert.equal(selectBox().header.text(), "Choose...", "it doesn’t change header text");
     });
   }
 });
@@ -332,11 +316,9 @@ componentTest('supports custom row title', {
   },
 
   test(assert) {
-    click(".select-box-header");
+    expandSelectBox();
 
-    andThen(() => {
-      assert.equal(find(".select-box-row:first").attr("title"), "sam");
-    });
+    andThen(() => assert.equal(selectBox().row(1).title(), "sam") );
   }
 });
 
@@ -348,96 +330,60 @@ componentTest('supports keyboard events', {
   },
 
   test(assert) {
-    const arrowDownEvent = () => {
-      const event = jQuery.Event("keydown");
-      event.keyCode = 40;
-      find(".select-box").trigger(event);
-    };
+    expandSelectBox();
 
-    const arrowUpEvent = () => {
-      const event = jQuery.Event("keydown");
-      event.keyCode = 38;
-      find(".select-box").trigger(event);
-    };
-
-    const escapeEvent = () => {
-      const event = jQuery.Event("keydown");
-      event.keyCode = 27;
-      find(".select-box").trigger(event);
-    };
-
-    const enterEvent = () => {
-      const event = jQuery.Event("keydown");
-      event.keyCode = 13;
-      find(".select-box").trigger(event);
-    };
-
-    const tabEvent = () => {
-      const event = jQuery.Event("keydown");
-      event.keyCode = 9;
-      find(".select-box").trigger(event);
-    };
-
-    click(".select-box-header");
-
-    andThen(() => arrowDownEvent() );
+    selectBox().keyboard.down();
 
     andThen(() => {
-      assert.equal(find(".select-box-row.is-highlighted").attr("title"), "robin", "it highlights the first row");
+      assert.equal(selectBox().highlightedRow.title(), "robin", "it highlights the first row");
     });
 
-    andThen(() => arrowDownEvent() );
+    selectBox().keyboard.down();
 
     andThen(() => {
-      assert.equal(find(".select-box-row.is-highlighted").attr("title"), "regis", "it highlights the next row");
+      assert.equal(selectBox().highlightedRow.title(), "regis", "it highlights the next row");
     });
 
-    andThen(() => arrowDownEvent() );
+    selectBox().keyboard.down();
 
     andThen(() => {
-      assert.equal(find(".select-box-row.is-highlighted").attr("title"), "regis", "it keeps highlighting the last row when reaching the end");
+      assert.equal(selectBox().highlightedRow.title(), "regis", "it keeps highlighting the last row when reaching the end");
     });
 
-    andThen(() => arrowUpEvent() );
+    selectBox().keyboard.up();
 
     andThen(() => {
-      assert.equal(find(".select-box-row.is-highlighted").attr("title"), "robin", "it highlights the previous row");
+      assert.equal(selectBox().highlightedRow.title(), "robin", "it highlights the previous row");
     });
 
-    andThen(() => enterEvent() );
+    selectBox().keyboard.enter();
 
     andThen(() => {
-      assert.equal(find(".select-box-row.is-selected").attr("title"), "robin", "it selects the row when pressing enter");
-      assert.equal(find(".select-box").hasClass("is-expanded"), false, "it collapses the select box when selecting a row");
+      assert.equal(selectBox().selectedRow.title(), "robin", "it selects the row when pressing enter");
+      assert.notOk(selectBox().isExpanded, "it collapses the select box when selecting a row");
     });
 
-    click(".select-box-header");
+    expandSelectBox();
+
+    selectBox().keyboard.escape();
+
     andThen(() => {
-      assert.equal(find(".select-box").hasClass("is-expanded"), true);
+      assert.notOk(selectBox().isExpanded, "it collapses the select box");
     });
 
-    andThen(() => escapeEvent() );
+    expandSelectBox();
+
+    selectBoxFillInFilter("regis");
 
     andThen(() => {
-      assert.equal(find(".select-box").hasClass("is-expanded"), false, "it collapses the select box");
+      assert.equal(selectBox().highlightedRow.title(), "regis", "it highlights the first result");
     });
 
-    click(".select-box-header");
-    andThen(() => {
-      assert.equal(find(".select-box").hasClass("is-expanded"), true);
-    });
-
-    fillIn(".filter-query", "regis");
-    triggerEvent('.filter-query', 'keyup');
-    andThen(() => {
-      assert.equal(find(".select-box-row.is-highlighted").attr("title"), "regis", "it highlights the first result");
-    });
-
-    andThen(() => tabEvent() );
+    selectBox().keyboard.tab();
 
     andThen(() => {
-      assert.equal(find(".select-box-row.is-selected").attr("title"), "regis", "it selects the row when pressing tab");
-      assert.equal(find(".select-box").hasClass("is-expanded"), false, "it collapses the select box when selecting a row");
+      assert.equal(selectBox().selectedRow.title(), "regis", "it selects the row when pressing tab");
+      assert.notOk(selectBox().isExpanded, "it collapses the select box when selecting a row");
     });
   }
 });