From 3409a34374024d8028c632a87e81fae9c775dab5 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Sat, 30 Nov 2019 02:22:53 +0100
Subject: [PATCH] Always show the menu to switch filters

---
 .../_new/features/ReportList/ReportList.vue   |  5 +--
 .../generic/ReportsTable/ReportsTable.spec.js | 36 +++++++++++++++++++
 .../generic/ReportsTable/ReportsTable.vue     | 12 +++++--
 3 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 webapp/components/_new/generic/ReportsTable/ReportsTable.spec.js

diff --git a/webapp/components/_new/features/ReportList/ReportList.vue b/webapp/components/_new/features/ReportList/ReportList.vue
index db03e9ca6..6b5488107 100644
--- a/webapp/components/_new/features/ReportList/ReportList.vue
+++ b/webapp/components/_new/features/ReportList/ReportList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-card space="small" v-if="reports && reports.length">
+  <ds-card space="small">
     <ds-flex class="notifications-page-flex">
       <ds-flex-item :width="{ lg: '85%' }">
         <ds-heading tag="h3">{{ $t('moderation.reports.name') }}</ds-heading>
@@ -13,19 +13,16 @@
     <ds-space />
     <reports-table :reports="reports" @confirm="confirm" />
   </ds-card>
-  <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
 </template>
 <script>
 import DropdownFilter from '~/components/DropdownFilter/DropdownFilter'
 import ReportsTable from '~/components/_new/generic/ReportsTable/ReportsTable'
-import HcEmpty from '~/components/Empty/Empty'
 import { reportsListQuery, reviewMutation } from '~/graphql/Moderation.js'
 
 export default {
   components: {
     DropdownFilter,
     ReportsTable,
-    HcEmpty,
   },
   data() {
     return {
diff --git a/webapp/components/_new/generic/ReportsTable/ReportsTable.spec.js b/webapp/components/_new/generic/ReportsTable/ReportsTable.spec.js
new file mode 100644
index 000000000..e8e7245a6
--- /dev/null
+++ b/webapp/components/_new/generic/ReportsTable/ReportsTable.spec.js
@@ -0,0 +1,36 @@
+import { config, mount } from '@vue/test-utils'
+import ReportsTable from './ReportsTable.vue'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = global.localVue
+localVue.use(Styleguide)
+
+config.stubs['client-only'] = '<span><slot /></span>'
+
+describe('ReportsTable', () => {
+  let propsData
+  let mocks
+  beforeEach(() => {
+    propsData = {}
+    mocks = {
+      $t: jest.fn(t => t),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(ReportsTable, { propsData, mocks, localVue })
+    }
+
+    describe('no reports', () => {
+      beforeEach(() => {
+        propsData = { ...propsData, reports: [] }
+      })
+
+      it('shows a placeholder', () => {
+        const wrapper = Wrapper()
+        expect(wrapper.text()).toContain('moderation.reports.empty')
+      })
+    })
+  })
+})
diff --git a/webapp/components/_new/generic/ReportsTable/ReportsTable.vue b/webapp/components/_new/generic/ReportsTable/ReportsTable.vue
index 87216233d..b11714223 100644
--- a/webapp/components/_new/generic/ReportsTable/ReportsTable.vue
+++ b/webapp/components/_new/generic/ReportsTable/ReportsTable.vue
@@ -1,6 +1,10 @@
 <template>
-  <table class="ds-table ds-table-condensed ds-table-bordered" cellspacing="0" cellpadding="0">
-    <colgroup><col width="" /></colgroup>
+  <table
+    v-if="reports && reports.length"
+    class="ds-table ds-table-condensed ds-table-bordered"
+    cellspacing="0"
+    cellpadding="0"
+  >
     <template v-for="report in reports">
       <thead
         :class="[
@@ -140,17 +144,21 @@
       </tbody>
     </template>
   </table>
+  <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
 </template>
+
 <script>
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import HcUser from '~/components/User/User'
 import FiledTable from '~/components/_new/generic/FiledTable/FiledTable'
+import HcEmpty from '~/components/Empty/Empty'
 
 export default {
   components: {
     CounterIcon,
     HcUser,
     FiledTable,
+    HcEmpty,
   },
   data() {
     return {