-
Notifications
You must be signed in to change notification settings - Fork 3
/
manifold-resource-plan.spec.ts
69 lines (61 loc) · 2.33 KB
/
manifold-resource-plan.spec.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { newSpecPage } from '@stencil/core/testing';
import { GetResourceQuery } from '../../types/graphql';
import resource from '../../spec/mock/elegant-cms/resource';
import { ManifoldResourcePlan } from './manifold-resource-plan';
import { ManifoldPlanDetails } from '../manifold-plan-details/manifold-plan-details';
interface Props {
gqlData?: GetResourceQuery['resource'];
loading?: boolean;
}
async function setup(props: Props) {
const page = await newSpecPage({
components: [ManifoldResourcePlan, ManifoldPlanDetails],
html: '<div></div>',
});
const component = page.doc.createElement('manifold-resource-plan');
component.loading = props.loading;
component.gqlData = props.gqlData;
const root = page.root as HTMLDivElement;
root.appendChild(component);
await page.waitForChanges();
return { page, component };
}
describe('<manifold-resource-plan>', () => {
describe('v0 props', () => {
it('[gqlData]: renders skeleton if missing', async () => {
const { page } = await setup({});
const planDetails = page.root && page.root.querySelector('manifold-plan-details');
const skeleton =
planDetails &&
planDetails.shadowRoot &&
planDetails.shadowRoot.querySelector('manifold-skeleton-text');
expect(skeleton).not.toBeNull();
});
it('[gqlData]: renders product card', async () => {
const { page } = await setup({
loading: false,
gqlData: resource as GetResourceQuery['resource'],
});
const planDetails = page.root && page.root.querySelector('manifold-plan-details');
const productName =
planDetails &&
planDetails.shadowRoot &&
planDetails.shadowRoot.querySelector('[itemprop="brand"]');
expect((productName as HTMLElement).innerText).toBe(
resource.plan && resource.plan.product && resource.plan.product.displayName
);
});
it('[loading]: renders skeleton', async () => {
const { page } = await setup({
loading: true,
gqlData: resource as GetResourceQuery['resource'],
});
const planDetails = page.root && page.root.querySelector('manifold-plan-details');
const skeleton =
planDetails &&
planDetails.shadowRoot &&
planDetails.shadowRoot.querySelector('manifold-skeleton-text');
expect(skeleton).not.toBeNull();
});
});
});