@pie-element/complex-rubric 3.8.4-next.9 → 5.0.1-esmbeta.0

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/__tests__/settings-panel.test.js

@@ -0,0 +1,204 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Panel } from '../settings/panel';
+import { toggle, radio, dropdown, numberField, numberFields } from '../settings';
+
+describe('Settings Panel', () => {
+  let w;
+  let onChange = jest.fn();
+  let configure = {
+    orientationLabel: 'Orientation',
+
+    settingsOrientation: true,
+    editChoiceLabel: false,
+  };
+  let model = {
+    choiceAreaLayout: 'vertical',
+  };
+
+  let groups = ({ configure }) => ({
+    'Group 1': {
+      choiceAreaLayout: configure.settingsOrientation && {
+        type: 'radio',
+        label: configure.orientationLabel,
+        choices: [
+          { label: 'opt1', value: 'opt1' },
+          { label: 'opt2', value: 'opt2' },
+        ],
+        equationEditor: dropdown('Dropdown', ['geometry', 'advanced-algebra', 'statistics', 'miscellaneous']),
+        graph: numberFields('Graph Display Size', {
+          domain: {
+            label: 'Domain',
+            suffix: 'px',
+          },
+          range: {
+            label: 'Range',
+            suffix: 'px',
+          },
+          width: {
+            label: 'Width',
+            suffix: 'px',
+            min: 50,
+            max: 250,
+          },
+        }),
+      },
+      editChoiceLabel: { type: 'toggle', label: 'Edit choice label', isConfigProperty: true },
+    },
+  });
+
+  const wrapper = (extras) => {
+    return shallow(
+      <Panel
+        model={model}
+        configuration={configure}
+        onChangeModel={onChange}
+        onChangeConfiguration={onChange}
+        groups={groups({ configure })}
+        {...extras}
+      />,
+    );
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+
+      expect(w).toMatchSnapshot();
+    });
+
+    it('does not render radio buttons', () => {
+      w = wrapper({
+        groups: groups({
+          configure: {
+            ...configure,
+            settingsOrientation: false,
+          },
+        }),
+      });
+
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('onChange gets called', () => {
+      it('updates model props', () => {
+        w.instance().change('test', false);
+
+        expect(onChange).toBeCalledWith(
+          {
+            ...model,
+            test: false,
+          },
+          'test',
+        );
+      });
+
+      it('updates configuration props', () => {
+        w.instance().change('test.test', true, true);
+
+        expect(onChange).toBeCalledWith(
+          {
+            ...configure,
+            test: {
+              test: true,
+            },
+          },
+          'test.test',
+        );
+      });
+    });
+  });
+});
+
+describe('toggle', () => {
+  it('returns a toggle type object', () => {
+    const setting = toggle('Label');
+
+    expect(setting).toEqual({
+      label: 'Label',
+      type: 'toggle',
+      isConfigProperty: false,
+      disabled: false,
+    });
+  });
+});
+
+describe('radio', () => {
+  it('returns a radio type object', () => {
+    const setting = radio('Radio', ['one', 'two']);
+
+    expect(setting).toEqual({
+      label: 'Radio',
+      type: 'radio',
+      isConfigProperty: false,
+      choices: [
+        {
+          label: 'one',
+          value: 'one',
+        },
+        {
+          label: 'two',
+          value: 'two',
+        },
+      ],
+    });
+  });
+});
+
+describe('dropdown', () => {
+  it('returns a dropdown type object', () => {
+    const setting = dropdown('Dropdown', ['one', 'two']);
+
+    expect(setting).toEqual({
+      label: 'Dropdown',
+      type: 'dropdown',
+      isConfigProperty: false,
+      choices: ['one', 'two'],
+    });
+  });
+});
+
+describe('numberField', () => {
+  it('returns a numberField type object', () => {
+    const setting = numberField('Number Field', { max: 12 }, true);
+
+    expect(setting).toEqual({
+      label: 'Number Field',
+      type: 'numberField',
+      isConfigProperty: true,
+      max: 12,
+    });
+  });
+});
+
+describe('numberFields', () => {
+  it('returns a numberFields type object', () => {
+    const setting = numberFields('Number Fields', {
+      one: {
+        label: 'One',
+      },
+      two: {
+        label: 'Two',
+      },
+    });
+
+    expect(setting).toEqual({
+      label: 'Number Fields',
+      type: 'numberFields',
+      fields: {
+        one: {
+          type: 'numberField',
+          label: 'One',
+          isConfigProperty: false,
+        },
+        two: {
+          type: 'numberField',
+          label: 'Two',
+          isConfigProperty: false,
+        },
+      },
+    });
+  });
+});

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/__tests__/two-choice.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { NChoice } from '../two-choice';
+
+describe('NChoice', () => {
+  it('renders n choice radio buttons vertical correctly', () => {
+    const tree = renderer
+      .create(
+        <NChoice
+          direction="vertical"
+          header="n-choice-vertical"
+          value={'left'}
+          onChange={jest.fn()}
+          opts={[
+            { label: 'left', value: 'left' },
+            { label: 'center', value: 'center' },
+            { label: 'right', value: 'right' },
+          ]}
+        />,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/alert-dialog.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+
+const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onConfirmText, classes }) => (
+  <Dialog open={open} onClose={onClose}>
+    {title && <DialogTitle className={classes.heading}>{title}</DialogTitle>}
+    {text && (
+      <DialogContent>
+        <DialogContentText className={classes.subheading}>{text}</DialogContentText>
+      </DialogContent>
+    )}
+    <DialogActions>
+      {onClose && (
+        <Button onClick={onClose} color="primary">
+          {onCloseText}
+        </Button>
+      )}
+      {onConfirm && (
+        <Button autoFocus onClick={onConfirm} color="primary">
+          {onConfirmText}
+        </Button>
+      )}
+    </DialogActions>
+  </Dialog>
+);
+
+AlertDialog.defaultProps = {
+  onCloseText: 'CANCEL',
+  onConfirmText: 'OK',
+};
+
+AlertDialog.propTypes = {
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  title: PropTypes.string,
+  onClose: PropTypes.func,
+  onConfirm: PropTypes.func,
+  open: PropTypes.bool,
+  onConfirmText: PropTypes.string,
+  onCloseText: PropTypes.string,
+  classes: PropTypes.object,
+};
+
+const styles = () => ({
+  heading: {
+    '& h2': {
+      fontSize: 'max(1.25rem, 18px)',
+    },
+  },
+  subheading: {
+    fontSize: 'max(1rem, 14px)',
+  },
+});
+
+export default withStyles(styles)(AlertDialog);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/checkbox.jsx

@@ -0,0 +1,73 @@
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import MuiCheckbox from '@material-ui/core/Checkbox';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import grey from '@material-ui/core/colors/grey';
+import { color } from '@pie-lib/render-ui';
+
+const Checkbox = ({ mini, checked, onChange, value, label, classes, error }) => (
+  <FormControlLabel
+    className={classNames(classes.mini)}
+    classes={{
+      label: classNames(classes.label, { [classes.miniLabel]: mini }),
+    }}
+    control={
+      <MuiCheckbox
+        checked={checked}
+        onChange={onChange}
+        value={value}
+        className={classNames(classes.customColor, {
+          [classes.miniCheckbox]: mini,
+          [classes.error]: error,
+        })}
+      />
+    }
+    label={label}
+  />
+);
+
+Checkbox.propTypes = {
+  mini: PropTypes.bool,
+  classes: PropTypes.object.isRequired,
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  label: PropTypes.string.isRequired,
+};
+
+Checkbox.defaultProps = {
+  value: '',
+  mini: false,
+};
+
+export default withStyles((theme) => ({
+  label: {
+    fontSize: theme.typography.fontSize - 1,
+    transform: 'translate(-4%, 2%)',
+    color: 'rgba(0,0,0,1.0)',
+  },
+  miniCheckbox: {
+    margin: 0,
+    padding: 0,
+    width: theme.spacing.unit * 3,
+    height: theme.spacing.unit * 3,
+  },
+  miniLabel: {
+    marginLeft: theme.spacing.unit,
+    color: grey[700],
+    fontSize: theme.typography.fontSize - 3,
+  },
+  mini: {
+    margin: 0,
+    marginLeft: 0,
+    padding: 0,
+  },
+  error: {
+    color: theme.palette.error.main,
+  },
+  customColor: {
+    color: `${color.tertiary()} !important`,
+  },
+}))(Checkbox);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/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>
+`;