templates/category: Use test-selectors

Author: Turbo87

app/templates/categories.hbs

@@ -6,18 +6,18 @@
 </div>
 
 <div id='results'>
-    <div class='nav'>
+    <div class='nav' data-test-categories-nav>
         <span class='amt small'>
             Displaying
             <span class='cur'>{{ currentPageStart }}-{{ currentPageEnd }}</span>
             of <span class='total'>{{ totalItems }}</span> total results
         </span>
     </div>
 
-    <div class='sort'>
+    <div class='sort' data-test-categories-sort>
         <span class='small'>Sort by</span>
         {{#rl-dropdown-container class="dropdown-container"}}
-            {{#rl-dropdown-toggle tagName="a" class="dropdown"}}
+            {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
                 {{svg-jar "sort"}}
                 {{ currentSortBy }}
                 <span class='arrow'></span>
@@ -41,11 +41,11 @@
 
 <div class='white-rows'>
     {{#each model as |category|}}
-        <div class='row'>
+        <div class='row' data-test-category={{category.slug}}>
             <div class='desc'>
                 <div class='info'>
                     {{link-to category.category "category" category.slug}}
-                    <span class='small'>
+                    <span class='small' data-test-crate-count>
                         {{ pluralize (format-num category.crates_cnt) "crate" }}
                     </span>
                 </div>

app/templates/category/index.hbs

@@ -36,18 +36,18 @@
 
 <h2>Crates</h2>
 <div id='results'>
-    <div class='nav'>
+    <div class='nav' data-test-category-nav>
         <span class='amt small'>
             Displaying
             <span class='cur'>{{ currentPageStart }}-{{ currentPageEnd }}</span>
             of <span class='total'>{{ totalItems }}</span> total results
         </span>
     </div>
 
-    <div class='sort'>
+    <div class='sort' data-test-category-sort>
         <span class='small'>Sort by</span>
         {{#rl-dropdown-container class="dropdown-container"}}
-            {{#rl-dropdown-toggle tagName="a" class="dropdown"}}
+            {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
                 {{svg-jar "sort"}}
                 {{ currentSortBy }}
                 <span class='arrow'></span>

tests/acceptance/categories-test.js

@@ -10,15 +10,15 @@ test('listing categories', async function(assert) {
 
     await visit('/categories');
 
-    assert.dom('.desc .info span', find('.row').get(0)).hasText('0 crates');
-    assert.dom('.desc .info span', find('.row').get(1)).hasText('1 crate');
-    assert.dom('.desc .info span', find('.row').get(2)).hasText('3,910 crates');
+    assert.dom('[data-test-category="api-bindings"] [data-test-crate-count]').hasText('0 crates');
+    assert.dom('[data-test-category="algorithms"] [data-test-crate-count]').hasText('1 crate');
+    assert.dom('[data-test-category="asynchronous"] [data-test-crate-count]').hasText('3,910 crates');
 });
 
 test('category/:category_id index default sort is recent-downloads', async function(assert) {
     server.create('category', { category: 'Algorithms', crates_cnt: 1 });
 
     await visit('/categories/algorithms');
 
-    assert.dom('div.sort div.dropdown-container a.dropdown').hasText('Recent Downloads');
+    assert.dom('[data-test-category-sort] [data-test-current-order]').hasText('Recent Downloads');
 });