Skip to content

Commit a929be4

Browse files
MartinCupelaMartinCupela
committed
refactor: prevent rendering elements in DialogPortalDestination when no dialogs are open
1 parent ec98d70 commit a929be4

File tree

5 files changed

+14
-160
lines changed

5 files changed

+14
-160
lines changed

‎src/components/Dialog/DialogPortal.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export const DialogPortalDestination = () => {
88
const { dialogManager } = useDialogManager();
99
const openedDialogCount = useOpenedDialogCount();
1010

11+
if (!openedDialogCount) return null;
12+
1113
return (
1214
<div
1315
className='str-chat__dialog-overlay'

‎src/components/MessageActions/__tests__/MessageActions.test.js‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -108,12 +108,6 @@ describe('<MessageActions /> component', () => {
108108
</svg>
109109
</button>
110110
</div>
111-
<div
112-
class="str-chat__dialog-overlay"
113-
data-str-chat__portal-id="dialog-manager-provider-id"
114-
data-testid="str-chat__dialog-overlay"
115-
style="--str-chat__dialog-overlay-height: 0;"
116-
/>
117111
</div>
118112
`);
119113
});
@@ -129,29 +123,28 @@ describe('<MessageActions /> component', () => {
129123
it('should open message actions box on click', async () => {
130124
renderMessageActions();
131125
expect(MessageActionsBoxMock).not.toHaveBeenCalled();
132-
const dialogOverlay = screen.getByTestId(dialogOverlayTestId);
133-
expect(dialogOverlay.children).toHaveLength(0);
134126
await act(async () => {
135127
await toggleOpenMessageActions();
136128
});
137129
expect(MessageActionsBoxMock).toHaveBeenLastCalledWith(
138130
expect.objectContaining({ open: true }),
139131
undefined,
140132
);
133+
const dialogOverlay = screen.getByTestId(dialogOverlayTestId);
141134
expect(dialogOverlay.children.length).toBeGreaterThan(0);
142135
});
143136

144137
it('should close message actions box on icon click if already opened', async () => {
145138
renderMessageActions();
146-
const dialogOverlay = screen.getByTestId(dialogOverlayTestId);
147139
expect(MessageActionsBoxMock).not.toHaveBeenCalled();
148140
await toggleOpenMessageActions();
149141
expect(MessageActionsBoxMock).toHaveBeenLastCalledWith(
150142
expect.objectContaining({ open: true }),
151143
undefined,
152144
);
153145
await toggleOpenMessageActions();
154-
expect(dialogOverlay.children).toHaveLength(0);
146+
const dialogOverlay = screen.queryByTestId(dialogOverlayTestId);
147+
expect(dialogOverlay).not.toBeInTheDocument();
155148
});
156149

157150
it('should close message actions box when user clicks overlay if it is already opened', async () => {
@@ -161,23 +154,23 @@ describe('<MessageActions /> component', () => {
161154
expect.objectContaining({ open: true }),
162155
undefined,
163156
);
164-
const dialogOverlay = screen.getByTestId(dialogOverlayTestId);
157+
const dialogOverlay = screen.queryByTestId(dialogOverlayTestId);
165158
await act(async () => {
166159
await fireEvent.click(dialogOverlay);
167160
});
168161
expect(MessageActionsBoxMock).toHaveBeenCalledTimes(1);
169-
expect(dialogOverlay.children).toHaveLength(0);
162+
expect(dialogOverlay).not.toBeInTheDocument();
170163
});
171164

172165
it('should close message actions box when user presses Escape key', async () => {
173166
renderMessageActions();
174-
const dialogOverlay = screen.getByTestId(dialogOverlayTestId);
175167
await toggleOpenMessageActions();
176168
await act(async () => {
177169
await fireEvent.keyUp(document, { charCode: 27, code: 'Escape', key: 'Escape' });
178170
});
179171
expect(MessageActionsBoxMock).toHaveBeenCalledTimes(1);
180-
expect(dialogOverlay.children).toHaveLength(0);
172+
const dialogOverlay = screen.queryByTestId(dialogOverlayTestId);
173+
expect(dialogOverlay).not.toBeInTheDocument();
181174
});
182175

183176
it('should render the message actions box correctly', async () => {
@@ -252,12 +245,6 @@ describe('<MessageActions /> component', () => {
252245
</svg>
253246
</button>
254247
</div>
255-
<div
256-
class="str-chat__dialog-overlay"
257-
data-str-chat__portal-id="dialog-manager-provider-id"
258-
data-testid="str-chat__dialog-overlay"
259-
style="--str-chat__dialog-overlay-height: 0;"
260-
/>
261248
</div>
262249
`);
263250
});
@@ -293,12 +280,6 @@ describe('<MessageActions /> component', () => {
293280
</svg>
294281
</button>
295282
</span>
296-
<div
297-
class="str-chat__dialog-overlay"
298-
data-str-chat__portal-id="dialog-manager-provider-id"
299-
data-testid="str-chat__dialog-overlay"
300-
style="--str-chat__dialog-overlay-height: 0;"
301-
/>
302283
</div>
303284
`);
304285
});

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

Lines changed: 5 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -90,16 +90,7 @@ describe('VirtualizedMessageComponents', () => {
9090
const CustomLoadingIndicator = () => <div>Custom Loading Indicator</div>;
9191
it('should render empty div in Header when not loading more messages', () => {
9292
const { container } = renderElements(<Header />);
93-
expect(container).toMatchInlineSnapshot(`
94-
<div>
95-
<div
96-
class="str-chat__dialog-overlay"
97-
data-str-chat__portal-id="vml-components-dialog-manager"
98-
data-testid="str-chat__dialog-overlay"
99-
style="--str-chat__dialog-overlay-height: 0;"
100-
/>
101-
</div>
102-
`);
93+
expect(container).toBeEmptyDOMElement();
10394
});
10495

10596
it('should render LoadingIndicator in Header when loading more messages', () => {
@@ -124,29 +115,14 @@ describe('VirtualizedMessageComponents', () => {
124115
Custom Loading Indicator
125116
</div>
126117
</div>
127-
<div
128-
class="str-chat__dialog-overlay"
129-
data-str-chat__portal-id="vml-components-dialog-manager"
130-
data-testid="str-chat__dialog-overlay"
131-
style="--str-chat__dialog-overlay-height: 0;"
132-
/>
133118
</div>
134119
`);
135120
});
136121

