🐛 display correct expired/expires text for invites (#550)

closes TryGhost/Ghost#8055 - use `expired` if the date is in the past, otherwise `expires` - fix mirage factories to use `moment.valueOf` instead of `moment.unix` for invite `expires` attributes
TryGhost · Feb 27, 2017 · 90be933 · 90be933
1 parent ec6a47f
commit 90be933
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 12 deletions.
diff --git a/app/components/gh-user-invited.js b/app/components/gh-user-invited.js
@@ -24,6 +24,13 @@ export default Component.extend({
         return expires ? moment(expires).fromNow() : '';
     }),
 
+    isExpired: computed('invite.expires', function () {
+        let expires = this.get('invite.expires');
+        let now = (new Date()).valueOf();
+
+        return expires < now;
+    }),
+
     actions: {
         resend() {
             let invite = this.get('invite');

diff --git a/app/templates/team/index.hbs b/app/templates/team/index.hbs
@@ -43,9 +43,9 @@
                                                     Invitation not sent - please try again
                                                 </span>
                                             {{else}}
-                                                <span class="description">
+                                                <span class="description" data-test-invite-description>
                                                     Invitation sent: {{component.createdAt}},
-                                                    expires {{component.expiresAt}}
+                                                    {{if component.isExpired "expired" "expires"}} {{component.expiresAt}}
                                                 </span>
                                             {{/if}}
                                         </p>

diff --git a/mirage/config/invites.js b/mirage/config/invites.js
@@ -26,7 +26,7 @@ export default function mockInvites(server) {
 
         /* eslint-disable camelcase */
         attrs.token = `${invites.all().models.length}-token`;
-        attrs.expires = moment.utc().add(1, 'day').unix();
+        attrs.expires = moment.utc().add(1, 'day').valueOf();
         attrs.created_at = moment.utc().format();
         attrs.created_by = 1;
         attrs.updated_at = moment.utc().format();

diff --git a/mirage/factories/invite.js b/mirage/factories/invite.js
@@ -3,7 +3,7 @@ import {Factory} from 'ember-cli-mirage';
 export default Factory.extend({
     token(i) { return `${i}-token`; },
     email(i) { return `invited-user-${i}@example.com`; },
-    expires() { return moment.utc().add(1, 'day').unix(); },
+    expires() { return moment.utc().add(1, 'day').valueOf(); },
     createdAt() { return moment.utc().format(); },
     createdBy() { return 1; },
     updatedAt() { return moment.utc().format(); },

diff --git a/tests/acceptance/setup-test.js b/tests/acceptance/setup-test.js
@@ -296,7 +296,7 @@ describe('Acceptance: Setup', function () {
                 // TODO: duplicated from mirage/config/invites - extract method?
                 /* eslint-disable camelcase */
                 params.token = `${invites.all().models.length}-token`;
-                params.expires = moment.utc().add(1, 'day').unix();
+                params.expires = moment.utc().add(1, 'day').valueOf();
                 params.created_at = moment.utc().format();
                 params.created_by = 1;
                 params.updated_at = moment.utc().format();

diff --git a/tests/acceptance/team-test.js b/tests/acceptance/team-test.js
@@ -71,6 +71,9 @@ describe('Acceptance: Team', function () {
 
             admin = server.create('user', {email: 'admin@example.com', roles: [adminRole]});
 
+            // add an expired invite
+            server.create('invite', {expires: moment.utc().subtract(1, 'day').valueOf()});
+
             return authenticateSession(application);
         });
 
@@ -135,7 +138,22 @@ describe('Acceptance: Team', function () {
                     'active user\'s role label'
                 ).to.equal('Administrator');
 
-                // no invites are shown
+                // existing invites are shown
+                expect(
+                    find(testSelector('invite-id')).length,
+                    'initial number of invited users'
+                ).to.equal(1);
+
+                expect(
+                    find(testSelector('invite-id', '1')).find(testSelector('invite-description')).text(),
+                    'expired invite description'
+                ).to.match(/expired/);
+            });
+
+            // remove expired invite
+            click(`${testSelector('invite-id', '1')} ${testSelector('revoke-button')}`);
+
+            andThen(() => {
                 expect(
                     find(testSelector('invite-id')).length,
                     'initial number of invited users'
@@ -200,15 +218,20 @@ describe('Acceptance: Team', function () {
                 ).to.equal(1);
 
                 expect(
-                    find(testSelector('invite-id', '1')).find(testSelector('email')).text().trim(),
+                    find(testSelector('invite-id', '2')).find(testSelector('email')).text().trim(),
                     'displayed email of first invite'
                 ).to.equal('invite1@example.com');
 
                 expect(
-                    find(testSelector('invite-id', '1')).find(testSelector('role-name')).text().trim(),
+                    find(testSelector('invite-id', '2')).find(testSelector('role-name')).text().trim(),
                     'displayed role of first invite'
                 ).to.equal('Author');
 
+                expect(
+                    find(testSelector('invite-id', '2')).find(testSelector('invite-description')).text(),
+                    'new invite description'
+                ).to.match(/expires/);
+
                 // number of users is unchanged
                 expect(
                     find(testSelector('user-id')).length,
@@ -231,12 +254,12 @@ describe('Acceptance: Team', function () {
 
                 // invite has correct e-mail + role
                 expect(
-                    find(testSelector('invite-id', '2')).find(testSelector('email')).text().trim(),
+                    find(testSelector('invite-id', '3')).find(testSelector('email')).text().trim(),
                     'displayed email of second invite'
                 ).to.equal('invite2@example.com');
 
                 expect(
-                    find(testSelector('invite-id', '2')).find(testSelector('role-name')).text().trim(),
+                    find(testSelector('invite-id', '3')).find(testSelector('role-name')).text().trim(),
                     'displayed role of second invite'
                 ).to.equal('Editor');
             });
@@ -280,7 +303,7 @@ describe('Acceptance: Team', function () {
 
             click('.fullscreen-modal a.close');
             // revoke latest invite
-            click(`${testSelector('invite-id', '2')} ${testSelector('revoke-button')}`);
+            click(`${testSelector('invite-id', '3')} ${testSelector('revoke-button')}`);
 
             andThen(() => {
                 // number of invites decreases
@@ -316,7 +339,7 @@ describe('Acceptance: Team', function () {
             });
 
             // resend first invite
-            click(`${testSelector('invite-id', '1')} ${testSelector('resend-button')}`);
+            click(`${testSelector('invite-id', '2')} ${testSelector('resend-button')}`);
 
             andThen(() => {
                 // notification is displayed