templates/crates: Use test-selectors

Author: Turbo87

app/templates/crates.hbs

@@ -26,19 +26,19 @@
 </div>
 
 <div id='results'>
-    <div class='nav'>
+    <div class='nav' data-test-crates-nav>
         <span class='amt small'>
             Displaying
-            <span class='cur'>{{ currentPageStart }}-{{ currentPageEnd }}</span>
-            of <span class='total'>{{ totalItems }}</span> total results
+            <span class='cur' data-test-current-rows>{{ currentPageStart }}-{{ currentPageEnd }}</span>
+            of <span class='total' data-test-total-rows>{{ totalItems }}</span> total results
         </span>
     </div>
 
-    <div class='sort'>
+    <div class='sort' data-test-crates-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>
@@ -66,21 +66,21 @@
 </div>
 
 <div id='crates' class='white-rows'>
-    {{#each model as |crate|}}
-        {{crate-row crate=crate}}
+    {{#each model as |crate index|}}
+        {{crate-row crate=crate data-test-crate-row=index}}
     {{/each}}
 </div>
 
 <div class='pagination'>
-    {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+    {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page" data-test-pagination-prev=true}}
         {{svg-jar "left-pag"}}
     {{/link-to}}
     {{#each pages as |page|}}
         {{#link-to (query-params page=page)}}
             {{ page }}
         {{/link-to}}
     {{/each}}
-    {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+    {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page" data-test-pagination-next=true}}
         {{svg-jar "right-pag"}}
     {{/link-to}}
 </div>

tests/acceptance/crates-test.js

@@ -7,7 +7,7 @@ test('visiting the crates page from the front page', async function(assert) {
     server.loadFixtures();
 
     await visit('/');
-    await click('a[href="/crates"]');
+    await click('[data-test-all-crates-link]');
 
     assert.equal(currentURL(), '/crates');
     assert.equal(document.title, 'Crates - Cargo: packages for Rust');
@@ -17,7 +17,7 @@ test('visiting the crates page directly', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates');
-    await click('a[href="/crates"]');
+    await click('[data-test-all-crates-link]');
 
     assert.equal(currentURL(), '/crates');
     assert.equal(document.title, 'Crates - Cargo: packages for Rust');
@@ -28,39 +28,39 @@ test('listing crates', async function(assert) {
 
     await visit('/crates');
 
-    assert.dom('.amt.small .cur').hasText('1-10');
-    assert.dom('.amt.small .total').hasText('19');
+    assert.dom('[data-test-crates-nav] [data-test-current-rows]').hasText('1-10');
+    assert.dom('[data-test-crates-nav] [data-test-total-rows]').hasText('19');
 });
 
 test('navigating to next page of crates', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates');
-    await click('.pagination .next');
+    await click('[data-test-pagination-next]');
 
     assert.equal(currentURL(), '/crates?page=2');
-    assert.dom('.amt.small .cur').hasText('11-19');
-    assert.dom('.amt.small .total').hasText('19');
+    assert.dom('[data-test-crates-nav] [data-test-current-rows]').hasText('11-19');
+    assert.dom('[data-test-crates-nav] [data-test-total-rows]').hasText('19');
 });
 
 test('crates default sort is alphabetical', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates');
 
-    assert.dom('div.sort div.dropdown-container a.dropdown').hasText('Alphabetical');
+    assert.dom('[data-test-crates-sort] [data-test-current-order]').hasText('Alphabetical');
 });
 
 test('downloads appears for each crate on crate list', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates');
-    assert.dom('div.downloads span.num').hasText('All-Time: 497');
+    assert.dom('[data-test-crate-row="0"] [data-test-downloads]').hasText('All-Time: 497');
 });
 
 test('recent downloads appears for each crate on crate list', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates');
-    assert.dom('div.recent-downloads span.num').hasText('Recent: 497');
+    assert.dom('[data-test-crate-row="0"] [data-test-recent-downloads]').hasText('Recent: 497');
 });