Fix tests

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

@@ -1,5 +1,6 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { VirtuosoMockContext } from 'react-virtuoso';
 
 import { __stub } from 'soapbox/api';
 import { ChatProvider } from 'soapbox/contexts/chat-context';
@@ -8,36 +9,24 @@ import { render, screen, waitFor } from '../../../../../jest/test-helpers';
 import ChatSearch from '../chat-search';
 
 const renderComponent = () => render(
-  <ChatProvider>
+  <VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
-    <ChatSearch />
+    <ChatProvider>
-  </ChatProvider>,
+      <ChatSearch />
+    </ChatProvider>,
+  </VirtuosoMockContext.Provider>,
 );
 
 describe('<ChatSearch />', () => {
-  it('renders correctly', () => {
+  beforeEach(async() => {
     renderComponent();
-
-    expect(screen.getByTestId('pane-header')).toHaveTextContent('Messages');
   });
 
-  describe('when the pane is closed', () => {
+  it('renders the search input', () => {
-    it('does not render the search input', () => {
+    expect(screen.getByTestId('search')).toBeInTheDocument();
-      renderComponent();
-      expect(screen.queryAllByTestId('search')).toHaveLength(0);
-    });
   });
 
-  describe('when the pane is open', () => {
+  describe('when searching', () => {
-    beforeEach(async() => {
+    describe('with results', () => {
-      renderComponent();
-      await userEvent.click(screen.getByTestId('icon-button'));
-    });
-
-    it('renders the search input', () => {
-      expect(screen.getByTestId('search')).toBeInTheDocument();
-    });
-
-    describe('when searching', () => {
       beforeEach(() => {
         __stub((mock) => {
           mock.onGet('/api/v1/accounts/search').reply(200, [{
@@ -51,8 +40,6 @@ describe('<ChatSearch />', () => {
       });
 
       it('renders accounts', async() => {
-        renderComponent();
-
         const user = userEvent.setup();
         await user.type(screen.getByTestId('search'), 'ste');
 
@@ -61,5 +48,22 @@ describe('<ChatSearch />', () => {
         });
       });
     });
+
+    describe('without results', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v1/accounts/search').reply(200, []);
+        });
+      });
+
+      it('renders accounts', async() => {
+        const user = userEvent.setup();
+        await user.type(screen.getByTestId('search'), 'ste');
+
+        await waitFor(() => {
+          expect(screen.getByTestId('no-results')).toBeInTheDocument();
+        });
+      });
+    });
   });
 });

app/soapbox/features/chats/components/chat-search/empty-results-blankslate.tsx

@@ -13,7 +13,7 @@ const EmptyResultsBlankslate = () => {
 
   return (
     <Stack justifyContent='center' alignItems='center' space={2} className='h-full w-2/3 mx-auto'>
-      <Text weight='bold' size='lg' align='center'>
+      <Text weight='bold' size='lg' align='center' data-testid='no-results'>
         {intl.formatMessage(messages.title)}
       </Text>