@pie-lib/mask-markup 1.13.46 → 1.14.1-beta.0

package/src/components/__tests__/__snapshots__/blank.test.js.snap

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Blank render renders correctly with default props 1`] = `
+<WithStyles(Chip)
+  className="undefined"
+  clickable={false}
+  component="span"
+  disabled={true}
+  label={
+    <React.Fragment>
+      <span
+        className=""
+      >
+         
+      </span>
+    </React.Fragment>
+  }
+  style={
+    Object {
+      "height": 0,
+      "minHeight": 32,
+      "minWidth": 90,
+      "width": 0,
+    }
+  }
+/>
+`;
+
+exports[`Blank render renders correctly with disabled prop as true 1`] = `
+<WithStyles(Chip)
+  className="undefined"
+  clickable={false}
+  component="span"
+  disabled={true}
+  label={
+    <React.Fragment>
+      <span
+        className=""
+      >
+         
+      </span>
+    </React.Fragment>
+  }
+  style={
+    Object {
+      "height": 0,
+      "minHeight": 32,
+      "minWidth": 90,
+      "width": 0,
+    }
+  }
+  variant="outlined"
+/>
+`;
+
+exports[`Blank render renders correctly with draggedItem 1`] = `
+<WithStyles(Chip)
+  className="undefined"
+  clickable={false}
+  component="span"
+  disabled={true}
+  label={
+    <React.Fragment>
+      <span
+        className=""
+      >
+         
+      </span>
+    </React.Fragment>
+  }
+  style={
+    Object {
+      "height": 0,
+      "minHeight": 32,
+      "minWidth": 90,
+      "width": 0,
+    }
+  }
+/>
+`;
+
+exports[`Blank render renders correctly with draggedItem and isOver 1`] = `
+<WithStyles(Chip)
+  className="undefined"
+  clickable={false}
+  component="span"
+  disabled={true}
+  label={
+    <React.Fragment>
+      <span
+        className="undefined"
+      >
+         
+      </span>
+      <span
+        className=""
+      >
+         
+      </span>
+    </React.Fragment>
+  }
+  style={
+    Object {
+      "height": 0,
+      "minHeight": 32,
+      "minWidth": 90,
+      "width": 0,
+    }
+  }
+/>
+`;

package/src/components/__tests__/__snapshots__/correct-input.test.js.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CorrectInput render renders correctly with correct as false 1`] = `
+<Component
+  classes={
+    Object {
+      "box": "Component-box-5",
+      "correct": "Component-correct-3",
+      "crInput": "Component-crInput-2",
+      "incorrect": "Component-incorrect-4",
+      "input": "Component-input-1",
+      "notchedOutline": "Component-notchedOutline-7",
+      "outlinedInput": "Component-outlinedInput-6",
+    }
+  }
+  correct={false}
+  disabled={false}
+  onChange={[MockFunction]}
+  value="Cow"
+  variant="outlined"
+/>
+`;
+
+exports[`CorrectInput render renders correctly with default props 1`] = `
+<Component
+  classes={
+    Object {
+      "box": "Component-box-5",
+      "correct": "Component-correct-3",
+      "crInput": "Component-crInput-2",
+      "incorrect": "Component-incorrect-4",
+      "input": "Component-input-1",
+      "notchedOutline": "Component-notchedOutline-7",
+      "outlinedInput": "Component-outlinedInput-6",
+    }
+  }
+  correct={false}
+  disabled={false}
+  onChange={[MockFunction]}
+  value="Cow"
+  variant="outlined"
+/>
+`;
+
+exports[`CorrectInput render renders correctly with disabled prop as true 1`] = `
+<Component
+  classes={
+    Object {
+      "box": "Component-box-5",
+      "correct": "Component-correct-3",
+      "crInput": "Component-crInput-2",
+      "incorrect": "Component-incorrect-4",
+      "input": "Component-input-1",
+      "notchedOutline": "Component-notchedOutline-7",
+      "outlinedInput": "Component-outlinedInput-6",
+    }
+  }
+  correct={false}
+  disabled={true}
+  onChange={[MockFunction]}
+  value="Cow"
+  variant="outlined"
+/>
+`;

package/src/components/__tests__/__snapshots__/dropdown.test.js.snap

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown render renders correctly with correct as true 1`] = `
+<Dropdown
+  choices={
+    Array [
+      Object {
+        "id": undefined,
+        "label": "Jumped",
+        "value": "Jumped",
+      },
+      Object {
+        "id": undefined,
+        "label": "Laughed",
+        "value": "Laughed",
+      },
+      Object {
+        "id": undefined,
+        "label": "Smiled",
+        "value": "Smiled",
+      },
+    ]
+  }
+  classes={
+    Object {
+      "correctIcon": "Dropdown-correctIcon-10",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "disabledCorrect": "Dropdown-disabledCorrect-2",
+      "disabledIncorrect": "Dropdown-disabledIncorrect-3",
+      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "label": "Dropdown-label-7",
+      "menuRoot": "Dropdown-menuRoot-6",
+      "root": "Dropdown-root-1",
+      "selectMenu": "Dropdown-selectMenu-4",
+      "selected": "Dropdown-selected-5",
+      "srOnly": "Dropdown-srOnly-8",
+    }
+  }
+  correct={true}
+  disabled={false}
+  id="1"
+  onChange={[MockFunction]}
+  value="Jumped"
+/>
+`;
+
+exports[`Dropdown render renders correctly with default props 1`] = `
+<Dropdown
+  choices={
+    Array [
+      Object {
+        "id": undefined,
+        "label": "Jumped",
+        "value": "Jumped",
+      },
+      Object {
+        "id": undefined,
+        "label": "Laughed",
+        "value": "Laughed",
+      },
+      Object {
+        "id": undefined,
+        "label": "Smiled",
+        "value": "Smiled",
+      },
+    ]
+  }
+  classes={
+    Object {
+      "correctIcon": "Dropdown-correctIcon-10",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "disabledCorrect": "Dropdown-disabledCorrect-2",
+      "disabledIncorrect": "Dropdown-disabledIncorrect-3",
+      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "label": "Dropdown-label-7",
+      "menuRoot": "Dropdown-menuRoot-6",
+      "root": "Dropdown-root-1",
+      "selectMenu": "Dropdown-selectMenu-4",
+      "selected": "Dropdown-selected-5",
+      "srOnly": "Dropdown-srOnly-8",
+    }
+  }
+  correct={false}
+  disabled={false}
+  id="1"
+  onChange={[MockFunction]}
+  value="Jumped"
+/>
+`;
+
+exports[`Dropdown render renders correctly with disabled prop as true 1`] = `
+<Dropdown
+  choices={
+    Array [
+      Object {
+        "id": undefined,
+        "label": "Jumped",
+        "value": "Jumped",
+      },
+      Object {
+        "id": undefined,
+        "label": "Laughed",
+        "value": "Laughed",
+      },
+      Object {
+        "id": undefined,
+        "label": "Smiled",
+        "value": "Smiled",
+      },
+    ]
+  }
+  classes={
+    Object {
+      "correctIcon": "Dropdown-correctIcon-10",
+      "correctnessIndicatorIcon": "Dropdown-correctnessIndicatorIcon-9",
+      "disabledCorrect": "Dropdown-disabledCorrect-2",
+      "disabledIncorrect": "Dropdown-disabledIncorrect-3",
+      "incorrectIcon": "Dropdown-incorrectIcon-11",
+      "label": "Dropdown-label-7",
+      "menuRoot": "Dropdown-menuRoot-6",
+      "root": "Dropdown-root-1",
+      "selectMenu": "Dropdown-selectMenu-4",
+      "selected": "Dropdown-selected-5",
+      "srOnly": "Dropdown-srOnly-8",
+    }
+  }
+  correct={false}
+  disabled={true}
+  id="1"
+  onChange={[MockFunction]}
+  value="Jumped"
+/>
+`;

package/src/components/__tests__/__snapshots__/input.test.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input render renders correctly with correct as false 1`] = `
+<WithStyles(Component)
+  correct={false}
+  disabled={false}
+  isBox={true}
+  onChange={[Function]}
+  value="Cow"
+  variant="outlined"
+/>
+`;
+
+exports[`Input render renders correctly with default props 1`] = `
+<WithStyles(Component)
+  correct={false}
+  disabled={false}
+  isBox={true}
+  onChange={[Function]}
+  value="Cow"
+  variant="outlined"
+/>
+`;
+
+exports[`Input render renders correctly with disabled prop as true 1`] = `
+<WithStyles(Component)
+  correct={false}
+  disabled={true}
+  isBox={true}
+  onChange={[Function]}
+  value="Cow"
+  variant="outlined"
+/>
+`;

