templates/index: Use test-selectors

Author: Turbo87

app/templates/application.hbs

@@ -28,7 +28,7 @@
     </form>
 
     <div class='nav'>
-        {{#link-to "crates" (query-params letter="null" page=1)}}
+        {{#link-to "crates" (query-params letter="null" page=1) data-test-all-crates-link}}
             Browse All Crates
         {{/link-to}}
         <span class="sep">|</span>
@@ -71,7 +71,7 @@
                 {{/rl-dropdown}}
             {{/rl-dropdown-container}}
         {{else}}
-            {{#link-to "login"}}
+            {{#link-to "login" data-test-login-link}}
                     {{svg-jar "lock"}}
                     Log in with GitHub
             {{/link-to}}

app/templates/components/crate-list.hbs

@@ -1,7 +1,7 @@
 <ul>
-    {{#each crates as |crate|}}
+    {{#each crates as |crate index|}}
         <li>
-            {{#link-to 'crate' crate.id class='name'}}
+            {{#link-to 'crate' crate.id class='name' data-test-crate-link=index}}
                 <span>{{ crate.name }} ({{ crate.max_version }})</span>
                 <div class='arrow-in-list'>
                     {{svg-jar "right-arrow"}}

app/templates/index.hbs

@@ -2,7 +2,7 @@
     <h1>The Rust community&rsquo;s crate registry</h1>
 
     <div class='links'>
-        {{#link-to "install" class='yellow-button'}}
+        {{#link-to "install" class='yellow-button' data-test-install-cargo-link=true}}
             {{svg-jar "button-download"}}
             Install Cargo
         {{/link-to}}
@@ -24,39 +24,39 @@
     <div id='stats'>
         <div class='downloads'>
             {{svg-jar "download"}}
-            <span class='num'>{{format-num model.num_downloads}}</span>
+            <span class='num' data-test-total-downloads>{{format-num model.num_downloads}}</span>
             <span class='desc small'>Downloads</span>
         </div>
         <div class='crates'>
             {{svg-jar "crate"}}
-            <span class='num'>{{format-num model.num_crates}}</span>
+            <span class='num' data-test-total-crates>{{format-num model.num_crates}}</span>
             <span class='desc small'>Crates in stock</span>
         </div>
     </div>
 </div>
 
 <div id='home-crates' class='crate-lists'>
-    <div id='new-crates'>
+    <div id='new-crates' data-test-new-crates>
         <h2>New Crates</h2>
         {{crate-list crates=model.new_crates}}
     </div>
-    <div id='most-downloaded'>
+    <div id='most-downloaded' data-test-most-downloaded>
         <h2>Most Downloaded</h2>
         {{crate-list crates=model.most_downloaded}}
     </div>
-    <div id='just-updated'>
+    <div id='just-updated' data-test-just-updated>
         <h2>Just Updated</h2>
         {{crate-list crates=model.just_updated}}
     </div>
-    <div id='most-recently-downloaded'>
+    <div id='most-recently-downloaded' data-test-most-recently-downloaded>
         <h2>Most Recent Downloads</h2>
         {{crate-list crates=model.most_recently_downloaded}}
     </div>
-    <div id='keywords'>
+    <div id='keywords' data-test-keywords>
         <h2>Popular Keywords {{#link-to 'keywords'}}(see all){{/link-to}}</h2>
         {{keyword-list keywords=model.popular_keywords}}
     </div>
-    <div id='categories'>
+    <div id='categories' data-test-categories>
         <h2>Popular Categories {{#link-to 'categories'}}(see all){{/link-to}}</h2>
         {{category-list categories=model.popular_categories}}
     </div>

tests/acceptance/front-page-test.js

@@ -11,19 +11,19 @@ test('visiting /', async function(assert) {
     assert.equal(currentURL(), '/');
     assert.equal(document.title, 'Cargo: packages for Rust');
 
-    assert.dom('a[href="/install"]').exists();
-    assert.dom('a[href="/crates"]').exists();
-    assert.dom('a[href="/login"]').exists();
+    assert.dom('[data-test-install-cargo-link]').exists();
+    assert.dom('[data-test-all-crates-link]').exists();
+    assert.dom('[data-test-login-link]').exists();
 
-    assert.dom('.downloads .num').hasText('122,669');
-    assert.dom('.crates .num').hasText('19');
+    assert.dom('[data-test-total-downloads]').hasText('122,669');
+    assert.dom('[data-test-total-crates]').hasText('19');
 
-    assert.dom('#new-crates ul > li a').hasText('Inflector (0.1.6)');
-    assert.dom('#new-crates ul > li a').hasAttribute('href', '/crates/Inflector');
+    assert.dom('[data-test-new-crates] [data-test-crate-link="0"]').hasText('Inflector (0.1.6)');
+    assert.dom('[data-test-new-crates] [data-test-crate-link="0"]').hasAttribute('href', '/crates/Inflector');
 
-    assert.dom('#most-downloaded ul > li a').hasText('serde (0.6.1)');
-    assert.dom('#most-downloaded ul > li a').hasAttribute('href', '/crates/serde');
+    assert.dom('[data-test-most-downloaded] [data-test-crate-link="0"]').hasText('serde (0.6.1)');
+    assert.dom('[data-test-most-downloaded] [data-test-crate-link="0"]').hasAttribute('href', '/crates/serde');
 
-    assert.dom('#just-updated ul > li a').hasText('nanomsg (0.7.0-alpha)');
-    assert.dom('#just-updated ul > li a').hasAttribute('href', '/crates/nanomsg');
+    assert.dom('[data-test-just-updated] [data-test-crate-link="0"]').hasText('nanomsg (0.7.0-alpha)');
+    assert.dom('[data-test-just-updated] [data-test-crate-link="0"]').hasAttribute('href', '/crates/nanomsg');
 });