Add tests for the API token list

app/components/api-token-row.hbs

@@ -1,5 +1,5 @@
-<div class={{if this.api_token.isNew "row create-token" "row"}}>
-  <div class='name'>
+<div class={{if this.api_token.isNew "row create-token" "row"}} data-test-api-token={{this.api_token.id}}>
+  <div class='name' data-test-name>
     {{#if this.api_token.isNew}}
       <Input
         @type="text"
@@ -19,19 +19,19 @@
 
   {{#unless this.api_token.isNew}}
     <div class='dates'>
-      <div class='created-at'>
+      <div class='created-at' data-test-created-at>
         <span class='small' title={{this.api_token.created_at}}>
           Created {{moment-from-now this.api_token.created_at}}
         </span>
       </div>
       {{#if this.api_token.last_used_at}}
-        <div class='last_used_at'>
+        <div class='last_used_at' data-test-last-used-at>
           <span class='small' title={{this.api_token.last_used_at}}>
             Last used {{moment-from-now this.api_token.last_used_at}}
           </span>
         </div>
       {{else}}
-        <div class='last_used_at'>
+        <div class='last_used_at' data-test-last-used-at>
           <span class='small'>Never used</span>
         </div>
       {{/if}}
@@ -45,6 +45,7 @@
         class='small yellow-button'
         disabled={{this.disableCreate}}
         title={{if this.emptyName "You must specify a name" ""}}
+        data-test-save-token-button
         {{action "saveToken"}}
       >
         Create
@@ -54,27 +55,28 @@
         type="button"
         class='small tan-button'
         disabled={{this.api_token.isSaving}}
+        data-test-revoke-token-button
         {{action "revokeToken"}}
       >
         Revoke
       </button>
     {{/if}}
     {{#if this.api_token.isSaving}}
-      <img class='overlay' src="/assets/ajax-loader.gif">
+      <img class='overlay' src="/assets/ajax-loader.gif" data-test-saving-spinner>
     {{/if}}
   </div>
 </div>
 
 {{#if this.serverError}}
-  <div class='row error'>
+  <div class='row error' data-test-error>
     <div>
       {{ this.serverError }}
     </div>
   </div>
 {{/if}}
 
 {{#if this.api_token.token}}
-  <div class='row new-token'>
+  <div class='row new-token' data-test-token>
     <div>
       Please record this token somewhere, you cannot retrieve
       its value again. For use on the command line you can save it to <code>~/.cargo/credentials</code>

app/routes/login.js

@@ -15,7 +15,7 @@ export default Route.extend({
 
   beforeModel(transition) {
     try {
-      localStorage.removeItem('github_response');
+      window.localStorage.removeItem('github_response');
     } catch (e) {
       // ignore error
     }

app/services/session.js

@@ -1,6 +1,7 @@
 import { A } from '@ember/array';
 import Service, { inject as service } from '@ember/service';
 import ajax from 'ember-fetch/ajax';
+import window from 'ember-window-mock';
 
 export default Service.extend({
   savedTransition: null,
@@ -17,7 +18,7 @@ export default Service.extend({
     this._super(...arguments);
     let isLoggedIn;
     try {
-      isLoggedIn = localStorage.getItem('isLoggedIn') === '1';
+      isLoggedIn = window.localStorage.getItem('isLoggedIn') === '1';
     } catch (e) {
       isLoggedIn = false;
     }
@@ -29,7 +30,7 @@ export default Service.extend({
     this.set('isLoggedIn', true);
     this.set('currentUser', user);
     try {
-      localStorage.setItem('isLoggedIn', '1');
+      window.localStorage.setItem('isLoggedIn', '1');
     } catch (e) {
       // ignore error
     }
@@ -42,7 +43,7 @@ export default Service.extend({
     this.set('currentUser', null);
 
     try {
-      localStorage.removeItem('isLoggedIn');
+      window.localStorage.removeItem('isLoggedIn');
     } catch (e) {
       // ignore error
     }

app/templates/me/index.hbs

@@ -72,7 +72,15 @@
   <div class='me-subheading'>
     <h2>API Access</h2>
     <div class='right'>
-      <button type="button" class='yellow-button' disabled={{this.disableCreate}} {{action "startNewToken"}}>New Token</button>
+      <button
+        type="button"
+        class='yellow-button'
+        disabled={{this.disableCreate}}
+        data-test-new-token-button
+        {{action "startNewToken"}}
+      >
+        New Token
+      </button>
     </div>
   </div>
 

tests/acceptance/api-token-test.js

@@ -0,0 +1,154 @@
+import { module, test } from 'qunit';
+import { setupApplicationTest } from 'ember-qunit';
+import { currentURL, findAll, click, fillIn } from '@ember/test-helpers';
+import window, { setupWindowMock } from 'ember-window-mock';
+import { Response } from 'ember-cli-mirage';
+
+import setupMirage from '../helpers/setup-mirage';
+import { visit } from '../helpers/visit-ignoring-abort';
+
+module('Acceptance | api-tokens', function(hooks) {
+  setupApplicationTest(hooks);
+  setupWindowMock(hooks);
+  setupMirage(hooks);
+
+  function prepare(context) {
+    window.localStorage.setItem('isLoggedIn', '1');
+
+    context.server.get('/api/v1/me', {
+      user: {
+        id: 42,
+        login: 'johnnydee',
+        email_verified: true,
+        email_verification_sent: true,
+        name: 'John Doe',
+        email: 'john@doe.com',
+        avatar: 'https://avatars2.githubusercontent.com/u/1234567?v=4',
+        url: 'https://github.com/johnnydee',
+      },
+      owned_crates: [],
+    });
+
+    context.server.get('/api/v1/me/tokens', {
+      api_tokens: [
+        { id: 2, name: 'BAR', created_at: new Date('2017-11-19T17:59:22').toISOString(), last_used_at: null },
+        {
+          id: 1,
+          name: 'foo',
+          created_at: new Date('2017-08-01T12:34:56').toISOString(),
+          last_used_at: new Date('2017-11-02T01:45:14').toISOString(),
+        },
+      ],
+    });
+  }
+
+  test('/me is showing the list of active API tokens', async function(assert) {
+    prepare(this);
+
+    await visit('/me');
+    assert.equal(currentURL(), '/me');
+    assert.dom('[data-test-api-token]').exists({ count: 2 });
+
+    let [row1, row2] = findAll('[data-test-api-token]');
+    assert.dom('[data-test-name]', row1).hasText('BAR');
+    assert.dom('[data-test-created-at]', row1).hasText('Created 18 hours ago');
+    assert.dom('[data-test-last-used-at]', row1).hasText('Never used');
+    assert.dom('[data-test-save-token-button]', row1).doesNotExist();
+    assert.dom('[data-test-revoke-token-button]', row1).exists();
+    assert.dom('[data-test-saving-spinner]', row1).doesNotExist();
+    assert.dom('[data-test-error]', row1).doesNotExist();
+    assert.dom('[data-test-token]', row1).doesNotExist();
+
+    assert.dom('[data-test-name]', row2).hasText('foo');
+    assert.dom('[data-test-created-at]', row2).hasText('Created 4 months ago');
+    assert.dom('[data-test-last-used-at]', row2).hasText('Last used 18 days ago');
+    assert.dom('[data-test-save-token-button]', row2).doesNotExist();
+    assert.dom('[data-test-revoke-token-button]', row2).exists();
+    assert.dom('[data-test-saving-spinner]', row2).doesNotExist();
+    assert.dom('[data-test-error]', row2).doesNotExist();
+    assert.dom('[data-test-token]', row2).doesNotExist();
+  });
+
+  test('API tokens can be revoked', async function(assert) {
+    prepare(this);
+
+    this.server.delete('/api/v1/me/tokens/:id', function(schema, request) {
+      assert.step(`delete id:${request.params.id}`);
+      return {};
+    });
+
+    await visit('/me');
+    assert.equal(currentURL(), '/me');
+    assert.dom('[data-test-api-token]').exists({ count: 2 });
+
+    await click('[data-test-api-token="1"] [data-test-revoke-token-button]');
+    assert.verifySteps(['delete id:1']);
+
+    assert.dom('[data-test-api-token]').exists({ count: 1 });
+    assert.dom('[data-test-api-token="2"]').exists();
+    assert.dom('[data-test-error]').doesNotExist();
+  });
+
+  test('failed API tokens revocation shows an error', async function(assert) {
+    prepare(this);
+
+    this.server.delete('/api/v1/me/tokens/:id', function() {
+      return new Response(500, {}, {});
+    });
+
+    await visit('/me');
+    assert.equal(currentURL(), '/me');
+    assert.dom('[data-test-api-token]').exists({ count: 2 });
+
+    await click('[data-test-api-token="1"] [data-test-revoke-token-button]');
+    assert.dom('[data-test-api-token]').exists({ count: 2 });
+    assert.dom('[data-test-api-token="2"]').exists();
+    assert.dom('[data-test-api-token="1"]').exists();
+    assert.dom('[data-test-error]').includesText('An error occurred while revoking this token');
+  });
+
+  test('new API tokens can be created', async function(assert) {
+    prepare(this);
+
+    this.server.put('/api/v1/me/tokens', function(schema, request) {
+      assert.step('put');
+
+      let { api_token } = JSON.parse(request.requestBody);
+
+      return {
+        api_token: {
+          id: 5,
+          name: api_token.name,
+          token: 'zuz6nYcXJOzPDvnA9vucNwccG0lFSGbh',
+          revoked: false,
+          created_at: api_token.created_at,
+          last_used_at: api_token.last_used_at,
+        },
+      };
+    });
+
+    await visit('/me');
+    assert.equal(currentURL(), '/me');
+    assert.dom('[data-test-api-token]').exists({ count: 2 });
+    assert.dom('[data-test-focused-input]').doesNotExist();
+    assert.dom('[data-test-save-token-button]').doesNotExist();
+
+    await click('[data-test-new-token-button]');
+    assert.dom('[data-test-new-token-button]').isDisabled();
+    assert.dom('[data-test-focused-input]').exists();
+    assert.dom('[data-test-save-token-button]').exists();
+
+    await fillIn('[data-test-focused-input]', 'the new token');
+    await click('[data-test-save-token-button]');
+    assert.verifySteps(['put']);
+    assert.dom('[data-test-focused-input]').doesNotExist();
+    assert.dom('[data-test-save-token-button]').doesNotExist();
+
+    assert.dom('[data-test-api-token="5"] [data-test-name]').hasText('the new token');
+    assert.dom('[data-test-api-token="5"] [data-test-save-token-button]').doesNotExist();
+    assert.dom('[data-test-api-token="5"] [data-test-revoke-token-button]').exists();
+    assert.dom('[data-test-api-token="5"] [data-test-saving-spinner]').doesNotExist();
+    assert.dom('[data-test-api-token="5"] [data-test-error]').doesNotExist();
+    assert.dom('[data-test-token]').includesText('cargo login zuz6nYcXJOzPDvnA9vucNwccG0lFSGbh');
+  });
+});

tests/helpers/visit-ignoring-abort.js

@@ -0,0 +1,14 @@
+import { settled, visit as _visit } from '@ember/test-helpers';
+
+// see https://github.com/emberjs/ember-test-helpers/issues/332
+export async function visit(url) {
+  try {
+    await _visit(url);
+  } catch (error) {
+    if (error.message !== 'TransitionAborted') {
+      throw error;
+    }
+  }
+
+  await settled();
+}