diff --git a/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue b/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue index 266950e2769536fc58a119880713340fb5181112..be1ec55f292b5cdaf8382c9a326fa3e25570c31f 100644 --- a/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue +++ b/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue @@ -3,6 +3,7 @@ import { GlButton, GlDrawer, GlForm, GlFormGroup, GlFormRadioGroup } from '@gitl import { getContentWrapperHeight } from '~/lib/utils/dom_utils'; import { s__, __ } from '~/locale'; import csrf from '~/lib/utils/csrf'; +import { CATEGORY_OPTIONS } from '~/abuse_reports/components/constants'; export default { name: 'AbuseCategorySelector', @@ -40,19 +41,7 @@ export default { label: s__('ReportAbuse|Why are you reporting this user?'), next: __('Next'), }, - categoryOptions: [ - { value: 'spam', text: s__("ReportAbuse|They're posting spam.") }, - { value: 'offensive', text: s__("ReportAbuse|They're being offensive or abusive.") }, - { value: 'phishing', text: s__("ReportAbuse|They're phishing.") }, - { value: 'crypto', text: s__("ReportAbuse|They're crypto mining.") }, - { - value: 'credentials', - text: s__("ReportAbuse|They're posting personal information or credentials."), - }, - { value: 'copyright', text: s__("ReportAbuse|They're violating a copyright or trademark.") }, - { value: 'malware', text: s__("ReportAbuse|They're posting malware.") }, - { value: 'other', text: s__('ReportAbuse|Something else.') }, - ], + CATEGORY_OPTIONS, data() { return { selected: '', @@ -109,7 +98,7 @@ export default { <gl-form-group :label="$options.i18n.label" label-class="gl-text-black-normal"> <gl-form-radio-group v-model="selected" - :options="$options.categoryOptions" + :options="$options.CATEGORY_OPTIONS" name="abuse_report[category]" required /> diff --git a/app/assets/javascripts/abuse_reports/components/constants.js b/app/assets/javascripts/abuse_reports/components/constants.js new file mode 100644 index 0000000000000000000000000000000000000000..39b152f32d90fceae8f31c40fb5f110f8deb38d8 --- /dev/null +++ b/app/assets/javascripts/abuse_reports/components/constants.js @@ -0,0 +1,15 @@ +import { s__ } from '~/locale'; + +export const CATEGORY_OPTIONS = [ + { value: 'spam', text: s__("ReportAbuse|They're posting spam.") }, + { value: 'offensive', text: s__("ReportAbuse|They're being offensive or abusive.") }, + { value: 'phishing', text: s__("ReportAbuse|They're phishing.") }, + { value: 'crypto', text: s__("ReportAbuse|They're crypto mining.") }, + { + value: 'credentials', + text: s__("ReportAbuse|They're posting personal information or credentials."), + }, + { value: 'copyright', text: s__("ReportAbuse|They're violating a copyright or trademark.") }, + { value: 'malware', text: s__("ReportAbuse|They're posting malware.") }, + { value: 'other', text: s__('ReportAbuse|Something else.') }, +]; diff --git a/spec/frontend/abuse_reports/components/abuse_category_selector_spec.js b/spec/frontend/abuse_reports/components/abuse_category_selector_spec.js index 5de5f495f013801dc6f68b23df283e90cfb5db44..66408cb2f23b4413bc7540c1d3e27a659e4e273f 100644 --- a/spec/frontend/abuse_reports/components/abuse_category_selector_spec.js +++ b/spec/frontend/abuse_reports/components/abuse_category_selector_spec.js @@ -2,6 +2,7 @@ import { GlDrawer, GlForm, GlFormGroup, GlFormRadioGroup } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue'; +import { CATEGORY_OPTIONS } from '~/abuse_reports/components/constants'; jest.mock('~/lib/utils/common_utils', () => ({ contentTop: jest.fn(), @@ -54,7 +55,7 @@ describe('AbuseCategorySelector', () => { }); it('renders title', () => { - expect(findTitle().text()).toBe(wrapper.vm.$options.i18n.title); + expect(findTitle().text()).toBe('Report abuse to administrator'); }); it('emits close-drawer event', async () => { @@ -88,12 +89,12 @@ describe('AbuseCategorySelector', () => { it('renders label', () => { expect(findFormGroup().exists()).toBe(true); - expect(findFormGroup().attributes('label')).toBe(wrapper.vm.$options.i18n.label); + expect(findFormGroup().attributes('label')).toBe('Why are you reporting this user?'); }); it('renders radio group', () => { expect(findRadioGroup().exists()).toBe(true); - expect(findRadioGroup().props('options')).toEqual(wrapper.vm.$options.categoryOptions); + expect(findRadioGroup().props('options')).toEqual(CATEGORY_OPTIONS); expect(findRadioGroup().attributes('name')).toBe('abuse_report[category]'); expect(findRadioGroup().attributes('required')).not.toBeUndefined(); }); @@ -116,7 +117,7 @@ describe('AbuseCategorySelector', () => { it('renders submit button', () => { expect(findSubmitFormButton().exists()).toBe(true); - expect(findSubmitFormButton().text()).toBe(wrapper.vm.$options.i18n.next); + expect(findSubmitFormButton().text()).toBe('Next'); }); }); });