From c129c3fbae291b51d42d331213a23e3d29331c6e Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Thu, 5 Sep 2019 17:22:04 +0200
Subject: [PATCH 1/2] Admin page handles loading and error state

---
 webapp/graphql/admin/Statistics.js |  15 ++
 webapp/locales/de.json             |   1 +
 webapp/locales/en.json             |   1 +
 webapp/pages/admin/index.vue       | 227 ++++++++++++++++-------------
 4 files changed, 142 insertions(+), 102 deletions(-)
 create mode 100644 webapp/graphql/admin/Statistics.js

diff --git a/webapp/graphql/admin/Statistics.js b/webapp/graphql/admin/Statistics.js
new file mode 100644
index 000000000..94c3f91f0
--- /dev/null
+++ b/webapp/graphql/admin/Statistics.js
@@ -0,0 +1,15 @@
+import gql from 'graphql-tag'
+
+export const Statistics = gql`
+  query {
+    statistics {
+      countUsers
+      countPosts
+      countComments
+      countNotifications
+      countInvites
+      countFollows
+      countShouts
+    }
+  }
+`
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 506cefde2..0d283f8af 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -22,6 +22,7 @@
   },
   "site": {
     "thanks": "Danke!",
+    "error-occurred": "Ein Fehler ist aufgetreten.",
     "made": "Mit &#10084; gemacht",
     "imprint": "Impressum",
     "data-privacy": "Datenschutz",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 05d8ac631..b1283c9b2 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -22,6 +22,7 @@
   },
   "site": {
     "thanks": "Thanks!",
+    "error-occurred": "An error occurred.",
     "made": "Made with &#10084;",
     "imprint": "Imprint",
     "termsAndConditions": "Terms and conditions",
diff --git a/webapp/pages/admin/index.vue b/webapp/pages/admin/index.vue
index 17d756fbd..b966fd416 100644
--- a/webapp/pages/admin/index.vue
+++ b/webapp/pages/admin/index.vue
@@ -1,90 +1,134 @@
 <template>
   <ds-card>
-    <client-only>
-      <ds-space margin="large">
-        <ds-flex>
-          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
-            <ds-space margin="small">
-              <ds-number :count="0" :label="$t('admin.dashboard.users')" size="x-large" uppercase>
-                <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countUsers" />
-                </client-only>
-              </ds-number>
+    <ApolloQuery :query="Statistics">
+      <template v-slot="{ result: { loading, error, data } }">
+        <template v-if="loading">
+          <ds-space centered>
+            <ds-spinner size="large"></ds-spinner>
+          </ds-space>
+        </template>
+        <template v-else-if="error">
+          <ds-space centered>
+            <ds-space>
+              <img :src="errorIconPath" width="40" />
             </ds-space>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
-            <ds-space margin="small">
-              <ds-number :count="0" :label="$t('admin.dashboard.posts')" size="x-large" uppercase>
-                <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countPosts" />
-                </client-only>
-              </ds-number>
-            </ds-space>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
-            <ds-space margin="small">
-              <ds-number
-                :count="0"
-                :label="$t('admin.dashboard.comments')"
-                size="x-large"
-                uppercase
-              >
-                <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countComments" />
-                </client-only>
-              </ds-number>
-            </ds-space>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
-            <ds-space margin="small">
-              <ds-number
-                :count="0"
-                :label="$t('admin.dashboard.notifications')"
-                size="x-large"
-                uppercase
-              >
-                <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countNotifications" />
-                </client-only>
-              </ds-number>
-            </ds-space>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
-            <ds-space margin="small">
-              <ds-number :count="0" :label="$t('admin.dashboard.invites')" size="x-large" uppercase>
-                <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countInvites" />
-                </client-only>
-              </ds-number>
-            </ds-space>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
-            <ds-space margin="small">
-              <ds-number :count="0" :label="$t('admin.dashboard.follows')" size="x-large" uppercase>
-                <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countFollows" />
-                </client-only>
-              </ds-number>
-            </ds-space>
-          </ds-flex-item>
-          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
-            <ds-space margin="small">
-              <ds-number :count="0" :label="$t('admin.dashboard.shouts')" size="x-large" uppercase>
-                <client-only slot="count">
-                  <hc-count-to :end-val="statistics.countShouts" />
-                </client-only>
-              </ds-number>
-            </ds-space>
-          </ds-flex-item>
-        </ds-flex>
-      </ds-space>
-    </client-only>
+            <ds-text>
+              {{ $t('site.error-occurred') }}
+            </ds-text>
+          </ds-space>
+        </template>
+        <template v-else-if="data">
+          <ds-space margin="large">
+            <ds-flex>
+              <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+                <ds-space margin="small">
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.users')"
+                    size="x-large"
+                    uppercase
+                  >
+                    <client-only slot="count">
+                      <hc-count-to :end-val="data.statistics.countUsers" />
+                    </client-only>
+                  </ds-number>
+                </ds-space>
+              </ds-flex-item>
+              <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+                <ds-space margin="small">
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.posts')"
+                    size="x-large"
+                    uppercase
+                  >
+                    <client-only slot="count">
+                      <hc-count-to :end-val="data.statistics.countPosts" />
+                    </client-only>
+                  </ds-number>
+                </ds-space>
+              </ds-flex-item>
+              <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+                <ds-space margin="small">
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.comments')"
+                    size="x-large"
+                    uppercase
+                  >
+                    <client-only slot="count">
+                      <hc-count-to :end-val="data.statistics.countComments" />
+                    </client-only>
+                  </ds-number>
+                </ds-space>
+              </ds-flex-item>
+              <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+                <ds-space margin="small">
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.notifications')"
+                    size="x-large"
+                    uppercase
+                  >
+                    <client-only slot="count">
+                      <hc-count-to :end-val="data.statistics.countNotifications" />
+                    </client-only>
+                  </ds-number>
+                </ds-space>
+              </ds-flex-item>
+              <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+                <ds-space margin="small">
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.invites')"
+                    size="x-large"
+                    uppercase
+                  >
+                    <client-only slot="count">
+                      <hc-count-to :end-val="data.statistics.countInvites" />
+                    </client-only>
+                  </ds-number>
+                </ds-space>
+              </ds-flex-item>
+              <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+                <ds-space margin="small">
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.follows')"
+                    size="x-large"
+                    uppercase
+                  >
+                    <client-only slot="count">
+                      <hc-count-to :end-val="data.statistics.countFollows" />
+                    </client-only>
+                  </ds-number>
+                </ds-space>
+              </ds-flex-item>
+              <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+                <ds-space margin="small">
+                  <ds-number
+                    :count="0"
+                    :label="$t('admin.dashboard.shouts')"
+                    size="x-large"
+                    uppercase
+                  >
+                    <client-only slot="count">
+                      <hc-count-to :end-val="data.statistics.countShouts" />
+                    </client-only>
+                  </ds-number>
+                </ds-space>
+              </ds-flex-item>
+            </ds-flex>
+          </ds-space>
+        </template>
+      </template>
+    </ApolloQuery>
   </ds-card>
 </template>
 
 <script>
-import gql from 'graphql-tag'
 import HcCountTo from '~/components/CountTo.vue'
+import { Statistics } from '~/graphql/admin/Statistics'
 
 export default {
   components: {
@@ -92,30 +136,9 @@ export default {
   },
   data() {
     return {
-      statistics: {},
+      errorIconPath: '/img/svg/emoji/cry.svg',
+      Statistics,
     }
   },
-  computed: {
-    isClient() {
-      return process.client
-    },
-  },
-  apollo: {
-    statistics: {
-      query: gql`
-        query {
-          statistics {
-            countUsers
-            countPosts
-            countComments
-            countNotifications
-            countInvites
-            countFollows
-            countShouts
-          }
-        }
-      `,
-    },
-  },
 }
 </script>

From c61b03483e51a9047d525462fe8e15ef1ae8bf2d Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Thu, 5 Sep 2019 18:14:24 +0200
Subject: [PATCH 2/2] Failed to write a test for admin/index.vue

I am not able to properly mock the data for ApolloQuery. However I find
it valuable to push this particular piece of dead code. Maybe people find
it helpful.
---
 webapp/pages/admin/index.spec.js | 53 ++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 webapp/pages/admin/index.spec.js

diff --git a/webapp/pages/admin/index.spec.js b/webapp/pages/admin/index.spec.js
new file mode 100644
index 000000000..68256aa9d
--- /dev/null
+++ b/webapp/pages/admin/index.spec.js
@@ -0,0 +1,53 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import AdminIndexPage from './index.vue'
+import Styleguide from '@human-connection/styleguide'
+import VueApollo from 'vue-apollo'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+localVue.use(VueApollo)
+
+describe('admin/index.vue', () => {
+  let Wrapper
+  let store
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(AdminIndexPage, {
+        store,
+        mocks,
+        localVue,
+      })
+    }
+
+    describe('in loading state', () => {
+      beforeEach(() => {
+        mocks = { ...mocks, $apolloData: { loading: true } }
+      })
+
+      it.skip('shows a loading spinner', () => {
+        // I don't know how to mock the data that gets passed to
+        // ApolloQuery component
+        // What I found:
+        // https://github.com/Akryum/vue-apollo/issues/656
+        // https://github.com/Akryum/vue-apollo/issues/609
+        Wrapper()
+        const calls = mocks.$t.mock.calls
+        const expected = [['site.error-occurred']]
+        expect(calls).toEqual(expected)
+      })
+    })
+
+    describe('in error state', () => {
+      it.todo('displays an error message')
+    })
+  })
+})