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
|
import { GlAlert, GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import UserLimitNotification from '~/invite_members/components/user_limit_notification.vue';
import {
NOTIFICATION_LIMIT_VARIANT,
REACHED_LIMIT_VARIANT,
CLOSE_TO_LIMIT_VARIANT,
} from '~/invite_members/constants';
import { freeUsersLimit, remainingSeats } from '../mock_data/member_modal';
const INFO_ALERT_TITLE = 'Your top-level group name is over the 5 user limit.';
const WARNING_ALERT_TITLE = 'You only have space for 2 more members in name';
describe('UserLimitNotification', () => {
let wrapper;
const findAlert = () => wrapper.findComponent(GlAlert);
const findTrialLink = () => wrapper.findByTestId('trial-link');
const findUpgradeLink = () => wrapper.findByTestId('upgrade-link');
const createComponent = (limitVariant, usersLimitDataset = {}, props = {}) => {
wrapper = shallowMountExtended(UserLimitNotification, {
propsData: {
limitVariant,
usersLimitDataset: {
remainingSeats,
freeUsersLimit,
newTrialRegistrationPath: 'newTrialRegistrationPath',
purchasePath: 'purchasePath',
...usersLimitDataset,
},
...props,
},
provide: { name: 'name' },
stubs: { GlSprintf },
});
};
describe('when previewing free user cap', () => {
it("renders user's preview limit notification", () => {
createComponent(NOTIFICATION_LIMIT_VARIANT);
const alert = findAlert();
expect(alert.attributes('title')).toEqual(INFO_ALERT_TITLE);
expect(alert.text()).toContain('GitLab will enforce this limit in the future.');
});
});
describe('when close to limit within a group', () => {
it("renders user's limit notification", () => {
createComponent(CLOSE_TO_LIMIT_VARIANT);
const alert = findAlert();
expect(alert.attributes('title')).toEqual(WARNING_ALERT_TITLE);
expect(alert.text()).toContain('To get more members an owner of the group can');
});
});
describe('when limit is reached', () => {
it("renders user's limit notification", () => {
createComponent(REACHED_LIMIT_VARIANT);
const alert = findAlert();
expect(alert.attributes('title')).toEqual("You've reached your 5 members limit for name");
expect(alert.text()).toContain(
'To invite new users to this top-level group, you must remove existing users.',
);
});
});
describe('tracking', () => {
it.each([CLOSE_TO_LIMIT_VARIANT, REACHED_LIMIT_VARIANT])(
`has tracking attributes for %j variant`,
(variant) => {
createComponent(variant);
expect(findTrialLink().attributes('data-track-action')).toBe('click_link');
expect(findTrialLink().attributes('data-track-label')).toBe(
`start_trial_user_limit_notification_${variant}`,
);
expect(findUpgradeLink().attributes('data-track-action')).toBe('click_link');
expect(findUpgradeLink().attributes('data-track-label')).toBe(
`upgrade_user_limit_notification_${variant}`,
);
},
);
});
});
|
