test(tests): another portion of tests

astro_2.0/components/AppHeader/components/SearchBar/components/DropdownResults/DropdownResults.tsx

@@ -7,7 +7,7 @@ import { useAuthContext } from 'context/AuthContext';
 import { SEARCH_PAGE_URL } from 'constants/routing';
 
 import { useSearchResults } from 'features/search/search-results';
-import { NoSearchResultsView } from 'features/search/search-results/components/no-search-results-view';
+import { NoSearchResultsView } from 'features/search/search-results/components/NoSearchResultsView';
 
 import {
   ResultSection,

astro_2.0/components/AppHeader/components/SearchBar/components/DropdownResults/tests/__snapshots__/DropdownResults.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`search results dropdown Should render component 1`] = `
         class=""
       />
       <div>
-        No results
+        No results for asd
       </div>
       <div>
         We couldn't find anything matching your search. Try again with a different term.

features/proposal/components/voter-details-card/VoterDetailsCard.tsx → features/proposal/components/VoterDetailsCard/VoterDetailsCard.tsx

@@ -8,7 +8,7 @@ import { ExplorerLink } from 'components/ExplorerLink';
 import { Vote } from 'features/types';
 import { formatTimestampAsDate } from 'utils/format';
 
-import styles from './voter-details-card.module.scss';
+import styles from './VoterDetailsCard.module.scss';
 
 const GroupsRenderer = dynamic(
   import('components/cards/member-card/GroupsRenderer'),

features/proposal/components/VoterDetailsCard/tests/VoterDetailsCard.spec.tsx

@@ -0,0 +1,47 @@
+import { render } from 'jest/testUtils';
+
+import { VoterDetailsCard } from 'features/proposal/components/VoterDetailsCard';
+
+jest.mock('components/Icon', () => {
+  return {
+    Icon: ({ name }: { name: string }) => <div>{name}</div>,
+  };
+});
+
+describe('VoterDetailsCard', () => {
+  // it('Should render component', () => {
+  //   const name = 'Hello World!';
+  //
+  //   const { getByText } = render(
+  //     <VoterDetailsCard
+  //       vote="Yes"
+  //       name="Hello World!"
+  //       transactionHash="123"
+  //       timestamp={null}
+  //       groups={['GR1', 'GR2']}
+  //     />
+  //   );
+  //
+  //   expect(getByText(name)).toBeInTheDocument();
+  // });
+
+  it.each`
+    vote         | icon
+    ${'Yes'}     | ${'votingYes'}
+    ${'No'}      | ${'votingNo'}
+    ${'Dismiss'} | ${'votingDismissAlt'}
+    ${'Other'}   | ${'notVoted'}
+  `('Should render proper icon for $vote vote', ({ vote, icon }) => {
+    const { getByText } = render(
+      <VoterDetailsCard
+        vote={vote}
+        name="Hello World!"
+        transactionHash="123"
+        timestamp={null}
+        groups={['GR1', 'GR2']}
+      />
+    );
+
+    expect(getByText(icon)).toBeInTheDocument();
+  });
+});

features/proposal/components/voters-list/VotersList.tsx → features/proposal/components/VotersList/VotersList.tsx

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import { VoterDetail } from 'features/types';
-import { VoterDetailsCard } from 'features/proposal/components/voter-details-card';
+import { VoterDetailsCard } from 'features/proposal/components/VoterDetailsCard';
 import { NoResultsView } from 'astro_2.0/components/NoResultsView';
 
-import styles from './voters-list.module.scss';
+import styles from './VotersList.module.scss';
 
 interface VotersListProps {
   data: VoterDetail[];

features/proposal/components/VotersList/tests/VotersList.spec.tsx

@@ -0,0 +1,31 @@
+import { render } from 'jest/testUtils';
+
+import { VoterDetail } from 'features/types';
+
+import { VotersList } from 'features/proposal/components/VotersList';
+
+describe('VotersList', () => {
+  it('Should render "No data" state', () => {
+    const { getByText } = render(<VotersList data={[]} />);
+
+    expect(getByText('No votes here')).toBeInTheDocument();
+  });
+
+  it('Should render component', () => {
+    const data = [
+      {
+        name: 'N1',
+        vote: 'Yes',
+      },
+      {
+        name: 'N2',
+        vote: 'No',
+      },
+    ] as VoterDetail[];
+
+    const { getByText } = render(<VotersList data={data} />);
+
+    expect(getByText('N1')).toBeInTheDocument();
+    expect(getByText('N2')).toBeInTheDocument();
+  });
+});

features/search/search-results/components/members-tab-view/MembersTabView.tsx → features/search/search-results/components/MembersTabView/MembersTabView.tsx

@@ -1,3 +1,4 @@
+import isEmpty from 'lodash/isEmpty';
 import React, { FC, useCallback } from 'react';
 
 import { NoResultsView } from 'astro_2.0/components/NoResultsView';
@@ -11,7 +12,7 @@ import { useModal } from 'components/modal';
 
 import { GROUP_COLOR } from './constants';
 
-import styles from './members-tab-view.module.scss';
+import styles from './MembersTabView.module.scss';
 
 export const MembersTabView: FC = () => {
   const { searchResults } = useSearchResults();
@@ -24,7 +25,7 @@ export const MembersTabView: FC = () => {
     [showCardModal]
   );
 
-  if ((searchResults?.members || []).length === 0) {
+  if (isEmpty(searchResults?.members)) {
     return (
       <NoResultsView
         title={

features/search/search-results/components/MembersTabView/tests/MembersTabView.spec.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import { render } from 'jest/testUtils';
+import { fireEvent } from '@testing-library/dom';
+
+import { useModal } from 'components/modal';
+import { useSearchResults } from 'features/search/search-results/SearchResults';
+
+import { MembersTabView } from 'features/search/search-results/components/MembersTabView';
+
+jest.mock('react-text-truncate', () => {
+  return ({ text }: { text: string }) => <div>{text}</div>;
+});
+
+jest.mock('components/modal', () => {
+  return {
+    useModal: jest.fn(() => []),
+  };
+});
+
+jest.mock('features/search/search-results/SearchResults', () => {
+  return {
+    useSearchResults: jest.fn(() => ({})),
+  };
+});
+
+describe('MembersTabView', () => {
+  it('Should "No Data" state', () => {
+    const { getByText } = render(<MembersTabView />);
+
+    expect(
+      getByText("We couldn't find anything matching your search.", {
+        exact: false,
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('Should render component', () => {
+    const name = 'My Name Is';
+
+    // @ts-ignore
+    useSearchResults.mockImplementation(() => ({
+      searchResults: {
+        members: [
+          {
+            id: 'N1',
+            name,
+            groups: ['MEW holders'],
+            votes: 0,
+          },
+        ],
+      },
+    }));
+
+    const { getByText } = render(<MembersTabView />);
+
+    expect(getByText(name)).toBeInTheDocument();
+  });
+
+  it('Should show modal', () => {
+    const showModal = jest.fn();
+
+    // @ts-ignore
+    useModal.mockImplementation(() => [showModal]);
+
+    // @ts-ignore
+    useSearchResults.mockImplementation(() => ({
+      searchResults: {
+        members: [
+          {
+            id: 'N1',
+            name: 'N1',
+            groups: ['MEW holders'],
+            votes: 0,
+          },
+        ],
+      },
+    }));
+
+    const { getAllByRole } = render(<MembersTabView />);
+
+    fireEvent.click(getAllByRole('button')[0]);
+
+    expect(showModal).toBeCalled();
+  });
+});

features/search/search-results/components/no-search-results-view/NoSearchResultsView.tsx → features/search/search-results/components/NoSearchResultsView/NoSearchResultsView.tsx

@@ -11,7 +11,7 @@ interface NoSearchResultsViewProps {
 export const NoSearchResultsView: FC<NoSearchResultsViewProps> = ({
   query,
 }) => {
-  const title = query ? 'No results' : `No results for ${query}`;
+  const title = query ? `No results for ${query}` : 'No results';
 
   return (
     <NoResultsView

features/search/search-results/components/NoSearchResultsView/tests/NoSearchResultsView.spec.tsx

@@ -0,0 +1,19 @@
+import { render } from 'jest/testUtils';
+
+import { NoSearchResultsView } from 'features/search/search-results/components/NoSearchResultsView';
+
+describe('NoSearchResultsView', () => {
+  it('Should render "No results"', () => {
+    const { getByText } = render(<NoSearchResultsView />);
+
+    expect(getByText('No results')).toBeInTheDocument();
+  });
+
+  it('Should render "No results" with query', () => {
+    const query = 'Hello World!';
+
+    const { getByText } = render(<NoSearchResultsView query={query} />);
+
+    expect(getByText(`No results for ${query}`)).toBeInTheDocument();
+  });
+});

features/search/search-results/components/search-results-renderer/SearchResultsRenderer.tsx

@@ -4,7 +4,7 @@ import { Tabs } from 'components/Tabs';
 import { useSearchResults } from 'features/search/search-results/SearchResults';
 import { DaosTabView } from 'features/search/search-results/components/daos-tab-view';
 import { ProposalsTabView } from 'features/search/search-results/components/proposals-tab-view';
-import { MembersTabView } from 'features/search/search-results/components/members-tab-view';
+import { MembersTabView } from 'features/search/search-results/components/MembersTabView';
 
 import styles from './search-results-renderer.module.scss';
 

pages/dao/[dao]/proposals/[proposal]/ProposalPage.tsx

@@ -15,7 +15,7 @@ import { getProposalScope } from 'utils/getProposalScope';
 import { getVoteDetails } from 'features/vote-policy/helpers';
 import { NestedDaoPageWrapper } from 'astro_2.0/features/pages/nestedDaoPagesContent/NestedDaoPageWrapper';
 
-import { VotersList } from 'features/proposal/components/voters-list';
+import { VotersList } from 'features/proposal/components/VotersList';
 import { useGetBreadcrumbsConfig } from 'hooks/useGetBreadcrumbsConfig';
 import { useDaoCustomTokens } from 'hooks/useCustomTokens';