From e1c56346cc1636f297aceae9c6e87dd562a6b7d4 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 2 Dec 2019 20:48:48 +0100 Subject: [PATCH] Add story/spec for ReportsTable component/refactor - use data-test to target elements in tests --- .../ReportsTable/ReportsTable.spec.js | 198 +++++++++++++++++- .../ReportsTable/ReportsTable.story.js | 169 +++++++++++++++ .../features/ReportsTable/ReportsTable.vue | 36 ++-- 3 files changed, 382 insertions(+), 21 deletions(-) create mode 100644 webapp/components/_new/features/ReportsTable/ReportsTable.story.js diff --git a/webapp/components/_new/features/ReportsTable/ReportsTable.spec.js b/webapp/components/_new/features/ReportsTable/ReportsTable.spec.js index e8e7245a6..93be3ee6d 100644 --- a/webapp/components/_new/features/ReportsTable/ReportsTable.spec.js +++ b/webapp/components/_new/features/ReportsTable/ReportsTable.spec.js @@ -1,36 +1,216 @@ -import { config, mount } from '@vue/test-utils' +import { config, mount, RouterLinkStub } from '@vue/test-utils' +import Vuex from 'vuex' import ReportsTable from './ReportsTable.vue' -import Styleguide from '@human-connection/styleguide' +import { reports } from './ReportsTable.story.js' +import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon' const localVue = global.localVue -localVue.use(Styleguide) config.stubs['client-only'] = '' describe('ReportsTable', () => { - let propsData - let mocks + let propsData, mocks, stubs, getters, wrapper, reportsTable + beforeEach(() => { propsData = {} mocks = { - $t: jest.fn(t => t), + $t: jest.fn(string => string), + } + stubs = { + NuxtLink: RouterLinkStub, + } + getters = { + 'auth/user': () => { + return { slug: 'awesome-user' } + }, + 'auth/isModerator': () => true, } }) describe('mount', () => { const Wrapper = () => { - return mount(ReportsTable, { propsData, mocks, localVue }) + const store = new Vuex.Store({ + getters, + }) + return mount(ReportsTable, { propsData, mocks, stubs, localVue, store }) } - describe('no reports', () => { + describe('given no reports', () => { beforeEach(() => { propsData = { ...propsData, reports: [] } + wrapper = Wrapper() }) it('shows a placeholder', () => { - const wrapper = Wrapper() 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) + }) + + describe('Comment', () => { + let commentRow + beforeEach(() => { + commentRow = wrapper.find('[data-test="Comment"]') + }) + + it('renders a comments icon', () => { + const commentsIcon = commentRow.find(BaseIcon).props().name + expect(commentsIcon).toEqual('comments') + }) + + it('renders a link to the post, with the comment contentExcerpt', () => { + const postLink = commentRow.find('[data-test="post-link"]') + expect(postLink.text()).toEqual('@peter-lustig Lorem ipsum dolor sit amet, …') + }) + + it('renders the author', () => { + const username = commentRow.find('[data-test="louie"] b') + expect(username.text()).toEqual('Louie') + }) + + describe('given it has been reviewed', () => { + it('renders the enabled icon', () => { + const enabledIcon = commentRow + .findAll(BaseIcon) + .filter(icon => icon.props().name === 'eye') + expect(enabledIcon.exists()).toBe(true) + }) + + it('renders its current status', () => { + expect(commentRow.find('[data-test="enabled"]').text()).toEqual( + 'moderation.reports.enabledBy', + ) + }) + + it('renders the moderator who reviewed the resource', () => { + const username = commentRow.find('[data-test="moderator"] b') + expect(username.text()).toEqual('Moderator') + }) + }) + + describe('give report has not been closed', () => { + let confirmButton + beforeEach(() => { + confirmButton = commentRow.find('button.confirm') + }) + it('renders a confirm button', () => { + expect(confirmButton.exists()).toBe(true) + }) + + it('emits confirm event', () => { + confirmButton.trigger('click') + expect(wrapper.emitted().confirm[0][0]).toEqual(reports[0]) + }) + }) + }) + + describe('Post', () => { + let postRow + beforeEach(() => { + postRow = wrapper.find('[data-test="Post"]') + }) + + it('renders a bookmark icon', () => { + const postIcon = postRow.find(BaseIcon).props().name + expect(postIcon).toEqual('bookmark') + }) + + it('renders a link to the post', () => { + const postLink = postRow.find('[data-test="post-link"]') + expect(postLink.text()).toEqual("I'm a bigoted post!") + }) + + it('renders the author', () => { + const username = postRow.find('[data-test="dagobert"] b') + expect(username.text()).toEqual('Dagobert') + }) + + describe('given it has not been reviewed', () => { + it('renders the enabled icon', () => { + const enabledIcon = postRow + .findAll(BaseIcon) + .filter(icon => icon.props().name === 'eye') + expect(enabledIcon.exists()).toBe(true) + }) + + it('renders its current status', () => { + expect(postRow.find('[data-test="unreviewed"]').text()).toEqual( + 'moderation.reports.enabled', + ) + }) + }) + + describe('give report has not been closed', () => { + let confirmButton + beforeEach(() => { + confirmButton = postRow.find('button.confirm') + }) + + it('renders a confirm button', () => { + expect(confirmButton.exists()).toBe(true) + }) + + it('emits confirm event', () => { + confirmButton.trigger('click') + expect(wrapper.emitted().confirm[0][0]).toEqual(reports[1]) + }) + }) + }) + + describe('User', () => { + let userRow + beforeEach(() => { + userRow = wrapper.find('[data-test="User"]') + }) + + it('renders a bookmark icon', () => { + const userIcon = userRow.find(BaseIcon).props().name + expect(userIcon).toEqual('user') + }) + + it('renders a link to the user profile', () => { + const userLink = userRow.find('[data-test="abusive-user"] b') + expect(userLink.text()).toEqual('Abusive user') + }) + + describe('given it has been reviewed', () => { + it('renders the disabled icon', () => { + const disabledIcon = userRow + .findAll(BaseIcon) + .filter(icon => icon.props().name === 'eye-slash') + expect(disabledIcon.exists()).toBe(true) + }) + + it('renders its current status', () => { + expect(userRow.find('[data-test="disabled"]').text()).toEqual( + 'moderation.reports.disabledBy', + ) + }) + + it('renders the moderator who reviewed the resource', () => { + const username = userRow.find('[data-test="peter-lustig"] b') + expect(username.text()).toEqual('Peter Lustig') + }) + }) + + describe('give report has been closed', () => { + it('renders Decided text', () => { + expect(userRow.find('[data-test="closed"]').text()).toEqual( + 'moderation.reports.decided', + ) + }) + }) + }) + }) }) }) diff --git a/webapp/components/_new/features/ReportsTable/ReportsTable.story.js b/webapp/components/_new/features/ReportsTable/ReportsTable.story.js new file mode 100644 index 000000000..425906564 --- /dev/null +++ b/webapp/components/_new/features/ReportsTable/ReportsTable.story.js @@ -0,0 +1,169 @@ +import { storiesOf } from '@storybook/vue' +import { withA11y } from '@storybook/addon-a11y' +import { action } from '@storybook/addon-actions' +import ReportsTable from '~/components/_new/features/ReportsTable/ReportsTable' +import helpers from '~/storybook/helpers' +import { post } from '~/components/PostCard/PostCard.story.js' +import { user } from '~/components/User/User.story.js' + +helpers.init() +export const reports = [ + { + __typename: 'Report', + closed: false, + createdAt: '2019-10-29T15:36:02.106Z', + updatedAt: '2019-12-02T15:56:35.651Z', + disable: false, + filed: [ + { + __typename: 'FILED', + createdAt: '2019-12-02T15:56:35.676Z', + reasonCategory: 'pornographic_content_links', + reasonDescription: 'This comment is porno!!!', + submitter: { + ...user, + }, + }, + ], + resource: { + __typename: 'Comment', + id: 'b6b38937-3efc-4d5e-b12c-549e4d6551a5', + createdAt: '2019-10-29T15:38:25.184Z', + updatedAt: '2019-10-30T15:38:25.184Z', + disabled: false, + deleted: false, + content: + '

