Skip to content

Commit e88e256

Browse files
committed
chore: migrate MessagesList asset loading to the fire-and-forget invoker
1 parent 18c9b8b commit e88e256

8 files changed

Lines changed: 359 additions & 359 deletions

File tree

apps/webapp/project.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"executor": "nx:run-commands",
5656
"dependsOn": ["webapp:stylelint", "webapp:type-check"],
5757
"options": {
58-
"command": "eslint --max-warnings=1032 --ext .js,.ts,.tsx {projectRoot}"
58+
"command": "eslint --max-warnings=1030 --ext .js,.ts,.tsx {projectRoot}"
5959
}
6060
},
6161
"stylelint": {

apps/webapp/src/script/components/MessagesList/Message/ContentMessage/asset/MultipartAssets/MultipartAssets.test.tsx

Lines changed: 66 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,14 @@ import {render, screen, waitFor, act} from '@testing-library/react';
2121
import {RestNode} from 'cells-sdk-ts';
2222

2323
import {ICellAsset} from '@wireapp/protocol-messaging';
24+
import {StyledApp, THEME_ID} from '@wireapp/react-ui-kit';
2425

2526
import {CellsRepository} from 'Repositories/cells/cellsRepository';
26-
import {withTheme} from 'src/script/auth/util/test/TestUtil';
27+
import {
28+
createExecutingFireAndForgetInvokerForTest,
29+
createRootContextValueForTest,
30+
createRootProviderWrapperForTest,
31+
} from 'src/script/page/testSupport/rootContextTestSupport';
2732

2833
import {MultipartAssets} from './MultipartAssets';
2934

@@ -49,8 +54,19 @@ const mockRecycledNode: RestNode = {
4954
IsRecycled: true,
5055
};
5156

57+
type RenderMultipartAssetsProperties = {
58+
assets: ICellAsset[];
59+
cellsRepository: jest.Mocked<CellsRepository>;
60+
conversationId?: string;
61+
senderName?: string;
62+
timestamp?: number;
63+
};
64+
5265
describe('MultipartAssets', () => {
5366
let mockCellsRepository: jest.Mocked<CellsRepository>;
67+
const fireAndForgetInvoker = createExecutingFireAndForgetInvokerForTest();
68+
const rootContextValue = createRootContextValueForTest({fireAndForgetInvoker});
69+
const rootProviderWrapper = createRootProviderWrapperForTest(rootContextValue);
5470

5571
beforeEach(() => {
5672
jest.clearAllMocks();
@@ -59,30 +75,48 @@ describe('MultipartAssets', () => {
5975
} as unknown as jest.Mocked<CellsRepository>;
6076
});
6177

62-
const createMockAsset = (uuid: string, contentType: string, initialName: string): ICellAsset => ({
63-
uuid,
64-
initialName,
65-
initialSize: 1024,
66-
contentType,
67-
});
78+
function createMockAsset(uuid: string, contentType: string, initialName: string): ICellAsset {
79+
return {
80+
uuid,
81+
initialName,
82+
initialSize: 1024,
83+
contentType,
84+
};
85+
}
86+
87+
function renderMultipartAssets(properties: RenderMultipartAssetsProperties): ReturnType<typeof render> {
88+
const {
89+
assets,
90+
cellsRepository,
91+
conversationId = 'conv-123',
92+
senderName = 'John Doe',
93+
timestamp = Date.now(),
94+
} = properties;
95+
96+
return render(
97+
<StyledApp themeId={THEME_ID.DEFAULT}>
98+
{rootProviderWrapper({
99+
children: (
100+
<MultipartAssets
101+
assets={assets}
102+
conversationId={conversationId}
103+
cellsRepository={cellsRepository}
104+
senderName={senderName}
105+
timestamp={timestamp}
106+
/>
107+
),
108+
})}
109+
</StyledApp>,
110+
);
111+
}
68112

69113
describe('isRecycled state rendering', () => {
70114
it('should display unavailable file message for recycled files', async () => {
71115
mockCellsRepository.getNode.mockResolvedValue(mockRecycledNode);
72116

73117
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'application/pdf', 'test.pdf')];
74118

75-
render(
76-
withTheme(
77-
<MultipartAssets
78-
assets={assets}
79-
conversationId="conv-123"
80-
cellsRepository={mockCellsRepository}
81-
senderName="John Doe"
82-
timestamp={Date.now()}
83-
/>,
84-
),
85-
);
119+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
86120

87121
await waitFor(() => {
88122
expect(screen.getByText('cells.unavailableFile')).toBeInTheDocument();
@@ -94,17 +128,7 @@ describe('MultipartAssets', () => {
94128

95129
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'application/pdf', 'test.pdf')];
96130

97-
render(
98-
withTheme(
99-
<MultipartAssets
100-
assets={assets}
101-
conversationId="conv-123"
102-
cellsRepository={mockCellsRepository}
103-
senderName="John Doe"
104-
timestamp={Date.now()}
105-
/>,
106-
),
107-
);
131+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
108132

109133
await waitFor(() => {
110134
expect(mockCellsRepository.getNode).toHaveBeenCalledWith({uuid: 'test-uuid'});
@@ -118,17 +142,7 @@ describe('MultipartAssets', () => {
118142

119143
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'application/zip', 'archive.zip')];
120144

121-
render(
122-
withTheme(
123-
<MultipartAssets
124-
assets={assets}
125-
conversationId="conv-123"
126-
cellsRepository={mockCellsRepository}
127-
senderName="John Doe"
128-
timestamp={Date.now()}
129-
/>,
130-
),
131-
);
145+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
132146

133147
await waitFor(() => {
134148
expect(mockCellsRepository.getNode).toHaveBeenCalledWith({uuid: 'test-uuid'});
@@ -149,17 +163,7 @@ describe('MultipartAssets', () => {
149163
createMockAsset('uuid-3', 'application/pdf', 'file3.pdf'),
150164
];
151165

152-
render(
153-
withTheme(
154-
<MultipartAssets
155-
assets={assets}
156-
conversationId="conv-123"
157-
cellsRepository={mockCellsRepository}
158-
senderName="John Doe"
159-
timestamp={Date.now()}
160-
/>,
161-
),
162-
);
166+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
163167

164168
await waitFor(() => {
165169
const unavailableMessages = screen.getAllByText('cells.unavailableFile');
@@ -179,17 +183,7 @@ describe('MultipartAssets', () => {
179183

180184
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'application/pdf', 'test.pdf')];
181185

182-
render(
183-
withTheme(
184-
<MultipartAssets
185-
assets={assets}
186-
conversationId="conv-123"
187-
cellsRepository={mockCellsRepository}
188-
senderName="John Doe"
189-
timestamp={Date.now()}
190-
/>,
191-
),
192-
);
186+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
193187

194188
await waitFor(() => {
195189
expect(mockCellsRepository.getNode).toHaveBeenCalled();
@@ -213,17 +207,7 @@ describe('MultipartAssets', () => {
213207

214208
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'application/pdf', 'test.pdf')];
215209

216-
render(
217-
withTheme(
218-
<MultipartAssets
219-
assets={assets}
220-
conversationId="conv-123"
221-
cellsRepository={mockCellsRepository}
222-
senderName="John Doe"
223-
timestamp={Date.now()}
224-
/>,
225-
),
226-
);
210+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
227211

228212
await waitFor(() => {
229213
expect(mockCellsRepository.getNode).toHaveBeenCalledTimes(1);
@@ -246,17 +230,7 @@ describe('MultipartAssets', () => {
246230

247231
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'application/pdf', 'test.pdf')];
248232

249-
render(
250-
withTheme(
251-
<MultipartAssets
252-
assets={assets}
253-
conversationId="conv-123"
254-
cellsRepository={mockCellsRepository}
255-
senderName="John Doe"
256-
timestamp={Date.now()}
257-
/>,
258-
),
259-
);
233+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
260234

261235
await waitFor(() => {
262236
expect(mockCellsRepository.getNode).toHaveBeenCalledTimes(1);
@@ -279,17 +253,7 @@ describe('MultipartAssets', () => {
279253

280254
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'application/pdf', 'test.pdf')];
281255

282-
render(
283-
withTheme(
284-
<MultipartAssets
285-
assets={assets}
286-
conversationId="conv-123"
287-
cellsRepository={mockCellsRepository}
288-
senderName="John Doe"
289-
timestamp={Date.now()}
290-
/>,
291-
),
292-
);
256+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
293257

294258
await waitFor(() => {
295259
expect(mockCellsRepository.getNode).toHaveBeenCalledTimes(1);
@@ -325,17 +289,7 @@ describe('MultipartAssets', () => {
325289

326290
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'application/pdf', 'test.pdf')];
327291

328-
const {unmount} = render(
329-
withTheme(
330-
<MultipartAssets
331-
assets={assets}
332-
conversationId="conv-123"
333-
cellsRepository={mockCellsRepository}
334-
senderName="John Doe"
335-
timestamp={Date.now()}
336-
/>,
337-
),
338-
);
292+
const {unmount} = renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
339293

340294
await waitFor(() => {
341295
expect(mockCellsRepository.getNode).toHaveBeenCalledTimes(1);
@@ -366,17 +320,7 @@ describe('MultipartAssets', () => {
366320

367321
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'application/pdf', 'test.pdf')];
368322

369-
render(
370-
withTheme(
371-
<MultipartAssets
372-
assets={assets}
373-
conversationId="conv-123"
374-
cellsRepository={mockCellsRepository}
375-
senderName="John Doe"
376-
timestamp={Date.now()}
377-
/>,
378-
),
379-
);
323+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
380324

381325
await waitFor(() => {
382326
expect(mockCellsRepository.getNode).toHaveBeenCalled();
@@ -400,17 +344,7 @@ describe('MultipartAssets', () => {
400344

401345
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'application/pdf', 'test.pdf')];
402346

403-
render(
404-
withTheme(
405-
<MultipartAssets
406-
assets={assets}
407-
conversationId="conv-123"
408-
cellsRepository={mockCellsRepository}
409-
senderName="John Doe"
410-
timestamp={Date.now()}
411-
/>,
412-
),
413-
);
347+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
414348

415349
await waitFor(() => {
416350
expect(screen.queryByText('cells.unavailableFile')).not.toBeInTheDocument();
@@ -439,17 +373,7 @@ describe('MultipartAssets', () => {
439373
},
440374
];
441375

442-
render(
443-
withTheme(
444-
<MultipartAssets
445-
assets={assets}
446-
conversationId="conv-123"
447-
cellsRepository={mockCellsRepository}
448-
senderName="John Doe"
449-
timestamp={Date.now()}
450-
/>,
451-
),
452-
);
376+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
453377

454378
await waitFor(() => {
455379
expect(screen.getByText('cells.unavailableFile')).toBeInTheDocument();
@@ -461,17 +385,7 @@ describe('MultipartAssets', () => {
461385

462386
const assets: ICellAsset[] = [createMockAsset('test-uuid', 'video/mp4', 'test.mp4')];
463387

464-
render(
465-
withTheme(
466-
<MultipartAssets
467-
assets={assets}
468-
conversationId="conv-123"
469-
cellsRepository={mockCellsRepository}
470-
senderName="John Doe"
471-
timestamp={Date.now()}
472-
/>,
473-
),
474-
);
388+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
475389

476390
await waitFor(() => {
477391
expect(screen.getByText('cells.unavailableFile')).toBeInTheDocument();
@@ -488,17 +402,7 @@ describe('MultipartAssets', () => {
488402
},
489403
];
490404

491-
render(
492-
withTheme(
493-
<MultipartAssets
494-
assets={assets}
495-
conversationId="conv-123"
496-
cellsRepository={mockCellsRepository}
497-
senderName="John Doe"
498-
timestamp={Date.now()}
499-
/>,
500-
),
501-
);
405+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
502406

503407
await waitFor(() => {
504408
expect(screen.getByText('sample')).toBeInTheDocument();
@@ -529,17 +433,7 @@ describe('MultipartAssets', () => {
529433
},
530434
];
531435

532-
render(
533-
withTheme(
534-
<MultipartAssets
535-
assets={assets}
536-
conversationId="conv-123"
537-
cellsRepository={mockCellsRepository}
538-
senderName="John Doe"
539-
timestamp={Date.now()}
540-
/>,
541-
),
542-
);
436+
renderMultipartAssets({assets, cellsRepository: mockCellsRepository});
543437

544438
await waitFor(() => {
545439
expect(screen.getByLabelText('accessibility.conversationAssetImageAlt')).toBeInTheDocument();

0 commit comments

Comments
 (0)