woocommerce/plugins/woocommerce-admin/client/header/activity-panel/activity-card/test/index.js

124 lines
3.1 KiB
JavaScript

/**
* External dependencies
*/
import { Button } from '@wordpress/components';
import CustomizeIcon from 'gridicons/dist/customize';
import moment from 'moment';
import { Gravatar } from '@woocommerce/components';
import { render } from '@testing-library/react';
/**
* Internal dependencies
*/
import { ActivityCard } from '../';
describe( 'ActivityCard', () => {
test( 'should have correct title', () => {
const { getByRole } = render(
<ActivityCard title="Inbox message">
This card has some content
</ActivityCard>
);
expect(
getByRole( 'heading', { name: 'Inbox message' } )
).toBeInTheDocument();
} );
test( 'should render a basic card', () => {
const { container } = render(
<ActivityCard title="Inbox message">
This card has some content
</ActivityCard>
);
expect( container ).toMatchSnapshot();
} );
test( 'should render an unread bubble on a card', () => {
const { container } = render(
<ActivityCard title="Inbox message" unread>
This card has some content
</ActivityCard>
);
expect( container ).toMatchSnapshot();
} );
test( 'should render a custom icon on a card', () => {
const { container } = render(
<ActivityCard title="Inbox message" icon={ <CustomizeIcon /> }>
This card has some content
</ActivityCard>
);
expect( container ).toMatchSnapshot();
} );
test( 'should render a gravatar on a card', () => {
const { container } = render(
<ActivityCard
title="Inbox message"
icon={ <Gravatar user="admin@local.test" /> }
>
This card has some content
</ActivityCard>
);
expect( container ).toMatchSnapshot();
} );
test( 'should render a timestamp on a card', () => {
// We're generating this via moment to ensure it's always "3 days ago".
const threeDaysAgo = moment().subtract( 3, 'days' ).format();
const { container } = render(
<ActivityCard title="Inbox message" date={ threeDaysAgo }>
This card has some content
</ActivityCard>
);
expect( container ).toMatchSnapshot();
} );
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();
} );
test( 'should render an action on a card', () => {
const noop = () => {};
const { container } = render(
<ActivityCard
title="Inbox message"
actions={
<Button isSecondary onClick={ noop }>
Action
</Button>
}
>
This card has some content
</ActivityCard>
);
expect( container ).toMatchSnapshot();
} );
test( 'should render multiple actions on a card', () => {
const noop = () => {};
const { container } = render(
<ActivityCard
title="Inbox message"
actions={ [
<Button key="action1" isPrimary onClick={ noop }>
Action 1
</Button>,
<Button key="action2" isSecondary onClick={ noop }>
Action 2
</Button>,
] }
>
This card has some content
</ActivityCard>
);
expect( container ).toMatchSnapshot();
} );
} );