sforkowany z mirror/soapbox
Add Chats onboarding tests
rodzic
caa3873821
commit
dbfcc0da3e
|
@ -0,0 +1,82 @@
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
|
import { Map as ImmutableMap } from 'immutable';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { __stub } from 'soapbox/api';
|
||||||
|
import { normalizeAccount } from 'soapbox/normalizers';
|
||||||
|
import { ReducerAccount } from 'soapbox/reducers/accounts';
|
||||||
|
|
||||||
|
import { render, screen } from '../../../../../jest/test-helpers';
|
||||||
|
import ChatPage from '../chat-page';
|
||||||
|
|
||||||
|
describe('<ChatPage />', () => {
|
||||||
|
let store: any;
|
||||||
|
|
||||||
|
describe('before you finish onboarding', () => {
|
||||||
|
it('renders the Welcome component', () => {
|
||||||
|
render(<ChatPage />);
|
||||||
|
|
||||||
|
expect(screen.getByTestId('chats-welcome')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when you complete onboarding', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
store = {
|
||||||
|
me: '1',
|
||||||
|
accounts: ImmutableMap({
|
||||||
|
'1': normalizeAccount({
|
||||||
|
id: '1',
|
||||||
|
acct: 'justin-username',
|
||||||
|
display_name: 'Justin L',
|
||||||
|
avatar: 'test.jpg',
|
||||||
|
chats_onboarded: false,
|
||||||
|
}) as ReducerAccount,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
__stub((mock) => {
|
||||||
|
mock
|
||||||
|
.onPatch('/api/v1/accounts/update_credentials')
|
||||||
|
.reply(200, { chats_onboarded: true, id: 1 });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders the Chats', async () => {
|
||||||
|
render(<ChatPage />, undefined, store);
|
||||||
|
await userEvent.click(screen.getByTestId('button'));
|
||||||
|
|
||||||
|
expect(screen.getByTestId('chat-page')).toBeInTheDocument();
|
||||||
|
expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings updated successfully');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('when the API returns an error', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
store = {
|
||||||
|
me: '1',
|
||||||
|
accounts: ImmutableMap({
|
||||||
|
'1': normalizeAccount({
|
||||||
|
id: '1',
|
||||||
|
acct: 'justin-username',
|
||||||
|
display_name: 'Justin L',
|
||||||
|
avatar: 'test.jpg',
|
||||||
|
chats_onboarded: false,
|
||||||
|
}) as ReducerAccount,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
__stub((mock) => {
|
||||||
|
mock
|
||||||
|
.onPatch('/api/v1/accounts/update_credentials')
|
||||||
|
.networkError();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders the Chats', async () => {
|
||||||
|
render(<ChatPage />, undefined, store);
|
||||||
|
await userEvent.click(screen.getByTestId('button'));
|
||||||
|
expect(screen.getByTestId('toast')).toHaveTextContent('Chat Settings failed to update.');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -63,7 +63,10 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
|
||||||
className='h-screen bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden sm:rounded-t-xl'
|
className='h-screen bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden sm:rounded-t-xl'
|
||||||
>
|
>
|
||||||
{isOnboarded ? (
|
{isOnboarded ? (
|
||||||
<div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
|
<div
|
||||||
|
className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'
|
||||||
|
data-testid='chat-page'
|
||||||
|
>
|
||||||
<Stack
|
<Stack
|
||||||
className={classNames('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
|
className={classNames('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
|
||||||
'hidden sm:block': isSidebarHidden,
|
'hidden sm:block': isSidebarHidden,
|
||||||
|
@ -84,7 +87,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
|
||||||
<Route path='/chats/settings'>
|
<Route path='/chats/settings'>
|
||||||
<ChatPageSettings />
|
<ChatPageSettings />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path='/chats/:chatId?'>
|
<Route>
|
||||||
<ChatPageMain />
|
<ChatPageMain />
|
||||||
</Route>
|
</Route>
|
||||||
</Switch>
|
</Switch>
|
||||||
|
|
|
@ -36,7 +36,7 @@ const Welcome = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Stack className='py-20 px-4 sm:px-0'>
|
<Stack className='py-20 px-4 sm:px-0' data-testid='chats-welcome'>
|
||||||
<img
|
<img
|
||||||
src='/instance/images/chats/welcome.svg'
|
src='/instance/images/chats/welcome.svg'
|
||||||
className='mx-auto w-32 md:w-40 h-auto mb-10'
|
className='mx-auto w-32 md:w-40 h-auto mb-10'
|
||||||
|
|
Ładowanie…
Reference in New Issue