diff --git a/webapp/components/features/ReportsTable/ReportsTable.spec.js b/webapp/components/features/ReportsTable/ReportsTable.spec.js
new file mode 100644
index 000000000..0aa80b492
--- /dev/null
+++ b/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'] = ''
+config.stubs['nuxt-link'] = ''
+
+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)
+ })
+ })
+ })
+})
diff --git a/webapp/components/features/ReportsTable/ReportsTable.story.js b/webapp/components/features/ReportsTable/ReportsTable.story.js
new file mode 100644
index 000000000..1326b6c37
--- /dev/null
+++ b/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: ``,
+ }))
+ .add('without reports', () => ({
+ components: { ReportsTable },
+ store: helpers.store,
+ template: ``,
+ }))
diff --git a/webapp/components/features/ReportsTable/ReportsTable.vue b/webapp/components/features/ReportsTable/ReportsTable.vue
new file mode 100644
index 000000000..512c04ea8
--- /dev/null
+++ b/webapp/components/features/ReportsTable/ReportsTable.vue
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ {{ $t('moderation.reports.submitter') }} |
+ {{ $t('moderation.reports.content') }} |
+ {{ $t('moderation.reports.author') }} |
+ {{ $t('moderation.reports.status') }} |
+ {{ $t('moderation.reports.decision') }} |
+
+
+
+
+
+
+
+
+
+