Skip to content

Commit 5ab7a0c

Browse files
JuliRossiJuliRossi
committed
Improving wrapper
1 parent a2d2b4e commit 5ab7a0c

File tree

6 files changed

+42
-72
lines changed

6 files changed

+42
-72
lines changed

‎apps/content-production-dashboard/src/hooks/useUsers.ts‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { useMemo } from 'react';
21
import { useQuery } from '@tanstack/react-query';
32
import { HomeAppSDK, PageAppSDK } from '@contentful/app-sdk';
43
import { useSDK } from '@contentful/react-apps-toolkit';
@@ -31,13 +30,10 @@ export function useUsers(userIds: string[]): UseUsersResult {
3130
},
3231
});
3332

34-
const usersMap = useMemo(() => {
35-
const map = new Map<string, UserProps>();
36-
(data ?? []).forEach((user) => {
37-
map.set(user.sys.id, user);
38-
});
39-
return map;
40-
}, [data]);
33+
const usersMap = new Map<string, UserProps>();
34+
(data ?? []).forEach((user) => {
35+
usersMap.set(user.sys.id, user);
36+
});
4137

4238
return {
4339
usersMap,

‎apps/content-production-dashboard/test/components/ScheduledContentTable.spec.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import { describe, expect, it, vi, beforeEach } from 'vitest';
33
import { ScheduledContentTable } from '../../src/components/ScheduledContentTable';
44
import { EntryStatus, ScheduledContentItem } from '../../src/utils/types';
55
import { mockSdk } from '../mocks';
6-
import { createQueryProviderWrapper } from '../utils/testHelpers';
7-
import userEvent from '@testing-library/user-event';
6+
import { createQueryProviderWrapper } from '../utils/createQueryProviderWrapper';
87

98
vi.mock('@contentful/react-apps-toolkit', () => ({
109
useSDK: () => mockSdk,
@@ -44,8 +43,6 @@ const createMockScheduledContentItem = (
4443
};
4544
};
4645

47-
const createWrapper = createQueryProviderWrapper;
48-
4946
describe('ScheduledContentTable component', () => {
5047
beforeEach(() => {
5148
vi.clearAllMocks();
@@ -64,7 +61,7 @@ describe('ScheduledContentTable component', () => {
6461
refetch: mockRefetch,
6562
});
6663

67-
render(<ScheduledContentTable />, { wrapper: createWrapper() });
64+
render(<ScheduledContentTable />, { wrapper: createQueryProviderWrapper() });
6865

6966
expect(screen.getByRole('table')).toBeInTheDocument();
7067
expect(screen.getByText('Title')).toBeInTheDocument();
@@ -86,7 +83,7 @@ describe('ScheduledContentTable component', () => {
8683
refetch: mockRefetch,
8784
});
8885

89-
render(<ScheduledContentTable />, { wrapper: createWrapper() });
86+
render(<ScheduledContentTable />, { wrapper: createQueryProviderWrapper() });
9087

9188
expect(screen.getByText('No entries found')).toBeInTheDocument();
9289
});
@@ -103,7 +100,7 @@ describe('ScheduledContentTable component', () => {
103100
refetch: mockRefetch,
104101
});
105102

106-
render(<ScheduledContentTable />, { wrapper: createWrapper() });
103+
render(<ScheduledContentTable />, { wrapper: createQueryProviderWrapper() });
107104

108105
expect(screen.getByText('Title')).toBeInTheDocument();
109106
expect(screen.getByText('Scheduled Date')).toBeInTheDocument();
@@ -130,7 +127,7 @@ describe('ScheduledContentTable component', () => {
130127
refetch: mockRefetch,
131128
});
132129

133-
render(<ScheduledContentTable />, { wrapper: createWrapper() });
130+
render(<ScheduledContentTable />, { wrapper: createQueryProviderWrapper() });
134131

135132
expect(screen.getByText('My Blog Post')).toBeInTheDocument();
136133
expect(screen.getByText('Blog Post')).toBeInTheDocument();
@@ -155,7 +152,7 @@ describe('ScheduledContentTable component', () => {
155152
refetch: mockRefetch,
156153
});
157154

158-
render(<ScheduledContentTable />, { wrapper: createWrapper() });
155+
render(<ScheduledContentTable />, { wrapper: createQueryProviderWrapper() });
159156

160157
expect(screen.getByText('Entry 1')).toBeInTheDocument();
161158
expect(screen.getByText('Entry 2')).toBeInTheDocument();
@@ -179,7 +176,7 @@ describe('ScheduledContentTable component', () => {
179176
refetch: mockRefetch,
180177
});
181178

182-
render(<ScheduledContentTable />, { wrapper: createWrapper() });
179+
render(<ScheduledContentTable />, { wrapper: createQueryProviderWrapper() });
183180

184181
expect(screen.getByText(EntryStatus.Published)).toBeInTheDocument();
185182
expect(screen.getByText(EntryStatus.Changed)).toBeInTheDocument();
@@ -202,7 +199,7 @@ describe('ScheduledContentTable component', () => {
202199
refetch: mockRefetch,
203200
});
204201

205-
render(<ScheduledContentTable />, { wrapper: createWrapper() });
202+
render(<ScheduledContentTable />, { wrapper: createQueryProviderWrapper() });
206203

207204
const link = screen.getByText('My Entry').closest('a');
208205
expect(link).toHaveAttribute(

‎apps/content-production-dashboard/test/hooks/useContentTypes.spec.tsx‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,17 @@
1-
import React from 'react';
21
import { describe, expect, it, vi, beforeEach } from 'vitest';
32
import { renderHook, waitFor } from '@testing-library/react';
4-
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
53
import { ContentTypeProps } from 'contentful-management';
64
import { mockSdk } from '../mocks';
75
import { useContentTypes } from '../../src/hooks/useContentTypes';
86
import { fetchContentTypes } from '../../src/utils/fetchContentTypes';
7+
import { createQueryProviderWrapper } from '../utils/createQueryProviderWrapper';
98

109
vi.mock('@contentful/react-apps-toolkit', () => ({
1110
useSDK: () => mockSdk,
1211
}));
1312

1413
vi.mock('../../src/utils/fetchContentTypes');
1514

16-
const createWrapper = () => {
17-
const queryClient = new QueryClient({
18-
defaultOptions: {
19-
queries: {
20-
retry: false,
21-
},
22-
},
23-
});
24-
25-
const TestWrapper = ({ children }: { children: React.ReactNode }) => (
26-
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
27-
);
28-
TestWrapper.displayName = 'TestWrapper';
29-
return TestWrapper;
30-
};
31-
3215
describe('useContentTypes', () => {
3316
beforeEach(() => {
3417
vi.clearAllMocks();
@@ -61,7 +44,7 @@ describe('useContentTypes', () => {
6144
});
6245

6346
const { result } = renderHook(() => useContentTypes(), {
64-
wrapper: createWrapper(),
47+
wrapper: createQueryProviderWrapper(),
6548
});
6649

6750
await waitFor(() => {
@@ -97,7 +80,7 @@ describe('useContentTypes', () => {
9780

9881
const contentTypeIds = ['blogPost', 'article'];
9982
const { result } = renderHook(() => useContentTypes(contentTypeIds), {
100-
wrapper: createWrapper(),
83+
wrapper: createQueryProviderWrapper(),
10184
});
10285

10386
await waitFor(() => {
@@ -113,7 +96,7 @@ describe('useContentTypes', () => {
11396
vi.mocked(fetchContentTypes).mockRejectedValue(mockError);
11497

11598
const { result } = renderHook(() => useContentTypes(), {
116-
wrapper: createWrapper(),
99+
wrapper: createQueryProviderWrapper(),
117100
});
118101

119102
await waitFor(() => {
@@ -133,7 +116,7 @@ describe('useContentTypes', () => {
133116
});
134117

135118
const { result } = renderHook(() => useContentTypes(), {
136-
wrapper: createWrapper(),
119+
wrapper: createQueryProviderWrapper(),
137120
});
138121

139122
await waitFor(() => {

‎apps/content-production-dashboard/test/hooks/useScheduledContent.spec.tsx‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import React from 'react';
21
import { describe, expect, it, vi, beforeEach } from 'vitest';
32
import { renderHook, waitFor } from '@testing-library/react';
4-
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
53
import { EntryStatus } from '../../src/utils/types';
64
import { useScheduledContent } from '../../src/hooks/useScheduledContent';
75
import {
@@ -10,6 +8,7 @@ import {
108
createMockContentType,
119
createMockUser,
1210
} from '../utils/testHelpers';
11+
import { createQueryProviderWrapper } from '../utils/createQueryProviderWrapper';
1312

1413
vi.mock('@contentful/react-apps-toolkit', () => ({
1514
useSDK: () => ({
@@ -45,22 +44,6 @@ vi.mock('../../src/hooks/useUsers', () => ({
4544
useUsers: (userIds: string[]) => mockUseUsers(userIds),
4645
}));
4746

48-
const createWrapper = () => {
49-
const queryClient = new QueryClient({
50-
defaultOptions: {
51-
queries: {
52-
retry: false,
53-
},
54-
},
55-
});
56-
57-
const TestWrapper = ({ children }: { children: React.ReactNode }) => (
58-
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
59-
);
60-
TestWrapper.displayName = 'TestWrapper';
61-
return TestWrapper;
62-
};
63-
6447
describe('useScheduledContent', () => {
6548
beforeEach(() => {
6649
vi.clearAllMocks();
@@ -98,7 +81,7 @@ describe('useScheduledContent', () => {
9881
});
9982

10083
const { result } = renderHook(() => useScheduledContent('en-US', 0), {
101-
wrapper: createWrapper(),
84+
wrapper: createQueryProviderWrapper(),
10285
});
10386

10487
expect(result.current.items).toEqual([]);
@@ -173,7 +156,7 @@ describe('useScheduledContent', () => {
173156
});
174157

175158
const { result } = renderHook(() => useScheduledContent('en-US', 0), {
176-
wrapper: createWrapper(),
159+
wrapper: createQueryProviderWrapper(),
177160
});
178161

179162
await waitFor(() => {
@@ -241,7 +224,7 @@ describe('useScheduledContent', () => {
241224
});
242225

243226
const { result } = renderHook(() => useScheduledContent('en-US', 0), {
244-
wrapper: createWrapper(),
227+
wrapper: createQueryProviderWrapper(),
245228
});
246229

247230
await waitFor(() => {

‎apps/content-production-dashboard/test/utils/createQueryProviderWrapper.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
3+
4+
/**
5+
* Creates a new QueryClient with retries disabled for each test to ensure isolation.
6+
*/
7+
export function createQueryProviderWrapper(): React.ComponentType<{ children: React.ReactNode }> {
8+
const queryClient = new QueryClient({
9+
defaultOptions: {
10+
queries: {
11+
retry: false,
12+
},
13+
},
14+
});
15+
16+
const TestWrapper = ({ children }: { children: React.ReactNode }) => (
17+
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
18+
);
19+
TestWrapper.displayName = 'TestWrapper';
20+
return TestWrapper;
21+
}

‎apps/content-production-dashboard/test/utils/testHelpers.ts‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import React from 'react';
21
import { EntryProps, ScheduledActionProps, ContentTypeProps } from 'contentful-management';
32
import type { ChartDataPoint } from '../../src/utils/types';
4-
import { QueryProvider } from '../../src/providers/QueryProvider';
53

64
export interface MockEntryOverrides {
75
id?: string;
@@ -210,11 +208,3 @@ export function createMockContentType(overrides: MockContentTypeOverrides = {}):
210208
fields: [],
211209
} as unknown as ContentTypeProps;
212210
}
213-
214-
export function createQueryProviderWrapper(): React.ComponentType<{ children: React.ReactNode }> {
215-
const TestWrapper = ({ children }: { children: React.ReactNode }) => {
216-
return React.createElement(QueryProvider, { children });
217-
};
218-
TestWrapper.displayName = 'TestWrapper';
219-
return TestWrapper;
220-
}

0 commit comments

Comments
 (0)