Skip to content

Commit 91cd4da

Browse files
paula-stachopaula-stacho
authored
fix: trimming whitespaces when creating/editing a namespace COMPASS-8123 (#6205)
1 parent ce9cb72 commit 91cd4da

File tree

5 files changed

+530
-100
lines changed

5 files changed

+530
-100
lines changed

‎packages/databases-collections/src/components/create-namespace-modal.spec.tsx‎

Lines changed: 314 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
import React from 'react';
2+
import Sinon from 'sinon';
3+
import { expect } from 'chai';
4+
import {
5+
screen,
6+
cleanup,
7+
waitFor,
8+
userEvent,
9+
} from '@mongodb-js/testing-library-compass';
10+
import type AppRegistry from 'hadron-app-registry';
11+
12+
import { CreateNamespacePlugin } from '../..';
13+
import {
14+
createDefaultConnectionInfo,
15+
renderWithConnections,
16+
} from '@mongodb-js/testing-library-compass';
17+
18+
describe('CreateNamespaceModal [Component]', function () {
19+
const connectionId = '12345';
20+
const sandbox = Sinon.createSandbox();
21+
const mockConnection = {
22+
...createDefaultConnectionInfo(),
23+
id: connectionId,
24+
};
25+
let createCollectionSpy: Sinon.SinonSpy;
26+
let appRegistry: AppRegistry;
27+
28+
beforeEach(async function () {
29+
const { globalAppRegistry, getDataServiceForConnection, connectionsStore } =
30+
renderWithConnections(<CreateNamespacePlugin></CreateNamespacePlugin>, {
31+
connections: [mockConnection],
32+
connectFn() {
33+
return {
34+
createCollection() {
35+
return Promise.resolve({} as any);
36+
},
37+
createDataKey() {
38+
return Promise.resolve({});
39+
},
40+
configuredKMSProviders() {
41+
return [];
42+
},
43+
};
44+
},
45+
});
46+
47+
appRegistry = globalAppRegistry;
48+
49+
await connectionsStore.actions.connect(mockConnection);
50+
51+
createCollectionSpy = sandbox.spy(
52+
getDataServiceForConnection(connectionId),
53+
'createCollection'
54+
);
55+
});
56+
57+
afterEach(function () {
58+
sandbox.resetHistory();
59+
cleanup();
60+
});
61+
62+
context('Create collection', function () {
63+
beforeEach(async () => {
64+
appRegistry.emit(
65+
'open-create-collection',
66+
{
67+
database: 'foo',
68+
},
69+
{ connectionId: '12345' }
70+
);
71+
72+
await waitFor(() =>
73+
screen.getByRole('heading', { name: 'Create Collection' })
74+
);
75+
});
76+
77+
it('renders the correct text on the submit button', () => {
78+
const submitButton = screen.getByTestId('submit-button');
79+
expect(submitButton.textContent).to.equal('Create Collection');
80+
});
81+
82+
it('button is disabled when the input is empty', () => {
83+
const submitButton = screen.getByTestId('submit-button');
84+
const input = screen.getByTestId('collection-name');
85+
expect(submitButton.getAttribute('aria-disabled')).to.equal('true');
86+
87+
userEvent.clear(input);
88+
userEvent.type(input, 'baz');
89+
expect(submitButton.getAttribute('aria-disabled')).to.equal('false');
90+
userEvent.clear(input);
91+
expect(submitButton.getAttribute('aria-disabled')).to.equal('true');
92+
});
93+
94+
context('when the user has submitted the form (with options)', () => {
95+
beforeEach(() => {
96+
const submitButton = screen.getByRole('button', {
97+
name: 'Create Collection',
98+
});
99+
const input = screen.getByRole('textbox', { name: 'Collection Name' });
100+
const additionalPreferences = screen.getByRole('button', {
101+
name: /Additional preferences/,
102+
});
103+
userEvent.clear(input);
104+
userEvent.type(input, 'bar');
105+
userEvent.click(additionalPreferences);
106+
const clusteredCollection = screen.getByRole('checkbox', {
107+
name: 'Clustered Collection',
108+
});
109+
userEvent.click(clusteredCollection, undefined, {
110+
// leafygreen adds pointer-events: none on actually clickable elements
111+
skipPointerEventsCheck: true,
112+
});
113+
userEvent.click(submitButton);
114+
});
115+
116+
it('calls the dataservice create collection method', async () => {
117+
await waitFor(() => {
118+
expect(createCollectionSpy).to.have.been.calledOnceWith(
119+
'foo.bar',
120+
Sinon.match({
121+
clusteredIndex: {
122+
unique: true,
123+
},
124+
})
125+
);
126+
});
127+
});
128+
});
129+
130+
context(
131+
'when the user submitted the collection creation form with extra whitespaces',
132+
() => {
133+
beforeEach(() => {
134+
const submitButton = screen.getByRole('button', {
135+
name: 'Create Collection',
136+
});
137+
const input = screen.getByRole('textbox', {
138+
name: 'Collection Name',
139+
});
140+
userEvent.clear(input);
141+
userEvent.type(input, ' baz ');
142+
userEvent.click(submitButton);
143+
});
144+
145+
it('trims the white spaces on submit', async () => {
146+
await waitFor(() => {
147+
expect(createCollectionSpy).to.have.been.calledOnceWithExactly(
148+
'foo.baz',
149+
{}
150+
);
151+
});
152+
});
153+
}
154+
);
155+
});
156+
157+
context(
158+
'Create collection - the database has extra whitespaces',
159+
function () {
160+
beforeEach(async function () {
161+
appRegistry.emit(
162+
'open-create-collection',
163+
{
164+
database: ' foo',
165+
},
166+
{ connectionId: '12345' }
167+
);
168+
169+
await waitFor(() =>
170+
screen.getByRole('heading', { name: 'Create Collection' })
171+
);
172+
});
173+
174+
afterEach(function () {
175+
sandbox.resetHistory();
176+
cleanup();
177+
});
178+
179+
context(
180+
'when the user submitted the collection creation form with extra whitespaces',
181+
() => {
182+
beforeEach(() => {
183+
const submitButton = screen.getByRole('button', {
184+
name: 'Create Collection',
185+
});
186+
const input = screen.getByRole('textbox', {
187+
name: 'Collection Name',
188+
});
189+
userEvent.clear(input);
190+
userEvent.type(input, ' baz ');
191+
userEvent.click(submitButton);
192+
});
193+
194+
it('trims the white spaces on submit - but only for the collection', async () => {
195+
await waitFor(() => {
196+
expect(createCollectionSpy).to.have.been.calledOnceWithExactly(
197+
' foo.baz',
198+
{}
199+
);
200+
});
201+
});
202+
}
203+
);
204+
}
205+
);
206+
207+
context('Create database + collection', function () {
208+
beforeEach(async function () {
209+
appRegistry.emit('open-create-database', { connectionId: '12345' });
210+
211+
await waitFor(() =>
212+
screen.getByRole('heading', { name: 'Create Database' })
213+
);
214+
});
215+
216+
afterEach(function () {
217+
sandbox.resetHistory();
218+
cleanup();
219+
});
220+
221+
it('renders the correct text on the submit button', () => {
222+
const submitButton = screen.getByTestId('submit-button');
223+
expect(submitButton.textContent).to.equal('Create Database');
224+
});
225+
226+
it('button is disabled when the input is empty', () => {
227+
const submitButton = screen.getByTestId('submit-button');
228+
const dbInput = screen.getByTestId('database-name');
229+
const collInput = screen.getByTestId('collection-name');
230+
expect(submitButton.getAttribute('aria-disabled')).to.equal('true');
231+
232+
userEvent.clear(dbInput);
233+
userEvent.type(dbInput, 'db1');
234+
userEvent.clear(collInput);
235+
userEvent.type(collInput, 'baz');
236+
expect(submitButton.getAttribute('aria-disabled')).to.equal('false');
237+
userEvent.clear(dbInput);
238+
expect(submitButton.getAttribute('aria-disabled')).to.equal('true');
239+
});
240+
241+
context('when the user has submitted the form (with options)', () => {
242+
beforeEach(async () => {
243+
const submitButton = await screen.findByRole('button', {
244+
name: 'Create Database',
245+
});
246+
const dbInput = screen.getByRole('textbox', { name: 'Database Name' });
247+
const collInput = screen.getByRole('textbox', {
248+
name: 'Collection Name',
249+
});
250+
const additionalPreferences = screen.getByRole('button', {
251+
name: /Additional preferences/,
252+
});
253+
userEvent.clear(dbInput);
254+
userEvent.type(dbInput, 'db1');
255+
userEvent.clear(collInput);
256+
userEvent.type(collInput, 'bar');
257+
userEvent.click(additionalPreferences);
258+
const clusteredCollection = await screen.findByRole('checkbox', {
259+
name: 'Clustered Collection',
260+
});
261+
userEvent.click(clusteredCollection, undefined, {
262+
// leafygreen adds pointer-events: none on actually clickable elements
263+
skipPointerEventsCheck: true,
264+
});
265+
userEvent.click(submitButton);
266+
});
267+
268+
it('calls the dataservice create collection method', async () => {
269+
await waitFor(() => {
270+
expect(createCollectionSpy).to.have.been.calledOnceWith(
271+
'db1.bar',
272+
Sinon.match({
273+
clusteredIndex: {
274+
unique: true,
275+
},
276+
})
277+
);
278+
});
279+
});
280+
});
281+
282+
context(
283+
'when the user submitted the database creation form with extra whitespaces',
284+
() => {
285+
beforeEach(() => {
286+
const submitButton = screen.getByRole('button', {
287+
name: 'Create Database',
288+
});
289+
const dbInput = screen.getByRole('textbox', {
290+
name: 'Database Name',
291+
});
292+
const collInput = screen.getByRole('textbox', {
293+
name: 'Collection Name',
294+
});
295+
296+
userEvent.clear(dbInput);
297+
userEvent.type(dbInput, ' db1 ');
298+
userEvent.clear(collInput);
299+
userEvent.type(collInput, ' baz ');
300+
userEvent.click(submitButton);
301+
});
302+
303+
it('trims the white spaces on submit', async () => {
304+
await waitFor(() => {
305+
expect(createCollectionSpy).to.have.been.calledOnceWithExactly(
306+
'db1.baz',
307+
{}
308+
);
309+
});
310+
});
311+
}
312+
);
313+
});
314+
});

0 commit comments

Comments
 (0)