Chewbacca
1 year ago
parent
696e97bb19
commit
4d609b57d6
@ -0,0 +1,77 @@
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
import React from 'react';
|
||||
|
||||
import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
|
||||
import { normalizeAccount, normalizeInstance } from 'soapbox/normalizers';
|
||||
|
||||
import Discover from '../discover';
|
||||
|
||||
jest.mock('../../../hooks/useDimensions', () => ({
|
||||
useDimensions: () => [{ scrollWidth: 190 }, null, { width: 300 }],
|
||||
}));
|
||||
|
||||
(window as any).ResizeObserver = class ResizeObserver {
|
||||
|
||||
observe() { }
|
||||
disconnect() { }
|
||||
|
||||
};
|
||||
|
||||
const userId = '1';
|
||||
const store: any = {
|
||||
me: userId,
|
||||
accounts: ImmutableMap({
|
||||
[userId]: normalizeAccount({
|
||||
id: userId,
|
||||
acct: 'justin-username',
|
||||
display_name: 'Justin L',
|
||||
avatar: 'test.jpg',
|
||||
chats_onboarded: false,
|
||||
}),
|
||||
}),
|
||||
instance: normalizeInstance({
|
||||
version: '3.4.1 (compatible; TruthSocial 1.0.0)',
|
||||
software: 'TRUTHSOCIAL',
|
||||
}),
|
||||
};
|
||||
|
||||
const renderApp = () => (
|
||||
render(
|
||||
<Discover />,
|
||||
undefined,
|
||||
store,
|
||||
)
|
||||
);
|
||||
|
||||
describe('<Discover />', () => {
|
||||
describe('before the user starts searching', () => {
|
||||
it('it should render popular groups', async () => {
|
||||
renderApp();
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('popular-groups')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('suggested-groups')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('popular-tags')).toBeInTheDocument();
|
||||
expect(screen.queryAllByTestId('recent-searches')).toHaveLength(0);
|
||||
expect(screen.queryAllByTestId('group-search-icon')).toHaveLength(0);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when the user focuses on the input', () => {
|
||||
it('should render the search experience', async () => {
|
||||
const user = userEvent.setup();
|
||||
renderApp();
|
||||
|
||||
await user.click(screen.getByTestId('search'));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('group-search-icon')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('recent-searches')).toBeInTheDocument();
|
||||
expect(screen.queryAllByTestId('popular-groups')).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
import { buildGroup } from 'soapbox/jest/factory';
|
||||
import { render, screen } from 'soapbox/jest/test-helpers';
|
||||
|
||||
import GroupGridItem from '../group-grid-item';
|
||||
|
||||
describe('<GroupGridItem', () => {
|
||||
it('should render correctly', () => {
|
||||
const group = buildGroup({
|
||||
display_name: 'group name here',
|
||||
locked: false,
|
||||
members_count: 6,
|
||||
});
|
||||
render(<GroupGridItem group={group} />);
|
||||
|
||||
expect(screen.getByTestId('group-grid-item')).toHaveTextContent(group.display_name);
|
||||
expect(screen.getByTestId('group-grid-item')).toHaveTextContent('Public');
|
||||
expect(screen.getByTestId('group-grid-item')).toHaveTextContent('6 members');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
|
||||
import { buildGroup } from 'soapbox/jest/factory';
|
||||
import { render, screen } from 'soapbox/jest/test-helpers';
|
||||
|
||||
import GroupListItem from '../group-list-item';
|
||||
|
||||
describe('<GroupListItem', () => {
|
||||
it('should render correctly', () => {
|
||||
const group = buildGroup({
|
||||
display_name: 'group name here',
|
||||
locked: false,
|
||||
members_count: 6,
|
||||
});
|
||||
render(<GroupListItem group={group} />);
|
||||
|
||||
expect(screen.getByTestId('group-list-item')).toHaveTextContent(group.display_name);
|
||||
expect(screen.getByTestId('group-list-item')).toHaveTextContent('Public');
|
||||
expect(screen.getByTestId('group-list-item')).toHaveTextContent('6 members');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,38 @@
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
|
||||
import { render, screen, within } from 'soapbox/jest/test-helpers';
|
||||
|
||||
import LayoutButtons, { GroupLayout } from '../layout-buttons';
|
||||
|
||||
describe('<LayoutButtons', () => {
|
||||
describe('when LIST view', () => {
|
||||
it('should render correctly', async () => {
|
||||
const onSelectFn = jest.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(<LayoutButtons layout={GroupLayout.LIST} onSelect={onSelectFn} />);
|
||||
|
||||
expect(within(screen.getByTestId('layout-list-action')).getByTestId('svg-icon-loader')).toHaveClass('text-primary-600');
|
||||
expect(within(screen.getByTestId('layout-grid-action')).getByTestId('svg-icon-loader')).not.toHaveClass('text-primary-600');
|
||||
|
||||
await user.click(screen.getByTestId('layout-grid-action'));
|
||||
expect(onSelectFn).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('when GRID view', () => {
|
||||
it('should render correctly', async () => {
|
||||
const onSelectFn = jest.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(<LayoutButtons layout={GroupLayout.GRID} onSelect={onSelectFn} />);
|
||||
|
||||
expect(within(screen.getByTestId('layout-list-action')).getByTestId('svg-icon-loader')).not.toHaveClass('text-primary-600');
|
||||
expect(within(screen.getByTestId('layout-grid-action')).getByTestId('svg-icon-loader')).toHaveClass('text-primary-600');
|
||||
|
||||
await user.click(screen.getByTestId('layout-grid-action'));
|
||||
expect(onSelectFn).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,16 @@
|
||||
import React from 'react';
|
||||
|
||||
import { buildGroupTag } from 'soapbox/jest/factory';
|
||||
import { render, screen } from 'soapbox/jest/test-helpers';
|
||||
|
||||
import TagListItem from '../tag-list-item';
|
||||
|
||||
describe('<TagListItem', () => {
|
||||
it('should render correctly', () => {
|
||||
const tag = buildGroupTag({ name: 'tag 1', groups: 5 });
|
||||
render(<TagListItem tag={tag} />);
|
||||
|
||||
expect(screen.getByTestId('tag-list-item')).toHaveTextContent(tag.name);
|
||||
expect(screen.getByTestId('tag-list-item')).toHaveTextContent('Number of groups: 5');
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
|
||||
import { render, screen } from 'soapbox/jest/test-helpers';
|
||||
|
||||
import Blankslate from '../blankslate';
|
||||
|
||||
|
||||
describe('<Blankslate />', () => {
|
||||
describe('with string props', () => {
|
||||
it('should render correctly', () => {
|
||||
render(<Blankslate title='Title' subtitle='Subtitle' />);
|
||||
|
||||
expect(screen.getByTestId('no-results')).toHaveTextContent('Title');
|
||||
expect(screen.getByTestId('no-results')).toHaveTextContent('Subtitle');
|
||||
});
|
||||
});
|
||||
|
||||
describe('with node props', () => {
|
||||
it('should render correctly', () => {
|
||||
render(
|
||||
<Blankslate
|
||||
title={<span>Title</span>}
|
||||
subtitle={<span>Subtitle</span>}
|
||||
/>);
|
||||
|
||||
expect(screen.getByTestId('no-results')).toHaveTextContent('Title');
|
||||
expect(screen.getByTestId('no-results')).toHaveTextContent('Subtitle');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,67 @@
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
import React from 'react';
|
||||
import { VirtuosoGridMockContext, VirtuosoMockContext } from 'react-virtuoso';
|
||||
|
||||
import { buildGroup } from 'soapbox/jest/factory';
|
||||
import { render, screen, waitFor } from 'soapbox/jest/test-helpers';
|
||||
import { normalizeAccount } from 'soapbox/normalizers';
|
||||
|
||||
import Results from '../results';
|
||||
|
||||
const userId = '1';
|
||||
const store = {
|
||||
me: userId,
|
||||
accounts: ImmutableMap({
|
||||
[userId]: normalizeAccount({
|
||||
id: userId,
|
||||
acct: 'justin-username',
|
||||
display_name: 'Justin L',
|
||||
avatar: 'test.jpg',
|
||||
chats_onboarded: false,
|
||||
}),
|
||||
}),
|
||||
};
|
||||
|
||||
const renderApp = (children: React.ReactNode) => (
|
||||
render(
|
||||
<VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 100 }}>
|
||||
<VirtuosoGridMockContext.Provider value={{ viewportHeight: 300, viewportWidth: 300, itemHeight: 100, itemWidth: 100 }}>
|
||||
{children}
|
||||
</VirtuosoGridMockContext.Provider>
|
||||
</VirtuosoMockContext.Provider>,
|
||||
undefined,
|
||||
store,
|
||||
)
|
||||
);
|
||||
|
||||
const groupSearchResult = {
|
||||
groups: [buildGroup()],
|
||||
hasNextPage: false,
|
||||
isFetching: false,
|
||||
fetchNextPage: jest.fn(),
|
||||
} as any;
|
||||
|
||||
describe('<Results />', () => {
|
||||
describe('with a list layout', () => {
|
||||
it('should render the GroupListItem components', async () => {
|
||||
renderApp(<Results groupSearchResult={groupSearchResult} />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('group-list-item')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('with a grid layout', () => {
|
||||
it('should render the GroupGridItem components', async () => {
|
||||
const user = userEvent.setup();
|
||||
renderApp(<Results groupSearchResult={groupSearchResult} />);
|
||||
|
||||
await user.click(screen.getByTestId('layout-grid-action'));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('group-grid-item')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue