Skip to content

Commit

Permalink
test: fix tests rendering message actions
Browse files Browse the repository at this point in the history
  • Loading branch information
@MartinCupela
MartinCupela committed Sep 5, 2024
1 parent 223ddea commit d45459b
Show file tree
Hide file tree
Showing 5 changed files with 192 additions and 32 deletions.
49 changes: 26 additions & 23 deletions src/components/Message/__tests__/MessageOptions.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
generateUser,
getTestClientWithUser,
} from '../../../mock-builders';
import { DialogsManagerProvider } from '../../../context';

const MESSAGE_ACTIONS_TEST_ID = 'message-actions';

Expand Down Expand Up @@ -55,32 +56,34 @@ async function renderMessageOptions({

return render(
<ChatProvider value={{ client }}>
<ChannelStateProvider value={{ channel, ...channelStateOpts }}>
<ChannelActionProvider
value={{
openThread: jest.fn(),
removeMessage: jest.fn(),
updateMessage: jest.fn(),
}}
>
<ComponentProvider
<DialogsManagerProvider id='message-options-dialogs-provider'>
<ChannelStateProvider value={{ channel, ...channelStateOpts }}>
<ChannelActionProvider
value={{
Attachment,
// eslint-disable-next-line react/display-name
Message: () => (
<MessageSimple
channelConfig={channelConfig}
onReactionListClick={customMessageProps?.onReactionListClick}
/>
),
openThread: jest.fn(),
removeMessage: jest.fn(),
updateMessage: jest.fn(),
}}
>
<Message {...defaultMessageProps} {...customMessageProps}>
<MessageOptions {...defaultOptionsProps} {...customOptionsProps} />
</Message>
</ComponentProvider>
</ChannelActionProvider>
</ChannelStateProvider>
<ComponentProvider
value={{
Attachment,
// eslint-disable-next-line react/display-name
Message: () => (
<MessageSimple
channelConfig={channelConfig}
onReactionListClick={customMessageProps?.onReactionListClick}
/>
),
}}
>
<Message {...defaultMessageProps} {...customMessageProps}>
<MessageOptions {...defaultOptionsProps} {...customOptionsProps} />
</Message>
</ComponentProvider>
</ChannelActionProvider>
</ChannelStateProvider>
</DialogsManagerProvider>
</ChatProvider>,
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/MessageList/VirtualizedMessageList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,7 +428,7 @@ const VirtualizedMessageListWithContext = <
return (
<>
<MessageListMainPanel>
<DialogsManagerProvider>
<DialogsManagerProvider id='virtualized-message-list-dialogs-manager'>
{!threadList && showUnreadMessagesNotification && (
<UnreadMessagesNotification unreadCount={channelUnreadUiState?.unread_messages} />
)}
Expand Down
108 changes: 100 additions & 8 deletions src/components/MessageList/__tests__/VirtualizedMessageListComponents.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
ChannelStateProvider,
ChatProvider,
ComponentProvider,
DialogsManagerProvider,
TranslationProvider,
useMessageContext,
} from '../../../context';
Expand All @@ -38,7 +39,11 @@ const Wrapper = ({ children, componentContext = {} }) => (
<ChatProvider value={{ client }}>
<ChannelStateProvider value={{ channel }}>
<ChannelActionProvider value={{ addNotification: jest.fn() }}>
<ComponentProvider value={componentContext}>{children}</ComponentProvider>
<ComponentProvider value={componentContext}>
<DialogsManagerProvider id='vml-components-dialogs-manager'>
{children}
</DialogsManagerProvider>
</ComponentProvider>
</ChannelActionProvider>
</ChannelStateProvider>
</ChatProvider>
Expand Down Expand Up @@ -84,7 +89,16 @@ describe('VirtualizedMessageComponents', () => {
const CustomLoadingIndicator = () => <div>Custom Loading Indicator</div>;
it('should render empty div in Header when not loading more messages', () => {
const { container } = renderElements(<Header />);
expect(container).toMatchInlineSnapshot(`<div />`);
expect(container).toMatchInlineSnapshot(`
<div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});

it('should render LoadingIndicator in Header when loading more messages', () => {
Expand All @@ -106,14 +120,29 @@ describe('VirtualizedMessageComponents', () => {
Custom Loading Indicator
</div>
</div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});

it('should not render custom LoadingIndicator in Header when not loading more messages', () => {
const componentContext = { LoadingIndicator: CustomLoadingIndicator };
const { container } = renderElements(<Header />, componentContext);
expect(container).toMatchInlineSnapshot(`<div />`);
expect(container).toMatchInlineSnapshot(`
<div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});

// FIXME: this is a crazy pattern of having to set LoadingIndicator to null so that additionalVirtuosoProps.head can be rendered.
Expand All @@ -135,14 +164,29 @@ describe('VirtualizedMessageComponents', () => {
<div>
Custom head
</div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});

it('should not render custom head in Header when not loading more messages', () => {
const context = { head };
const { container } = renderElements(<Header context={context} />);
expect(container).toMatchInlineSnapshot(`<div />`);
expect(container).toMatchInlineSnapshot(`
<div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});

it('should render custom LoadingIndicator instead of head when loading more', () => {
Expand All @@ -158,6 +202,12 @@ describe('VirtualizedMessageComponents', () => {
Custom Loading Indicator
</div>
</div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});
Expand All @@ -176,7 +226,16 @@ describe('VirtualizedMessageComponents', () => {

it('should render empty for thread by default', () => {
const { container } = renderElements(<EmptyPlaceholder context={{ threadList: true }} />);
expect(container).toMatchInlineSnapshot(`<div />`);
expect(container).toMatchInlineSnapshot(`
<div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});
it('should render custom EmptyStateIndicator for main message list', () => {
const { container } = renderElements(<EmptyPlaceholder />, componentContext);
Expand All @@ -194,7 +253,16 @@ describe('VirtualizedMessageComponents', () => {
it('should render empty if EmptyStateIndicator nullified', () => {
const componentContext = { EmptyStateIndicator: NullEmptyStateIndicator };
const { container } = renderElements(<EmptyPlaceholder />, componentContext);
expect(container).toMatchInlineSnapshot(`<div />`);
expect(container).toMatchInlineSnapshot(`
<div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});

it('should render empty in thread if EmptyStateIndicator nullified', () => {
Expand All @@ -203,14 +271,32 @@ describe('VirtualizedMessageComponents', () => {
<EmptyPlaceholder context={{ threadList: true }} />,
componentContext,
);
expect(container).toMatchInlineSnapshot(`<div />`);
expect(container).toMatchInlineSnapshot(`
<div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});
});

describe('Footer', () => {
it('should render nothing in Footer by default', () => {
const { container } = renderElements(<Footer />);
expect(container).toMatchInlineSnapshot(`<div />`);
expect(container).toMatchInlineSnapshot(`
<div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});
it('should render custom TypingIndicator in Footer', () => {
const TypingIndicator = () => <div>Custom TypingIndicator</div>;
Expand All @@ -221,6 +307,12 @@ describe('VirtualizedMessageComponents', () => {
<div>
Custom TypingIndicator
</div>
<div
class="str-chat__dialog-overlay"
data-str-chat__portal-id="vml-components-dialogs-manager"
data-testid="str-chat__dialog-overlay"
style="--str-chat__dialog-overlay-height: 0;"
/>
</div>
`);
});
Expand Down
11 changes: 11 additions & 0 deletions src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,17 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
</div>
</div>
</div>
<div
className="str-chat__dialog-overlay"
data-str-chat__portal-id="virtualized-message-list-dialogs-manager"
data-testid="str-chat__dialog-overlay"
onClick={[Function]}
style={
Object {
"--str-chat__dialog-overlay-height": "0",
}
}
/>
<div
className="str-chat__list-notifications"
/>
Expand Down
Loading

0 comments on commit d45459b

Please sign in to comment.