Skip to content

Commit 291a4e9

Browse files
AnemyAnemy
authored
fix(compass-schema): fix name prop missing in multi type array field COMPASS-6397 (#3920)
1 parent 0c94217 commit 291a4e9

File tree

11 files changed

+521
-245
lines changed

11 files changed

+521
-245
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/compass-schema/.mocharc.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
module.exports = require('@mongodb-js/mocha-config-compass/compass-plugin');
1+
const path = require('path');
2+
const mochaConfig = require('@mongodb-js/mocha-config-compass/compass-plugin');
3+
4+
module.exports = {
5+
...mochaConfig,
6+
require: [
7+
...mochaConfig.require,
8+
// This package requires custom test setup for Leaflet support.
9+
path.resolve(__dirname, 'test', 'setup.js'),
10+
],
11+
};

‎packages/compass-schema/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"@mongodb-js/tsconfig-compass": "^1.0.1",
7373
"@mongodb-js/webpack-config-compass": "^1.0.4",
7474
"@testing-library/react": "^12.1.4",
75+
"@testing-library/user-event": "^13.5.0",
7576
"@types/chai": "^4.2.21",
7677
"@types/lodash.find": "^4.6.7",
7778
"@types/mocha": "^9.0.0",

‎packages/compass-schema/src/components/compass-schema/compass-schema.module.less‎

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -40,51 +40,6 @@
4040
margin-left: -16px;
4141
}
4242

