templates/crate: Use test-selectors

Author: Turbo87

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}}

tests/acceptance/crate-test.js

@@ -7,7 +7,7 @@ test('visiting a crate page from the front page', async function(assert) {
     server.create('crate', 'withVersion', { id: 'nanomsg' });
 
     await visit('/');
-    await click('#just-updated ul > li:first a');
+    await click('[data-test-just-updated] [data-test-crate-link="0"]');
 
     assert.equal(currentURL(), '/crates/nanomsg');
     assert.equal(document.title, 'nanomsg - Cargo: packages for Rust');
@@ -24,8 +24,8 @@ test('visiting /crates/nanomsg', async function(assert) {
     assert.equal(currentRouteName(), 'crate.index');
     assert.equal(document.title, 'nanomsg - Cargo: packages for Rust');
 
-    assert.dom('#crates-heading .info h1').hasText('nanomsg');
-    assert.dom('#crates-heading .info h2').hasText('0.6.1');
+    assert.dom('[data-test-heading] [data-test-crate-name]').hasText('nanomsg');
+    assert.dom('[data-test-heading] [data-test-crate-version]').hasText('0.6.1');
 });
 
 test('visiting /crates/nanomsg/', async function(assert) {
@@ -39,8 +39,8 @@ test('visiting /crates/nanomsg/', async function(assert) {
     assert.equal(currentRouteName(), 'crate.index');
     assert.equal(document.title, 'nanomsg - Cargo: packages for Rust');
 
-    assert.dom('#crates-heading .info h1').hasText('nanomsg');
-    assert.dom('#crates-heading .info h2').hasText('0.6.1');
+    assert.dom('[data-test-heading] [data-test-crate-name]').hasText('nanomsg');
+    assert.dom('[data-test-heading] [data-test-crate-version]').hasText('0.6.1');
 });
 
 test('visiting /crates/nanomsg/0.6.0', async function(assert) {
@@ -54,15 +54,15 @@ test('visiting /crates/nanomsg/0.6.0', async function(assert) {
     assert.equal(currentRouteName(), 'crate.version');
     assert.equal(document.title, 'nanomsg - Cargo: packages for Rust');
 
-    assert.dom('#crates-heading .info h1').hasText('nanomsg');
-    assert.dom('#crates-heading .info h2').hasText('0.6.0');
+    assert.dom('[data-test-heading] [data-test-crate-name]').hasText('nanomsg');
+    assert.dom('[data-test-heading] [data-test-crate-version]').hasText('0.6.0');
 });
 
 test('navigating to the all versions page', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates/nanomsg');
-    await click('#crate-versions span.small a');
+    await click('[data-test-all-versions-link]');
 
     assert.dom('.info').hasText(/All 13\s+versions of nanomsg since\s+December \d+, 2014/);
 });
@@ -71,7 +71,7 @@ test('navigating to the reverse dependencies page', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates/nanomsg');
-    await click('a:contains("Dependent crates")');
+    await click('[data-test-reverse-deps-link]');
 
     assert.equal(currentURL(), '/crates/nanomsg/reverse_dependencies');
     assert.dom('a[href="/crates/unicorn-rpc"]').hasText('unicorn-rpc');
@@ -81,46 +81,48 @@ test('navigating to a user page', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates/nanomsg');
-    await click('.owners li:last a');
+    await click('[data-test-owners] [data-test-user-link="blabaere"]');
 
     assert.equal(currentURL(), '/users/blabaere');
-    assert.dom('#crates-heading h1').hasText('blabaere');
+    assert.dom('[data-test-heading] [data-test-username]').hasText('blabaere');
 });
 
 test('navigating to a team page', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates/nanomsg');
-    await click('.owners li:first a ');
+    await click('[data-test-owners] [data-test-team-link="github:org:thehydroimpulse"]');
 
     assert.equal(currentURL(), '/teams/github:org:thehydroimpulse');
-    assert.dom('.team-info h2').hasText('thehydroimpulseteam');
+    assert.dom('[data-test-heading] [data-test-team-name]').hasText('thehydroimpulseteam');
 });
 
 test('crates having user-owners', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates/nanomsg');
 
-    assert.dom('ul.owners li a[href="/teams/github:org:thehydroimpulse"] img[src="https://avatars.githubusercontent.com/u/565790?v=3&s=64"]').exists();
-    assert.dom('ul.owners li').exists({ count: 4 });
+    assert.dom('[data-test-owners] [data-test-team-link="github:org:thehydroimpulse"] img')
+        .hasAttribute('src', 'https://avatars.githubusercontent.com/u/565790?v=3&s=64');
+
+    assert.dom('[data-test-owners] li').exists({ count: 4 });
 });
 
 test('crates having team-owners', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates/nanomsg');
 
-    assert.dom('ul.owners li a[href="/teams/github:org:thehydroimpulse"]').exists();
-    assert.dom('ul.owners li').exists({ count: 4 });
+    assert.dom('[data-test-owners] [data-test-team-link="github:org:thehydroimpulse"]').exists();
+    assert.dom('[data-test-owners] li').exists({ count: 4 });
 });
 
 test('crates license is supplied by version', async function(assert) {
     server.loadFixtures();
 
     await visit('/crates/nanomsg');
-    assert.dom('.license').hasText('Apache-2.0');
+    assert.dom('[data-test-license]').hasText('Apache-2.0');
 
     await click('#crate-versions a:contains("0.5.0")');
-    assert.dom('.license').hasText('MIT/Apache-2.0');
+    assert.dom('[data-test-license]').hasText('MIT/Apache-2.0');
 });