Skip to content

Commit 424c0fe

Browse files
ThieryMichelThieryMichel
committed
add render prop on ReferenceManyFieldBase
1 parent 4ecac16 commit 424c0fe

File tree

4 files changed

+658
-8
lines changed

4 files changed

+658
-8
lines changed

‎packages/ra-core/src/controller/field/ReferenceFieldBase.spec.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import { useResourceContext } from '../../core/useResourceContext';
66
import { testDataProvider } from '../../dataProvider';
77
import { ReferenceFieldBase } from './ReferenceFieldBase';
88
import {
9+
Basic,
910
Errored,
1011
Loading,
1112
Meta,
1213
WithRenderProp,
1314
} from './ReferenceFieldBase.stories';
14-
import { WithRenderProps } from '../edit/EditBase.stories';
1515

1616
describe('<ReferenceFieldBase />', () => {
1717
beforeAll(() => {
@@ -25,7 +25,7 @@ describe('<ReferenceFieldBase />', () => {
2525

2626
render(<Errored />);
2727
await waitFor(() => {
28-
expect(screen.queryByText('Error')).not.toBeNull();
28+
expect(screen.queryByText('Error: Error')).not.toBeNull();
2929
});
3030
});
3131

@@ -46,8 +46,8 @@ describe('<ReferenceFieldBase />', () => {
4646
return <div>{resource}</div>;
4747
};
4848
const dataProvider = testDataProvider({
49+
// @ts-ignore
4950
getList: () =>
50-
// @ts-ignore
5151
Promise.resolve({ data: [{ id: 1 }, { id: 2 }], total: 2 }),
5252
});
5353
render(
@@ -70,8 +70,8 @@ describe('<ReferenceFieldBase />', () => {
7070
);
7171
const dataProvider = testDataProvider({
7272
getMany,
73+
// @ts-ignore
7374
getOne: () =>
74-
// @ts-ignore
7575
Promise.resolve({
7676
data: {
7777
id: 1,
@@ -94,6 +94,13 @@ describe('<ReferenceFieldBase />', () => {
9494
});
9595
});
9696

97+
it('should render the data', async () => {
98+
render(<Basic />);
99+
await waitFor(() => {
100+
expect(screen.queryByText('Leo')).not.toBeNull();
101+
});
102+
});
103+
97104
describe('with render prop', () => {
98105
it('should display an error if error is defined', async () => {
99106
jest.spyOn(console, 'error')
@@ -150,5 +157,12 @@ describe('<ReferenceFieldBase />', () => {
150157
expect(screen.queryByText('Loading...')).not.toBeNull();
151158
});
152159
});
160+
161+
it('should render the data', async () => {
162+
render(<WithRenderProp />);
163+
await waitFor(() => {
164+
expect(screen.queryByText('Leo')).not.toBeNull();
165+
});
166+
});
153167
});
154168
});

‎packages/ra-core/src/controller/field/ReferenceManyFieldBase.spec.tsx‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import * as React from 'react';
2+
import { render, screen, waitFor } from '@testing-library/react';
3+
import {
4+
Basic,
5+
Errored,
6+
Loading,
7+
WithPagination,
8+
WithRenderProp,
9+
} from './ReferenceManyFieldBase.stories';
10+
11+
import { ReferenceManyFieldBase } from './ReferenceManyFieldBase';
12+
import { useResourceContext } from '../../core/useResourceContext';
13+
import { testDataProvider } from '../../dataProvider/testDataProvider';
14+
import { CoreAdminContext } from '../../core/CoreAdminContext';
15+
16+
describe('ReferenceManyFieldBase', () => {
17+
it('should display an error if error is defined', async () => {
18+
jest.spyOn(console, 'error')
19+
.mockImplementationOnce(() => {})
20+
.mockImplementationOnce(() => {});
21+
22+
render(<Errored />);
23+
await waitFor(() => {
24+
expect(screen.queryByText('Error: Error')).not.toBeNull();
25+
});
26+
});
27+
28+
it('should pass the loading state', async () => {
29+
jest.spyOn(console, 'error')
30+
.mockImplementationOnce(() => {})
31+
.mockImplementationOnce(() => {});
32+
33+
render(<Loading />);
34+
await waitFor(() => {
35+
expect(screen.queryByText('Loading...')).not.toBeNull();
36+
});
37+
});
38+
it('should pass the correct resource down to child component', async () => {
39+
const MyComponent = () => {
40+
const resource = useResourceContext();
41+
return <div>{resource}</div>;
42+
};
43+
const dataProvider = testDataProvider({
44+
getList: () =>
45+
// @ts-ignore
46+
Promise.resolve({ data: [{ id: 1 }, { id: 2 }], total: 2 }),
47+
});
48+
render(
49+
<CoreAdminContext dataProvider={dataProvider}>
50+
<ReferenceManyFieldBase
51+
reference="posts"
52+
source="post_id"
53+
target="post"
54+
>
55+
<MyComponent />
56+
</ReferenceManyFieldBase>
57+
</CoreAdminContext>
58+
);
59+
await waitFor(() => {
60+
expect(screen.queryByText('posts')).not.toBeNull();
61+
});
62+
});
63+
64+
it('should render the data', async () => {
65+
render(<Basic />);
66+
await waitFor(() => {
67+
expect(screen.queryByText('War and Peace')).not.toBeNull();
68+
expect(screen.queryByText('Anna Karenina')).not.toBeNull();
69+
expect(screen.queryByText('The Kreutzer Sonata')).not.toBeNull();
70+
});
71+
});
72+
73+
it('should render pagination', async () => {
74+
render(<WithPagination />);
75+
await waitFor(() => {
76+
expect(screen.queryByText('1 - 2 of 3')).not.toBeNull();
77+
expect(screen.queryByText('Next Page')).not.toBeNull();
78+
expect(screen.queryByText('Previous Page')).not.toBeNull();
79+
});
80+
screen.getByText('Next Page').click();
81+
await waitFor(() => {
82+
expect(screen.queryByText('3 - 3 of 3')).not.toBeNull();
83+
});
84+
screen.getByText('Previous Page').click();
85+
86+
await waitFor(() => {
87+
expect(screen.queryByText('1 - 2 of 3')).not.toBeNull();
88+
});
89+
});
90+
91+
describe('with render prop', () => {
92+
it('should display an error if error is defined', async () => {
93+
jest.spyOn(console, 'error')
94+
.mockImplementationOnce(() => {})
95+
.mockImplementationOnce(() => {});
96+
97+
const dataProviderWithAuthorsError = {
98+
getOne: () =>
99+
Promise.resolve({
100+
data: {
101+
id: 1,
102+
title: 'War and Peace',
103+
author: 1,
104+
summary:
105+
"War and Peace broadly focuses on Napoleon's invasion of Russia, and the impact it had on Tsarist society. The book explores themes such as revolution, revolution and empire, the growth and decline of various states and the impact it had on their economies, culture, and society.",
106+
year: 1869,
107+
},
108+
}),
109+
getMany: _resource => Promise.reject(new Error('Error')),
110+
getManyReference: () => Promise.reject(new Error('Error')),
111+
} as any;
112+
113+
render(
114+
<WithRenderProp dataProvider={dataProviderWithAuthorsError} />
115+
);
116+
await waitFor(() => {
117+
expect(screen.queryByText('Error')).not.toBeNull();
118+
});
119+
});
120+
121+
it('should pass the loading state', async () => {
122+
jest.spyOn(console, 'error')
123+
.mockImplementationOnce(() => {})
124+
.mockImplementationOnce(() => {});
125+
126+
const dataProviderWithAuthorsLoading = {
127+
getOne: () =>
128+
Promise.resolve({
129+
data: {
130+
id: 1,
131+
title: 'War and Peace',
132+
author: 1,
133+
summary:
134+
"War and Peace broadly focuses on Napoleon's invasion of Russia, and the impact it had on Tsarist society. The book explores themes such as revolution, revolution and empire, the growth and decline of various states and the impact it had on their economies, culture, and society.",
135+
year: 1869,
136+
},
137+
}),
138+
getMany: _resource => new Promise(() => {}),
139+
} as any;
140+
141+
render(
142+
<WithRenderProp dataProvider={dataProviderWithAuthorsLoading} />
143+
);
144+
await waitFor(() => {
145+
expect(screen.queryByText('Loading...')).not.toBeNull();
146+
});
147+
});
148+
149+
it('should render the data', async () => {
150+
render(<WithRenderProp />);
151+
await waitFor(() => {
152+
expect(screen.queryByText('War and Peace')).not.toBeNull();
153+
expect(screen.queryByText('Anna Karenina')).not.toBeNull();
154+
expect(
155+
screen.queryByText('The Kreutzer Sonata')
156+
).not.toBeNull();
157+
});
158+
});
159+
});
160+
161+
it('should render pagination using renderPagination prop', async () => {
162+
render(<WithPagination />);
163+
await waitFor(() => {
164+
expect(screen.queryByText('1 - 2 of 3')).not.toBeNull();
165+
expect(screen.queryByText('Next Page')).not.toBeNull();
166+
expect(screen.queryByText('Previous Page')).not.toBeNull();
167+
});
168+
screen.getByText('Next Page').click();
169+
await waitFor(() => {
170+
expect(screen.queryByText('3 - 3 of 3')).not.toBeNull();
171+
});
172+
screen.getByText('Previous Page').click();
173+
174+
await waitFor(() => {
175+
expect(screen.queryByText('1 - 2 of 3')).not.toBeNull();
176+
});
177+
});
178+
});

0 commit comments

Comments
 (0)