Skip to content

Commit 4f05381

Browse files
gagikgagik
committed
fix: adjust tests
1 parent 74f3d6e commit 4f05381

File tree

4 files changed

+104
-113
lines changed

4 files changed

+104
-113
lines changed

‎packages/compass-components/src/components/content-with-fallback.spec.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,10 @@ describe('ContentWithFallback', function () {
5858
{ container }
5959
);
6060

61-
expect(container).to.be.empty;
61+
expect(container.children.length).to.equal(1);
62+
expect(container.children[0].getAttribute('data-testid')).to.equal(
63+
'context-menu'
64+
);
6265
});
6366

6467
it('should render fallback when the timeout passes', async function () {

‎packages/compass-components/src/components/context-menu.spec.tsx

Lines changed: 99 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -28,40 +28,88 @@ describe('useContextMenuItems', function () {
2828
);
2929
};
3030

31-
describe('when used outside provider', function () {
32-
it('throws an error', function () {
33-
const items = [
34-
{
35-
label: 'Test Item',
36-
onAction: () => {},
37-
},
38-
];
39-
40-
expect(() => {
41-
render(<TestComponent items={items} />);
42-
}).to.throw('useContextMenu called outside of the provider');
43-
});
44-
});
45-
46-
describe('with a valid provider', function () {
47-
it('renders without error', function () {
48-
const items = [
49-
{
50-
label: 'Test Item',
51-
onAction: () => {},
52-
},
53-
];
54-
31+
it('errors if the component is double wrapped', function () {
32+
const items = [
33+
{
34+
label: 'Test Item',
35+
onAction: () => {},
36+
},
37+
];
38+
39+
expect(() => {
5540
render(
5641
<ContextMenuProvider wrapper={ContextMenu}>
5742
<TestComponent items={items} />
5843
</ContextMenuProvider>
5944
);
45+
}).to.throw(
46+
'Duplicated ContextMenuProvider found. Please remove the nested provider.'
47+
);
48+
});
6049

61-
expect(screen.getByTestId(menuTestTriggerId)).to.exist;
62-
});
50+
it('renders without error', function () {
51+
const items = [
52+
{
53+
label: 'Test Item',
54+
onAction: () => {},
55+
},
56+
];
57+
58+
render(<TestComponent items={items} />);
59+
60+
expect(screen.getByTestId(menuTestTriggerId)).to.exist;
61+
});
62+
63+
it('shows context menu with items on right click', function () {
64+
const items = [
65+
{
66+
label: 'Test Item 1',
67+
onAction: () => {},
68+
},
69+
{
70+
label: 'Test Item 2',
71+
onAction: () => {},
72+
},
73+
];
74+
75+
render(<TestComponent items={items} />);
76+
77+
const trigger = screen.getByTestId(menuTestTriggerId);
78+
userEvent.click(trigger, { button: 2 });
79+
80+
// The menu items should be rendered
81+
expect(screen.getByTestId('menu-group-0-item-0')).to.exist;
82+
expect(screen.getByTestId('menu-group-0-item-1')).to.exist;
83+
});
84+
85+
it('triggers the correct action when menu item is clicked', function () {
86+
const onAction = sinon.spy();
87+
const items = [
88+
{
89+
label: 'Test Item 1',
90+
onAction: () => onAction(1),
91+
},
92+
{
93+
label: 'Test Item 2',
94+
onAction: () => onAction(2),
95+
},
96+
];
97+
98+
render(<TestComponent items={items} />);
99+
100+
const trigger = screen.getByTestId(menuTestTriggerId);
101+
userEvent.click(trigger, { button: 2 });
63102

64-
it('shows context menu with items on right click', function () {
103+
const menuItem = screen.getByTestId('menu-group-0-item-1');
104+
userEvent.click(menuItem);
105+
106+
expect(onAction).to.have.been.calledOnceWithExactly(2);
107+
});
108+
109+
describe('with nested components', function () {
110+
const childTriggerId = 'child-trigger';
111+
112+
beforeEach(function () {
65113
const items = [
66114
{
67115
label: 'Test Item 1',
@@ -73,101 +121,41 @@ describe('useContextMenuItems', function () {
73121
},
74122
];
75123

76-
render(
77-
<ContextMenuProvider wrapper={ContextMenu}>
78-
<TestComponent items={items} />
79-
</ContextMenuProvider>
80-
);
81-
82-
const trigger = screen.getByTestId(menuTestTriggerId);
83-
userEvent.click(trigger, { button: 2 });
84-
85-
// The menu items should be rendered
86-
expect(screen.getByTestId('menu-group-0-item-0')).to.exist;
87-
expect(screen.getByTestId('menu-group-0-item-1')).to.exist;
88-
});
89-
90-
it('triggers the correct action when menu item is clicked', function () {
91-
const onAction = sinon.spy();
92-
const items = [
124+
const childItems = [
93125
{
94-
label: 'Test Item 1',
95-
onAction: () => onAction(1),
96-
},
97-
{
98-
label: 'Test Item 2',
99-
onAction: () => onAction(2),
126+
label: 'Child Item 1',
127+
onAction: () => {},
100128
},
101129
];
102130

103131
render(
104-
<ContextMenuProvider wrapper={ContextMenu}>
105-
<TestComponent items={items} />
106-
</ContextMenuProvider>
132+
<TestComponent items={items}>
133+
<TestComponent items={childItems} data-testid={childTriggerId} />
134+
</TestComponent>
107135
);
136+
});
108137

109-
const trigger = screen.getByTestId(menuTestTriggerId);
138+
it('renders menu items with separators', function () {
139+
const trigger = screen.getByTestId(childTriggerId);
110140
userEvent.click(trigger, { button: 2 });
111141

112-
const menuItem = screen.getByTestId('menu-group-0-item-1');
113-
userEvent.click(menuItem);
142+
// Should find the menu item and the separator
143+
expect(screen.getByTestId('menu-group-0').children.length).to.equal(2);
144+
expect(
145+
screen.getByTestId('menu-group-0').children.item(0)?.textContent
146+
).to.equal('Child Item 1');
114147

115-
expect(onAction).to.have.been.calledOnceWithExactly(2);
116-
});
148+
expect(screen.getByTestId('menu-group-0-separator')).to.exist;
149+
150+
expect(screen.getByTestId('menu-group-1').children.length).to.equal(2);
151+
expect(
152+
screen.getByTestId('menu-group-1').children.item(0)?.textContent
153+
).to.equal('Test Item 1');
154+
expect(
155+
screen.getByTestId('menu-group-1').children.item(1)?.textContent
156+
).to.equal('Test Item 2');
117157

118-
describe('with nested components', function () {
119-
const childTriggerId = 'child-trigger';
120-
121-
beforeEach(function () {
122-
const items = [
123-
{
124-
label: 'Test Item 1',
125-
onAction: () => {},
126-
},
127-
{
128-
label: 'Test Item 2',
129-
onAction: () => {},
130-
},
131-
];
132-
133-
const childItems = [
134-
{
135-
label: 'Child Item 1',
136-
onAction: () => {},
137-
},
138-
];
139-
140-
render(
141-
<ContextMenuProvider wrapper={ContextMenu}>
142-
<TestComponent items={items}>
143-
<TestComponent items={childItems} data-testid={childTriggerId} />
144-
</TestComponent>
145-
</ContextMenuProvider>
146-
);
147-
});
148-
149-
it('renders menu items with separators', function () {
150-
const trigger = screen.getByTestId(childTriggerId);
151-
userEvent.click(trigger, { button: 2 });
152-
153-
// Should find the menu item and the separator
154-
expect(screen.getByTestId('menu-group-0').children.length).to.equal(2);
155-
expect(
156-
screen.getByTestId('menu-group-0').children.item(0)?.textContent
157-
).to.equal('Child Item 1');
158-
159-
expect(screen.getByTestId('menu-group-0-separator')).to.exist;
160-
161-
expect(screen.getByTestId('menu-group-1').children.length).to.equal(2);
162-
expect(
163-
screen.getByTestId('menu-group-1').children.item(0)?.textContent
164-
).to.equal('Test Item 1');
165-
expect(
166-
screen.getByTestId('menu-group-1').children.item(1)?.textContent
167-
).to.equal('Test Item 2');
168-
169-
expect(screen.queryByTestId('menu-group-1-separator')).not.to.exist;
170-
});
158+
expect(screen.queryByTestId('menu-group-1-separator')).not.to.exist;
171159
});
172160
});
173161
});

‎packages/compass-components/src/components/context-menu.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
3232

3333
return (
3434
<div
35+
data-testid="context-menu"
3536
style={{
3637
position: 'absolute',
3738
pointerEvents: 'all',

‎packages/compass/src/app/components/entrypoint.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import {
3030
createIpcSendTrack,
3131
} from '@mongodb-js/compass-telemetry';
3232
import { DataModelStorageServiceProviderElectron } from '@mongodb-js/compass-data-modeling/renderer';
33-
import { ContextMenuProvider } from '@mongodb-js/compass-components';
3433

3534
const WithPreferencesAndLoggerProviders: React.FC = ({ children }) => {
3635
const loggerProviderValue = useRef({

0 commit comments

Comments
 (0)