Add tests for ChatWidget component

app/soapbox/features/chats/components/__tests__/chat-widget.test.tsx

@@ -0,0 +1,88 @@
+import { Map as ImmutableMap } from 'immutable';
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import { normalizeAccount } from 'soapbox/normalizers';
+
+import { render, rootState } from '../../../../jest/test-helpers';
+import ChatWidget from '../chat-widget';
+
+const id = '1';
+const account = normalizeAccount({
+  id,
+  acct: 'justin-username',
+  display_name: 'Justin L',
+  avatar: 'test.jpg',
+  chats_onboarded: true,
+});
+
+const store = rootState
+  .set('me', id)
+  .set('accounts', ImmutableMap({
+    [id]: account,
+  }) as any);
+
+describe('<ChatWidget />', () => {
+  describe('when on the /chats endpoint', () => {
+    it('hides the widget', async () => {
+      const App = () => (
+        <Switch>
+          <Route path='/chats' exact><span>Chats page <ChatWidget /></span></Route>
+          <Route path='/' exact><span data-testid='home'>Homepage <ChatWidget /></span></Route>
+        </Switch>
+      );
+
+      const screen = render(
+        <App />,
+        {},
+        store,
+        { initialEntries: ['/chats'] },
+      );
+
+      expect(screen.queryAllByTestId('pane')).toHaveLength(0);
+    });
+  });
+
+  describe('when the user has not onboarded chats', () => {
+    it('hides the widget', async () => {
+      const accountWithoutChats = normalizeAccount({
+        id,
+        acct: 'justin-username',
+        display_name: 'Justin L',
+        avatar: 'test.jpg',
+        chats_onboarded: false,
+      });
+      const newStore = store.set('accounts', ImmutableMap({
+        [id]: accountWithoutChats,
+      }) as any);
+
+      const screen = render(
+        <ChatWidget />,
+        {},
+        newStore,
+      );
+
+      expect(screen.queryAllByTestId('pane')).toHaveLength(0);
+    });
+  });
+
+  describe('when the user is onboarded and the endpoint is not /chats', () => {
+    it('shows the widget', async () => {
+      const App = () => (
+        <Switch>
+          <Route path='/chats' exact><span>Chats page <ChatWidget /></span></Route>
+          <Route path='/' exact><span data-testid='home'>Homepage <ChatWidget /></span></Route>
+        </Switch>
+      );
+
+      const screen = render(
+        <App />,
+        {},
+        store,
+        { initialEntries: ['/'] },
+      );
+
+      expect(screen.queryAllByTestId('pane')).toHaveLength(1);
+    });
+  });
+});

app/soapbox/features/chats/components/audio-toggle.tsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
-import Toggle from 'react-toggle';
-
-import { changeSetting, getSettings } from 'soapbox/actions/settings';
-import { useAppSelector } from 'soapbox/hooks';
-
-const messages = defineMessages({
-  switchOn: { id: 'chats.audio_toggle_on', defaultMessage: 'Audio notification on' },
-  switchOff: { id: 'chats.audio_toggle_off', defaultMessage: 'Audio notification off' },
-});
-
-interface IAudioToggle {
-  showLabel?: boolean
-}
-
-const AudioToggle: React.FC<IAudioToggle> = ({ showLabel }) => {
-  const dispatch = useDispatch();
-  const intl = useIntl();
-
-  const checked = useAppSelector(state => !!getSettings(state).getIn(['chats', 'sound']));
-
-  const handleToggleAudio = () => {
-    dispatch(changeSetting(['chats', 'sound'], !checked));
-  };
-
-  const id = 'chats-audio-toggle';
-  const label = intl.formatMessage(checked ? messages.switchOff : messages.switchOn);
-
-  return (
-    <div className='audio-toggle react-toggle--mini'>
-      <div className='setting-toggle' aria-label={label}>
-        <Toggle
-          id={id}
-          checked={checked}
-          onChange={handleToggleAudio}
-          // onKeyDown={this.onKeyDown}
-        />
-        {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
-      </div>
-    </div>
-  );
-};
-
-export default AudioToggle;

app/soapbox/features/chats/components/chat-widget.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 
 import { ChatProvider } from 'soapbox/contexts/chat-context';
 import { useOwnAccount } from 'soapbox/hooks';
@@ -7,8 +8,9 @@ import ChatPane from './chat-pane/chat-pane';
 
 const ChatWidget = () => {
   const account = useOwnAccount();
+  const history = useHistory();
 
-  const path = location.pathname;
+  const path = history.location.pathname;
   const shouldHideWidget = Boolean(path.match(/^\/chats/));
 
   if (!account?.chats_onboarded || shouldHideWidget) {

app/soapbox/features/chats/components/ui/pane.tsx

@@ -23,6 +23,7 @@ const Pane: React.FC<IPane> = ({ isOpen = false, index, children, main = false }
         'h-16': !isOpen,
       })}
       style={{ right: `${right}px` }}
+      data-testid='pane'
     >
       {children}
     </div>

app/soapbox/hooks/useOwnAccount.ts

@@ -9,5 +9,5 @@ const getAccount: (state: any, accountId: any) => any = makeGetAccount();
 
 /** Get the logged-in account from the store, if any */
 export const useOwnAccount = (): Account | null => {
-  return useAppSelector((state) =>  getAccount(state, state.me));
+  return useAppSelector((state) => getAccount(state, state.me));
 };