diff --git a/app/soapbox/features/chats/components/chat-page/__tests__/chat-page.test.tsx b/app/soapbox/features/chats/components/chat-page/__tests__/chat-page.test.tsx
new file mode 100644
index 000000000..38abb4a6a
--- /dev/null
+++ b/app/soapbox/features/chats/components/chat-page/__tests__/chat-page.test.tsx
@@ -0,0 +1,82 @@
+import userEvent from '@testing-library/user-event';
+import { Map as ImmutableMap } from 'immutable';
+import React from 'react';
+
+import { __stub } from 'soapbox/api';
+import { normalizeAccount } from 'soapbox/normalizers';
+import { ReducerAccount } from 'soapbox/reducers/accounts';
+
+import { render, screen } from '../../../../../jest/test-helpers';
+import ChatPage from '../chat-page';
+
+describe('', () => {
+ let store: any;
+
+ describe('before you finish onboarding', () => {
+ it('renders the Welcome component', () => {
+ render();
+
+ expect(screen.getByTestId('chats-welcome')).toBeInTheDocument();
+ });
+
+ describe('when you complete onboarding', () => {
+ beforeEach(() => {
+ store = {
+ me: '1',
+ accounts: ImmutableMap({
+ '1': normalizeAccount({
+ id: '1',
+ acct: 'justin-username',
+ display_name: 'Justin L',
+ avatar: 'test.jpg',
+ chats_onboarded: false,
+ }) as ReducerAccount,
+ }),
+ };
+
+ __stub((mock) => {
+ mock
+ .onPatch('/api/v1/accounts/update_credentials')
+ .reply(200, { chats_onboarded: true, id: 1 });
+ });
+ });
+
+ it('renders the Chats', async () => {
+ render(, undefined, store);
+ await userEvent.click(screen.getByTestId('button'));
+
+ expect(screen.getByTestId('chat-page')).toBeInTheDocument();
+ expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings updated successfully');
+ });
+ });
+
+ describe('when the API returns an error', () => {
+ beforeEach(() => {
+ store = {
+ me: '1',
+ accounts: ImmutableMap({
+ '1': normalizeAccount({
+ id: '1',
+ acct: 'justin-username',
+ display_name: 'Justin L',
+ avatar: 'test.jpg',
+ chats_onboarded: false,
+ }) as ReducerAccount,
+ }),
+ };
+
+ __stub((mock) => {
+ mock
+ .onPatch('/api/v1/accounts/update_credentials')
+ .networkError();
+ });
+ });
+
+ it('renders the Chats', async () => {
+ render(, undefined, store);
+ await userEvent.click(screen.getByTestId('button'));
+ expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings failed to update.');
+ });
+ });
+ });
+});
diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index 007de0528..407d49e7b 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
@@ -63,7 +63,10 @@ const ChatPage: React.FC = ({ chatId }) => {
className='h-screen bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden sm:rounded-t-xl'
>
{isOnboarded ? (
-
+
= ({ chatId }) => {
-
+
diff --git a/app/soapbox/features/chats/components/chat-page/components/welcome.tsx b/app/soapbox/features/chats/components/chat-page/components/welcome.tsx
index 152de3486..2046198f9 100644
--- a/app/soapbox/features/chats/components/chat-page/components/welcome.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/welcome.tsx
@@ -36,7 +36,7 @@ const Welcome = () => {
};
return (
-
+
