🐛 Fixed "active" state of apps on apps index screen (#843)

no issue On the apps index screen there were conditionals for each app so that active apps show "Active" instead of "Configure" when they are activated - the conditionals weren't working because the properties they check for weren't available in the template's context. - add a new `settings/apps/index` controller that imports the `settings` service - updates template conditionals to check for properties on the `settings` service
TryGhost · Aug 30, 2017 · 27c169b · 27c169b
1 parent ec354c4
commit 27c169b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git a/app/controllers/settings/apps/index.js b/app/controllers/settings/apps/index.js
@@ -0,0 +1,6 @@
+import Controller from '@ember/controller';
+import {inject as injectService} from '@ember/service';
+
+export default Controller.extend({
+    settings: injectService()
+});
diff --git a/app/templates/settings/apps/index.hbs b/app/templates/settings/apps/index.hbs
@@ -6,8 +6,8 @@
     <section class="apps-grid-container">
         <span class="apps-grid-title">Available integrations</span>
         <div class="apps-grid">
-            <div class="apps-grid-cell">
-                {{#link-to "settings.apps.slack" id="slack-link"}}
+            <div class="apps-grid-cell" data-test-app="slack">
+                {{#link-to "settings.apps.slack" data-test-link="slack"}}
                 <article class="apps-card-app">
                     <div class="apps-card-left">
                         <figure class="apps-card-app-icon" style="background-image:url(assets/img/slackicon.png)"></figure>
@@ -18,10 +18,10 @@
                     </div>
                     <div class="gh-card-right">
                         <div class="apps-configured">
-                            {{#if slack.isActive}}
-                                <span class="green">Active</span>
+                            {{#if settings.slack.isActive}}
+                                <span class="green" data-test-app-status>Active</span>
                             {{else}}
-                                <span>Configure</span>
+                                <span data-test-app-status>Configure</span>
                             {{/if}}
                             {{inline-svg "arrow-right"}}
                         </div>
@@ -30,8 +30,8 @@
                 {{/link-to}}
             </div>
 
-            <div class="apps-grid-cell">
-                {{#link-to "settings.apps.amp" id="amp-link"}}
+            <div class="apps-grid-cell" data-test-app="amp">
+                {{#link-to "settings.apps.amp" data-test-link="amp"}}
                 <article class="apps-card-app">
                     <div class="apps-card-left">
                         <figure class="apps-card-app-icon" style="background-image:url(assets/img/ampicon.png)"></figure>
@@ -42,10 +42,10 @@
                     </div>
                     <div class="gh-card-right">
                         <div class="apps-configured">
-                            {{#if amp}}
-                                <span class="green">Active</span>
+                            {{#if settings.amp}}
+                                <span class="green" data-test-app-status>Active</span>
                             {{else}}
-                                <span>Configure</span>
+                                <span data-test-app-status>Configure</span>
                             {{/if}}
                             {{inline-svg "arrow-right"}}
                         </div>
@@ -54,8 +54,8 @@
                 {{/link-to}}
             </div>
 
-            <div class="apps-grid-cell">
-                {{#link-to "settings.apps.unsplash" id="unsplash-link"}}
+            <div class="apps-grid-cell" data-test-app="unsplash">
+                {{#link-to "settings.apps.unsplash" data-test-link="unsplash"}}
                 <article class="apps-card-app">
                     <div class="apps-card-left">
                         <figure class="apps-card-app-icon" style="background-image:url(assets/img/unsplashicon.png);background-size:45px;"></figure>
@@ -66,10 +66,10 @@
                     </div>
                     <div class="gh-card-right">
                         <div class="apps-configured">
-                            {{#if unsplash.isActive}}
-                                <span class="green">Active</span>
+                            {{#if settings.unsplash.isActive}}
+                                <span class="green" data-test-app-status>Active</span>
                             {{else}}
-                                <span>Configure</span>
+                                <span data-test-app-status>Configure</span>
                             {{/if}}
                             {{inline-svg "arrow-right"}}
                         </div>

diff --git a/tests/acceptance/settings/apps-test.js b/tests/acceptance/settings/apps-test.js
@@ -56,35 +56,53 @@ describe('Acceptance: Settings - Apps', function () {
             return authenticateSession(application);
         });
 
+        it('renders correctly', async function () {
+            await visit('/settings/apps');
+
+            // slack is not configured in the fixtures
+            expect(
+                find('[data-test-app="slack"] [data-test-app-status]').text().trim(),
+                'slack app status'
+            ).to.equal('Configure');
+
+            // amp is enabled in the fixtures
+            expect(
+                find('[data-test-app="amp"] [data-test-app-status]').text().trim(),
+                'amp app status'
+            ).to.equal('Active');
+        });
+
         it('it redirects to Slack when clicking on the grid', async function () {
             await visit('/settings/apps');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps');
 
-            await click('#slack-link');
+            await click('[data-test-link="slack"]');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps/slack');
         });
+
         it('it redirects to AMP when clicking on the grid', async function () {
             await visit('/settings/apps');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps');
 
-            await click('#amp-link');
+            await click('[data-test-link="amp"]');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps/amp');
         });
+
         it('it redirects to Unsplash when clicking on the grid', async function () {
             await visit('/settings/apps');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps');
 
-            await click('#unsplash-link');
+            await click('[data-test-link="unsplash"]');
 
             // has correct url
             expect(currentURL(), 'currentURL').to.equal('/settings/apps/unsplash');