@pie-lib/config-ui 11.9.24 → 11.11.0-beta.0

package/src/choice-configuration/__tests__/__snapshots__/feedback-menu.test.jsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`feedback-menu renders correctly 1`] = `
+<div>
+  <div
+    onClick={[Function]}
+  >
+    <button
+      aria-label="Feedback disabled"
+      className="MuiButtonBase-root-7 MuiIconButton-root-1"
+      disabled={false}
+      onBlur={[Function]}
+      onContextMenu={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      tabIndex="0"
+      type="button"
+    >
+      <span
+        className="MuiIconButton-label-6"
+      >
+        <svg
+          aria-hidden="true"
+          className="MuiSvgIcon-root-10 MuiSvgIcon-colorDisabled-15"
+          focusable="false"
+          role="presentation"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M0 0h24v24H0z"
+            fill="none"
+          />
+          <path
+            d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"
+          />
+        </svg>
+      </span>
+      <span
+        className="MuiTouchRipple-root-23"
+      />
+    </button>
+  </div>
+</div>
+`;

package/src/choice-configuration/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,519 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index - snapshot renders correctly when delete is not allowed 1`] = `
+<div
+  className="choiceConfiguration"
+>
+  <div>
+    <div
+      className="MuiFormControl-root-6 RawInputContainer-formControl-4"
+    >
+      <label
+        className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+        data-shrink={true}
+      >
+        Correct
+      </label>
+      <span
+        aria-label="Correct"
+        className="MuiButtonBase-root-43 MuiIconButton-root-37 MuiPrivateSwitchBase-root-33 MuiRadio-root-28 MuiRadio-colorSecondary-32 RawInputRadio-radioRoot-1 RawInputRadio-customColor-3"
+        onBlur={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={null}
+      >
+        <span
+          className="MuiIconButton-label-42"
+        >
+          <svg
+            aria-hidden="true"
+            className="MuiSvgIcon-root-46"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+          <input
+            checked={false}
+            className="MuiPrivateSwitchBase-input-36"
+            disabled={false}
+            onChange={[Function]}
+            type="radio"
+          />
+        </span>
+        <span
+          className="MuiTouchRipple-root-64"
+        />
+      </span>
+    </div>
+    <div>
+      <div
+        className="MuiFormControl-root-6 RawInputContainer-formControl-4 Component-labelContainer-55"
+      >
+        <label
+          className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+          data-shrink={true}
+        >
+          Label
+        </label>
+        <div
+          className="Component-editorHolder-56"
+        >
+          <div />
+        </div>
+      </div>
+      <div
+        className="Component-feedbackContainer-58"
+      >
+        <svg
+          aria-hidden="true"
+          className="MuiSvgIcon-root-46 Component-arrowIcon-59"
+          focusable="false"
+          role="presentation"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z"
+          />
+        </svg>
+        <div
+          className="MuiFormControl-root-6 RawInputContainer-formControl-4 Component-labelContainer-55 Component-text-57"
+        >
+          <label
+            className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+            data-shrink={true}
+          >
+            Feedback Text
+          </label>
+          <div
+            className="Component-editorHolder-56"
+          >
+            <div />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="MuiFormControl-root-6 RawInputContainer-formControl-4"
+    >
+      <label
+        className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+        data-shrink={true}
+      >
+        Feedback
+      </label>
+      <div>
+        <div
+          onClick={[Function]}
+        >
+          <button
+            aria-label="Custom Feedback"
+            className="MuiButtonBase-root-43 MuiIconButton-root-37"
+            disabled={false}
+            onBlur={[Function]}
+            onContextMenu={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            tabIndex="0"
+            type="button"
+          >
+            <span
+              className="MuiIconButton-label-42"
+            >
+              <svg
+                aria-hidden="true"
+                className="MuiSvgIcon-root-46 MuiSvgIcon-colorPrimary-47"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"
+                />
+              </svg>
+            </span>
+            <span
+              className="MuiTouchRipple-root-64"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`index - snapshot renders correctly when feedback is not allowed 1`] = `
+<div
+  className="choiceConfiguration"
+>
+  <div>
+    <div
+      className="MuiFormControl-root-6 RawInputContainer-formControl-4"
+    >
+      <label
+        className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+        data-shrink={true}
+      >
+        Correct
+      </label>
+      <span
+        aria-label="Correct"
+        className="MuiButtonBase-root-43 MuiIconButton-root-37 MuiPrivateSwitchBase-root-33 MuiRadio-root-28 MuiRadio-colorSecondary-32 RawInputRadio-radioRoot-1 RawInputRadio-customColor-3"
+        onBlur={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={null}
+      >
+        <span
+          className="MuiIconButton-label-42"
+        >
+          <svg
+            aria-hidden="true"
+            className="MuiSvgIcon-root-46"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+          <input
+            checked={false}
+            className="MuiPrivateSwitchBase-input-36"
+            disabled={false}
+            onChange={[Function]}
+            type="radio"
+          />
+        </span>
+        <span
+          className="MuiTouchRipple-root-64"
+        />
+      </span>
+    </div>
+    <div>
+      <div
+        className="MuiFormControl-root-6 RawInputContainer-formControl-4 Component-labelContainer-55"
+      >
+        <label
+          className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+          data-shrink={true}
+        >
+          Label
+        </label>
+        <div
+          className="Component-editorHolder-56"
+        >
+          <div />
+        </div>
+      </div>
+    </div>
+    <div
+      className="MuiFormControl-root-6 RawInputContainer-formControl-4"
+    >
+      <label
+        className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+        data-shrink={true}
+      >
+        Delete
+      </label>
+      <button
+        aria-label="delete"
+        className="MuiButtonBase-root-43 MuiIconButton-root-37"
+        disabled={false}
+        onBlur={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex="0"
+        type="button"
+      >
+        <span
+          className="MuiIconButton-label-42"
+        >
+          <svg
+            aria-hidden="true"
+            className="MuiSvgIcon-root-46"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+        </span>
+        <span
+          className="MuiTouchRipple-root-64"
+        />
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`index - snapshot renders correctly with default props 1`] = `
+<div
+  className="choiceConfiguration"
+>
+  <div>
+    <div
+      className="MuiFormControl-root-6 RawInputContainer-formControl-4"
+    >
+      <label
+        className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+        data-shrink={true}
+      >
+        Correct
+      </label>
+      <span
+        aria-label="Correct"
+        className="MuiButtonBase-root-43 MuiIconButton-root-37 MuiPrivateSwitchBase-root-33 MuiRadio-root-28 MuiRadio-colorSecondary-32 RawInputRadio-radioRoot-1 RawInputRadio-customColor-3"
+        onBlur={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={null}
+      >
+        <span
+          className="MuiIconButton-label-42"
+        >
+          <svg
+            aria-hidden="true"
+            className="MuiSvgIcon-root-46"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+          <input
+            checked={false}
+            className="MuiPrivateSwitchBase-input-36"
+            disabled={false}
+            onChange={[Function]}
+            type="radio"
+          />
+        </span>
+        <span
+          className="MuiTouchRipple-root-64"
+        />
+      </span>
+    </div>
+    <div>
+      <div
+        className="MuiFormControl-root-6 RawInputContainer-formControl-4 Component-labelContainer-55"
+      >
+        <label
+          className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+          data-shrink={true}
+        >
+          Label
+        </label>
+        <div
+          className="Component-editorHolder-56"
+        >
+          <div />
+        </div>
+      </div>
+      <div
+        className="Component-feedbackContainer-58"
+      >
+        <svg
+          aria-hidden="true"
+          className="MuiSvgIcon-root-46 Component-arrowIcon-59"
+          focusable="false"
+          role="presentation"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <path
+            d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z"
+          />
+        </svg>
+        <div
+          className="MuiFormControl-root-6 RawInputContainer-formControl-4 Component-labelContainer-55 Component-text-57"
+        >
+          <label
+            className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+            data-shrink={true}
+          >
+            Feedback Text
+          </label>
+          <div
+            className="Component-editorHolder-56"
+          >
+            <div />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="MuiFormControl-root-6 RawInputContainer-formControl-4"
+    >
+      <label
+        className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+        data-shrink={true}
+      >
+        Feedback
+      </label>
+      <div>
+        <div
+          onClick={[Function]}
+        >
+          <button
+            aria-label="Custom Feedback"
+            className="MuiButtonBase-root-43 MuiIconButton-root-37"
+            disabled={false}
+            onBlur={[Function]}
+            onContextMenu={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            tabIndex="0"
+            type="button"
+          >
+            <span
+              className="MuiIconButton-label-42"
+            >
+              <svg
+                aria-hidden="true"
+                className="MuiSvgIcon-root-46 MuiSvgIcon-colorPrimary-47"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M0 0h24v24H0z"
+                  fill="none"
+                />
+                <path
+                  d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"
+                />
+              </svg>
+            </span>
+            <span
+              className="MuiTouchRipple-root-64"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      className="MuiFormControl-root-6 RawInputContainer-formControl-4"
+    >
+      <label
+        className="MuiFormLabel-root-21 MuiInputLabel-root-10 MuiInputLabel-formControl-15 MuiInputLabel-animated-18 MuiInputLabel-shrink-17 RawInputContainer-label-5"
+        data-shrink={true}
+      >
+        Delete
+      </label>
+      <button
+        aria-label="delete"
+        className="MuiButtonBase-root-43 MuiIconButton-root-37"
+        disabled={false}
+        onBlur={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex="0"
+        type="button"
+      >
+        <span
+          className="MuiIconButton-label-42"
+        >
+          <svg
+            aria-hidden="true"
+            className="MuiSvgIcon-root-46"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+            />
+            <path
+              d="M0 0h24v24H0z"
+              fill="none"
+            />
+          </svg>
+        </span>
+        <span
+          className="MuiTouchRipple-root-64"
+        />
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/src/choice-configuration/__tests__/feedback-menu.test.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import FeedbackMenu from '../feedback-menu';
+import renderer from 'react-test-renderer';
+
+describe('feedback-menu', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<FeedbackMenu onChange={jest.fn()} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/choice-configuration/__tests__/index.test.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { ChoiceConfiguration } from '../index';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+jest.mock('@pie-lib/editable-html', () => () => <div />);
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const defaultFeedback = {
+  correct: 'Correct',
+  incorrect: 'Incorrect',
+};
+
+const data = {
+  checked: true,
+  value: 'foo',
+  label: 'Foo',
+  feedback: {
+    type: 'custom',
+  },
+};
+
+const classes = {
+  choiceConfiguration: 'choiceConfiguration',
+};
+
+describe('index - snapshot', () => {
+  it('renders correctly with default props', () => {
+    const tree = renderer
+      .create(<ChoiceConfiguration classes={classes} defaultFeedback={defaultFeedback} data={data} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders correctly when feedback is not allowed', () => {
+    const tree = renderer
+      .create(
+        <ChoiceConfiguration allowFeedBack={false} classes={classes} defaultFeedback={defaultFeedback} data={data} />,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders correctly when delete is not allowed', () => {
+    const tree = renderer
+      .create(
+        <ChoiceConfiguration allowDelete={false} classes={classes} defaultFeedback={defaultFeedback} data={data} />,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe('index - logic', () => {
+  let wrapper, instance, onChange;
+
+  beforeEach(() => {
+    onChange = jest.fn();
+
+    wrapper = shallow(
+      <ChoiceConfiguration classes={classes} defaultFeedback={defaultFeedback} data={data} onChange={onChange} />,
+    );
+    instance = wrapper.instance();
+  });
+
+  describe('onCheckedChange', () => {
+    it('calls onChange', () => {
+      instance.onLabelChange('new label');
+      expect(onChange.mock.calls.length).toBe(1);
+      expect(onChange.mock.calls[0][0]).toMatchObject({ label: 'new label' });
+    });
+  });
+
+  describe('onFeedbackTypeChange', () => {
+    it('calls onChange', () => {
+      instance.onFeedbackTypeChange('default');
+      expect(onChange.mock.calls[0][0]).toMatchObject({
+        feedback: { type: 'default' },
+      });
+    });
+  });
+
+  describe('onFeedbackValueChange', () => {
+    it('calls onChange', () => {
+      instance.onFeedbackValueChange('new feedback');
+      expect(onChange.mock.calls[0][0]).toMatchObject({
+        feedback: { value: 'new feedback' },
+      });
+    });
+  });
+});