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
|
import { mount } from '@vue/test-utils';
import { AVAILABILITY_STATUS } from '~/set_status_modal/constants';
import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
const name = 'Administrator';
const containerClasses = 'gl-cool-class gl-over-9000';
describe('UserNameWithStatus', () => {
let wrapper;
function createComponent(props = {}) {
wrapper = mount(UserNameWithStatus, {
propsData: { name, containerClasses, ...props },
});
}
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('will render the users name', () => {
expect(wrapper.html()).toContain(name);
});
it('will not render "Busy"', () => {
expect(wrapper.html()).not.toContain('Busy');
});
it('will render all relevant containerClasses', () => {
const classes = wrapper.find('span').classes().join(' ');
expect(classes).toBe(containerClasses);
});
describe(`with availability="${AVAILABILITY_STATUS.BUSY}"`, () => {
beforeEach(() => {
createComponent({ availability: AVAILABILITY_STATUS.BUSY });
});
it('will render "Busy"', () => {
expect(wrapper.text()).toContain('(Busy)');
});
});
describe('when user has pronouns set', () => {
const pronouns = 'they/them';
beforeEach(() => {
createComponent({ pronouns });
});
it("renders user's name with pronouns", () => {
expect(wrapper.text()).toMatchInterpolatedText(`${name} (${pronouns})`);
});
});
describe('when user does not have pronouns set', () => {
describe.each`
pronouns
${undefined}
${null}
${''}
${' '}
`('when `pronouns` prop is $pronouns', ({ pronouns }) => {
it("renders only the user's name", () => {
createComponent({ pronouns });
expect(wrapper.text()).toMatchInterpolatedText(name);
});
});
});
});
|
