Rename CioPlpContext to CioPlp

.eslintrc.json

@@ -56,7 +56,7 @@
         "devDependencies": [
           "**/stories/**/*.*",
           "**/.storybook/**/*.*",
-          "spec/*.*"
+          "spec/**/*.*"
         ],
         "peerDependencies": true
       }

.storybook/storybook-styles.css

@@ -1,17 +1,11 @@
 #storybook-root {
-  display: flex;
   background-color: #F6F9FC;
 }
 
 #storybook-docs {
   background-color: #F6F9FC;
 }
 
-#storybook-docs .sbdocs-content ul li{
-  margin-top: 20px;
-  margin-bottom: 10px;
-}
-
 .small-container-example-wrapper {
   height: 100%;
   display: grid;

spec/CioPlp/CioPlp.server.test.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import CioPlp from '../../src/components/CioPlp';
+import { useCioPlpContext } from '../../src/hooks/useCioPlpContext';
+import { DEMO_API_KEY } from '../../src/constants';
+
+describe('CioPlp React Server-Side Rendering', () => {
+  it("throws an error if apiKey isn't provided", () => {
+    expect(() => {
+      ReactDOMServer.renderToString(<CioPlp />);
+    }).toThrow();
+  });
+
+  it('renders CioPlp provider without children on the server without error', () => {
+    // Render the component to a string
+    const html = ReactDOMServer.renderToString(<CioPlp apiKey={DEMO_API_KEY} />);
+
+    expect(html).toContain('');
+  });
+
+  it('renders CioPlp provider with children correctly on the server', () => {
+    // Render the component to a string
+    const html = ReactDOMServer.renderToString(
+      <CioPlp apiKey={DEMO_API_KEY}>
+        <div>Test</div>
+      </CioPlp>,
+    );
+    expect(html).toContain('<div>Test</div>');
+  });
+
+  it('renders CioPlp provider with render props on the server', () => {
+    // Render the component to a string
+    const html = ReactDOMServer.renderToString(
+      <CioPlp apiKey={DEMO_API_KEY}>{() => <div>Test</div>}</CioPlp>,
+    );
+    expect(html).toContain('<div>Test</div>');
+  });
+
+  it('renders CioPlp provider with children that has access to Context value on the server', () => {
+    function ContextConsumer() {
+      const context = useCioPlpContext();
+
+      return <div>{JSON.stringify(context)}</div>;
+    }
+
+    // Render the component to a string
+    const html = ReactDOMServer.renderToString(
+      <CioPlp apiKey={DEMO_API_KEY}>
+        <ContextConsumer />
+      </CioPlp>,
+    );
+    expect(html).toContain(
+      '<div>{&quot;cioClient&quot;:null,&quot;cioClientOptions&quot;:{},&quot;getters&quot;:{},&quot;formatters&quot;:{},&quot;callbacks&quot;:{}}</div>',
+    );
+  });
+});

spec/CioPlp/CioPlp.test.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CioPlp from '../../src/components/CioPlp';
+import { useCioPlpContext } from '../../src/hooks/useCioPlpContext';
+import { DEMO_API_KEY } from '../../src/constants';
+import '@testing-library/jest-dom';
+
+describe('CioPlp React Client-Side Rendering', () => {
+  beforeEach(() => {
+    const spy = jest.spyOn(console, 'error');
+    spy.mockImplementation(() => {});
+  });
+
+  afterAll(() => {
+    jest.resetAllMocks();
+  });
+
+  it("throws an error if apiKey isn't provided", () => {
+    expect(() => {
+      render(<CioPlp />);
+    }).toThrow();
+  });
+
+  it('renders CioPlp provider without children on the client without error', () => {
+    expect(() => render(<CioPlp apiKey={DEMO_API_KEY} />)).not.toThrow();
+  });
+
+  it('renders CioPlp provider with children correctly on the client', () => {
+    // Render the component to a string
+    const { getByText } = render(
+      <CioPlp apiKey={DEMO_API_KEY}>
+        <div>Test</div>
+      </CioPlp>,
+    );
+    expect(getByText('Test')).toBeInTheDocument();
+  });
+
+  it('renders CioPlp provider with render props on the client', () => {
+    const { getByText } = render(<CioPlp apiKey={DEMO_API_KEY}>{() => <div>Test</div>}</CioPlp>);
+
+    expect(getByText('Test')).toBeInTheDocument();
+  });
+
+  it('renders CioPlp provider with children that has access to Context value on the client', () => {
+    function ContextConsumer() {
+      const context = useCioPlpContext();
+
+      return <div className='context-consumer'>{context.cioClient.options.serviceUrl}</div>;
+    }
+
+    // Render the component to a string
+    const { getByText } = render(
+      <CioPlp apiKey={DEMO_API_KEY}>
+        <ContextConsumer />
+      </CioPlp>,
+    );
+    expect(getByText('https://ac.cnstrc.com')).toBeInTheDocument();
+  });
+});

spec/ProductCard.server.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import { CioPlpContext } from '../src/PlpContext';
+import CioPlp from '../src/components/CioPlp';
 import { DEMO_API_KEY } from '../src/constants';
 import ProductCard from '../src/components/ProductCard';
 import testItem from './local_examples/item.json';
@@ -16,59 +16,59 @@ describe('ProductCard: React Server-Side Rendering', () => {
     jest.resetAllMocks();
   });
 
-  test('Should throw error if used outside the CioPlpContext', () => {
+  test('Should throw error if used outside the CioPlp provider', () => {
     expect(() => ReactDOMServer.renderToString(<ProductCard />)).toThrow();
   });
 
   test("Should throw error if item isn't provided", () => {
     expect(() =>
       ReactDOMServer.renderToString(
-        <CioPlpContext apiKey={DEMO_API_KEY}>
+        <CioPlp apiKey={DEMO_API_KEY}>
           <ProductCard />
-        </CioPlpContext>,
+        </CioPlp>,
       ),
     ).toThrow();
   });
 
   test('Should render default price formatting if not overridden', () => {
     const html = ReactDOMServer.renderToString(
-      <CioPlpContext apiKey={DEMO_API_KEY}>
+      <CioPlp apiKey={DEMO_API_KEY}>
         <ProductCard item={transformResultItem(testItem)} />
-      </CioPlpContext>,
+      </CioPlp>,
     );
     expect(html).toContain('$79.00');
   });
 
   test('Should render custom price formatting if overridden at the PlpContext level', () => {
     const customPriceFormatter = (price) => `USD$${price.toFixed(2)}`;
     const html = ReactDOMServer.renderToString(
-      <CioPlpContext apiKey={DEMO_API_KEY} formatters={{ formatPrice: customPriceFormatter }}>
+      <CioPlp apiKey={DEMO_API_KEY} formatters={{ formatPrice: customPriceFormatter }}>
         <ProductCard item={transformResultItem(testItem)} />
-      </CioPlpContext>,
+      </CioPlp>,
     );
     expect(html).toContain('USD$79.00');
   });
 
   test('Should retrieve custom price if overridden at the PlpContext level', () => {
     const customPriceGetter = (item) => item.data.altPrice;
     const html = ReactDOMServer.renderToString(
-      <CioPlpContext apiKey={DEMO_API_KEY} getters={{ getPrice: customPriceGetter }}>
+      <CioPlp apiKey={DEMO_API_KEY} getters={{ getPrice: customPriceGetter }}>
         <ProductCard item={transformResultItem(testItem)} />
-      </CioPlpContext>,
+      </CioPlp>,
     );
     expect(html).toContain('$69.00');
   });
 
   test('Should renders custom children correctly', () => {
     const html = ReactDOMServer.renderToString(
-      <CioPlpContext apiKey={DEMO_API_KEY}>
+      <CioPlp apiKey={DEMO_API_KEY}>
         <ProductCard item={transformResultItem(testItem)}>
           {({ formatPrice, getPrice, item }) => (
             // Custom Rendered Price
             <div>My Rendered Price: {formatPrice(getPrice(item))}</div>
           )}
         </ProductCard>
-      </CioPlpContext>,
+      </CioPlp>,
     );
 
     // React injects <!-- --> on the server to mark dynamic content for rehydration
@@ -79,9 +79,9 @@ describe('ProductCard: React Server-Side Rendering', () => {
     const invalidItem = {};
     expect(() =>
       ReactDOMServer.renderToString(
-        <CioPlpContext apiKey={DEMO_API_KEY}>
+        <CioPlp apiKey={DEMO_API_KEY}>
           <ProductCard item={invalidItem} />
-        </CioPlpContext>,
+        </CioPlp>,
       ),
     ).toThrow('data, itemId, or itemName are required.');
   });

spec/productCard.test.js

@@ -2,13 +2,13 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import ProductCard from '../src/components/ProductCard';
-import { CioPlpContext } from '../src/PlpContext';
+import CioPlp from '../src/components/CioPlp';
 import { DEMO_API_KEY } from '../src/constants';
 import testItem from './local_examples/item.json';
 import { transformResultItem } from '../src/utils/transformers';
 
 describe('Testing Component: ProductCard', () => {
-  test('Should throw error if used outside the CioPlpContext', () => {
+  test('Should throw error if used outside the CioPlp', () => {
     const spy = jest.spyOn(console, 'error');
     spy.mockImplementation(() => {});
     expect(() => render(<ProductCard />)).toThrow();
@@ -20,51 +20,49 @@ describe('Testing Component: ProductCard', () => {
     spy.mockImplementation(() => {});
     expect(() =>
       render(
-        <CioPlpContext apiKey={DEMO_API_KEY}>
+        <CioPlp apiKey={DEMO_API_KEY}>
           <ProductCard />
-        </CioPlpContext>,
+        </CioPlp>,
       ),
     ).toThrow();
     spy.mockRestore();
   });
 
   test('Should render default price formatting if not overridden', () => {
     render(
-      <CioPlpContext apiKey={DEMO_API_KEY}>
+      <CioPlp apiKey={DEMO_API_KEY}>
         <ProductCard item={transformResultItem(testItem)} />
-      </CioPlpContext>,
+      </CioPlp>,
     );
     screen.getByText('$79.00');
   });
 
-  test('Should render custom price formatting if overridden at the PlpContext level', () => {
+  test('Should render custom price formatting if overridden at the CioPlp provider level', () => {
     const contextPriceFormatter = (price) => `USD$${price.toFixed(2)}`;
     render(
-      <CioPlpContext apiKey={DEMO_API_KEY} formatters={{ formatPrice: contextPriceFormatter }}>
+      <CioPlp apiKey={DEMO_API_KEY} formatters={{ formatPrice: contextPriceFormatter }}>
         <ProductCard item={transformResultItem(testItem)} />
-      </CioPlpContext>,
+      </CioPlp>,
     );
     screen.getByText('USD$79.00');
   });
 
-  test('Should retrieve custom price if overridden at the PlpContext level', () => {
+  test('Should retrieve custom price if overridden at the CioPlp provider level', () => {
     const contextPriceGetter = (item) => item.data.altPrice;
     render(
-      <CioPlpContext apiKey={DEMO_API_KEY} getters={{ getPrice: contextPriceGetter }}>
+      <CioPlp apiKey={DEMO_API_KEY} getters={{ getPrice: contextPriceGetter }}>
         <ProductCard item={transformResultItem(testItem)} />
-      </CioPlpContext>,
+      </CioPlp>,
     );
     screen.getByText('$69.00');
   });
 
-  test('Should run custom onclick handler if overridden at the PlpContext level', () => {
+  test('Should run custom onclick handler if overridden at the CioPlp provider level', () => {
     const contextOnClickHandler = jest.fn();
     render(
-      <CioPlpContext
-        apiKey={DEMO_API_KEY}
-        callbacks={{ onProductCardClick: contextOnClickHandler }}>
+      <CioPlp apiKey={DEMO_API_KEY} callbacks={{ onProductCardClick: contextOnClickHandler }}>
         <ProductCard item={transformResultItem(testItem)} />
-      </CioPlpContext>,
+      </CioPlp>,
     );
     // Click the title
     fireEvent.click(screen.getByText('Jersey Riviera Shirt (Park Bench Dot)'));
@@ -83,12 +81,12 @@ describe('Testing Component: ProductCard', () => {
     expect(contextOnClickHandler).toHaveBeenCalledTimes(3);
   });
 
-  test('Should run custom onAddToCart handler if overridden at the PlpContext level', () => {
+  test('Should run custom onAddToCart handler if overridden at the CioPlp provider level', () => {
     const contextOnAddToCart = jest.fn();
     render(
-      <CioPlpContext apiKey={DEMO_API_KEY} callbacks={{ onAddToCart: contextOnAddToCart }}>
+      <CioPlp apiKey={DEMO_API_KEY} callbacks={{ onAddToCart: contextOnAddToCart }}>
         <ProductCard item={transformResultItem(testItem)} />
-      </CioPlpContext>,
+      </CioPlp>,
     );
 
     fireEvent.click(screen.getByRole('button', { name: /add to cart/i }));
@@ -97,14 +95,14 @@ describe('Testing Component: ProductCard', () => {
 
   test('Should render renderProps argument', () => {
     render(
-      <CioPlpContext apiKey={DEMO_API_KEY}>
+      <CioPlp apiKey={DEMO_API_KEY}>
         <ProductCard item={transformResultItem(testItem)}>
           {(props) => (
             // Custom Rendered Price
             <div>My Rendered Price: {props.formatPrice(props.getPrice(props.item))}</div>
           )}
         </ProductCard>
-      </CioPlpContext>,
+      </CioPlp>,
     );
 
     screen.getByText('My Rendered Price: $79.00');