test: ProductOptions (#874)

packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/option.spec.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Option component correctly 1`] = `
+<div
+  className="root"
+>
+  <h3
+    className="title"
+  >
+    <span>
+      Color
+    </span>
+  </h3>
+  <div
+    className="root"
+  >
+    <button
+      className="root"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      style={
+        Object {
+          "--venia-swatch-bg": "123,123,123",
+        }
+      }
+      title="red"
+    />
+    <button
+      className="root"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      style={
+        Object {
+          "--venia-swatch-bg": "123,123,123",
+        }
+      }
+      title="blue"
+    />
+  </div>
+</div>
+`;

packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/options.spec.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Options component correctly 1`] = `
+Array [
+  <div
+    className="root"
+  >
+    <h3
+      className="title"
+    >
+      <span>
+        option-1
+      </span>
+    </h3>
+    <div
+      className="root"
+    />
+  </div>,
+  <div
+    className="root"
+  >
+    <h3
+      className="title"
+    >
+      <span>
+        option-1
+      </span>
+    </h3>
+    <div
+      className="root"
+    />
+  </div>,
+]
+`;

packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`appends "_focused" to className if hasFocus is true 1`] = `
+<button
+  className="root_focused"
+  style={
+    Object {
+      "--venia-swatch-bg": "123,123,123",
+    }
+  }
+  title="red"
+/>
+`;
+
+exports[`appends "_selected" to className if isSelected is true 1`] = `
+<button
+  className="root_selected"
+  style={
+    Object {
+      "--venia-swatch-bg": "123,123,123",
+    }
+  }
+  title="red"
+>
+  <span
+    className="root"
+  >
+    <svg
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="20 6 9 17 4 12"
+      />
+    </svg>
+  </span>
+</button>
+`;
+
+exports[`renders a Swatch correctly 1`] = `
+<button
+  className="root"
+  style={
+    Object {
+      "--venia-swatch-bg": "123,123,123",
+    }
+  }
+  title="red"
+/>
+`;
+
+exports[`renders an icon if isSelected is true 1`] = `
+<button
+  className="root_selected"
+  style={
+    Object {
+      "--venia-swatch-bg": "123,123,123",
+    }
+  }
+  title="red"
+>
+  <span
+    className="root"
+  >
+    <svg
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="20 6 9 17 4 12"
+      />
+    </svg>
+  </span>
+</button>
+`;

packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders SwatchList component correctly 1`] = `
+<div
+  className="root"
+>
+  <button
+    className="root"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    style={
+      Object {
+        "--venia-swatch-bg": "123,123,123",
+      }
+    }
+    title="foo"
+  />
+</div>
+`;

packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/tile.spec.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`appends "_focused" to className if hasFocus is true 1`] = `
+<button
+  className="root_focused"
+>
+  <span>
+    red
+  </span>
+</button>
+`;
+
+exports[`appends "_selected" to className if isSelected is true 1`] = `
+<button
+  className="root_selected"
+>
+  <span>
+    red
+  </span>
+</button>
+`;
+
+exports[`renders a Tile correctly 1`] = `
+<button
+  className="root"
+>
+  <span>
+    red
+  </span>
+</button>
+`;

packages/venia-concept/src/components/ProductOptions/__tests__/__snapshots__/tileList.spec.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders TileList component correctly 1`] = `
+<div
+  className="root"
+>
+  <button
+    className="root"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+  >
+    <span>
+      foo
+    </span>
+  </button>
+</div>
+`;

packages/venia-concept/src/components/ProductOptions/__tests__/option.spec.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import testRenderer from 'react-test-renderer';
+
+import Option from '../option';
+
+jest.mock('src/classify');
+jest.mock('src/util/getRandomColor');
+
+const onSelectionChangeMock = jest.fn();
+const defaultProps = {
+    attribute_id: '1',
+    attribute_code: 'fashion_color',
+    label: 'Color',
+    values: [
+        {
+            label: 'red',
+            value_index: 0
+        },
+        {
+            label: 'blue',
+            value_index: 1
+        }
+    ]
+};
+
+test('renders Option component correctly', () => {
+    const component = testRenderer.create(<Option {...defaultProps} />);
+    expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('renders a SwatchList if attribute_code prop is "fashion_color"', () => {
+    const component = testRenderer.create(<Option {...defaultProps} />);
+
+    // TODO: Is there a better way to do typeof checks for HOC wrapped things?
+    expect(
+        component.root.children[0].instance.listComponent.displayName
+    ).toContain('SwatchList');
+});
+
+test('renders a TileList if attribute_code prop is not "fashion_color"', () => {
+    const props = {
+        ...defaultProps,
+        attribute_code: 'not_fashion_color'
+    };
+    const component = testRenderer.create(<Option {...props} />);
+
+    // TODO: Is there a better way to do typeof checks for HOC wrapped things?
+    expect(
+        component.root.children[0].instance.listComponent.displayName
+    ).toContain('TileList');
+});
+
+test('does not call onSelectionChange if not provided', () => {
+    const component = testRenderer.create(<Option {...defaultProps} />);
+    component.root.children[0].instance.handleSelectionChange('test');
+    expect(onSelectionChangeMock).not.toHaveBeenCalled();
+
+    onSelectionChangeMock.mockReset();
+});
+
+test('calls onSelectionChange function with attribute_id and selection', () => {
+    const props = {
+        ...defaultProps,
+        onSelectionChange: onSelectionChangeMock
+    };
+    const component = testRenderer.create(<Option {...props} />);
+
+    component.root.children[0].instance.handleSelectionChange('test');
+    expect(onSelectionChangeMock).toHaveBeenCalledWith(
+        defaultProps.attribute_id,
+        'test'
+    );
+
+    onSelectionChangeMock.mockReset();
+});

packages/venia-concept/src/components/ProductOptions/__tests__/options.spec.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import testRenderer from 'react-test-renderer';
+
+import Options from '../options';
+
+jest.mock('src/classify');
+
+const onSelectionChangeMock = jest.fn();
+const defaultProps = {
+    options: [
+        {
+            attribute_id: '1',
+            attribute_code: 'fashion_color',
+            label: 'option-1',
+            values: []
+        },
+        {
+            attribute_id: '2',
+            attribute_code: '',
+            label: 'option-1',
+            values: []
+        }
+    ]
+};
+test('renders Options component correctly', () => {
+    const component = testRenderer.create(<Options {...defaultProps} />);
+    expect(component.toJSON()).toMatchSnapshot();
+});
+
+test('does not call onSelectionChange if not provided', () => {
+    const component = testRenderer.create(<Options {...defaultProps} />);
+    component.getInstance().handleSelectionChange(0, 'test');
+    expect(onSelectionChangeMock).not.toHaveBeenCalled();
+
+    onSelectionChangeMock.mockReset();
+});
+
+test('calls onSelectionChange function with optionId and selection', () => {
+    const props = {
+        ...defaultProps,
+        onSelectionChange: onSelectionChangeMock
+    };
+    const component = testRenderer.create(<Options {...props} />);
+
+    component.getInstance().handleSelectionChange(0, 'test');
+    expect(onSelectionChangeMock).toHaveBeenCalledWith(0, 'test');
+
+    onSelectionChangeMock.mockReset();
+});