Rename component, add story/specs

webapp/components/features/FiledReportsTable/FiledReportsTable.spec.js

@@ -0,0 +1,93 @@
+import { config, mount, RouterLinkStub } from '@vue/test-utils'
+import Vuex from 'vuex'
+import FiledReportsTable from './FiledReportsTable'
+import { reports } from '~/components/features/ReportList/ReportList.story.js'
+
+const localVue = global.localVue
+
+localVue.filter('truncate', string => string)
+
+config.stubs['client-only'] = '<span><slot /></span>'
+
+describe('FiledReportsTable.vue', () => {
+  let wrapper, mocks, propsData, stubs, filed
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(string => string),
+    }
+    stubs = {
+      NuxtLink: RouterLinkStub,
+    }
+    propsData = {}
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      const store = new Vuex.Store({
+        getters: {
+          'auth/isModerator': () => true,
+          'auth/user': () => {
+            return { id: 'moderator' }
+          },
+        },
+      })
+      return mount(FiledReportsTable, {
+        propsData,
+        mocks,
+        localVue,
+        store,
+        stubs,
+      })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    describe('given reports', () => {
+      beforeEach(() => {
+        filed = reports.map(report => report.filed)
+        propsData.filed = filed[0]
+        wrapper = Wrapper()
+      })
+
+      it('renders a table', () => {
+        expect(wrapper.find('.ds-table').exists()).toBe(true)
+      })
+
+      it('has 4 columns', () => {
+        expect(wrapper.findAll('.ds-table-col')).toHaveLength(4)
+      })
+
+      describe('FiledReport', () => {
+        it('renders the reporting user', () => {
+          const userSlug = wrapper.find('[data-test="filing-user"]')
+          expect(userSlug.text()).toContain('@community-moderator')
+        })
+
+        it('renders the reported date', () => {
+          const date = wrapper.find('[data-test="filed-date"]')
+          expect(date.text()).toEqual('10/02/2019')
+        })
+
+        it('renders the category text', () => {
+          const columns = wrapper.findAll('.ds-table-col')
+          const reasonCategory = columns.filter(
+            category =>
+              category.text() === 'report.reason.category.options.pornographic_content_links',
+          )
+          expect(reasonCategory.exists()).toBe(true)
+        })
+
+        it("renders the Post's content", () => {
+          const columns = wrapper.findAll('.ds-table-col')
+          const reasonDescription = columns.filter(
+            column => column.text() === 'This comment is porno!!!',
+          )
+          expect(reasonDescription.exists()).toBe(true)
+        })
+      })
+    })
+  })
+})

webapp/components/features/FiledReportsTable/FiledReportsTable.story.js

@@ -0,0 +1,25 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import FiledReportsTable from '~/components/features/FiledReportsTable/FiledReportsTable'
+import helpers from '~/storybook/helpers'
+import { reports } from '~/components/features/ReportList/ReportList.story.js'
+
+storiesOf('FiledReportsTable', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('with filed reports', () => ({
+    components: { FiledReportsTable },
+    store: helpers.store,
+    data: () => ({
+      filed: reports[0].filed,
+    }),
+    template: `<table>
+                <tbody class="report-row">
+                  <tr class="row">
+                    <td colspan="100%">
+                      <filed-reports-table :filed="filed" />
+                    </td>
+                  </tr>
+                </tbody>
+              </table>`,
+  }))

webapp/components/features/FiledReportsTable/FiledReportsTable.vue

@@ -0,0 +1,73 @@
+<template>
+  <ds-table
+    class="nested-table"
+    v-if="filed && filed.length"
+    :data="filed"
+    :fields="fields"
+    condensed
+  >
+    <template #submitter="scope">
+      <hc-user
+        :user="scope.row.submitter"
+        :showAvatar="false"
+        :trunc="30"
+        data-test="filing-user"
+      />
+    </template>
+    <template #reportedOn="scope">
+      <ds-text size="small">
+        <hc-relative-date-time :date-time="scope.row.createdAt" data-test="filed-date" />
+      </ds-text>
+    </template>
+    <template #reasonCategory="scope">
+      {{ $t('report.reason.category.options.' + scope.row.reasonCategory) }}
+    </template>
+    <template #reasonDescription="scope">
+      {{ scope.row.reasonDescription.length ? scope.row.reasonDescription : '—' }}
+    </template>
+  </ds-table>
+</template>
+<script>
+import HcUser from '~/components/User/User'
+import HcRelativeDateTime from '~/components/RelativeDateTime'
+
+export default {
+  components: {
+    HcUser,
+    HcRelativeDateTime,
+  },
+  props: {
+    filed: { type: Array, default: () => [] },
+  },
+  computed: {
+    fields() {
+      return {
+        submitter: {
+          label: this.$t('moderation.reports.submitter'),
+          width: '15%',
+        },
+        reportedOn: {
+          label: this.$t('moderation.reports.reportedOn'),
+          width: '20%',
+        },
+        reasonCategory: {
+          label: this.$t('moderation.reports.reasonCategory'),
+          width: '30%',
+        },
+        reasonDescription: {
+          label: this.$t('moderation.reports.reasonDescription'),
+          width: '35%',
+        },
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.nested-table {
+  padding: $space-small;
+  border-top: $border-size-base solid $color-neutral-60;
+  border-bottom: $border-size-base solid $color-neutral-60;
+}
+</style>