package/src/components/__tests__/blank.test.js

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { BlankContent as Blank } from '../blank';
+
+describe('Blank', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    disabled: false,
+    value: 'Cow',
+    classes: {},
+    isOver: false,
+    dragItem: {},
+    correct: false,
+    onChange,
+  };
+  let wrapper;
+  let instance;
+
+  beforeEach(() => {
+    wrapper = shallow(<Blank {...defaultProps} />);
+    instance = wrapper.instance();
+  });
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with disabled prop as true', () => {
+      wrapper.setProps({ disabled: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with draggedItem', () => {
+      wrapper.setProps({ dragItem: { choice: { value: 'Dog' } } });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with draggedItem and isOver', () => {
+      wrapper.setProps({ dragItem: { choice: { value: 'Dog' } }, isOver: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('onDelete', () => {
+    it('should be undefined if disabled is true', () => {
+      wrapper.setProps({ disabled: true });
+
+      expect(wrapper.props().onDelete).toEqual(undefined);
+    });
+
+    it('should be undefined if no value is set', () => {
+      wrapper.setProps({ disabled: false, value: undefined });
+
+      expect(wrapper.props().onDelete).toEqual(undefined);
+    });
+  });
+
+  describe('updateDimensions', () => {
+    let span;
+    let rootRef;
+
+    const setSpanDimensions = (height, width) => {
+      Object.defineProperty(span, 'offsetHeight', { value: height, configurable: true });
+      Object.defineProperty(span, 'offsetWidth', { value: width, configurable: true });
+    };
+
+    beforeEach(() => {
+      wrapper = shallow(<Blank {...defaultProps} />);
+      instance = wrapper.instance();
+
+      span = document.createElement('span');
+      rootRef = document.createElement('span');
+
+      instance.spanRef = span;
+      instance.rootRef = rootRef;
+
+      Object.defineProperty(span, 'offsetHeight', { value: 0, configurable: true });
+      Object.defineProperty(span, 'offsetWidth', { value: 0, configurable: true });
+    });
+
+    it('should update dimensions if span size exceeds the response area size', () => {
+      setSpanDimensions(50, 50);
+
+      instance.updateDimensions();
+
+      expect(instance.state).toEqual({
+        width: 74,
+        height: 74,
+      });
+    });
+
+    it('should not update dimensions if span size does not exceed the response area size', () => {
+      wrapper.setProps({
+        emptyResponseAreaHeight: 50,
+        emptyResponseAreaWidth: 50,
+      });
+      setSpanDimensions(30, 30);
+
+      instance.updateDimensions();
+
+      expect(instance.state).toEqual({
+        width: 54, // with padding it does exceed (30 + 24 > 50) so it's updating
+        height: 54, // with padding it does exceed (30 + 24 > 50) so it's updating
+      });
+    });
+
+    it('should handle non-numeric emptyResponseAreaHeight and emptyResponseAreaWidth', () => {
+      wrapper.setProps({
+        emptyResponseAreaHeight: 'non-numeric',
+        emptyResponseAreaWidth: 'non-numeric',
+      });
+      setSpanDimensions(50, 50);
+
+      instance.updateDimensions();
+
+      expect(instance.state).toEqual({
+        width: 74,
+        height: 74,
+      });
+    });
+  });
+
+  describe('getRootDimensions', () => {
+    it('should return state dimensions if set', () => {
+      instance.setState({ height: 50, width: 50 });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 50,
+        width: 50,
+        minWidth: 90,
+        minHeight: 32,
+      });
+    });
+
+    it('should return state height and props width if state width is not set', () => {
+      instance.setState({ height: 50, width: 0 });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 50,
+        width: 0,
+        minWidth: 90,
+        minHeight: 32,
+      });
+    });
+
+    it('should return props height and state width if state height is not set', () => {
+      instance.setState({ height: 0, width: 50 });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 0,
+        width: 50,
+        minWidth: 90,
+        minHeight: 32,
+      });
+    });
+
+    it('should return props dimensions if state dimensions are zero', () => {
+      instance.setState({ height: 0, width: 0 });
+      wrapper.setProps({ emptyResponseAreaHeight: 60, emptyResponseAreaWidth: 60 });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 60,
+        width: 60,
+      });
+    });
+
+    it('should return state dimensions over props dimensions if both are set', () => {
+      instance.setState({ height: 50, width: 50 });
+      wrapper.setProps({ emptyResponseAreaHeight: 60, emptyResponseAreaWidth: 60 });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 50,
+        width: 50,
+      });
+    });
+
+    it('should return minWidth and minHeight if state and props dimensions are zero or undefined', () => {
+      instance.setState({ height: 0, width: 0 });
+      wrapper.setProps({ emptyResponseAreaHeight: undefined, emptyResponseAreaWidth: undefined });
+
+      const dimensions = instance.getRootDimensions();
+
+      expect(dimensions).toEqual({
+        height: 0,
+        width: 0,
+        minWidth: 90,
+        minHeight: 32,
+      });
+    });
+  });
+});

