1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
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';
jest.mock('~/lib/utils/common_utils', () => ({
contentTop: jest.fn(),
}));
jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
describe('AbuseCategorySelector', () => {
let wrapper;
const ACTION_PATH = '/abuse_reports/add_category';
const USER_ID = '1';
const REPORTED_FROM_URL = 'http://example.com';
const createComponent = (props) => {
wrapper = shallowMountExtended(AbuseCategorySelector, {
propsData: {
...props,
},
provide: {
reportAbusePath: ACTION_PATH,
reportedUserId: USER_ID,
reportedFromUrl: REPORTED_FROM_URL,
},
});
};
beforeEach(() => {
createComponent({ showDrawer: true });
});
afterEach(() => {
wrapper.destroy();
});
const findDrawer = () => wrapper.findComponent(GlDrawer);
const findTitle = () => wrapper.findByTestId('category-drawer-title');
const findForm = () => wrapper.findComponent(GlForm);
const findFormGroup = () => wrapper.findComponent(GlFormGroup);
const findRadioGroup = () => wrapper.findComponent(GlFormRadioGroup);
const findCSRFToken = () => findForm().find('input[name="authenticity_token"]');
const findUserId = () => wrapper.findByTestId('input-user-id');
const findReferer = () => wrapper.findByTestId('input-referer');
const findSubmitFormButton = () => wrapper.findByTestId('submit-form-button');
describe('Drawer', () => {
it('is open when prop showDrawer = true', () => {
expect(findDrawer().exists()).toBe(true);
expect(findDrawer().props('open')).toBe(true);
expect(findDrawer().props('zIndex')).toBe(300);
});
it('renders title', () => {
expect(findTitle().text()).toBe(wrapper.vm.$options.i18n.title);
});
it('emits close-drawer event', async () => {
await findDrawer().vm.$emit('close');
expect(wrapper.emitted('close-drawer')).toHaveLength(1);
});
describe('when props showDrawer = false', () => {
beforeEach(() => {
createComponent({ showDrawer: false });
});
it('hides the drawer', () => {
expect(findDrawer().props('open')).toBe(false);
});
});
});
describe('Select category form', () => {
it('renders POST form with path', () => {
expect(findForm().attributes()).toMatchObject({
method: 'post',
action: ACTION_PATH,
});
});
it('renders csrf token', () => {
expect(findCSRFToken().attributes('value')).toBe('mock-csrf-token');
});
it('renders label', () => {
expect(findFormGroup().exists()).toBe(true);
expect(findFormGroup().attributes('label')).toBe(wrapper.vm.$options.i18n.label);
});
it('renders radio group', () => {
expect(findRadioGroup().exists()).toBe(true);
expect(findRadioGroup().props('options')).toEqual(wrapper.vm.$options.categoryOptions);
expect(findRadioGroup().attributes('name')).toBe('abuse_report[category]');
expect(findRadioGroup().attributes('required')).not.toBeUndefined();
});
it('renders userId as a hidden fields', () => {
expect(findUserId().attributes()).toMatchObject({
type: 'hidden',
name: 'user_id',
value: USER_ID,
});
});
it('renders referer as a hidden fields', () => {
expect(findReferer().attributes()).toMatchObject({
type: 'hidden',
name: 'abuse_report[reported_from_url]',
value: REPORTED_FROM_URL,
});
});
it('renders submit button', () => {
expect(findSubmitFormButton().exists()).toBe(true);
expect(findSubmitFormButton().text()).toBe(wrapper.vm.$options.i18n.next);
});
});
});
|
