From dbfcc0da3ea4eae4250b17d81e8d9385285fca44 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Mon, 14 Nov 2022 16:09:07 -0500
Subject: [PATCH] Add Chats onboarding tests

---
 .../chat-page/__tests__/chat-page.test.tsx    | 82 +++++++++++++++++++
 .../chats/components/chat-page/chat-page.tsx  |  7 +-
 .../chat-page/components/welcome.tsx          |  2 +-
 3 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 app/soapbox/features/chats/components/chat-page/__tests__/chat-page.test.tsx

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('<ChatPage />', () => {
+  let store: any;
+
+  describe('before you finish onboarding', () => {
+    it('renders the Welcome component', () => {
+      render(<ChatPage />);
+
+      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(<ChatPage />, 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(<ChatPage />, 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<IChatPage> = ({ 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 ? (
-        <div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
+        <div
+          className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'
+          data-testid='chat-page'
+        >
           <Stack
             className={classNames('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
               'hidden sm:block': isSidebarHidden,
@@ -84,7 +87,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
               <Route path='/chats/settings'>
                 <ChatPageSettings />
               </Route>
-              <Route path='/chats/:chatId?'>
+              <Route>
                 <ChatPageMain />
               </Route>
             </Switch>
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 (
-    <Stack className='py-20 px-4 sm:px-0'>
+    <Stack className='py-20 px-4 sm:px-0' data-testid='chats-welcome'>
       <img
         src='/instance/images/chats/welcome.svg'
         className='mx-auto w-32 md:w-40 h-auto mb-10'