Skip to content

Commit 16f139a

Browse files
vishalnarkhedevishalnarkhede
authored
Merge pull request #1267 from GetStream/khushal87-isAttachmentEqual-fix
fix: fixes the broken giphy "shuffle" behaviour
2 parents 55ba80c + de2ce14 commit 16f139a

File tree

6 files changed

+322
-91
lines changed

6 files changed

+322
-91
lines changed

‎package/src/components/Attachment/Giphy.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,7 @@ const GiphyWithContext = <
201201
{ backgroundColor: white, borderColor: `${black}0D` },
202202
selectionContainer,
203203
]}
204+
testID='giphy-action-attachment'
204205
>
205206
<View style={[styles.header, header]}>
206207
<GiphyIcon />
@@ -229,6 +230,7 @@ const GiphyWithContext = <
229230
{ borderColor: grey_gainsboro, borderRightWidth: 1 },
230231
buttonContainer,
231232
]}
233+
testID={`${actions?.[2].value}-action-button`}
232234
>
233235
<Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
234236
</TouchableOpacity>
@@ -243,6 +245,7 @@ const GiphyWithContext = <
243245
{ borderColor: grey_gainsboro, borderRightWidth: 1 },
244246
buttonContainer,
245247
]}
248+
testID={`${actions?.[1].value}-action-button`}
246249
>
247250
<Text style={[styles.shuffle, { color: grey }, shuffle]}>{actions?.[1].text}</Text>
248251
</TouchableOpacity>
@@ -253,6 +256,7 @@ const GiphyWithContext = <
253256
}
254257
}}
255258
style={[styles.buttonContainer, { borderColor: grey_gainsboro }, buttonContainer]}
259+
testID={`${actions?.[0].value}-action-button`}
256260
>
257261
<Text style={[styles.send, { color: accent_blue }, send]}>{actions?.[0].text}</Text>
258262
</TouchableOpacity>

‎package/src/components/Attachment/__tests__/Attachment.test.js‎

Lines changed: 0 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ import {
1010
generateAudioAttachment,
1111
generateCardAttachment,
1212
generateFileAttachment,
13-
generateGiphyAttachment,
1413
generateImageAttachment,
15-
generateImgurAttachment,
1614
} from '../../../mock-builders/generator/attachment';
1715
import { generateMessage } from '../../../mock-builders/generator/message';
1816
import { Attachment } from '../Attachment';
@@ -53,65 +51,6 @@ describe('Attachment', () => {
5351
});
5452
});
5553

