matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Convert old tests to use "react-testing-library"

Browse Source
This commit is contained in:
Justin
2022-04-04 11:53:47 -04:00
parent 9a099b3fa7
commit ed47cf5f09
71 changed files with 411 additions and 1515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/soapbox/components/ui/card/__tests__/card.test.js → app/soapbox/components/ui/card/__tests__/card.test.tsx
View File

@@ -1,12 +1,11 @@
import React from 'react';
import { createShallowComponent } from 'soapbox/test_helpers';
import { render, screen } from '../../../../jest/test-helpers';
import { Card, CardBody, CardHeader, CardTitle } from '../card';
describe('<Card />', () => {
it('renders the CardTitle and CardBody', () => {
const component = createShallowComponent(
render(
<Card>
<CardHeader>
<CardTitle title='Card Title' />
@@ -18,13 +17,13 @@ describe('<Card />', () => {
</Card>,
);
expect(component.text()).toContain('Card Title');
expect(component.text()).toContain('Card Body');
expect(component.text()).not.toContain('Back');
expect(screen.getByTestId('card-title')).toHaveTextContent('Card Title');
expect(screen.getByTestId('card-body')).toHaveTextContent('Card Body');
expect(screen.queryByTestId('back-button')).not.toBeInTheDocument();
});
it('renders the Back Button', () => {
const component = createShallowComponent(
render(
<Card>
<CardHeader backHref='/'>
<CardTitle title='Card Title' />
@@ -32,6 +31,6 @@ describe('<Card />', () => {
</Card>,
);
expect(component.text()).toContain('Back');
expect(screen.getByTestId('back-button')).toBeInTheDocument();
});
});

6
app/soapbox/components/ui/card/card.tsx
View File

@@ -55,7 +55,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
return (
<Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
<InlineSVG src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
<span className='sr-only'>Back</span>
<span className='sr-only' data-testid='back-button'>Back</span>
</Comp>
);
};
@@ -74,11 +74,11 @@ interface ICardTitle {
}
const CardTitle = ({ title }: ICardTitle): JSX.Element => (
<Text size='xl' weight='bold' tag='h1'>{title}</Text>
<Text size='xl' weight='bold' tag='h1' data-testid='card-title'>{title}</Text>
);
const CardBody: React.FC = ({ children }): JSX.Element => (
<div>{children}</div>
<div data-testid='card-body'>{children}</div>
);
export { Card, CardHeader, CardTitle, CardBody };