137122
it('should not render custom LoadingIndicator in Header when not loading more messages', () => {
138123
const componentContext = { LoadingIndicator: CustomLoadingIndicator };
139124
const { container } = renderElements(<Header />, componentContext);
140-
expect(container).toMatchInlineSnapshot(`
141-
<div>
142-
<div
143-
class="str-chat__dialog-overlay"
144-
data-str-chat__portal-id="vml-components-dialog-manager"
145-
data-testid="str-chat__dialog-overlay"
146-
style="--str-chat__dialog-overlay-height: 0;"
147-
/>
148-
</div>
149-
`);
125+
expect(container).toBeEmptyDOMElement();
150126
});
151127

152128
// FIXME: this is a crazy pattern of having to set LoadingIndicator to null so that additionalVirtuosoProps.head can be rendered.
@@ -171,12 +147,6 @@ describe('VirtualizedMessageComponents', () => {
171147
<div>
172148
Custom head
173149
</div>
174-
<div
175-
class="str-chat__dialog-overlay"
176-
data-str-chat__portal-id="vml-components-dialog-manager"
177-
data-testid="str-chat__dialog-overlay"
178-
style="--str-chat__dialog-overlay-height: 0;"
179-
/>
180150
</div>
181151
`);
182152
});
@@ -189,12 +159,6 @@ describe('VirtualizedMessageComponents', () => {
189159
<div>
190160
Custom head
191161
</div>
192-
<div
193-
class="str-chat__dialog-overlay"
194-
data-str-chat__portal-id="vml-components-dialog-manager"
195-
data-testid="str-chat__dialog-overlay"
196-
style="--str-chat__dialog-overlay-height: 0;"
197-
/>
198162
</div>
199163
`);
200164
});
@@ -218,12 +182,6 @@ describe('VirtualizedMessageComponents', () => {
218182
Custom Loading Indicator
219183
</div>
220184
</div>
221-
<div
222-
class="str-chat__dialog-overlay"
223-
data-str-chat__portal-id="vml-components-dialog-manager"
224-
data-testid="str-chat__dialog-overlay"
225-
style="--str-chat__dialog-overlay-height: 0;"
226-
/>
227185
</div>
228186
`);
229187
});
@@ -244,16 +202,7 @@ describe('VirtualizedMessageComponents', () => {
244202
const { container } = renderElements(
245203
<EmptyPlaceholder context={{ threadList: true }} />,
246204
);
247-
expect(container).toMatchInlineSnapshot(`
248-
<div>
249-
<div
250-
class="str-chat__dialog-overlay"
251-
data-str-chat__portal-id="vml-components-dialog-manager"
252-
data-testid="str-chat__dialog-overlay"
253-
style="--str-chat__dialog-overlay-height: 0;"
254-
/>
255-
</div>
256-
`);
205+
expect(container).toBeEmptyDOMElement();
257206
});
258207
it('should render custom EmptyStateIndicator for main message list', () => {
259208
const { container } = renderElements(<EmptyPlaceholder />, componentContext);
@@ -271,16 +220,7 @@ describe('VirtualizedMessageComponents', () => {
271220
it('should render empty if EmptyStateIndicator nullified', () => {
272221
const componentContext = { EmptyStateIndicator: NullEmptyStateIndicator };
273222
const { container } = renderElements(<EmptyPlaceholder />, componentContext);
274-
expect(container).toMatchInlineSnapshot(`
275-
<div>
276-
<div
277-
class="str-chat__dialog-overlay"
278-
data-str-chat__portal-id="vml-components-dialog-manager"
279-
data-testid="str-chat__dialog-overlay"
280-
style="--str-chat__dialog-overlay-height: 0;"
281-
/>
282-
</div>
283-
`);
223+
expect(container).toBeEmptyDOMElement();
284224
});
285225

286226
it('should render empty in thread if EmptyStateIndicator nullified', () => {
@@ -289,16 +229,7 @@ describe('VirtualizedMessageComponents', () => {
289229
<EmptyPlaceholder context={{ threadList: true }} />,
290230
componentContext,
291231
);
292-
expect(container).toMatchInlineSnapshot(`
293-
<div>
294-
<div
295-
class="str-chat__dialog-overlay"
296-
data-str-chat__portal-id="vml-components-dialog-manager"
297-
data-testid="str-chat__dialog-overlay"
298-
style="--str-chat__dialog-overlay-height: 0;"
299-
/>
300-
</div>
301-
`);
232+
expect(container).toBeEmptyDOMElement();
302233
});
303234
});
304235

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

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,6 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
5353
</div>
5454
</div>
5555
</div>
56-
<div
57-
class="str-chat__dialog-overlay"
58-
data-str-chat__portal-id="virtualized-message-list-dialog-manager-mockedId"
59-
data-testid="str-chat__dialog-overlay"
60-
style="--str-chat__dialog-overlay-height: 0;"
61-
/>
6256
</div>
6357
<div
6458
class="str-chat__list-notifications"

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

Lines changed: 0 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,6 @@ exports[`VirtualizedMessageComponents EmptyPlaceholder should render custom Empt
77
>
88
Custom EmptyStateIndicator
99
</div>
10-
<div
11-
class="str-chat__dialog-overlay"
12-
data-str-chat__portal-id="vml-components-dialog-manager"
13-
data-testid="str-chat__dialog-overlay"
14-
style="--str-chat__dialog-overlay-height: 0;"
15-
/>
1610
</div>
1711
`;
1812

@@ -23,12 +17,6 @@ exports[`VirtualizedMessageComponents EmptyPlaceholder should render custom Empt
2317
>
2418
Custom EmptyStateIndicator
2519
</div>
26-
<div
27-
class="str-chat__dialog-overlay"
28-
data-str-chat__portal-id="vml-components-dialog-manager"
29-
data-testid="str-chat__dialog-overlay"
30-
style="--str-chat__dialog-overlay-height: 0;"
31-
/>
3220
</div>
3321
`;
3422

@@ -57,12 +45,6 @@ exports[`VirtualizedMessageComponents EmptyPlaceholder should render for main me
5745
No chats here yet…
5846
</p>
5947
</div>
60-
<div
61-
class="str-chat__dialog-overlay"
62-
data-str-chat__portal-id="vml-components-dialog-manager"
63-
data-testid="str-chat__dialog-overlay"
64-
style="--str-chat__dialog-overlay-height: 0;"
65-
/>
6648
</div>
6749
`;
6850

@@ -115,12 +97,6 @@ exports[`VirtualizedMessageComponents Header should not render custom head in He
11597
</svg>
11698
</div>
11799
</div>
118-
<div
119-
class="str-chat__dialog-overlay"
120-
data-str-chat__portal-id="vml-components-dialog-manager"
121-
data-testid="str-chat__dialog-overlay"
122-
style="--str-chat__dialog-overlay-height: 0;"
123-
/>
124100
</div>
125101
`;
126102

@@ -170,12 +146,6 @@ exports[`VirtualizedMessageComponents Header should render LoadingIndicator in H
170146
</svg>
171147
</div>
172148
</div>
173-
<div
174-
class="str-chat__dialog-overlay"
175-
data-str-chat__portal-id="vml-components-dialog-manager"
176-
data-testid="str-chat__dialog-overlay"
177-
style="--str-chat__dialog-overlay-height: 0;"
178-
/>
179149
</div>
180150
`;
181151

@@ -185,12 +155,6 @@ exports[`VirtualizedMessageComponents Item should render wrapper with custom cla
185155
class="XXX"
186156
data-item-index="10000000"
187157
/>
188-
<div
189-
class="str-chat__dialog-overlay"
190-
data-str-chat__portal-id="vml-components-dialog-manager"
191-
data-testid="str-chat__dialog-overlay"
192-
style="--str-chat__dialog-overlay-height: 0;"
193-
/>
194158
</div>
195159
`;
196160

@@ -200,12 +164,6 @@ exports[`VirtualizedMessageComponents Item should render wrapper with custom cla
200164
class="XXX"
201165
data-item-index="10000000"
202166
/>
203-
<div
204-
class="str-chat__dialog-overlay"
205-
data-str-chat__portal-id="vml-components-dialog-manager"
206-
data-testid="str-chat__dialog-overlay"
207-
style="--str-chat__dialog-overlay-height: 0;"
208-
/>
209167
</div>
210168
`;
211169

@@ -215,12 +173,6 @@ exports[`VirtualizedMessageComponents Item should render wrapper without custom
215173
class="str-chat__virtual-list-message-wrapper str-chat__li str-chat__li--single"
216174
data-item-index="10000000"
217175
/>
218-
<div
219-
class="str-chat__dialog-overlay"
220-
data-str-chat__portal-id="vml-components-dialog-manager"
221-
data-testid="str-chat__dialog-overlay"
222-
style="--str-chat__dialog-overlay-height: 0;"
223-
/>
224176
</div>
225177
`;
226178

@@ -230,11 +182,5 @@ exports[`VirtualizedMessageComponents Item should render wrapper without custom
230182
class="str-chat__virtual-list-message-wrapper str-chat__li"
231183
data-item-index="10000000"
232184
/>
233-
<div
234-
class="str-chat__dialog-overlay"
235-
data-str-chat__portal-id="vml-components-dialog-manager"
236-
data-testid="str-chat__dialog-overlay"
237-
style="--str-chat__dialog-overlay-height: 0;"
238-
/>
239185
</div>
240186
`;

0 commit comments

Comments
 (0)