mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-28 20:53:24 +10:00
Snapshot tests for Inbox sales and orders
This commit is contained in:
Kimmo Puputti
parent
d39973016f
commit
146b9ef659
3 changed files with 342 additions and 41 deletions
|
|
@ -1,19 +1,75 @@
|
|||
import React from 'react';
|
||||
import { renderShallow } from '../../util/test-helpers';
|
||||
import { fakeIntl } from '../../util/test-data';
|
||||
import { RoutesProvider } from '../../components';
|
||||
import { renderShallow, renderDeep } from '../../util/test-helpers';
|
||||
import { fakeIntl, createUser, createTransaction } from '../../util/test-data';
|
||||
import { InboxPageComponent } from './InboxPage';
|
||||
import routesConfiguration from '../../routesConfiguration';
|
||||
import { flattenRoutes } from '../../util/routes';
|
||||
|
||||
const noop = () => null;
|
||||
|
||||
describe('InboxPage', () => {
|
||||
it('matches snapshot', () => {
|
||||
const props = {
|
||||
const flattenedRoutes = flattenRoutes(routesConfiguration);
|
||||
const provider = createUser('provider-user-id');
|
||||
const customer = createUser('customer-user-id');
|
||||
|
||||
const ordersProps = {
|
||||
params: {
|
||||
tab: 'orders',
|
||||
},
|
||||
fetchInProgress: false,
|
||||
transactions: [],
|
||||
transactions: [
|
||||
createTransaction({
|
||||
id: 'order-1',
|
||||
state: 'state/preauthorized',
|
||||
provider,
|
||||
lastTransitionedAt: new Date(Date.UTC(2017, 0, 15)),
|
||||
}),
|
||||
createTransaction({
|
||||
id: 'order-2',
|
||||
state: 'state/preauthorized',
|
||||
provider,
|
||||
lastTransitionedAt: new Date(Date.UTC(2016, 0, 15)),
|
||||
}),
|
||||
],
|
||||
intl: fakeIntl,
|
||||
};
|
||||
const tree = renderShallow(<InboxPageComponent {...props} />);
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
||||
const ordersTree = renderDeep(
|
||||
<RoutesProvider flattenedRoutes={flattenedRoutes}>
|
||||
<InboxPageComponent {...ordersProps} />
|
||||
</RoutesProvider>
|
||||
);
|
||||
expect(ordersTree).toMatchSnapshot();
|
||||
|
||||
const salesProps = {
|
||||
params: {
|
||||
tab: 'sales',
|
||||
},
|
||||
fetchInProgress: false,
|
||||
transactions: [
|
||||
createTransaction({
|
||||
id: 'sale-1',
|
||||
state: 'state/preauthorized',
|
||||
customer,
|
||||
lastTransitionedAt: new Date(Date.UTC(2017, 0, 15)),
|
||||
}),
|
||||
createTransaction({
|
||||
id: 'sale-2',
|
||||
state: 'state/preauthorized',
|
||||
customer,
|
||||
lastTransitionedAt: new Date(Date.UTC(2016, 0, 15)),
|
||||
}),
|
||||
],
|
||||
intl: fakeIntl,
|
||||
};
|
||||
|
||||
const salesTree = renderDeep(
|
||||
<RoutesProvider flattenedRoutes={flattenedRoutes}>
|
||||
<InboxPageComponent {...salesProps} />
|
||||
</RoutesProvider>
|
||||
);
|
||||
expect(salesTree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,37 +1,259 @@
|
|||
exports[`InboxPage matches snapshot 1`] = `
|
||||
<Connect(withRouter(PageLayout))
|
||||
title="InboxPage.ordersTitle">
|
||||
<H1
|
||||
className={null}>
|
||||
<FormattedMessage
|
||||
id="InboxPage.title"
|
||||
values={Object {}} />
|
||||
</H1>
|
||||
<nav>
|
||||
<withFlattenedRoutes(withRouter(NamedLink))
|
||||
name="InboxPage"
|
||||
params={
|
||||
Object {
|
||||
"tab": "orders",
|
||||
}
|
||||
}>
|
||||
<FormattedMessage
|
||||
id="InboxPage.ordersTabTitle"
|
||||
values={Object {}} />
|
||||
</withFlattenedRoutes(withRouter(NamedLink))>
|
||||
<withFlattenedRoutes(withRouter(NamedLink))
|
||||
activeClassName={null}
|
||||
name="InboxPage"
|
||||
params={
|
||||
Object {
|
||||
"tab": "sales",
|
||||
}
|
||||
}>
|
||||
<FormattedMessage
|
||||
id="InboxPage.salesTabTitle"
|
||||
values={Object {}} />
|
||||
</withFlattenedRoutes(withRouter(NamedLink))>
|
||||
</nav>
|
||||
<ul />
|
||||
</Connect(withRouter(PageLayout))>
|
||||
<div
|
||||
className="">
|
||||
<div
|
||||
className={undefined}>
|
||||
<div>
|
||||
<a
|
||||
className="NamedLink_active"
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "🏠",
|
||||
}
|
||||
} />
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
<a
|
||||
className=""
|
||||
href="/login"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Login
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
<h1
|
||||
className="">
|
||||
<span>
|
||||
Inbox
|
||||
</span>
|
||||
</h1>
|
||||
<nav>
|
||||
<a
|
||||
className=""
|
||||
href="/inbox/orders"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
<span>
|
||||
Guest
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/inbox/sales"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
<span>
|
||||
Host
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
<ul>
|
||||
<li
|
||||
className={undefined}>
|
||||
<a
|
||||
className=""
|
||||
href="/order/order-1/details"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
<div
|
||||
className={undefined}>
|
||||
<img
|
||||
alt="provider-user-id first name provider-user-id last name"
|
||||
className={undefined}
|
||||
src="https://placehold.it/44x44" />
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
<div>
|
||||
<span
|
||||
className={undefined}>
|
||||
provider-user-id first name provider-user-id last name
|
||||
</span>
|
||||
<span
|
||||
className={undefined}>
|
||||
2017-01-15
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
InboxPage.statePending
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className={undefined}>
|
||||
<a
|
||||
className=""
|
||||
href="/order/order-2/details"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
<div
|
||||
className={undefined}>
|
||||
<img
|
||||
alt="provider-user-id first name provider-user-id last name"
|
||||
className={undefined}
|
||||
src="https://placehold.it/44x44" />
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
<div>
|
||||
<span
|
||||
className={undefined}>
|
||||
provider-user-id first name provider-user-id last name
|
||||
</span>
|
||||
<span
|
||||
className={undefined}>
|
||||
2016-01-15
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
InboxPage.statePending
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`InboxPage matches snapshot 2`] = `
|
||||
<div
|
||||
className="">
|
||||
<div
|
||||
className={undefined}>
|
||||
<div>
|
||||
<a
|
||||
className="NamedLink_active"
|
||||
href="/"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "🏠",
|
||||
}
|
||||
} />
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
<a
|
||||
className=""
|
||||
href="/login"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
Login
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
<h1
|
||||
className="">
|
||||
<span>
|
||||
Inbox
|
||||
</span>
|
||||
</h1>
|
||||
<nav>
|
||||
<a
|
||||
className=""
|
||||
href="/inbox/orders"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
<span>
|
||||
Guest
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className=""
|
||||
href="/inbox/sales"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
<span>
|
||||
Host
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
<ul>
|
||||
<li
|
||||
className={undefined}>
|
||||
<a
|
||||
className=""
|
||||
href="/sale/sale-1/details"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
<div
|
||||
className={undefined}>
|
||||
<img
|
||||
alt="customer-user-id first name customer-user-id last name"
|
||||
className={undefined}
|
||||
src="https://placehold.it/44x44" />
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
<div>
|
||||
<span
|
||||
className={undefined}>
|
||||
customer-user-id first name customer-user-id last name
|
||||
</span>
|
||||
<span
|
||||
className={undefined}>
|
||||
2017-01-15
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
InboxPage.statePending
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
className={undefined}>
|
||||
<a
|
||||
className=""
|
||||
href="/sale/sale-2/details"
|
||||
onClick={[Function]}
|
||||
style={Object {}}>
|
||||
<div
|
||||
className={undefined}>
|
||||
<img
|
||||
alt="customer-user-id first name customer-user-id last name"
|
||||
className={undefined}
|
||||
src="https://placehold.it/44x44" />
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
<div>
|
||||
<span
|
||||
className={undefined}>
|
||||
customer-user-id first name customer-user-id last name
|
||||
</span>
|
||||
<span
|
||||
className={undefined}>
|
||||
2016-01-15
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={undefined}>
|
||||
InboxPage.statePending
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -47,6 +47,29 @@ export const createListing = id => ({
|
|||
},
|
||||
});
|
||||
|
||||
export const createTransaction = options => {
|
||||
const {
|
||||
id,
|
||||
state = 'state/preauthorized',
|
||||
customer = null,
|
||||
provider = null,
|
||||
lastTransitionedAt = new Date(2017, 5, 1),
|
||||
} = options;
|
||||
return {
|
||||
id: new UUID(id),
|
||||
type: 'transaction',
|
||||
attributes: {
|
||||
commission: null,
|
||||
createdAt: new Date(2017, 4, 1),
|
||||
lastTransitionedAt,
|
||||
state,
|
||||
total: null,
|
||||
},
|
||||
customer,
|
||||
provider,
|
||||
};
|
||||
};
|
||||
|
||||
// Default config for currency formatting in tests and examples.
|
||||
export const currencyConfig = {
|
||||
style: 'currency',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue