Skip to content

Commit d45459b

Browse files
MartinCupelaMartinCupela
committed
test: fix tests rendering message actions
1 parent 223ddea commit d45459b

5 files changed

+192
-32
lines changed

‎src/components/Message/__tests__/MessageOptions.test.js

+26-23
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
generateUser,
2222
getTestClientWithUser,
2323
} from '../../../mock-builders';
24+
import { DialogsManagerProvider } from '../../../context';
2425

2526
const MESSAGE_ACTIONS_TEST_ID = 'message-actions';
2627

@@ -55,32 +56,34 @@ async function renderMessageOptions({
5556

5657
return render(
5758
<ChatProvider value={{ client }}>
58-
<ChannelStateProvider value={{ channel, ...channelStateOpts }}>
59-
<ChannelActionProvider
60-
value={{
61-
openThread: jest.fn(),
62-
removeMessage: jest.fn(),
63-
updateMessage: jest.fn(),
64-
}}
65-
>
66-
<ComponentProvider
59+
<DialogsManagerProvider id='message-options-dialogs-provider'>
60+
<ChannelStateProvider value={{ channel, ...channelStateOpts }}>
61+
<ChannelActionProvider
6762
value={{
68-
Attachment,
69-
// eslint-disable-next-line react/display-name
70-
Message: () => (
71-
<MessageSimple
72-
channelConfig={channelConfig}
73-
onReactionListClick={customMessageProps?.onReactionListClick}
74-
/>
75-
),
63+
openThread: jest.fn(),
64+
removeMessage: jest.fn(),
65+
updateMessage: jest.fn(),
7666
}}
7767
>
78-
<Message {...defaultMessageProps} {...customMessageProps}>
79-
<MessageOptions {...defaultOptionsProps} {...customOptionsProps} />
80-
</Message>
81-
</ComponentProvider>
82-
</ChannelActionProvider>
83-
</ChannelStateProvider>
68+
<ComponentProvider
69+
value={{
70+
Attachment,
71+
// eslint-disable-next-line react/display-name
72+
Message: () => (
73+
<MessageSimple
74+
channelConfig={channelConfig}
75+
onReactionListClick={customMessageProps?.onReactionListClick}
76+
/>
77+
),
78+
}}
79+
>
80+
<Message {...defaultMessageProps} {...customMessageProps}>
81+
<MessageOptions {...defaultOptionsProps} {...customOptionsProps} />
82+
</Message>
83+
</ComponentProvider>
84+
</ChannelActionProvider>
85+
</ChannelStateProvider>
86+
</DialogsManagerProvider>
8487
</ChatProvider>,
8588
);
8689
}

‎src/components/MessageList/VirtualizedMessageList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,7 @@ const VirtualizedMessageListWithContext = <
428428
return (
429429
<>
430430
<MessageListMainPanel>
431-
<DialogsManagerProvider>
431+
<DialogsManagerProvider id='virtualized-message-list-dialogs-manager'>
432432
{!threadList && showUnreadMessagesNotification && (
433433
<UnreadMessagesNotification unreadCount={channelUnreadUiState?.unread_messages} />
434434
)}

‎src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js

+100-8
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
ChannelStateProvider,
2121
ChatProvider,
2222
ComponentProvider,
23+
DialogsManagerProvider,
2324
TranslationProvider,
2425
useMessageContext,
2526
} from '../../../context';
@@ -38,7 +39,11 @@ const Wrapper = ({ children, componentContext = {} }) => (
3839
<ChatProvider value={{ client }}>
3940
<ChannelStateProvider value={{ channel }}>
4041
<ChannelActionProvider value={{ addNotification: jest.fn() }}>
41-
<ComponentProvider value={componentContext}>{children}</ComponentProvider>
42+
<ComponentProvider value={componentContext}>
43+
<DialogsManagerProvider id='vml-components-dialogs-manager'>
44+
{children}
45+
</DialogsManagerProvider>
46+
</ComponentProvider>
4247
</ChannelActionProvider>
4348
</ChannelStateProvider>
4449
</ChatProvider>
@@ -84,7 +89,16 @@ describe('VirtualizedMessageComponents', () => {
8489
const CustomLoadingIndicator = () => <div>Custom Loading Indicator</div>;
8590
it('should render empty div in Header when not loading more messages', () => {
8691
const { container } = renderElements(<Header />);
87-
expect(container).toMatchInlineSnapshot(`<div />`);
92+
expect(container).toMatchInlineSnapshot(`
93+
<div>
94+
<div
95+
class="str-chat__dialog-overlay"
96+
data-str-chat__portal-id="vml-components-dialogs-manager"
97+
data-testid="str-chat__dialog-overlay"
98+
style="--str-chat__dialog-overlay-height: 0;"
99+
/>
100+
</div>
101+
`);
88102
});
89103

90104
it('should render LoadingIndicator in Header when loading more messages', () => {
@@ -106,14 +120,29 @@ describe('VirtualizedMessageComponents', () => {
106120
Custom Loading Indicator
107121
</div>
108122
</div>
123+
<div
124+
class="str-chat__dialog-overlay"
125+
data-str-chat__portal-id="vml-components-dialogs-manager"
126+
data-testid="str-chat__dialog-overlay"
127+
style="--str-chat__dialog-overlay-height: 0;"
128+
/>
109129
</div>
110130
`);
111131
});
112132

113133
it('should not render custom LoadingIndicator in Header when not loading more messages', () => {
114134
const componentContext = { LoadingIndicator: CustomLoadingIndicator };
115135
const { container } = renderElements(<Header />, componentContext);
116-
expect(container).toMatchInlineSnapshot(`<div />`);
136+
expect(container).toMatchInlineSnapshot(`
137+
<div>
138+
<div
139+
class="str-chat__dialog-overlay"
140+
data-str-chat__portal-id="vml-components-dialogs-manager"
141+
data-testid="str-chat__dialog-overlay"
142+
style="--str-chat__dialog-overlay-height: 0;"
143+
/>
144+
</div>
145+
`);
117146
});
118147

119148
// FIXME: this is a crazy pattern of having to set LoadingIndicator to null so that additionalVirtuosoProps.head can be rendered.
@@ -135,14 +164,29 @@ describe('VirtualizedMessageComponents', () => {
135164
<div>
136165
Custom head
137166
</div>
167+
<div
168+
class="str-chat__dialog-overlay"
169+
data-str-chat__portal-id="vml-components-dialogs-manager"
170+
data-testid="str-chat__dialog-overlay"
171+
style="--str-chat__dialog-overlay-height: 0;"
172+
/>
138173
</div>
139174
`);
140175
});
141176

142177
it('should not render custom head in Header when not loading more messages', () => {
143178
const context = { head };
144179
const { container } = renderElements(<Header context={context} />);
145-
expect(container).toMatchInlineSnapshot(`<div />`);
180+
expect(container).toMatchInlineSnapshot(`
181+
<div>
182+
<div
183+
class="str-chat__dialog-overlay"
184+
data-str-chat__portal-id="vml-components-dialogs-manager"
185+
data-testid="str-chat__dialog-overlay"
186+
style="--str-chat__dialog-overlay-height: 0;"
187+
/>
188+
</div>
189+
`);
146190
});
147191

148192
it('should render custom LoadingIndicator instead of head when loading more', () => {
@@ -158,6 +202,12 @@ describe('VirtualizedMessageComponents', () => {
158202
Custom Loading Indicator
159203
</div>
160204
</div>
205+
<div
206+
class="str-chat__dialog-overlay"
207+
data-str-chat__portal-id="vml-components-dialogs-manager"
208+
data-testid="str-chat__dialog-overlay"
209+
style="--str-chat__dialog-overlay-height: 0;"
210+
/>
161211
</div>
162212
`);
163213
});
@@ -176,7 +226,16 @@ describe('VirtualizedMessageComponents', () => {
176226

177227
it('should render empty for thread by default', () => {
178228
const { container } = renderElements(<EmptyPlaceholder context={{ threadList: true }} />);
179-
expect(container).toMatchInlineSnapshot(`<div />`);
229+
expect(container).toMatchInlineSnapshot(`
230+
<div>
231+
<div
232+
class="str-chat__dialog-overlay"
233+
data-str-chat__portal-id="vml-components-dialogs-manager"
234+
data-testid="str-chat__dialog-overlay"
235+
style="--str-chat__dialog-overlay-height: 0;"
236+
/>
237+
</div>
238+
`);
180239
});
181240
it('should render custom EmptyStateIndicator for main message list', () => {
182241
const { container } = renderElements(<EmptyPlaceholder />, componentContext);
@@ -194,7 +253,16 @@ describe('VirtualizedMessageComponents', () => {
194253
it('should render empty if EmptyStateIndicator nullified', () => {
195254
const componentContext = { EmptyStateIndicator: NullEmptyStateIndicator };
196255
const { container } = renderElements(<EmptyPlaceholder />, componentContext);
197-
expect(container).toMatchInlineSnapshot(`<div />`);
256+
expect(container).toMatchInlineSnapshot(`
257+
<div>
258+
<div
259+
class="str-chat__dialog-overlay"
260+
data-str-chat__portal-id="vml-components-dialogs-manager"
261+
data-testid="str-chat__dialog-overlay"
262+
style="--str-chat__dialog-overlay-height: 0;"
263+
/>
264+
</div>
265+
`);
198266
});
199267

200268
it('should render empty in thread if EmptyStateIndicator nullified', () => {
@@ -203,14 +271,32 @@ describe('VirtualizedMessageComponents', () => {
203271
<EmptyPlaceholder context={{ threadList: true }} />,
204272
componentContext,
205273
);
206-
expect(container).toMatchInlineSnapshot(`<div />`);
274+
expect(container).toMatchInlineSnapshot(`
275+
<div>
276+
<div
277+
class="str-chat__dialog-overlay"
278+
data-str-chat__portal-id="vml-components-dialogs-manager"
279+
data-testid="str-chat__dialog-overlay"
280+
style="--str-chat__dialog-overlay-height: 0;"
281+
/>
282+
</div>
283+
`);
207284
});
208285
});
209286

210287
describe('Footer', () => {
211288
it('should render nothing in Footer by default', () => {
212289
const { container } = renderElements(<Footer />);
213-
expect(container).toMatchInlineSnapshot(`<div />`);
290+
expect(container).toMatchInlineSnapshot(`
291+
<div>
292+
<div
293+
class="str-chat__dialog-overlay"
294+
data-str-chat__portal-id="vml-components-dialogs-manager"
295+
data-testid="str-chat__dialog-overlay"
296+
style="--str-chat__dialog-overlay-height: 0;"
297+
/>
298+
</div>
299+
`);
214300
});
215301
it('should render custom TypingIndicator in Footer', () => {
216302
const TypingIndicator = () => <div>Custom TypingIndicator</div>;
@@ -221,6 +307,12 @@ describe('VirtualizedMessageComponents', () => {
221307
<div>
222308
Custom TypingIndicator
223309
</div>
310+
<div
311+
class="str-chat__dialog-overlay"
312+
data-str-chat__portal-id="vml-components-dialogs-manager"
313+
data-testid="str-chat__dialog-overlay"
314+
style="--str-chat__dialog-overlay-height: 0;"
315+
/>
224316
</div>
225317
`);
226318
});

‎src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap

+11
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,17 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
6565
</div>
6666
</div>
6767
</div>
68+
<div
69+
className="str-chat__dialog-overlay"
70+
data-str-chat__portal-id="virtualized-message-list-dialogs-manager"
71+
data-testid="str-chat__dialog-overlay"
72+
onClick={[Function]}
73+
style={
74+
Object {
75+
"--str-chat__dialog-overlay-height": "0",
76+
}
77+
}
78+
/>
6879
<div
6980
className="str-chat__list-notifications"
7081
/>

0 commit comments

Comments
 (0)