Skip to content

Commit 6165476

Browse files
author
kim
committed
test: add tests
1 parent 5d5ebaa commit 6165476

File tree

5 files changed

+177
-30
lines changed

5 files changed

+177
-30
lines changed

‎cypress/e2e/player/main.cy.ts‎

Lines changed: 150 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { AppDataVisibility, Context, PermissionLevel } from '@graasp/sdk';
22

3+
import type { CommentAppData } from '../../../src/config/appData';
34
import {
45
buildCommentContainerDataCy,
56
buildDataCy,
@@ -25,6 +26,17 @@ const defaultAppData = [
2526
const MESSAGE_INPUT = 'textarea[name="Message"]';
2627
const SEND_BUTTON = '[name="Send message"]';
2728

29+
const goToConversation = (appData: CommentAppData) => {
30+
const txt = appData.data.content;
31+
cy.contains('tr', txt.slice(0, 10))
32+
.find('button[title="Open conversation"]')
33+
.click();
34+
};
35+
36+
const createConversation = () => {
37+
cy.get('button:contains("New conversation")').click();
38+
};
39+
2840
describe('Player View', () => {
2941
it('Show messages and write a new one', () => {
3042
cy.setUpApi(
@@ -39,6 +51,9 @@ describe('Player View', () => {
3951
);
4052
cy.visit('/');
4153

54+
// go to conversation
55+
goToConversation(defaultAppData[0]);
56+
4257
// expect previously saved app data
4358
const [previousAppData] = defaultAppData;
4459
cy.get(buildDataCy(buildCommentContainerDataCy(previousAppData.id))).should(
@@ -76,6 +91,7 @@ describe('Player View', () => {
7691
},
7792
);
7893
cy.visit('/');
94+
createConversation();
7995

8096
// expect cue
8197
cy.get(buildDataCy(buildCommentContainerDataCy('cue'))).should(
@@ -102,32 +118,33 @@ describe('Player View', () => {
102118
});
103119

104120
it('Show dates', () => {
121+
const appData = [
122+
{
123+
account: CURRENT_MEMBER,
124+
createdAt: '2025-11-18T16:35:22.010Z',
125+
creator: CURRENT_MEMBER,
126+
data: { content: 'A previously saved message' },
127+
id: '0',
128+
item: MOCK_SERVER_ITEM,
129+
type: 'comment',
130+
updatedAt: '2025-11-18T16:35:22.010Z',
131+
visibility: AppDataVisibility.Member,
132+
},
133+
{
134+
account: CURRENT_MEMBER,
135+
createdAt: '2024-11-18T16:35:22.010Z',
136+
creator: CURRENT_MEMBER,
137+
data: { content: 'A previously saved message' },
138+
id: '1',
139+
item: MOCK_SERVER_ITEM,
140+
type: 'comment',
141+
updatedAt: '2025-11-18T16:35:22.010Z',
142+
visibility: AppDataVisibility.Member,
143+
},
144+
];
105145
cy.setUpApi(
106146
{
107-
appData: [
108-
{
109-
account: CURRENT_MEMBER,
110-
createdAt: '2025-11-18T16:35:22.010Z',
111-
creator: CURRENT_MEMBER,
112-
data: { content: 'A previously saved message' },
113-
id: '0',
114-
item: MOCK_SERVER_ITEM,
115-
type: 'comment',
116-
updatedAt: '2025-11-18T16:35:22.010Z',
117-
visibility: AppDataVisibility.Member,
118-
},
119-
{
120-
account: CURRENT_MEMBER,
121-
createdAt: '2024-11-18T16:35:22.010Z',
122-
creator: CURRENT_MEMBER,
123-
data: { content: 'A previously saved message' },
124-
id: '1',
125-
item: MOCK_SERVER_ITEM,
126-
type: 'comment',
127-
updatedAt: '2025-11-18T16:35:22.010Z',
128-
visibility: AppDataVisibility.Member,
129-
},
130-
],
147+
appData,
131148
appSettings: [MOCK_APP_SETTING],
132149
},
133150
{
@@ -136,6 +153,8 @@ describe('Player View', () => {
136153
},
137154
);
138155
cy.visit('/');
156+
// go to conversation
157+
goToConversation(appData[0]);
139158

140159
// expect dates
141160
cy.get('#root').should('contain', 'November 18, 2024');
@@ -154,6 +173,7 @@ describe('Player View', () => {
154173
},
155174
);
156175
cy.visit('/');
176+
createConversation();
157177

158178
const [suggestion] = MOCK_APP_SETTING.data.starterSuggestions;
159179

@@ -187,6 +207,7 @@ describe('Player View', () => {
187207
},
188208
);
189209
cy.visit('/');
210+
createConversation();
190211

191212
// type and send message with enter key
192213
const message = 'My message';
@@ -216,4 +237,109 @@ describe('Player View', () => {
216237
message1,
217238
);
218239
});
240+
241+
it('Show all conversations', () => {
242+
const appData = [
243+
// first conversation
244+
{
245+
account: CURRENT_MEMBER,
246+
createdAt: '2026-11-18T16:35:22.010Z',
247+
creator: CURRENT_MEMBER,
248+
data: {
249+
content: 'My conversation',
250+
conversationId: 'conversation-id-2',
251+
},
252+
id: '12',
253+
item: MOCK_SERVER_ITEM,
254+
type: 'comment',
255+
updatedAt: '2026-11-18T16:35:22.010Z',
256+
visibility: AppDataVisibility.Member,
257+
},
258+
// second, legacy conversation
259+
{
260+
account: CURRENT_MEMBER,
261+
createdAt: '2025-10-18T16:35:22.010Z',
262+
creator: CURRENT_MEMBER,
263+
data: { content: 'A previously saved message' },
264+
id: '0',
265+
item: MOCK_SERVER_ITEM,
266+
type: 'comment',
267+
updatedAt: '2025-11-18T16:35:22.010Z',
268+
visibility: AppDataVisibility.Member,
269+
},
270+
{
271+
account: CURRENT_MEMBER,
272+
createdAt: '2024-01-18T16:35:22.010Z',
273+
creator: CURRENT_MEMBER,
274+
data: { content: 'Another saved message' },
275+
id: '14',
276+
item: MOCK_SERVER_ITEM,
277+
type: 'comment',
278+
updatedAt: '2025-11-18T17:35:22.010Z',
279+
visibility: AppDataVisibility.Member,
280+
},
281+
// third conversation
282+
{
283+
account: CURRENT_MEMBER,
284+
createdAt: '2023-11-18T16:35:22.010Z',
285+
creator: CURRENT_MEMBER,
286+
data: {
287+
content: 'A question I asked',
288+
conversationId: 'conversation-id-1',
289+
},
290+
id: '13',
291+
item: MOCK_SERVER_ITEM,
292+
type: 'comment',
293+
updatedAt: '2023-11-18T16:35:22.010Z',
294+
visibility: AppDataVisibility.Member,
295+
},
296+
];
297+
cy.setUpApi(
298+
{
299+
appData,
300+
appSettings: [MOCK_APP_SETTING],
301+
},
302+
{
303+
context: Context.Player,
304+
permission: PermissionLevel.Write,
305+
},
306+
);
307+
cy.visit('/');
308+
309+
// should show 3 conversations ordered by creation date desc
310+
cy.get('tr').then((rows) => {
311+
expect(rows).to.have.length(3);
312+
313+
expect(rows[0]).to.contain(appData[0].data.content);
314+
// content is cut because it is too long
315+
expect(rows[1]).to.contain(appData[1].data.content.slice(0, 10));
316+
expect(rows[2]).to.contain(appData[3].data.content);
317+
});
318+
319+
// go to first conversation and show one message
320+
goToConversation(appData[0]);
321+
// expect one user message only
322+
cy.get(buildDataCy(buildCommentContainerDataCy(appData[0].id))).should(
323+
'be.visible',
324+
);
325+
cy.get(buildDataCy(buildCommentContainerDataCy(appData[1].id))).should(
326+
'not.exist',
327+
);
328+
329+
// go back to conversations
330+
cy.get('button:contains("Go back to conversations")').click();
331+
332+
// go to second legacy conversation
333+
goToConversation(appData[1]);
334+
// expect one user message only
335+
cy.get(buildDataCy(buildCommentContainerDataCy(appData[1].id))).should(
336+
'be.visible',
337+
);
338+
cy.get(buildDataCy(buildCommentContainerDataCy(appData[2].id))).should(
339+
'be.visible',
340+
);
341+
cy.get(buildDataCy(buildCommentContainerDataCy(appData[3].id))).should(
342+
'not.exist',
343+
);
344+
});
219345
});

‎src/config/appData.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export type VisibilityVariants = 'member' | 'item';
1414

1515
export type CommentData = {
1616
content: string;
17-
parent: string | null;
17+
parent?: string | null;
1818
chatbotPromptSettingId?: string;
1919
/**
2020
* Id of the conversation in which the comment belongs to

‎src/langs/en.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,11 @@
7777
"STARTER_SUGGESTION_PLAYER_BUTTON_ARIA_LABEL": "Ask {{suggestion}}",
7878
"SEND_MESSAGE_BUTTON": "Send message",
7979
"EDIT_CHATBOT": "Edit chatbot",
80-
"MESSAGE_INPUT_LABEL": "Message"
80+
"MESSAGE_INPUT_LABEL": "Message",
81+
"List of Conversations": "List of Conversations",
82+
"Conversation Name": "Conversation Name",
83+
"Last Message Date": "Last Message Date",
84+
"Actions": "Actions",
85+
"Open conversation": "Open conversation"
8186
}
8287
}

‎src/langs/fr.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,11 @@
6464
"STARTER_SUGGESTION_PLACEHOLDER": "Écrire une suggestion ici",
6565
"STARTER_SUGGESTION_PLAYER_BUTTON_ARIA_LABEL": "Demander {{suggestion}}",
6666
"EDIT_CHATBOT": "Modifier le chatbot",
67-
"MESSAGE_INPUT_LABEL": "Message"
67+
"MESSAGE_INPUT_LABEL": "Message",
68+
"List of Conversations": "Liste des discussions",
69+
"Conversation Name": "Nom de la discussion",
70+
"Last Message Date": "Date du dernier message",
71+
"Actions": "Actions",
72+
"Open conversation": "Ouvrir la discussion"
6873
}
6974
}

‎src/modules/comment/Conversations.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
TableBody,
1010
TableCell,
1111
TableContainer,
12+
TableHead,
1213
TableRow,
1314
Typography,
1415
} from '@mui/material';
@@ -35,7 +36,6 @@ const useConversations = () => {
3536
if (messages) {
3637
const conversations = groupBy(messages, (c) => c.data.conversationId);
3738
return Object.entries(conversations)
38-
.toSorted((a, b) => (a[0] > b[0] ? 1 : -1))
3939
.map(([id, m]) => {
4040
const sortedMessages = m.toSorted((a, b) =>
4141
a.createdAt > b.createdAt ? 1 : -1,
@@ -46,6 +46,7 @@ const useConversations = () => {
4646
id,
4747
name: sortedMessages[0].data.content,
4848
messages: m,
49+
lastMessageCreatedAt: creationDate ?? '',
4950
lastMessageDate: creationDate
5051
? intlFormat(
5152
creationDate,
@@ -60,7 +61,10 @@ const useConversations = () => {
6061
)
6162
: '',
6263
};
63-
});
64+
})
65+
.toSorted((a, b) =>
66+
a.lastMessageCreatedAt < b.lastMessageCreatedAt ? 1 : -1,
67+
);
6468
}
6569

6670
return [];
@@ -88,7 +92,13 @@ export function Conversations({
8892
<Stack gap={3}>
8993
<ChatbotHeader avatar={chatbotAvatar} name={chatbotName} />
9094
<TableContainer data-cy={TABLE_VIEW_TABLE_CYPRESS}>
91-
<Table aria-label="conversations table">
95+
<Table aria-label={t('List of Conversations')}>
96+
{/* hide headers visually */}
97+
<TableHead sx={{ position: 'absolute', clip: 'rect(0 0 0 0)' }}>
98+
<TableCell>{t('Conversation Name')}</TableCell>
99+
<TableCell>{t('Last Message Date')}</TableCell>
100+
<TableCell>{t('Actions')}</TableCell>
101+
</TableHead>
92102
<TableBody data-cy={TABLE_VIEW_BODY_USERS_CYPRESS}>
93103
{conversations.map((c) => (
94104
<TableRow key={c.id}>
@@ -110,6 +120,7 @@ export function Conversations({
110120
</TableCell>
111121
<TableCell align="right">
112122
<IconButton
123+
title={t('Open conversation')}
113124
onClick={() => {
114125
console.debug(`Open conversation ${c.id}`);
115126
onSelect(c.id);

0 commit comments

Comments
 (0)