package/src/components/__tests__/correct-input.test.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import CorrectInput from '../correct-input';
+
+describe('CorrectInput', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    disabled: false,
+    correct: false,
+    variant: 'outlined',
+    value: 'Cow',
+    onChange,
+  };
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<CorrectInput {...defaultProps} />);
+  });
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with disabled prop as true', () => {
+      wrapper.setProps({ disabled: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with correct as false', () => {
+      wrapper.setProps({ correct: false });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('onChange', () => {
+    const event = (value) => ({
+      target: { value },
+    });
+
+    it('should be called', () => {
+      const e = event('1');
+
+      wrapper.simulate('change', e);
+
+      expect(onChange).toBeCalledWith(e);
+    });
+  });
+});

package/src/components/__tests__/dropdown.test.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { choice } from '../../__tests__/utils';
+import Dropdown from '../dropdown';
+
+describe('Dropdown', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    onChange,
+    id: '1',
+    correct: false,
+    disabled: false,
+    value: 'Jumped',
+    choices: [choice('Jumped'), choice('Laughed'), choice('Smiled')],
+  };
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<Dropdown {...defaultProps} />);
+  });
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with disabled prop as true', () => {
+      wrapper.setProps({ disabled: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with correct as true', () => {
+      wrapper.setProps({ correct: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('onChange', () => {
+    const event = (value) => ({
+      target: { value },
+    });
+
+    it('should be called with an appropriate value', () => {
+      const e = event('Laughed');
+
+      wrapper.simulate('change', e);
+
+      expect(onChange).toHaveBeenCalledWith({ target: { value: e.target.value } });
+    });
+  });
+});

package/src/components/__tests__/input.test.js

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import Input from '../input';
+
+describe('Input', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    disabled: false,
+    correct: false,
+    variant: 'outlined',
+    value: 'Cow',
+    id: '1',
+    onChange,
+  };
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<Input {...defaultProps} />);
+  });
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with disabled prop as true', () => {
+      wrapper.setProps({ disabled: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly with correct as false', () => {
+      wrapper.setProps({ correct: false });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('onChange', () => {
+    const event = (value) => ({
+      target: { value },
+    });
+
+    it('should be called', () => {
+      const e = event('20');
+
+      wrapper.simulate('change', e);
+
+      expect(onChange).toHaveBeenCalledWith('1', e.target.value);
+    });
+  });
+});