-
-
Notifications
You must be signed in to change notification settings - Fork 771
/
add-contact-modal.js
183 lines (149 loc) · 8.38 KB
/
add-contact-modal.js
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
/*global mock, converse */
const u = converse.env.utils;
const Strophe = converse.env.Strophe;
const sizzle = converse.env.sizzle;
describe("The 'Add Contact' widget", function () {
it("opens up an add modal when you click on it",
mock.initConverse([], {}, async function (_converse) {
await mock.waitForRoster(_converse, 'all');
await mock.openControlBox(_converse);
const cbview = _converse.chatboxviews.get('controlbox');
const dropdown = await u.waitUntil(
() => cbview.querySelector('.dropdown--contacts')
);
dropdown.querySelector('.add-contact').click()
const modal = _converse.api.modal.get('converse-add-contact-modal');
await u.waitUntil(() => u.isVisible(modal), 1000);
expect(modal.querySelector('form.add-xmpp-contact')).not.toBe(null);
const input_jid = modal.querySelector('input[name="jid"]');
const input_name = modal.querySelector('input[name="name"]');
input_jid.value = 'someone@';
const evt = new Event('input');
input_jid.dispatchEvent(evt);
expect(modal.querySelector('.suggestion-box li').textContent).toBe('someone@montague.lit');
input_jid.value = 'someone@montague.lit';
input_name.value = 'Someone';
modal.querySelector('button[type="submit"]').click();
const sent_IQs = _converse.api.connection.get().IQ_stanzas;
const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="someone@montague.lit" name="Someone"/></query>`+
`</iq>`);
}));
it("can be configured to not provide search suggestions",
mock.initConverse([], {'autocomplete_add_contact': false}, async function (_converse) {
await mock.waitForRoster(_converse, 'all', 0);
await mock.openControlBox(_converse);
const cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.add-contact').click()
const modal = _converse.api.modal.get('converse-add-contact-modal');
expect(modal.jid_auto_complete).toBe(undefined);
expect(modal.name_auto_complete).toBe(undefined);
await u.waitUntil(() => u.isVisible(modal), 1000);
expect(modal.querySelector('form.add-xmpp-contact')).not.toBe(null);
const input_jid = modal.querySelector('input[name="jid"]');
input_jid.value = 'someone@montague.lit';
modal.querySelector('button[type="submit"]').click();
const IQ_stanzas = _converse.api.connection.get().IQ_stanzas;
const sent_stanza = await u.waitUntil(
() => IQ_stanzas.filter(s => sizzle(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`, s).length).pop()
);
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="someone@montague.lit"/></query>`+
`</iq>`
);
}));
it("integrates with xhr_user_search_url to search for contacts",
mock.initConverse([], { 'xhr_user_search_url': 'http://example.org/?' },
async function (_converse) {
await mock.waitForRoster(_converse, 'all', 0);
spyOn(window, 'fetch').and.callFake(() => {
const json = [
{"jid": "marty@mcfly.net", "fullname": "Marty McFly"},
{"jid": "doc@brown.com", "fullname": "Doc Brown"}
];
return { json };
});
await mock.openControlBox(_converse);
const cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.add-contact').click()
const modal = _converse.api.modal.get('converse-add-contact-modal');
await u.waitUntil(() => u.isVisible(modal), 1000);
// TODO: We only have autocomplete for the name input
const input_el = modal.querySelector('input[name="name"]');
input_el.value = 'marty';
input_el.dispatchEvent(new Event('input'));
await u.waitUntil(() => modal.querySelector('.suggestion-box li'), 1000);
expect(modal.querySelectorAll('.suggestion-box li').length).toBe(1);
const suggestion = modal.querySelector('.suggestion-box li');
expect(suggestion.textContent).toBe('Marty McFly');
return;
// Mock selection
modal.name_auto_complete.select(suggestion);
expect(input_el.value).toBe('Marty McFly');
expect(modal.querySelector('input[name="jid"]').value).toBe('marty@mcfly.net');
modal.querySelector('button[type="submit"]').click();
const sent_IQs = _converse.api.connection.get().IQ_stanzas;
const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="marty@mcfly.net" name="Marty McFly"/></query>`+
`</iq>`);
window.XMLHttpRequest = XMLHttpRequestBackup;
}));
it("can be configured to not provide search suggestions for XHR search results",
mock.initConverse([],
{ 'autocomplete_add_contact': false,
'xhr_user_search_url': 'http://example.org/?' },
async function (_converse) {
await mock.waitForRoster(_converse, 'all');
await mock.openControlBox(_converse);
spyOn(window, 'fetch').and.callFake(() => {
let json;
const value = modal.querySelector('input[name="name"]').value;
if (value === 'existing') {
const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
json = [{"jid": contact_jid, "fullname": mock.cur_names[0]}];
} else if (value === 'romeo') {
json = [{"jid": "romeo@montague.lit", "fullname": "Romeo Montague"}];
} else if (value === 'ambiguous') {
json = [
{"jid": "marty@mcfly.net", "fullname": "Marty McFly"},
{"jid": "doc@brown.com", "fullname": "Doc Brown"}
];
} else if (value === 'insufficient') {
json = [];
} else {
json = [{"jid": "marty@mcfly.net", "fullname": "Marty McFly"}];
}
return { json };
});
const cbview = _converse.chatboxviews.get('controlbox');
cbview.querySelector('.add-contact').click()
const modal = _converse.api.modal.get('converse-add-contact-modal');
await u.waitUntil(() => u.isVisible(modal), 1000);
expect(modal.jid_auto_complete).toBe(undefined);
expect(modal.name_auto_complete).toBe(undefined);
const input_el = modal.querySelector('input[name="name"]');
input_el.value = 'ambiguous';
modal.querySelector('button[type="submit"]').click();
const feedback_el = await u.waitUntil(() => modal.querySelector('.invalid-feedback'));
expect(feedback_el.textContent).toBe('Sorry, could not find a contact with that name');
input_el.value = 'existing';
modal.querySelector('button[type="submit"]').click();
await u.waitUntil(() => feedback_el.textContent === 'This contact has already been added');
input_el.value = 'insufficient';
modal.querySelector('button[type="submit"]').click();
await u.waitUntil(() => feedback_el.textContent === 'Sorry, could not find a contact with that name');
input_el.value = 'Marty McFly';
modal.querySelector('button[type="submit"]').click();
const sent_IQs = _converse.api.connection.get().IQ_stanzas;
const sent_stanza = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq[type="set"] query[xmlns="${Strophe.NS.ROSTER}"]`)).pop());
expect(Strophe.serialize(sent_stanza)).toEqual(
`<iq id="${sent_stanza.getAttribute('id')}" type="set" xmlns="jabber:client">`+
`<query xmlns="jabber:iq:roster"><item jid="marty@mcfly.net" name="Marty McFly"/></query>`+
`</iq>`);
}));
});