43-
:global {
44-
.schema-field-type-list {
45-
.schema-field-wrapper {
46-
float: left;
47-
overflow: hidden;
48-
cursor: pointer;
49-
border: none;
50-
padding: 0;
51-
background: none;
52-
text-align: left;
53-
54-
&.schema-field-type-undefined {
55-
cursor: default;
56-
}
57-
58-
&.active > div > .schema-field-type {
59-
background: @palette__gray--dark-2;
60-
}
61-
62-
&.active.selected > div > .schema-field-type {
63-
background: @palette__yellow--base;
64-
}
65-
66-
.schema-field-type-list
67-
> .schema-field-wrapper:not(.active)
68-
> div
69-
> .schema-field-type {
70-
// nested array subtypes
71-
background: @palette__gray--light-1;
72-
}
73-
}
74-
75-
.schema-field-type {
76-
height: 5px;
77-
margin-right: 2px;
78-
background: @palette__gray--light-1;
79-
}
80-
81-
.schema-field-type-undefined > div > .schema-field-type {
82-
background: @palette__white;
83-
border: 1px solid @palette__gray--light-1;
84-
}
85-
}
86-
}
87-
8843
:global {
8944
div.minichart.unique {
9045
font-size: 12px;

‎packages/compass-schema/src/components/field.spec.tsx‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
import React from 'react';
2+
import { render, screen, within } from '@testing-library/react';
3+
import { expect } from 'chai';
4+
import AppRegistry from 'hadron-app-registry';
5+
import userEvent from '@testing-library/user-event';
6+
7+
import configureActions from '../actions';
8+
import Field from './field';
9+
10+
describe('Field', function () {
11+
let container: HTMLElement;
12+
let testAppRegistry: AppRegistry;
13+
14+
beforeEach(function () {
15+
testAppRegistry = new AppRegistry();
16+
testAppRegistry.registerStore('Query.Store', {
17+
state: {
18+
filter: {},
19+
valid: true,
20+
userTyping: false,
21+
},
22+
filter: {},
23+
listen: ((
24+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
25+
func: () => {
26+
/* noop */
27+
}
28+
) => {
29+
return () => {};
30+
}) as any,
31+
} as any);
32+
});
33+
34+
describe('basic field name', function () {
35+
beforeEach(function () {
36+
render(
37+
<Field
38+
enableMaps={false}
39+
actions={configureActions()}
40+
localAppRegistry={testAppRegistry}
41+
name="testFieldName"
42+
path="test"
43+
types={[
44+
{
45+
name: 'Double',
46+
path: 'testFieldName',
47+
probability: 0.7,
48+
fields: [],
49+
types: [],
50+
values: [123, 345, 999],
51+
},
52+
{
53+
name: 'String',
54+
path: 'testFieldName',
55+
probability: 0.3,
56+
fields: [],
57+
types: [],
58+
values: ['testa', 'testb', 'testc'],
59+
},
60+
]}
61+
/>
62+
);
63+
container = screen.getByTestId('schema-field');
64+
});
65+
66+
it('renders the field name', function () {
67+
const fieldName = within(container).getByText('testFieldName');
68+
expect(fieldName).to.be.visible;
69+
});
70+
71+
it('renders the various field types', function () {
72+
expect(within(container).getByText('String')).to.be.visible;
73+
expect(within(container).getByText('Double')).to.be.visible;
74+
expect(within(container).queryByText('Int32')).to.not.exist;
75+
});
76+
});
77+
78+
describe('document field with nested fields', function () {
79+
beforeEach(function () {
80+
render(
81+
<Field
82+
enableMaps={false}
83+
actions={configureActions()}
84+
localAppRegistry={testAppRegistry}
85+
name="documentField"
86+
path="documentField"
87+
types={[
88+
{
89+
name: 'Document',
90+
path: 'documentField',
91+
probability: 0.7,
92+
fields: [
93+
{
94+
name: 'nestedFieldName',
95+
path: 'documentField.nestedFieldName',
96+
probability: 1, // Always exists
97+
fields: [],
98+
types: [
99+
{
100+
name: 'String',
101+
path: 'documentField.nestedFieldName',
102+
probability: 1,
103+
fields: [],
104+
types: [],
105+
values: ['test11', 'test22'],
106+
},
107+
],
108+
},
109+
],
110+
types: [],
111+
},
112+
{
113+
name: 'String',
114+
path: 'documentField',
115+
probability: 0.3,
116+
fields: [],
117+
types: [],
118+
},
119+
]}
120+
/>
121+
);
122+
container = screen.getByTestId('schema-field');
123+
});
124+
125+
it('renders the field name', function () {
126+
const fieldName = within(container).getByText('documentField');
127+
expect(fieldName).to.be.visible;
128+
});
129+
130+
it('renders the field type', function () {
131+
expect(within(container).getByText('Document')).to.be.visible;
132+
});
133+
134+
it('does not render the nested fields', function () {
135+
expect(within(container).queryByText('nestedFieldName')).to.not.exist;
136+
});
137+
138+
it('renders the nested fields when the field is clicked', function () {
139+
const fieldNameButton = within(container).getByText('documentField');
140+
userEvent.click(fieldNameButton, undefined, {
141+
skipPointerEventsCheck: true,
142+
});
143+
expect(within(container).queryByText('nestedFieldName')).to.be.visible;
144+
});
145+
});
146+
147+
describe('array field with various types', function () {
148+
beforeEach(function () {
149+
render(
150+
<Field
151+
enableMaps={false}
152+
actions={configureActions()}
153+
localAppRegistry={testAppRegistry}
154+
name="arrayField"
155+
path="test"
156+
types={[
157+
{
158+
name: 'Array',
159+
path: 'arrayField',
160+
probability: 0.7,
161+
lengths: [2, 2],
162+
average_length: 2,
163+
total_count: 4,
164+
types: [
165+
{
166+
name: 'String',
167+
path: 'documentField',
168+
probability: 0.6,
169+
types: [],
170+
values: ['test11', 'test22'],
171+
},
172+
{
173+
name: 'Double',
174+
path: 'documentField',
175+
probability: 0.4,
176+
types: [],
177+
values: [555, 777],
178+
},
179+
],
180+
},
181+
{
182+
name: 'Date',
183+
path: 'arrayField',
184+
probability: 0.3,
185+
fields: [],
186+
types: [],
187+
},
188+
]}
189+
/>
190+
);
191+
container = screen.getByTestId('schema-field');
192+
});
193+
194+
it('renders the field name', function () {
195+
expect(within(container).getByText('arrayField')).to.be.visible;
196+
});
197+
198+
it('renders the field type', function () {
199+
expect(within(container).getByText('Array')).to.be.visible;
200+
});
201+
202+
it('renders the various types found in the array', function () {
203+
expect(within(container).getByText('String')).to.be.visible;
204+
expect(within(container).getByText('Double')).to.be.visible;
205+
expect(within(container).queryByText('Int32')).to.not.exist;
206+
});
207+
});
208+
});

0 commit comments

Comments
 (0)