Skip to content

Commit c4efe0e

Browse files
mocca102mocca102
authored
Rename CioPlpContext to CioPlp (#42)
* Rename CioPlpContext to CioPlp * Update CioPlp tests * Add docs
1 parent 2a27c85 commit c4efe0e

30 files changed

+442
-210
lines changed

‎.eslintrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656
"devDependencies": [
5757
"**/stories/**/*.*",
5858
"**/.storybook/**/*.*",
59-
"spec/*.*"
59+
"spec/**/*.*"
6060
],
6161
"peerDependencies": true
6262
}

‎.storybook/storybook-styles.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
#storybook-root {
2-
display: flex;
32
background-color: #F6F9FC;
43
}
54

65
#storybook-docs {
76
background-color: #F6F9FC;
87
}
98

10-
#storybook-docs .sbdocs-content ul li{
11-
margin-top: 20px;
12-
margin-bottom: 10px;
13-
}
14-
159
.small-container-example-wrapper {
1610
height: 100%;
1711
display: grid;

‎spec/CioPlp/CioPlp.server.test.jsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import ReactDOMServer from 'react-dom/server';
3+
import CioPlp from '../../src/components/CioPlp';
4+
import { useCioPlpContext } from '../../src/hooks/useCioPlpContext';
5+
import { DEMO_API_KEY } from '../../src/constants';
6+
7+
describe('CioPlp React Server-Side Rendering', () => {
8+
it("throws an error if apiKey isn't provided", () => {
9+
expect(() => {
10+
ReactDOMServer.renderToString(<CioPlp />);
11+
}).toThrow();
12+
});
13+
14+
it('renders CioPlp provider without children on the server without error', () => {
15+
// Render the component to a string
16+
const html = ReactDOMServer.renderToString(<CioPlp apiKey={DEMO_API_KEY} />);
17+
18+
expect(html).toContain('');
19+
});
20+
21+
it('renders CioPlp provider with children correctly on the server', () => {
22+
// Render the component to a string
23+
const html = ReactDOMServer.renderToString(
24+
<CioPlp apiKey={DEMO_API_KEY}>
25+
<div>Test</div>
26+
</CioPlp>,
27+
);
28+
expect(html).toContain('<div>Test</div>');
29+
});
30+
31+
it('renders CioPlp provider with render props on the server', () => {
32+
// Render the component to a string
33+
const html = ReactDOMServer.renderToString(
34+
<CioPlp apiKey={DEMO_API_KEY}>{() => <div>Test</div>}</CioPlp>,
35+
);
36+
expect(html).toContain('<div>Test</div>');
37+
});
38+
39+
it('renders CioPlp provider with children that has access to Context value on the server', () => {
40+
function ContextConsumer() {
41+
const context = useCioPlpContext();
42+
43+
return <div>{JSON.stringify(context)}</div>;
44+
}
45+
46+
// Render the component to a string
47+
const html = ReactDOMServer.renderToString(
48+
<CioPlp apiKey={DEMO_API_KEY}>
49+
<ContextConsumer />
50+
</CioPlp>,
51+
);
52+
expect(html).toContain(
53+
'<div>{&quot;cioClient&quot;:null,&quot;cioClientOptions&quot;:{},&quot;getters&quot;:{},&quot;formatters&quot;:{},&quot;callbacks&quot;:{}}</div>',
54+
);
55+
});
56+
});

‎spec/CioPlp/CioPlp.test.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import CioPlp from '../../src/components/CioPlp';
4+
import { useCioPlpContext } from '../../src/hooks/useCioPlpContext';
5+
import { DEMO_API_KEY } from '../../src/constants';
6+
import '@testing-library/jest-dom';
7+
8+
describe('CioPlp React Client-Side Rendering', () => {
9+
beforeEach(() => {
10+
const spy = jest.spyOn(console, 'error');
11+
spy.mockImplementation(() => {});
12+
});
13+
14+
afterAll(() => {
15+
jest.resetAllMocks();
16+
});
17+
18+
it("throws an error if apiKey isn't provided", () => {
19+
expect(() => {
20+
render(<CioPlp />);
21+
}).toThrow();
22+
});
23+
24+
it('renders CioPlp provider without children on the client without error', () => {
25+
expect(() => render(<CioPlp apiKey={DEMO_API_KEY} />)).not.toThrow();
26+
});
27+
28+
it('renders CioPlp provider with children correctly on the client', () => {
29+
// Render the component to a string
30+
const { getByText } = render(
31+
<CioPlp apiKey={DEMO_API_KEY}>
32+
<div>Test</div>
33+
</CioPlp>,
34+
);
35+
expect(getByText('Test')).toBeInTheDocument();
36+
});
37+
38+
it('renders CioPlp provider with render props on the client', () => {
39+
const { getByText } = render(<CioPlp apiKey={DEMO_API_KEY}>{() => <div>Test</div>}</CioPlp>);
40+
41+
expect(getByText('Test')).toBeInTheDocument();
42+
});
43+
44+
it('renders CioPlp provider with children that has access to Context value on the client', () => {
45+
function ContextConsumer() {
46+
const context = useCioPlpContext();
47+
48+
return <div className='context-consumer'>{context.cioClient.options.serviceUrl}</div>;
49+
}
50+
51+
// Render the component to a string
52+
const { getByText } = render(
53+
<CioPlp apiKey={DEMO_API_KEY}>
54+
<ContextConsumer />
55+
</CioPlp>,
56+
);
57+
expect(getByText('https://ac.cnstrc.com')).toBeInTheDocument();
58+
});
59+
});

‎spec/CioPlpContext.server.test.jsx‎

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎spec/ProductCard.server.test.jsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import ReactDOMServer from 'react-dom/server';
3-
import { CioPlpContext } from '../src/PlpContext';
3+
import CioPlp from '../src/components/CioPlp';
44
import { DEMO_API_KEY } from '../src/constants';
55
import ProductCard from '../src/components/ProductCard';
66
import testItem from './local_examples/item.json';
@@ -16,59 +16,59 @@ describe('ProductCard: React Server-Side Rendering', () => {
1616
jest.resetAllMocks();
1717
});
1818

19-
test('Should throw error if used outside the CioPlpContext', () => {
19+
test('Should throw error if used outside the CioPlp provider', () => {
2020
expect(() => ReactDOMServer.renderToString(<ProductCard />)).toThrow();
2121
});
2222

2323
test("Should throw error if item isn't provided", () => {
2424
expect(() =>
2525
ReactDOMServer.renderToString(
26-
<CioPlpContext apiKey={DEMO_API_KEY}>
26+
<CioPlp apiKey={DEMO_API_KEY}>
2727
<ProductCard />
28-
</CioPlpContext>,
28+
</CioPlp>,
2929
),
3030
).toThrow();
3131
});
3232

3333
test('Should render default price formatting if not overridden', () => {
3434
const html = ReactDOMServer.renderToString(
35-
<CioPlpContext apiKey={DEMO_API_KEY}>
35+
<CioPlp apiKey={DEMO_API_KEY}>
3636
<ProductCard item={transformResultItem(testItem)} />
37-
</CioPlpContext>,
37+
</CioPlp>,
3838
);
3939
expect(html).toContain('$79.00');
4040
});
4141

4242
test('Should render custom price formatting if overridden at the PlpContext level', () => {
4343
const customPriceFormatter = (price) => `USD$${price.toFixed(2)}`;
4444
const html = ReactDOMServer.renderToString(
45-
<CioPlpContext apiKey={DEMO_API_KEY} formatters={{ formatPrice: customPriceFormatter }}>
45+
<CioPlp apiKey={DEMO_API_KEY} formatters={{ formatPrice: customPriceFormatter }}>
4646
<ProductCard item={transformResultItem(testItem)} />
47-
</CioPlpContext>,
47+
</CioPlp>,
4848
);
4949
expect(html).toContain('USD$79.00');
5050
});
5151

5252
test('Should retrieve custom price if overridden at the PlpContext level', () => {
5353
const customPriceGetter = (item) => item.data.altPrice;
5454
const html = ReactDOMServer.renderToString(
55-
<CioPlpContext apiKey={DEMO_API_KEY} getters={{ getPrice: customPriceGetter }}>
55+
<CioPlp apiKey={DEMO_API_KEY} getters={{ getPrice: customPriceGetter }}>
5656
<ProductCard item={transformResultItem(testItem)} />
57-
</CioPlpContext>,
57+
</CioPlp>,
5858
);
5959
expect(html).toContain('$69.00');
6060
});
6161

6262
test('Should renders custom children correctly', () => {
6363
const html = ReactDOMServer.renderToString(
64-
<CioPlpContext apiKey={DEMO_API_KEY}>
64+
<CioPlp apiKey={DEMO_API_KEY}>
6565
<ProductCard item={transformResultItem(testItem)}>
6666
{({ formatPrice, getPrice, item }) => (
6767
// Custom Rendered Price
6868
<div>My Rendered Price: {formatPrice(getPrice(item))}</div>
6969
)}
7070
</ProductCard>
71-
</CioPlpContext>,
71+
</CioPlp>,
7272
);
7373

7474
// React injects <!-- --> on the server to mark dynamic content for rehydration
@@ -79,9 +79,9 @@ describe('ProductCard: React Server-Side Rendering', () => {
7979
const invalidItem = {};
8080
expect(() =>
8181
ReactDOMServer.renderToString(
82-
<CioPlpContext apiKey={DEMO_API_KEY}>
82+
<CioPlp apiKey={DEMO_API_KEY}>
8383
<ProductCard item={invalidItem} />
84-
</CioPlpContext>,
84+
</CioPlp>,
8585
),
8686
).toThrow('data, itemId, or itemName are required.');
8787
});

‎spec/productCard.test.js‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
import React from 'react';
33
import { render, screen, fireEvent } from '@testing-library/react';
44
import ProductCard from '../src/components/ProductCard';
5-
import { CioPlpContext } from '../src/PlpContext';
5+
import CioPlp from '../src/components/CioPlp';
66
import { DEMO_API_KEY } from '../src/constants';
77
import testItem from './local_examples/item.json';
88
import { transformResultItem } from '../src/utils/transformers';
99

1010
describe('Testing Component: ProductCard', () => {
11-
test('Should throw error if used outside the CioPlpContext', () => {
11+
test('Should throw error if used outside the CioPlp', () => {
1212
const spy = jest.spyOn(console, 'error');
1313
spy.mockImplementation(() => {});
1414
expect(() => render(<ProductCard />)).toThrow();
@@ -20,51 +20,49 @@ describe('Testing Component: ProductCard', () => {
2020
spy.mockImplementation(() => {});
2121
expect(() =>
2222
render(
23-
<CioPlpContext apiKey={DEMO_API_KEY}>
23+
<CioPlp apiKey={DEMO_API_KEY}>
2424
<ProductCard />
25-
</CioPlpContext>,
25+
</CioPlp>,
2626
),
2727
).toThrow();
2828
spy.mockRestore();
2929
});
3030

3131
test('Should render default price formatting if not overridden', () => {
3232
render(
33-
<CioPlpContext apiKey={DEMO_API_KEY}>
33+
<CioPlp apiKey={DEMO_API_KEY}>
3434
<ProductCard item={transformResultItem(testItem)} />
35-
</CioPlpContext>,
35+
</CioPlp>,
3636
);
3737
screen.getByText('$79.00');
3838
});
3939

40-
test('Should render custom price formatting if overridden at the PlpContext level', () => {
40+
test('Should render custom price formatting if overridden at the CioPlp provider level', () => {
4141
const contextPriceFormatter = (price) => `USD$${price.toFixed(2)}`;
4242
render(
43-
<CioPlpContext apiKey={DEMO_API_KEY} formatters={{ formatPrice: contextPriceFormatter }}>
43+
<CioPlp apiKey={DEMO_API_KEY} formatters={{ formatPrice: contextPriceFormatter }}>
4444
<ProductCard item={transformResultItem(testItem)} />
45-
</CioPlpContext>,
45+
</CioPlp>,
4646
);
4747
screen.getByText('USD$79.00');
4848
});
4949

50-
test('Should retrieve custom price if overridden at the PlpContext level', () => {
50+
test('Should retrieve custom price if overridden at the CioPlp provider level', () => {
5151
const contextPriceGetter = (item) => item.data.altPrice;
5252
render(
53-
<CioPlpContext apiKey={DEMO_API_KEY} getters={{ getPrice: contextPriceGetter }}>
53+
<CioPlp apiKey={DEMO_API_KEY} getters={{ getPrice: contextPriceGetter }}>
5454
<ProductCard item={transformResultItem(testItem)} />
55-
</CioPlpContext>,
55+
</CioPlp>,
5656
);
5757
screen.getByText('$69.00');
5858
});
5959

60-
test('Should run custom onclick handler if overridden at the PlpContext level', () => {
60+
test('Should run custom onclick handler if overridden at the CioPlp provider level', () => {
6161
const contextOnClickHandler = jest.fn();
6262
render(
63-
<CioPlpContext
64-
apiKey={DEMO_API_KEY}
65-
callbacks={{ onProductCardClick: contextOnClickHandler }}>
63+
<CioPlp apiKey={DEMO_API_KEY} callbacks={{ onProductCardClick: contextOnClickHandler }}>
6664
<ProductCard item={transformResultItem(testItem)} />
67-
</CioPlpContext>,
65+
</CioPlp>,
6866
);
6967
// Click the title
7068
fireEvent.click(screen.getByText('Jersey Riviera Shirt (Park Bench Dot)'));
@@ -83,12 +81,12 @@ describe('Testing Component: ProductCard', () => {
8381
expect(contextOnClickHandler).toHaveBeenCalledTimes(3);
8482
});
8583

86-
test('Should run custom onAddToCart handler if overridden at the PlpContext level', () => {
84+
test('Should run custom onAddToCart handler if overridden at the CioPlp provider level', () => {
8785
const contextOnAddToCart = jest.fn();
8886
render(
89-
<CioPlpContext apiKey={DEMO_API_KEY} callbacks={{ onAddToCart: contextOnAddToCart }}>
87+
<CioPlp apiKey={DEMO_API_KEY} callbacks={{ onAddToCart: contextOnAddToCart }}>
9088
<ProductCard item={transformResultItem(testItem)} />
91-
</CioPlpContext>,
89+
</CioPlp>,
9290
);
9391

9492
fireEvent.click(screen.getByRole('button', { name: /add to cart/i }));
@@ -97,14 +95,14 @@ describe('Testing Component: ProductCard', () => {
9795

9896
test('Should render renderProps argument', () => {
9997
render(
100-
<CioPlpContext apiKey={DEMO_API_KEY}>
98+
<CioPlp apiKey={DEMO_API_KEY}>
10199
<ProductCard item={transformResultItem(testItem)}>
102100
{(props) => (
103101
// Custom Rendered Price
104102
<div>My Rendered Price: {props.formatPrice(props.getPrice(props.item))}</div>
105103
)}
106104
</ProductCard>
107-
</CioPlpContext>,
105+
</CioPlp>,
108106
);
109107

110108
screen.getByText('My Rendered Price: $79.00');

0 commit comments

Comments
 (0)