Signed-off-by: marcin mikołajczak <git@mkljczk.pl>next-virtuoso-proof
commit
e4908fe2b2
@ -1,12 +1,23 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
|
||||
import { render, screen } from '../../../../jest/test-helpers';
|
||||
import Emoji from '../emoji';
|
||||
|
||||
describe('<Emoji />', () => {
|
||||
it('renders the given text', () => {
|
||||
render(<Emoji emoji='smile' />);
|
||||
it('renders a simple emoji', () => {
|
||||
render(<Emoji emoji='😀' />);
|
||||
|
||||
expect(screen.getByRole('img').getAttribute('alt')).toBe('smile');
|
||||
const img = screen.getByRole('img');
|
||||
expect(img.getAttribute('src')).toBe('/packs/emoji/1f600.svg');
|
||||
expect(img.getAttribute('alt')).toBe('😀');
|
||||
});
|
||||
|
||||
// https://emojipedia.org/emoji-flag-sequence/
|
||||
it('renders a sequence emoji', () => {
|
||||
render(<Emoji emoji='🇺🇸' />);
|
||||
|
||||
const img = screen.getByRole('img');
|
||||
expect(img.getAttribute('src')).toBe('/packs/emoji/1f1fa-1f1f8.svg');
|
||||
expect(img.getAttribute('alt')).toBe('🇺🇸');
|
||||
});
|
||||
});
|
||||
|
@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
|
||||
import { render, screen } from '../../../../jest/test-helpers';
|
||||
import FormActions from '../form-actions';
|
||||
|
||||
describe('<FormActions />', () => {
|
||||
it('renders successfully', () => {
|
||||
render(<FormActions><div data-testid='child'>child</div></FormActions>);
|
||||
|
||||
expect(screen.getByTestId('child')).toBeInTheDocument();
|
||||
});
|
||||
});
|
@ -0,0 +1,138 @@
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
|
||||
import { render, screen } from '../../../../jest/test-helpers';
|
||||
import Modal from '../modal';
|
||||
|
||||
describe('<Modal />', () => {
|
||||
it('renders', () => {
|
||||
render(<Modal title='Modal title' />);
|
||||
expect(screen.getByTestId('modal')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders children', () => {
|
||||
render(<Modal title='Modal title'><div data-testid='child' /></Modal>);
|
||||
expect(screen.getByTestId('child')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('focuses the primary action', () => {
|
||||
render(
|
||||
<Modal
|
||||
title='Modal title'
|
||||
confirmationAction={() => null}
|
||||
confirmationText='Click me'
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button')).toHaveFocus();
|
||||
});
|
||||
|
||||
describe('onClose prop', () => {
|
||||
it('renders the Icon to close the modal', async() => {
|
||||
const mockFn = jest.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(<Modal title='Modal title' onClose={mockFn} />);
|
||||
expect(screen.getByTestId('icon-button')).toBeInTheDocument();
|
||||
|
||||
expect(mockFn).not.toBeCalled();
|
||||
await user.click(screen.getByTestId('icon-button'));
|
||||
expect(mockFn).toBeCalled();
|
||||
});
|
||||
|
||||
it('does not render the Icon to close the modal', () => {
|
||||
render(<Modal title='Modal title' />);
|
||||
expect(screen.queryAllByTestId('icon-button')).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('confirmationAction prop', () => {
|
||||
it('renders the confirmation button', async() => {
|
||||
const mockFn = jest.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<Modal
|
||||
title='Modal title'
|
||||
confirmationAction={mockFn}
|
||||
confirmationText='Click me'
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(mockFn).not.toBeCalled();
|
||||
await user.click(screen.getByRole('button'));
|
||||
expect(mockFn).toBeCalled();
|
||||
});
|
||||
|
||||
it('does not render the actions to', () => {
|
||||
render(<Modal title='Modal title' />);
|
||||
expect(screen.queryAllByTestId('modal-actions')).toHaveLength(0);
|
||||
});
|
||||
|
||||
describe('with secondaryAction', () => {
|
||||
it('renders the secondary button', async() => {
|
||||
const confirmationAction = jest.fn();
|
||||
const secondaryAction = jest.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<Modal
|
||||
title='Modal title'
|
||||
confirmationAction={confirmationAction}
|
||||
confirmationText='Primary'
|
||||
secondaryAction={secondaryAction}
|
||||
secondaryText='Secondary'
|
||||
/>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText(/secondary/i));
|
||||
expect(secondaryAction).toBeCalled();
|
||||
expect(confirmationAction).not.toBeCalled();
|
||||
});
|
||||
|
||||
it('does not render the secondary action', () => {
|
||||
render(
|
||||
<Modal
|
||||
title='Modal title'
|
||||
confirmationAction={() => null}
|
||||
confirmationText='Click me'
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryAllByRole('button')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('with cancelAction', () => {
|
||||
it('renders the cancel button', async() => {
|
||||
const confirmationAction = jest.fn();
|
||||
const cancelAction = jest.fn();
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<Modal
|
||||
title='Modal title'
|
||||
confirmationAction={confirmationAction}
|
||||
confirmationText='Primary'
|
||||
secondaryAction={cancelAction}
|
||||
secondaryText='Cancel'
|
||||
/>,
|
||||
);
|
||||
|
||||
await user.click(screen.getByText(/cancel/i));
|
||||
expect(cancelAction).toBeCalled();
|
||||
expect(confirmationAction).not.toBeCalled();
|
||||
});
|
||||
|
||||
it('does not render the cancel action', () => {
|
||||
render(
|
||||
<Modal
|
||||
title='Modal title'
|
||||
confirmationAction={() => null}
|
||||
confirmationText='Click me'
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryAllByRole('button')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
@ -0,0 +1,28 @@
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
|
||||
import { __stub } from 'soapbox/api';
|
||||
|
||||
import { render, screen } from '../../../../jest/test-helpers';
|
||||
import Search from '../search';
|
||||
|
||||
describe('<Search />', () => {
|
||||
it('successfully renders', async() => {
|
||||
render(<Search autosuggest />);
|
||||
expect(screen.getByLabelText('Search')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles onChange', async() => {
|
||||
__stub(mock => {
|
||||
mock.onGet('/api/v1/accounts/search').reply(200, [{ id: 1 }]);
|
||||
});
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(<Search autosuggest />);
|
||||
|
||||
await user.type(screen.getByLabelText('Search'), '@jus');
|
||||
|
||||
expect(screen.getByLabelText('Search')).toHaveValue('@jus');
|
||||
expect(screen.getByTestId('account')).toBeInTheDocument();
|
||||
});
|
||||
});
|
@ -0,0 +1,72 @@
|
||||
import { Map as ImmutableMap, fromJS } from 'immutable';
|
||||
import React from 'react';
|
||||
|
||||
import { render, screen } from '../../../../jest/test-helpers';
|
||||
import TrendsPanel from '../trends-panel';
|
||||
|
||||
describe('<TrendsPanel />', () => {
|
||||
it('renders trending hashtags', () => {
|
||||
const store = {
|
||||
trends: ImmutableMap({
|
||||
items: fromJS([{
|
||||
name: 'hashtag 1',
|
||||
history: [{ accounts: [] }],
|
||||
}]),
|
||||
}),
|
||||
};
|
||||
|
||||
render(<TrendsPanel limit={1} />, null, store);
|
||||
expect(screen.getByTestId('hashtag')).toHaveTextContent(/hashtag 1/i);
|
||||
});
|
||||
|
||||
it('renders multiple trends', () => {
|
||||
const store = {
|
||||
trends: ImmutableMap({
|
||||
items: fromJS([
|
||||
{
|
||||
name: 'hashtag 1',
|
||||
history: [{ accounts: [] }],
|
||||
},
|
||||
{
|
||||
name: 'hashtag 2',
|
||||
history: [{ accounts: [] }],
|
||||
},
|
||||
]),
|
||||
}),
|
||||
};
|
||||
|
||||
render(<TrendsPanel limit={3} />, null, store);
|
||||
expect(screen.queryAllByTestId('hashtag')).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('respects the limit prop', () => {
|
||||
const store = {
|
||||
trends: ImmutableMap({
|
||||
items: fromJS([
|
||||
{
|
||||
name: 'hashtag 1',
|
||||
history: [{ accounts: [] }],
|
||||
},
|
||||
{
|
||||
name: 'hashtag 2',
|
||||
history: [{ accounts: [] }],
|
||||
},
|
||||
]),
|
||||
}),
|
||||
};
|
||||
|
||||
render(<TrendsPanel limit={1} />, null, store);
|
||||
expect(screen.queryAllByTestId('hashtag')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders empty', () => {
|
||||
const store = {
|
||||
trends: ImmutableMap({
|
||||
items: fromJS([]),
|
||||
}),
|
||||
};
|
||||
|
||||
render(<TrendsPanel limit={1} />, null, store);
|
||||
expect(screen.queryAllByTestId('hashtag')).toHaveLength(0);
|
||||
});
|
||||
});
|
Loading…
Reference in new issue