11import React from 'react' ;
22import { render } from '@testing-library/react' ;
3+ import { fromPartial } from '@total-typescript/shoehorn' ;
34
45import { axe } from '../../../../axe-helper' ;
56
6- import { MessageReactions } from '../MessageReactions' ;
7+ import { MessageReactions , type MessageReactionsProps } from '../MessageReactions' ;
78import { MessageProvider } from '../../../context/MessageContext' ;
89
910import { generateReaction , mockMessageContext } from '../../../mock-builders' ;
1011import { DialogManagerProvider , WithComponents } from '../../../context' ;
11- import { defaultReactionOptions } from '../reactionOptions' ;
12+ import { defaultReactionOptions , type ReactionOptions } from '../reactionOptions' ;
13+
14+ import type { ReactionGroupResponse } from 'stream-chat' ;
15+ import type { ReactionsComparator } from '../types' ;
1216
1317const USER_ID = 'mark' ;
1418
1519const renderComponent = ( {
1620 reaction_groups = { } ,
1721 reactionOptions = defaultReactionOptions ,
1822 ...props
19- } : any = { } ) => {
20- const reactions = Object . entries ( reaction_groups ) . flatMap ( ( [ type , { count } ] : any ) =>
23+ } : {
24+ reaction_groups ?: Record < string , ReactionGroupResponse > ;
25+ reactionOptions ?: ReactionOptions ;
26+ sortReactions ?: ReactionsComparator ;
27+ } & Partial < Omit < MessageReactionsProps , 'reaction_groups' | 'reactions' > > = { } ) => {
28+ const reactions = Object . entries ( reaction_groups ) . flatMap ( ( [ type , { count } ] ) =>
2129 Array . from ( { length : count } , ( _ , i ) =>
2230 generateReaction ( { type, user : { id : `${ USER_ID } ${ i } } } ) ,
2331 ) ,
@@ -50,13 +58,13 @@ describe('MessageReactions', () => {
5058 vi . spyOn ( console , 'warn' ) . mockImplementation ( null ) ;
5159
5260 it ( 'should render the total reaction count in clustered mode' , async ( ) => {
53- const { container } = renderComponent ( {
61+ const { container, getByTestId } = renderComponent ( {
5462 reaction_groups : {
55- haha : { count : 2 } ,
56- love : { count : 5 } ,
63+ haha : fromPartial < ReactionGroupResponse > ( { count : 2 } ) ,
64+ love : fromPartial < ReactionGroupResponse > ( { count : 5 } ) ,
5765 } ,
5866 } ) ;
59- const countEl = container . querySelector ( '.str-chat__message-reactions__total -count') ;
67+ const countEl = getByTestId ( 'message-reactions-total -count') ;
6068 expect ( countEl ) . toBeInTheDocument ( ) ;
6169 expect ( countEl ) . toHaveTextContent ( '7' ) ;
6270
@@ -73,66 +81,59 @@ describe('MessageReactions', () => {
7381 } ) ;
7482
7583 it ( 'should render an emoji for each type of reaction' , async ( ) => {
76- const reaction_groups = {
77- haha : { count : 2 } ,
78- love : { count : 5 } ,
79- } ;
80-
81- const { container } = renderComponent ( { reaction_groups } ) ;
84+ const { container , getAllByTestId } = renderComponent ( {
85+ reaction_groups : {
86+ haha : fromPartial < ReactionGroupResponse > ( { count : 2 } ) ,
87+ love : fromPartial < ReactionGroupResponse > ( { count : 5 } ) ,
88+ } ,
89+ } ) ;
8290
83- const listItems = container . querySelectorAll (
84- '.str-chat__message-reactions__list-item' ,
85- ) ;
91+ const listItems = getAllByTestId ( 'message-reactions-list-item' ) ;
8692 expect ( listItems ) . toHaveLength ( 2 ) ;
8793
8894 const results = await axe ( container ) ;
8995 expect ( results ) . toHaveNoViolations ( ) ;
9096 } ) ;
9197
9298 it ( 'should handle custom reaction options' , async ( ) => {
93- const reaction_groups = {
94- banana : { count : 1 } ,
95- cowboy : { count : 2 } ,
96- } ;
97-
98- const { container } = renderComponent ( {
99- reaction_groups,
99+ const { container, getAllByTestId } = renderComponent ( {
100+ reaction_groups : {
101+ banana : fromPartial < ReactionGroupResponse > ( { count : 1 } ) ,
102+ cowboy : fromPartial < ReactionGroupResponse > ( { count : 2 } ) ,
103+ } ,
100104 reactionOptions : [
101105 { Component : ( ) => < > 🍌</ > , type : 'banana' } ,
102106 { Component : ( ) => < > 🤠</ > , type : 'cowboy' } ,
103107 ] ,
104108 } ) ;
105109
106- const listItems = container . querySelectorAll (
107- '.str-chat__message-reactions__list-item' ,
108- ) ;
110+ const listItems = getAllByTestId ( 'message-reactions-list-item' ) ;
109111 expect ( listItems ) . toHaveLength ( 2 ) ;
110112
111113 const results = await axe ( container ) ;
112114 expect ( results ) . toHaveNoViolations ( ) ;
113115 } ) ;
114116
115117 it ( 'should order reactions by first reaction timestamp by default' , ( ) => {
116- const { container } = renderComponent ( {
118+ const { getAllByTestId } = renderComponent ( {
117119 reaction_groups : {
118- haha : { count : 2 , first_reaction_at : new Date ( ) . toISOString ( ) } ,
119- like : {
120+ haha : fromPartial < ReactionGroupResponse > ( {
121+ count : 2 ,
122+ first_reaction_at : new Date ( ) . toISOString ( ) ,
123+ } ) ,
124+ like : fromPartial < ReactionGroupResponse > ( {
120125 count : 8 ,
121126 first_reaction_at : new Date ( Date . now ( ) + 60_000 ) . toISOString ( ) ,
122- } ,
123- love : {
127+ } ) ,
128+ love : fromPartial < ReactionGroupResponse > ( {
124129 count : 5 ,
125130 first_reaction_at : new Date ( Date . now ( ) + 120_000 ) . toISOString ( ) ,
126- } ,
131+ } ) ,
127132 } ,
128133 } ) ;
129134
130- const listItems = container . querySelectorAll (
131- '.str-chat__message-reactions__list-item' ,
132- ) ;
133- const icons = Array . from ( listItems ) . map (
134- ( item ) =>
135- item . querySelector ( '.str-chat__message-reactions__list-item-icon' ) ?. textContent ,
135+ const icons = getAllByTestId ( 'message-reactions-list-item-icon' ) . map (
136+ ( el ) => el . textContent ,
136137 ) ;
137138
138139 // haha (😂) should come first, then like (👍), then love (❤️)
@@ -142,21 +143,17 @@ describe('MessageReactions', () => {
142143 } ) ;
143144
144145 it ( 'should use custom comparator if provided' , ( ) => {
145- const { container } = renderComponent ( {
146+ const { getAllByTestId } = renderComponent ( {
146147 reaction_groups : {
147- haha : { count : 2 } ,
148- like : { count : 8 } ,
149- love : { count : 5 } ,
148+ haha : fromPartial < ReactionGroupResponse > ( { count : 2 } ) ,
149+ like : fromPartial < ReactionGroupResponse > ( { count : 8 } ) ,
150+ love : fromPartial < ReactionGroupResponse > ( { count : 5 } ) ,
150151 } ,
151152 sortReactions : ( a , b ) => b . reactionCount - a . reactionCount ,
152153 } ) ;
153154
154- const listItems = container . querySelectorAll (
155- '.str-chat__message-reactions__list-item' ,
156- ) ;
157- const icons = Array . from ( listItems ) . map (
158- ( item ) =>
159- item . querySelector ( '.str-chat__message-reactions__list-item-icon' ) ?. textContent ,
155+ const icons = getAllByTestId ( 'message-reactions-list-item-icon' ) . map (
156+ ( el ) => el . textContent ,
160157 ) ;
161158
162159 // like (8) > love (5) > haha (2)
0 commit comments