2018-07-16 13:53:38 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import { Button } from '@wordpress/components';
|
2020-11-18 20:52:24 +00:00
|
|
|
import CustomizeIcon from 'gridicons/dist/customize';
|
2018-12-18 22:58:05 +00:00
|
|
|
import moment from 'moment';
|
2020-08-13 02:05:22 +00:00
|
|
|
import { Gravatar } from '@woocommerce/components';
|
2020-10-15 12:41:39 +00:00
|
|
|
import { render } from '@testing-library/react';
|
2018-07-16 13:53:38 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
2018-07-20 18:41:39 +00:00
|
|
|
import { ActivityCard } from '../';
|
2018-07-16 13:53:38 +00:00
|
|
|
|
|
|
|
describe( 'ActivityCard', () => {
|
|
|
|
test( 'should have correct title', () => {
|
2020-10-15 12:41:39 +00:00
|
|
|
const { getByRole } = render(
|
2020-02-14 02:23:21 +00:00
|
|
|
<ActivityCard title="Inbox message">
|
|
|
|
This card has some content
|
|
|
|
</ActivityCard>
|
|
|
|
);
|
2020-10-15 12:41:39 +00:00
|
|
|
expect(
|
|
|
|
getByRole( 'heading', { name: 'Inbox message' } )
|
|
|
|
).toBeInTheDocument();
|
2018-07-16 13:53:38 +00:00
|
|
|
} );
|
|
|
|
|
|
|
|
test( 'should render a basic card', () => {
|
2020-10-15 12:41:39 +00:00
|
|
|
const { container } = render(
|
2020-02-14 02:23:21 +00:00
|
|
|
<ActivityCard title="Inbox message">
|
|
|
|
This card has some content
|
|
|
|
</ActivityCard>
|
2018-07-16 13:53:38 +00:00
|
|
|
);
|
2020-10-15 12:41:39 +00:00
|
|
|
expect( container ).toMatchSnapshot();
|
2018-07-16 13:53:38 +00:00
|
|
|
} );
|
|
|
|
|
|
|
|
test( 'should render an unread bubble on a card', () => {
|
2020-10-15 12:41:39 +00:00
|
|
|
const { container } = render(
|
2018-07-16 13:53:38 +00:00
|
|
|
<ActivityCard title="Inbox message" unread>
|
|
|
|
This card has some content
|
|
|
|
</ActivityCard>
|
|
|
|
);
|
2020-10-15 12:41:39 +00:00
|
|
|
expect( container ).toMatchSnapshot();
|
2018-07-16 13:53:38 +00:00
|
|
|
} );
|
|
|
|
|
|
|
|
test( 'should render a custom icon on a card', () => {
|
2020-10-15 12:41:39 +00:00
|
|
|
const { container } = render(
|
2020-11-18 20:52:24 +00:00
|
|
|
<ActivityCard title="Inbox message" icon={ <CustomizeIcon /> }>
|
2018-07-16 13:53:38 +00:00
|
|
|
This card has some content
|
|
|
|
</ActivityCard>
|
|
|
|
);
|
2020-10-15 12:41:39 +00:00
|
|
|
expect( container ).toMatchSnapshot();
|
2018-07-16 13:53:38 +00:00
|
|
|
} );
|
|
|
|
|
|
|
|
test( 'should render a gravatar on a card', () => {
|
2020-10-15 12:41:39 +00:00
|
|
|
const { container } = render(
|
2020-02-14 02:23:21 +00:00
|
|
|
<ActivityCard
|
|
|
|
title="Inbox message"
|
|
|
|
icon={ <Gravatar user="admin@local.test" /> }
|
|
|
|
>
|
2018-07-16 13:53:38 +00:00
|
|
|
This card has some content
|
|
|
|
</ActivityCard>
|
|
|
|
);
|
2020-10-15 12:41:39 +00:00
|
|
|
expect( container ).toMatchSnapshot();
|
2018-07-16 13:53:38 +00:00
|
|
|
} );
|
|
|
|
|
|
|
|
test( 'should render a timestamp on a card', () => {
|
|
|
|
// We're generating this via moment to ensure it's always "3 days ago".
|
2020-07-28 02:32:58 +00:00
|
|
|
const threeDaysAgo = moment().subtract( 3, 'days' ).format();
|
2020-10-15 12:41:39 +00:00
|
|
|
const { container } = render(
|
2018-07-16 13:53:38 +00:00
|
|
|
<ActivityCard title="Inbox message" date={ threeDaysAgo }>
|
|
|
|
This card has some content
|
|
|
|
</ActivityCard>
|
|
|
|
);
|
2020-10-15 12:41:39 +00:00
|
|
|
expect( container ).toMatchSnapshot();
|
2018-07-16 13:53:38 +00:00
|
|
|
} );
|
|
|
|
|
2020-11-25 18:51:15 +00:00
|
|
|
test( 'supports a non-date "date" prop on a card', () => {
|
|
|
|
// We should be able to provide any string to the date prop.
|
|
|
|
const { container } = render(
|
|
|
|
<ActivityCard title="Inbox message" date="A long, long time ago">
|
|
|
|
This card has some content
|
|
|
|
</ActivityCard>
|
|
|
|
);
|
|
|
|
expect( container ).toMatchSnapshot();
|
|
|
|
} );
|
|
|
|
|
2018-07-16 13:53:38 +00:00
|
|
|
test( 'should render an action on a card', () => {
|
|
|
|
const noop = () => {};
|
2020-10-15 12:41:39 +00:00
|
|
|
const { container } = render(
|
2018-07-16 13:53:38 +00:00
|
|
|
<ActivityCard
|
|
|
|
title="Inbox message"
|
|
|
|
actions={
|
2020-06-11 19:22:20 +00:00
|
|
|
<Button isSecondary onClick={ noop }>
|
2018-07-16 13:53:38 +00:00
|
|
|
Action
|
|
|
|
</Button>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
This card has some content
|
|
|
|
</ActivityCard>
|
|
|
|
);
|
2020-10-15 12:41:39 +00:00
|
|
|
expect( container ).toMatchSnapshot();
|
2018-07-16 13:53:38 +00:00
|
|
|
} );
|
|
|
|
|
|
|
|
test( 'should render multiple actions on a card', () => {
|
|
|
|
const noop = () => {};
|
2020-10-15 12:41:39 +00:00
|
|
|
const { container } = render(
|
2018-07-16 13:53:38 +00:00
|
|
|
<ActivityCard
|
|
|
|
title="Inbox message"
|
|
|
|
actions={ [
|
2020-02-14 02:23:21 +00:00
|
|
|
<Button key="action1" isPrimary onClick={ noop }>
|
2018-07-16 13:53:38 +00:00
|
|
|
Action 1
|
|
|
|
</Button>,
|
2020-06-11 19:22:20 +00:00
|
|
|
<Button key="action2" isSecondary onClick={ noop }>
|
2018-07-16 13:53:38 +00:00
|
|
|
Action 2
|
|
|
|
</Button>,
|
|
|
|
] }
|
|
|
|
>
|
|
|
|
This card has some content
|
|
|
|
</ActivityCard>
|
|
|
|
);
|
2020-10-15 12:41:39 +00:00
|
|
|
expect( container ).toMatchSnapshot();
|
2018-07-16 13:53:38 +00:00
|
|
|
} );
|
|
|
|
} );
|