Refactor component/story/test

- Remove data-test where not necessary
- Refactor tests to remove tests that belong in ReportRow
- Fix story

webapp/components/features/ReportsTable/ReportsTable.spec.js

@@ -0,0 +1,62 @@
+import { config, mount } from '@vue/test-utils'
+import Vuex from 'vuex'
+import ReportsTable from './ReportsTable.vue'
+import { reports } from '~/components/features/ReportsList/ReportsList.story.js'
+
+const localVue = global.localVue
+
+config.stubs['client-only'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
+
+describe('ReportsTable', () => {
+  let propsData, mocks, getters, wrapper, reportsTable
+
+  beforeEach(() => {
+    propsData = {}
+    mocks = {
+      $t: jest.fn(string => string),
+    }
+    getters = {
+      'auth/user': () => {
+        return { slug: 'awesome-user' }
+      },
+      'auth/isModerator': () => true,
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      const store = new Vuex.Store({
+        getters,
+      })
+      return mount(ReportsTable, { propsData, mocks, localVue, store })
+    }
+
+    describe('given no reports', () => {
+      beforeEach(() => {
+        propsData = { ...propsData, reports: [] }
+        wrapper = Wrapper()
+      })
+
+      it('shows a placeholder', () => {
+        expect(wrapper.text()).toContain('moderation.reports.empty')
+      })
+    })
+
+    describe('given reports', () => {
+      beforeEach(() => {
+        propsData = { ...propsData, reports }
+        wrapper = Wrapper()
+        reportsTable = wrapper.find('.ds-table')
+      })
+
+      it('renders a table', () => {
+        expect(reportsTable.exists()).toBe(true)
+      })
+
+      it('renders at least one ReportRow component', () => {
+        expect(wrapper.find('.report-row').exists()).toBe(true)
+      })
+    })
+  })
+})

webapp/components/features/ReportsTable/ReportsTable.story.js

@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import { action } from '@storybook/addon-actions'
+import ReportsTable from '~/components/features/ReportsTable/ReportsTable'
+import helpers from '~/storybook/helpers'
+import { reports } from '~/components/features/ReportList/ReportList.story.js'
+
+helpers.init()
+
+storiesOf('ReportsTable', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('with reports', () => ({
+    components: { ReportsTable },
+    store: helpers.store,
+    data: () => ({
+      reports,
+    }),
+    methods: {
+      confirm: action('confirm'),
+    },
+    template: `<reports-table :reports="reports" @confirm="confirm" />`,
+  }))
+  .add('without reports', () => ({
+    components: { ReportsTable },
+    store: helpers.store,
+    template: `<reports-table />`,
+  }))

webapp/components/features/ReportsTable/ReportsTable.vue

@@ -0,0 +1,50 @@
+<template>
+  <table
+    v-if="reports && reports.length"
+    class="ds-table ds-table-condensed ds-table-bordered reports-table"
+    cellspacing="0"
+    cellpadding="0"
+  >
+    <colgroup>
+      <col width="4%" />
+      <col width="14%" />
+      <col width="36%" />
+      <col width="14%" />
+      <col width="20%" />
+      <col width="12%" />
+    </colgroup>
+    <thead class="ds-table-col ds-table-head-col">
+      <tr valign="top">
+        <th class="ds-table-head-col"></th>
+        <th class="ds-table-head-col">{{ $t('moderation.reports.submitter') }}</th>
+        <th class="ds-table-head-col">{{ $t('moderation.reports.content') }}</th>
+        <th class="ds-table-head-col">{{ $t('moderation.reports.author') }}</th>
+        <th class="ds-table-head-col">{{ $t('moderation.reports.status') }}</th>
+        <th class="ds-table-head-col">{{ $t('moderation.reports.decision') }}</th>
+      </tr>
+    </thead>
+    <template v-for="report in reports">
+      <report-row
+        :key="report.resource.id"
+        :report="report"
+        @confirm-report="$emit('confirm', report)"
+      />
+    </template>
+  </table>
+  <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
+</template>
+
+<script>
+import HcEmpty from '~/components/Empty/Empty'
+import ReportRow from '~/components/features/ReportRow/ReportRow'
+
+export default {
+  components: {
+    HcEmpty,
+    ReportRow,
+  },
+  props: {
+    reports: { type: Array, default: () => [] },
+  },
+}
+</script>