56-
it('should render Card component for "imgur" type attachment', async () => {
57-
const attachment = generateImgurAttachment();
58-
const { getByTestId } = render(getAttachmentComponent({ attachment }));
59-
60-
await waitFor(() => {
61-
expect(getByTestId('giphy-attachment')).toBeTruthy();
62-
});
63-
});
64-
65-
it('should render Card component for "giphy" type attachment', async () => {
66-
const attachment = generateGiphyAttachment();
67-
const { getByTestId } = render(getAttachmentComponent({ attachment }));
68-
69-
await waitFor(() => {
70-
expect(getByTestId('giphy-attachment')).toBeTruthy();
71-
});
72-
});
73-
74-
it('"giphy" attachment size should be customisable', async () => {
75-
const attachment = generateGiphyAttachment();
76-
attachment.giphy = {
77-
fixed_height: {
78-
height: '200',
79-
url: 'https://media1.giphy.com/media/test/fixed_height.gif',
80-
width: '375',
81-
},
82-
original: {
83-
height: '256',
84-
url: 'https://media1.giphy.com/media/test/original.gif',
85-
width: '480',
86-
},
87-
};
88-
const { getByTestId: getByTestIdFixedHeight } = render(
89-
getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
90-
);
91-
const { getByTestId: getByTestIdOriginal } = render(
92-
getAttachmentComponent({ attachment, giphyVersion: 'original' }),
93-
);
94-
await waitFor(() => {
95-
const checkImageProps = (imageProps, specificSizedGiphyData) => {
96-
let imageStyle = imageProps.style;
97-
if (Array.isArray(imageStyle)) {
98-
imageStyle = Object.assign({}, ...imageStyle);
99-
}
100-
expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height));
101-
expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width));
102-
expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
103-
};
104-
checkImageProps(
105-
getByTestIdFixedHeight('giphy-attachment-image').props,
106-
attachment.giphy.fixed_height,
107-
);
108-
checkImageProps(
109-
getByTestIdOriginal('giphy-attachment-image').props,
110-
attachment.giphy.original,
111-
);
112-
});
113-
});
114-
11554
it('should render UrlPreview component if attachment has title_link or og_scrape_url', async () => {
11655
const attachment = generateImageAttachment({
11756
og_scrape_url: uuidv4(),

‎package/src/components/Attachment/__tests__/Giphy.test.js‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
import React from 'react';
2+
3+
import { fireEvent, render, waitFor } from '@testing-library/react-native';
4+
5+
import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
6+
import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
7+
8+
import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
9+
import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
10+
import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
11+
import {
12+
generateGiphyAttachment,
13+
generateImgurAttachment,
14+
} from '../../../mock-builders/generator/attachment';
15+
import { generateChannelResponse } from '../../../mock-builders/generator/channel';
16+
import { generateMember } from '../../../mock-builders/generator/member';
17+
import { generateMessage } from '../../../mock-builders/generator/message';
18+
import { generateUser } from '../../../mock-builders/generator/user';
19+
import { getTestClientWithUser } from '../../../mock-builders/mock';
20+
import { Channel } from '../../Channel/Channel';
21+
import { Chat } from '../../Chat/Chat';
22+
import { MessageList } from '../../MessageList/MessageList';
23+
import { Giphy } from '../Giphy';
24+
25+
describe('Giphy', () => {
26+
const getAttachmentComponent = (props) => {
27+
const message = generateMessage();
28+
return (
29+
<ThemeProvider>
30+
<MessageProvider value={{ message }}>
31+
<Giphy {...props} />
32+
</MessageProvider>
33+
</ThemeProvider>
34+
);
35+
};
36+
37+
it('should render Card component for "imgur" type attachment', async () => {
38+
const attachment = generateImgurAttachment();
39+
const { getByTestId } = render(getAttachmentComponent({ attachment }));
40+
41+
await waitFor(() => {
42+
expect(getByTestId('giphy-attachment')).toBeTruthy();
43+
});
44+
});
45+
46+
it('should render Card component for "giphy" type attachment', async () => {
47+
const attachment = generateGiphyAttachment();
48+
const { getByTestId } = render(getAttachmentComponent({ attachment }));
49+
50+
await waitFor(() => {
51+
expect(getByTestId('giphy-attachment')).toBeTruthy();
52+
});
53+
});
54+
55+
it('"giphy" attachment size should be customisable', async () => {
56+
const attachment = generateGiphyAttachment();
57+
attachment.giphy = {
58+
fixed_height: {
59+
height: '200',
60+
url: 'https://media1.giphy.com/media/test/fixed_height.gif',
61+
width: '375',
62+
},
63+
original: {
64+
height: '256',
65+
url: 'https://media1.giphy.com/media/test/original.gif',
66+
width: '480',
67+
},
68+
};
69+
const { getByTestId: getByTestIdFixedHeight } = render(
70+
getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
71+
);
72+
const { getByTestId: getByTestIdOriginal } = render(
73+
getAttachmentComponent({ attachment, giphyVersion: 'original' }),
74+
);
75+
await waitFor(() => {
76+
const checkImageProps = (imageProps, specificSizedGiphyData) => {
77+
let imageStyle = imageProps.style;
78+
if (Array.isArray(imageStyle)) {
79+
imageStyle = Object.assign({}, ...imageStyle);
80+
}
81+
expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height));
82+
expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width));
83+
expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
84+
};
85+
checkImageProps(
86+
getByTestIdFixedHeight('giphy-attachment-image').props,
87+
attachment.giphy.fixed_height,
88+
);
89+
checkImageProps(
90+
getByTestIdOriginal('giphy-attachment-image').props,
91+
attachment.giphy.original,
92+
);
93+
});
94+
});
95+
96+
it('show render giphy action UI and all the 3 action buttons', async () => {
97+
const attachment = generateGiphyAttachment();
98+
attachment.actions = [
99+
{ name: 'image_action', text: 'Send', value: 'send' },
100+
{ name: 'image_action', text: 'Shuffle', value: 'shuffle' },
101+
{
102+
name: 'image_action',
103+
text: 'Cancel',
104+
value: 'cancel',
105+
},
106+
];
107+
const { getByTestId } = render(
108+
getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
109+
);
110+
111+
await waitFor(() => {
112+
expect(getByTestId('giphy-action-attachment')).toBeTruthy();
113+
expect(getByTestId('cancel-action-button')).toBeTruthy();
114+
expect(getByTestId('shuffle-action-button')).toBeTruthy();
115+
expect(getByTestId('send-action-button')).toBeTruthy();
116+
});
117+
});
118+
119+
it('should trigger the cancel giphy action', async () => {
120+
const attachment = generateGiphyAttachment();
121+
const handleAction = jest.fn();
122+
attachment.actions = [
123+
{ name: 'image_action', text: 'Send', value: 'send' },
124+
{ name: 'image_action', text: 'Shuffle', value: 'shuffle' },
125+
{
126+
name: 'image_action',
127+
text: 'Cancel',
128+
value: 'cancel',
129+
},
130+
];
131+
const { getByTestId } = render(
132+
getAttachmentComponent({
133+
attachment,
134+
giphyVersion: 'fixed_height',
135+
handleAction,
136+
}),
137+
);
138+
139+
await waitFor(() => getByTestId(`${attachment.actions[2].value}-action-button`));
140+
141+
expect(getByTestId('giphy-action-attachment')).toContainElement(
142+
getByTestId(`${attachment.actions[2].value}-action-button`),
143+
);
144+
145+
fireEvent.press(getByTestId(`${attachment.actions[2].value}-action-button`));
146+
147+
await waitFor(() => {
148+
expect(handleAction).toHaveBeenCalledTimes(1);
149+
});
150+
});
151+
152+
it('should trigger the shuffle giphy action', async () => {
153+
const attachment = generateGiphyAttachment();
154+
const handleAction = jest.fn();
155+
attachment.actions = [
156+
{ name: 'image_action', text: 'Send', value: 'send' },
157+
{ name: 'image_action', text: 'Shuffle', value: 'shuffle' },
158+
{
159+
name: 'image_action',
160+
text: 'Cancel',
161+
value: 'cancel',
162+
},
163+
];
164+
const { getByTestId } = render(
165+
getAttachmentComponent({
166+
attachment,
167+
giphyVersion: 'fixed_height',
168+
handleAction,
169+
}),
170+
);
171+
172+
await waitFor(() => getByTestId(`${attachment.actions[1].value}-action-button`));
173+
174+
expect(getByTestId('giphy-action-attachment')).toContainElement(
175+
getByTestId(`${attachment.actions[1].value}-action-button`),
176+
);
177+
178+
fireEvent.press(getByTestId(`${attachment.actions[1].value}-action-button`));
179+
180+
await waitFor(() => {
181+
expect(handleAction).toHaveBeenCalledTimes(1);
182+
});
183+
});
184+
185+
it('should trigger the send giphy action', async () => {
186+
const attachment = generateGiphyAttachment();
187+
const handleAction = jest.fn();
188+
attachment.actions = [
189+
{ name: 'image_action', text: 'Send', value: 'send' },
190+
{ name: 'image_action', text: 'Shuffle', value: 'shuffle' },
191+
{
192+
name: 'image_action',
193+
text: 'Cancel',
194+
value: 'cancel',
195+
},
196+
];
197+
const { getByTestId } = render(
198+
getAttachmentComponent({
199+
attachment,
200+
giphyVersion: 'fixed_height',
201+
handleAction,
202+
}),
203+
);
204+
205+
await waitFor(() => getByTestId(`${attachment.actions[0].value}-action-button`));
206+
207+
expect(getByTestId('giphy-action-attachment')).toContainElement(
208+
getByTestId(`${attachment.actions[0].value}-action-button`),
209+
);
210+
211+
fireEvent.press(getByTestId(`${attachment.actions[0].value}-action-button`));
212+
213+
await waitFor(() => {
214+
expect(handleAction).toHaveBeenCalledTimes(1);
215+
});
216+
});
217+
218+
it('giphy attachment UI should render within the message list with actions', async () => {
219+
const user1 = generateUser();
220+
const attachment = generateGiphyAttachment();
221+
attachment.actions = [
222+
{ name: 'image_action', text: 'Send', value: 'send' },
223+
{ name: 'image_action', text: 'Shuffle', value: 'shuffle' },
224+
{
225+
name: 'image_action',
226+
text: 'Cancel',
227+
value: 'cancel',
228+
},
229+
];
230+
const mockedChannel = generateChannelResponse({
231+
members: [generateMember({ user: user1 })],
232+
messages: [
233+
generateMessage({ user: user1 }),
234+
generateMessage({ type: 'system', user: undefined }),
235+
generateMessage({ attachments: [{ ...attachment }], user: user1 }),
236+
],
237+
});
238+
239+
const chatClient = await getTestClientWithUser({ id: 'testID' });
240+
useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
241+
const channel = chatClient.channel('messaging', mockedChannel.id);
242+
await channel.watch();
243+
244+
const { getByTestId, queryByTestId } = render(
245+
<OverlayProvider>
246+
<Chat client={chatClient}>
247+
<Channel channel={channel}>
248+
<MessageList />
249+
</Channel>
250+
</Chat>
251+
</OverlayProvider>,
252+
);
253+
254+
expect(queryByTestId('giphy-action-attachment')).toBeTruthy();
255+
expect(getByTestId('cancel-action-button')).toBeTruthy();
256+
expect(getByTestId('shuffle-action-button')).toBeTruthy();
257+
expect(getByTestId('send-action-button')).toBeTruthy();
258+
});
259+
260+
it('giphy attachment UI should render within the message list', async () => {
261+
const user1 = generateUser();
262+
const attachment = generateGiphyAttachment();
263+
264+
const mockedChannel = generateChannelResponse({
265+
members: [generateMember({ user: user1 })],
266+
messages: [
267+
generateMessage({ user: user1 }),
268+
generateMessage({ type: 'system', user: undefined }),
269+
generateMessage({ attachments: [{ ...attachment }], user: user1 }),
270+
],
271+
});
272+
273+
const chatClient = await getTestClientWithUser({ id: 'testID' });
274+
useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
275+
const channel = chatClient.channel('messaging', mockedChannel.id);
276+
await channel.watch();
277+
278+
const { queryByTestId } = render(
279+
<OverlayProvider>
280+
<Chat client={chatClient}>
281+
<Channel channel={channel}>
282+
<MessageList />
283+
</Channel>
284+
</Chat>
285+
</OverlayProvider>,
286+
);
287+
288+
expect(queryByTestId('giphy-attachment')).toBeTruthy();
289+
});
290+
});

0 commit comments

Comments
 (0)