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 @@ + + +