Use "ember-test-selectors" for UI tests

app/components/crate-row.js

@@ -1,5 +1,7 @@
 import Component from '@ember/component';
 
 export default Component.extend({
-    classNames: ['crate', 'row']
+    classNames: ['crate', 'row'],
+
+    'data-test-crate-row': true,
 });

app/templates/application.hbs

@@ -17,17 +17,18 @@
       </h1>
     {{/link-to}}
 
-    <form class='search' action='/search' {{ action "search" on="submit" }} >
+    <form class='search' action='/search' {{ action "search" on="submit" }} data-test-search-form>
         {{input type="text" class="search" name="q" id="cargo-desktop-search"
                 placeholder="Click or press 'S' to search..."
                 value=search
                 autofocus="autofocus"
                 tabindex="1"
-                required=true}}
+                required=true
+                data-test-search-input=true}}
     </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>
@@ -70,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/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>

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/components/crate-row.hbs

@@ -1,28 +1,29 @@
 <div class='desc'>
     <div class='info'>
-        {{#link-to 'crate' crate.id}}{{ crate.name }}{{/link-to}}
+        {{#link-to 'crate' crate.id data-test-crate-link}}{{ crate.name }}{{/link-to}}
         <span class='vers'>
             <img
                 src="https://img.shields.io/crates/v/{{ crate.name }}.svg"
                 alt="{{ crate.max_version }}"
-                title="{{ crate.name }}’s current version badge" />
+                title="{{ crate.name }}’s current version badge"
+                data-test-version-badge />
         </span>
         {{#each crate.annotated_badges as |badge|}}
-            {{component badge.component_name badge=badge}}
+            {{component badge.component_name badge=badge data-test-badge=badge.badge_type}}
         {{/each}}
     </div>
-    <div class='summary'>
+    <div class='summary' data-test-description>
         <span class='small'>
             {{ truncate-text crate.description }}
         </span>
     </div>
 </div>
 <div class='stats'>
-    <div class='downloads'>
+    <div class='downloads' data-test-downloads>
         {{svg-jar "download"}}
         <span class='num'>All-Time: {{ format-num crate.downloads }}</span>
     </div>
-    <div class="recent-downloads">
+    <div class="recent-downloads" data-test-recent-downloads>
         {{svg-jar "download"}}
         <span class='num'><abbr title="Downloads in the last 90 days">Recent:</abbr> {{ format-num crate.recent_downloads }}</span>
     </div>

app/templates/crate/version.hbs

@@ -1,11 +1,11 @@
 {{title crate.name}}
 
-<div id='crates-heading'>
+<div id='crates-heading' data-test-heading>
     <div class="wide">
         <div class='info'>
             {{svg-jar "crate"}}
-            <h1>{{ crate.name }}</h1>
-            <h2>{{ currentVersion.num }}</h2>
+            <h1 data-test-crate-name>{{ crate.name }}</h1>
+            <h2 data-test-crate-version>{{ currentVersion.num }}</h2>
         </div>
 
         <div class='right'>
@@ -44,7 +44,7 @@
         {{/if}}
         {{#if crate.reverse_dependencies}}
             <li>
-              {{#link-to 'crate.reverse_dependencies' (query-params dependency=crate.crate_id)}}
+              {{#link-to 'crate.reverse_dependencies' (query-params dependency=crate.crate_id) data-test-reverse-deps-link=true}}
                 Dependent crates
               {{/link-to}}
             </li>
@@ -137,7 +137,7 @@
             {{#if currentVersion.license}}
                 <div>
                     <h3>License</h3>
-                    <p class="license">{{ currentVersion.license }}</p>
+                    <p class="license" data-test-license>{{ currentVersion.license }}</p>
                 </div>
             {{/if}}
 
@@ -169,18 +169,18 @@
 
             <div>
                 <h3>Owners</h3>
-                <ul class='owners'>
+                <ul class='owners' data-test-owners>
                    {{#each crate.owner_team as |team|}}
                         <li>
-                            {{#link-to team.kind team.login}}
+                            {{#link-to team.kind team.login data-test-team-link=team.login}}
                                 {{user-avatar user=team size='medium-small'}}
                             {{/link-to}}
                         </li>
                     {{/each}}
 
                     {{#each crate.owner_user as |user|}}
                         <li>
-                            {{#link-to user.kind user.login}}
+                            {{#link-to user.kind user.login data-test-user-link=user.login}}
                                 {{user-avatar user=user size='medium-small'}}
                             {{/link-to}}
                         </li>
@@ -205,7 +205,7 @@
                 </ul>
                 <span class='small'>
                     {{#if hasMoreVersions}}
-                        {{#link-to 'crate.versions' crate}}
+                        {{#link-to 'crate.versions' crate data-test-all-versions-link=true}}
                             show all {{ crate.versions.length }} versions
                         {{/link-to}}
                     {{/if}}

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>

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>

app/templates/keyword/index.hbs

@@ -7,18 +7,18 @@
 </div>
 
 <div id='results'>
-    <div class='nav'>
+    <div class='nav' data-test-keyword-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-keyword-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>

app/templates/keywords.hbs

@@ -6,18 +6,18 @@
 </div>
 
 <div id='results'>
-    <div class='nav'>
+    <div class='nav' data-test-keywords-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-keywords-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>