@shopgate/webpack 7.30.3-beta.1 → 7.30.3-beta.3

package/local-packages/pwa-extension-kit/src/components/ProductCharacteristics/__snapshots__/spec.jsx.snap

@@ -0,0 +1,428 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/ProductCharacteristics should render 1`] = `
+<Component
+  render={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Object {
+            "charRef": Object {
+              "current": null,
+            },
+            "disabled": false,
+            "highlight": false,
+            "id": "1",
+            "key": "1",
+            "label": "Color",
+            "select": [Function],
+            "selected": null,
+            "values": Array [
+              Object {
+                "id": "1",
+                "label": "BLACK-WHITE (9000)",
+                "selectable": true,
+              },
+              Object {
+                "id": "2",
+                "label": "RED-WHITE (1000)",
+                "selectable": true,
+              },
+            ],
+          },
+        ],
+        Array [
+          Object {
+            "charRef": Object {
+              "current": null,
+            },
+            "disabled": true,
+            "highlight": false,
+            "id": "2",
+            "key": "2",
+            "label": "Size",
+            "select": [Function],
+            "selected": null,
+            "values": Array [
+              Object {
+                "id": "11",
+                "label": "7",
+                "selectable": true,
+              },
+              Object {
+                "id": "12",
+                "label": "7.5",
+                "selectable": true,
+              },
+            ],
+          },
+        ],
+      ],
+      "results": undefined,
+    }
+  }
+>
+  <WithProductContext
+    WrappedComponent={[Function]}
+    render={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "charRef": Object {
+                "current": null,
+              },
+              "disabled": false,
+              "highlight": false,
+              "id": "1",
+              "key": "1",
+              "label": "Color",
+              "select": [Function],
+              "selected": null,
+              "values": Array [
+                Object {
+                  "id": "1",
+                  "label": "BLACK-WHITE (9000)",
+                  "selectable": true,
+                },
+                Object {
+                  "id": "2",
+                  "label": "RED-WHITE (1000)",
+                  "selectable": true,
+                },
+              ],
+            },
+          ],
+          Array [
+            Object {
+              "charRef": Object {
+                "current": null,
+              },
+              "disabled": true,
+              "highlight": false,
+              "id": "2",
+              "key": "2",
+              "label": "Size",
+              "select": [Function],
+              "selected": null,
+              "values": Array [
+                Object {
+                  "id": "11",
+                  "label": "7",
+                  "selectable": true,
+                },
+                Object {
+                  "id": "12",
+                  "label": "7.5",
+                  "selectable": true,
+                },
+              ],
+            },
+          ],
+        ],
+        "results": undefined,
+      }
+    }
+  >
+    <Theme>
+      <Component
+        AppBar={[Function]}
+        Drawer={[Function]}
+        View={[Function]}
+        contexts={
+          Object {
+            "ProductContext": Object {
+              "Consumer": [Function],
+            },
+          }
+        }
+      >
+        <Consumer>
+          <Component
+            conditioner={
+              Conditioner {
+                "conditioners": Map {
+                  "product-variants" => [Function],
+                },
+              }
+            }
+            options={Object {}}
+            productId="123"
+            variantId="123-45"
+          >
+            <Component
+              productContext={
+                Object {
+                  "conditioner": Conditioner {
+                    "conditioners": Map {
+                      "product-variants" => [Function],
+                    },
+                  },
+                  "options": Object {},
+                  "productId": "123",
+                  "variantId": "123-45",
+                }
+              }
+              render={
+                [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "charRef": Object {
+                          "current": null,
+                        },
+                        "disabled": false,
+                        "highlight": false,
+                        "id": "1",
+                        "key": "1",
+                        "label": "Color",
+                        "select": [Function],
+                        "selected": null,
+                        "values": Array [
+                          Object {
+                            "id": "1",
+                            "label": "BLACK-WHITE (9000)",
+                            "selectable": true,
+                          },
+                          Object {
+                            "id": "2",
+                            "label": "RED-WHITE (1000)",
+                            "selectable": true,
+                          },
+                        ],
+                      },
+                    ],
+                    Array [
+                      Object {
+                        "charRef": Object {
+                          "current": null,
+                        },
+                        "disabled": true,
+                        "highlight": false,
+                        "id": "2",
+                        "key": "2",
+                        "label": "Size",
+                        "select": [Function],
+                        "selected": null,
+                        "values": Array [
+                          Object {
+                            "id": "11",
+                            "label": "7",
+                            "selectable": true,
+                          },
+                          Object {
+                            "id": "12",
+                            "label": "7.5",
+                            "selectable": true,
+                          },
+                        ],
+                      },
+                    ],
+                  ],
+                  "results": undefined,
+                }
+              }
+            >
+              <Component
+                conditioner={
+                  Conditioner {
+                    "conditioners": Map {
+                      "product-variants" => [Function],
+                    },
+                  }
+                }
+                options={Object {}}
+                productId="123"
+                render={
+                  [MockFunction] {
+                    "calls": Array [
+                      Array [
+                        Object {
+                          "charRef": Object {
+                            "current": null,
+                          },
+                          "disabled": false,
+                          "highlight": false,
+                          "id": "1",
+                          "key": "1",
+                          "label": "Color",
+                          "select": [Function],
+                          "selected": null,
+                          "values": Array [
+                            Object {
+                              "id": "1",
+                              "label": "BLACK-WHITE (9000)",
+                              "selectable": true,
+                            },
+                            Object {
+                              "id": "2",
+                              "label": "RED-WHITE (1000)",
+                              "selectable": true,
+                            },
+                          ],
+                        },
+                      ],
+                      Array [
+                        Object {
+                          "charRef": Object {
+                            "current": null,
+                          },
+                          "disabled": true,
+                          "highlight": false,
+                          "id": "2",
+                          "key": "2",
+                          "label": "Size",
+                          "select": [Function],
+                          "selected": null,
+                          "values": Array [
+                            Object {
+                              "id": "11",
+                              "label": "7",
+                              "selectable": true,
+                            },
+                            Object {
+                              "id": "12",
+                              "label": "7.5",
+                              "selectable": true,
+                            },
+                          ],
+                        },
+                      ],
+                    ],
+                    "results": undefined,
+                  }
+                }
+                variantId="123-45"
+              >
+                <ProductCharacteristics
+                  conditioner={
+                    Conditioner {
+                      "conditioners": Map {
+                        "product-variants" => [Function],
+                      },
+                    }
+                  }
+                  finishTimeout={0}
+                  navigate={[Function]}
+                  options={Object {}}
+                  productId="123"
+                  render={
+                    [MockFunction] {
+                      "calls": Array [
+                        Array [
+                          Object {
+                            "charRef": Object {
+                              "current": null,
+                            },
+                            "disabled": false,
+                            "highlight": false,
+                            "id": "1",
+                            "key": "1",
+                            "label": "Color",
+                            "select": [Function],
+                            "selected": null,
+                            "values": Array [
+                              Object {
+                                "id": "1",
+                                "label": "BLACK-WHITE (9000)",
+                                "selectable": true,
+                              },
+                              Object {
+                                "id": "2",
+                                "label": "RED-WHITE (1000)",
+                                "selectable": true,
+                              },
+                            ],
+                          },
+                        ],
+                        Array [
+                          Object {
+                            "charRef": Object {
+                              "current": null,
+                            },
+                            "disabled": true,
+                            "highlight": false,
+                            "id": "2",
+                            "key": "2",
+                            "label": "Size",
+                            "select": [Function],
+                            "selected": null,
+                            "values": Array [
+                              Object {
+                                "id": "11",
+                                "label": "7",
+                                "selectable": true,
+                              },
+                              Object {
+                                "id": "12",
+                                "label": "7.5",
+                                "selectable": true,
+                              },
+                            ],
+                          },
+                        ],
+                      ],
+                      "results": undefined,
+                    }
+                  }
+                  variantId="123-45"
+                  variants={
+                    Object {
+                      "characteristics": Array [
+                        Object {
+                          "id": "1",
+                          "label": "Color",
+                          "values": Array [
+                            Object {
+                              "id": "1",
+                              "label": "BLACK-WHITE (9000)",
+                            },
+                            Object {
+                              "id": "2",
+                              "label": "RED-WHITE (1000)",
+                            },
+                          ],
+                        },
+                        Object {
+                          "id": "2",
+                          "label": "Size",
+                          "values": Array [
+                            Object {
+                              "id": "11",
+                              "label": "7",
+                            },
+                            Object {
+                              "id": "12",
+                              "label": "7.5",
+                            },
+                          ],
+                        },
+                      ],
+                      "products": Array [
+                        Object {
+                          "characteristics": Object {
+                            "1": "1",
+                            "2": "11",
+                          },
+                          "id": "32050590001000",
+                        },
+                        Object {
+                          "characteristics": Object {
+                            "1": "2",
+                            "2": "12",
+                          },
+                          "id": "32050590000950",
+                        },
+                      ],
+                    }
+                  }
+                />
+              </Component>
+            </Component>
+          </Component>
+        </Consumer>
+      </Component>
+    </Theme>
+  </WithProductContext>
+</Component>
+`;

package/local-packages/pwa-extension-kit/src/components/ProductCharacteristics/index.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import BaseProductCharacteristics from '@shopgate/pwa-common/components/ProductCharacteristics';
+import withProductContext from '../../connectors/withProductContext';
+
+export default withProductContext(({ productContext, ...otherProps }) => (
+  <BaseProductCharacteristics {...productContext} {...otherProps} />
+));

package/local-packages/pwa-extension-kit/src/components/ProductCharacteristics/spec.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Conditioner from '@shopgate/pwa-core/classes/Conditioner';
+import ProductCharacteristics from './index';
+
+const mockedConditioner = new Conditioner();
+const mockedMapStateToPropsResult = {
+  variants: {
+    products: [{
+      id: '32050590001000',
+      characteristics: { 1: '1', 2: '11' },
+    }, {
+      id: '32050590000950',
+      characteristics: { 1: '2', 2: '12' },
+    }],
+    characteristics: [
+      {
+        id: '1',
+        label: 'Color',
+        values: [
+          { id: '1', label: 'BLACK-WHITE (9000)' },
+          { id: '2', label: 'RED-WHITE (1000)' }],
+      },
+      {
+        id: '2',
+        label: 'Size',
+        values: [
+          { id: '11', label: '7' }, { id: '12', label: '7.5' },
+        ],
+      }],
+  },
+};
+jest.mock('react-redux', () => ({
+  connect: mapStateToProps => Component => props => (
+    <Component
+      variants={mockedMapStateToPropsResult.variants}
+      {...props}
+    />
+  ),
+}));
+
+jest.mock('@shopgate/pwa-common/context', () => ({
+  // eslint-disable-next-line react/prop-types
+  Theme: ({ children, ...otherProps }) => {
+    const Child = children;
+
+    const props = {
+      AppBar: () => null,
+      Drawer: () => null,
+      View: () => null,
+      contexts: {
+        ProductContext: {
+          // eslint-disable-next-line react/prop-types
+          Consumer: ({ children: ContextChildren, ...contextProps }) => (
+            <ContextChildren
+              options={{}}
+              productId="123"
+              variantId="123-45"
+              conditioner={mockedConditioner}
+              {...contextProps}
+            />
+          ),
+        },
+      },
+      ...otherProps,
+    };
+
+    return (
+      <Child {...props} />
+    );
+  },
+}));
+
+describe('components/ProductCharacteristics', () => {
+  it('should render', () => {
+    const component = mount((
+      <ProductCharacteristics render={jest.fn()} />
+    ));
+
+    expect(component).toMatchSnapshot();
+  });
+
+  it('should call render prop', () => {
+    const renderer = jest.fn();
+
+    mount((
+      <ProductCharacteristics render={renderer} />
+    ));
+
+    const expected1 = {
+      charRef: { current: null },
+      disabled: false,
+      highlight: false,
+      id: '1',
+      key: '1',
+      label: 'Color',
+      selected: null,
+      values: [
+        { id: '1', label: 'BLACK-WHITE (9000)', selectable: true },
+        { id: '2', label: 'RED-WHITE (1000)', selectable: true },
+      ],
+    };
+
+    const expected2 = {
+      charRef: { current: null },
+      disabled: true,
+      highlight: false,
+      id: '2',
+      key: '2',
+      label: 'Size',
+      selected: null,
+      values: [
+        { id: '11', label: '7', selectable: true },
+        { id: '12', label: '7.5', selectable: true },
+      ],
+    };
+
+    expect(renderer).toHaveBeenCalledTimes(2);
+
+    const args1 = renderer.mock.calls[0][0];
+    expect(typeof args1.select).toBe('function');
+    expect(args1).toMatchObject(expected1);
+
+    const args2 = renderer.mock.calls[1][0];
+    expect(typeof args2.select).toBe('function');
+    expect(args2).toMatchObject(expected2);
+  });
+});

package/local-packages/pwa-extension-kit/src/components/README.md

@@ -0,0 +1,38 @@
+# Shopgate Connect - PWA Extension Kit - /components - Common Components
+## Purpose
+
+## Available components
+### ProductCharacteristics
+Component that can be used to change the UI of the characteristics/variant selection
+
+#### Possible usage
+Everywhere as a React component rendered within the PWA app.
+
+#### Props
+- `render (function)` - Render Prop [read documentation](https://reactjs.org/docs/render-props.html)
+    - `disabled (bool)` - Characteristic should not be clickable 
+    - `highlight (bool)` - Info if the current characteristic should be highlighted because it's the first unselected one
+    - `select (function)` - Function that needs to be called to select a new value
+    - `selected (string)` - Current selected characteristic
+    - `id (string)` - Id of the characteristics
+    - `label (string)` - Label of the characteristic
+    - `values (array)` - Values of the characteristic
+    
+    
+#### Example usage
+```jsx
+import React, { Component } from 'react'
+import { ProductCharacteristics } from '@shopgate/pwa-extension-kit/components';
+
+class MyComponent extends Component {
+  renderer = (props) => <CustomCharacteristics {...props} />; 
+  
+  render() {
+    return (
+     <ProductCharacteristics render={this.renderer}/>
+    );
+  }
+}
+
+export default MyComponent;
+```

package/local-packages/pwa-extension-kit/src/components/index.js

@@ -0,0 +1,8 @@
+import ProductCharacteristics from './ProductCharacteristics';
+
+export { ProductCharacteristics };
+
+export default {
+  ProductCharacteristics,
+};
+

package/local-packages/pwa-extension-kit/src/components/index.spec.js

@@ -0,0 +1,11 @@
+import components, { ProductCharacteristics } from './index';
+describe('components', () => {
+  it('should export all functions as default', () => {
+    expect(typeof components).toBe('object');
+    expect(typeof components.ProductCharacteristics).toBe('function');
+  });
+
+  it('should export as named export', () => {
+    expect(typeof ProductCharacteristics).toBe('function');
+  });
+});