@peter-lustig

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra magna ac placerat. Tempor id eu nisl nunc mi ipsum faucibus vitae. Nibh praesent tristique magna sit amet purus gravida quis blandit. Magna eget est lorem ipsum dolor. In fermentum posuere urna nec. Eleifend donec pretium vulputate sapien nec sagittis aliquam. Augue interdum velit euismod in pellentesque. Id diam maecenas ultricies mi eget mauris pharetra. Donec pretium vulputate sapien nec. Dolor morbi non arcu risus quis varius quam quisque. Blandit turpis cursus in hac habitasse. Est ultricies integer quis auctor elit sed vulputate mi sit. Nunc consequat interdum varius sit amet mattis vulputate enim. Semper feugiat nibh sed pulvinar. Eget felis eget nunc lobortis mattis aliquam. Ultrices vitae auctor eu augue. Tellus molestie nunc non blandit massa enim nec dui. Pharetra massa massa ultricies mi quis hendrerit dolor. Nisl suscipit adipiscing bibendum est ultricies integer.

', + contentExcerpt: + '

@peter-lustig

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra …

', + post, + author: user, + }, + reviewed: [ + { + updatedAt: '2019-10-30T15:38:25.184Z', + moderator: { + __typename: 'User', + ...user, + name: 'Moderator', + id: 'moderator', + slug: 'moderator', + }, + }, + { + updatedAt: '2019-10-29T15:38:25.184Z', + moderator: { + __typename: 'User', + ...user, + name: 'Peter Lustig', + id: 'u3', + slug: 'peter-lustig', + }, + }, + ], + }, + { + __typename: 'Report', + closed: false, + createdAt: '2019-10-31T15:36:02.106Z', + updatedAt: '2019-12-03T15:56:35.651Z', + disable: true, + filed: [ + { + __typename: 'FILED', + createdAt: '2019-10-31T15:36:02.106Z', + reasonCategory: 'discrimination_etc', + reasonDescription: 'This post is bigoted', + submitter: { + ...user, + }, + }, + ], + resource: { + __typename: 'Post', + author: { + ...user, + id: 'u7', + name: 'Dagobert', + slug: 'dagobert', + }, + deleted: false, + disabled: true, + id: 'p2', + slug: 'bigoted-post', + title: "I'm a bigoted post!", + }, + reviewed: null, + }, + { + __typename: 'Report', + closed: true, + createdAt: '2019-10-30T15:36:02.106Z', + updatedAt: '2019-12-01T15:56:35.651Z', + disable: true, + filed: [ + { + __typename: 'FILED', + createdAt: '2019-10-30T15:36:02.106Z', + reasonCategory: 'discrimination_etc', + reasonDescription: 'this user is attacking me for who I am!', + submitter: { + ...user, + }, + }, + ], + resource: { + __typename: 'User', + commentedCount: 0, + contributionsCount: 0, + deleted: false, + disabled: true, + followedByCount: 0, + id: 'u5', + name: 'Abusive user', + slug: 'abusive-user', + }, + reviewed: [ + { + updatedAt: '2019-12-01T15:56:35.651Z', + moderator: { + __typename: 'User', + ...user, + name: 'Peter Lustig', + id: 'u3', + slug: 'peter-lustig', + }, + }, + { + updatedAt: '2019-11-30T15:56:35.651Z', + moderator: { + __typename: 'User', + ...user, + name: 'Moderator', + id: 'moderator', + slug: 'moderator', + }, + }, + ], + }, +] + +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/_new/features/ReportsTable/ReportsTable.vue b/webapp/components/_new/features/ReportsTable/ReportsTable.vue index a8fa669db..29637aefb 100644 --- a/webapp/components/_new/features/ReportsTable/ReportsTable.vue +++ b/webapp/components/_new/features/ReportsTable/ReportsTable.vue @@ -34,7 +34,7 @@ - +
- {{ report.resource.title || report.resource.contentExcerpt | truncate(50) }} + + {{ + report.resource.title || + $filters.removeHtml(report.resource.contentExcerpt) | truncate(50) + }} +
- +
@@ -79,6 +90,7 @@ :user="report.resource.author" :showAvatar="false" :trunc="30" + :data-test="report.resource.author.slug" /> — @@ -86,38 +98,35 @@

-
+
{{ $t('moderation.reports.disabledBy') }}
-
+
{{ $t('moderation.reports.enabledBy') }}

-
- - {{ $t('moderation.reports.disabled') }} -
-
+
{{ $t('moderation.reports.enabled') }}
- + {{ $t('moderation.reports.decided') }}