@pie-lib/mask-markup 1.13.47-next.1 → 1.14.0-beta.2

package/src/__tests__/drag-in-the-blank.test.js

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import DragInTheBlank from '../drag-in-the-blank';
+
+const markup = `<div>
+  <img src="https://image.shutterstock.com/image-vector/cow-jumped-over-moon-traditional-260nw-1152899330.jpg"></img>
+   <h5>Hey Diddle Diddle <i>by ?</i></h5>
+ <p>1: Hey, diddle, diddle,</p>
+ <p>2: The cat and the fiddle,</p>
+ <p>3: The cow {{0}} over the moon;</p>
+ <p>4: The little dog {{1}},</p>
+ <p>5: To see such sport,</p>
+ <p>6: And the dish ran away with the {{2}}.</p>
+</div>`;
+const choice = (v, id) => ({ value: v, id });
+
+describe('DragInTheBlank', () => {
+  const defaultProps = {
+    disabled: false,
+    feedback: {},
+    markup,
+    choices: [
+      choice('Jumped', '0'),
+      choice('Laughed', '1'),
+      choice('Spoon', '2'),
+      choice('Fork', '3'),
+      choice('Bumped', '4'),
+      choice('Smiled', '5'),
+    ],
+
+    value: {
+      0: undefined,
+    },
+  };
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<DragInTheBlank {...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 feedback', () => {
+      wrapper.setProps({
+        feedback: {
+          0: {
+            value: 'Jumped',
+            correct: 'Jumped',
+          },
+          1: {
+            value: 'Laughed',
+            correct: 'Laughed',
+          },
+          2: {
+            value: 'Spoon',
+            correct: 'Spoon',
+          },
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/index.test.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import componentize from '../componentize';
+import { deserialize } from '../serialization';
+
+describe('index', () => {
+  describe('componentize', () => {
+    it('should return an array with the appropriate markup', () => {
+      const dropDownMarkup = componentize('{{0}} foo {{1}}', 'dropdown');
+
+      expect(dropDownMarkup).toEqual({
+        markup:
+          '<span data-component="dropdown" data-id="0"></span> foo <span data-component="dropdown" data-id="1"></span>',
+      });
+    });
+  });
+
+  describe('serialization', () => {
+    it('should have default node a span', () => {
+      expect(deserialize('something')).toEqual(
+        expect.objectContaining({
+          object: 'value',
+          document: {
+            object: 'document',
+            data: {},
+            nodes: [
+              {
+                object: 'block',
+                data: {},
+                isVoid: false,
+                type: 'span',
+                nodes: [{ object: 'text', leaves: [{ text: 'something' }] }],
+              },
+            ],
+          },
+        }),
+      );
+    });
+  });
+});

package/src/__tests__/mask.test.js

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import Mask from '../mask';
+
+describe('Mask', () => {
+  const renderChildren = jest.fn();
+  const onChange = jest.fn();
+  const defaultProps = {
+    renderChildren,
+    onChange,
+    layout: {
+      nodes: [
+        {
+          object: 'text',
+          leaves: [
+            {
+              text: 'Foo',
+            },
+          ],
+        },
+      ],
+    },
+    value: {},
+  };
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<Mask {...defaultProps} />);
+  });
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly a paragraph', () => {
+      wrapper.setProps({
+        layout: {
+          nodes: [
+            {
+              type: 'p',
+              nodes: [
+                {
+                  object: 'text',
+                  leaves: [
+                    {
+                      text: 'Foo',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      });
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders correctly a div', () => {
+      wrapper.setProps({
+        layout: {
+          nodes: [
+            {
+              type: 'div',
+              data: {
+                attributes: {},
+              },
+              nodes: [
+                {
+                  type: 'p',
+                  data: {
+                    attributes: {},
+                  },
+                  nodes: [
+                    {
+                      object: 'text',
+                      leaves: [
+                        {
+                          text: 'Foo',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      });
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it.only('renders correctly a em', () => {
+      wrapper.setProps({
+        layout: {
+          nodes: [
+            {
+              leaves: [{ text: 'Foo ' }],
+              object: 'text',
+            },
+            {
+              leaves: [
+                {
+                  marks: [
+                    {
+                      data: undefined,
+                      type: 'italic',
+                    },
+                  ],
+                  text: 'x',
+                },
+              ],
+              object: 'text',
+            },
+            {
+              leaves: [{ text: ' bar' }],
+              object: 'text',
+            },
+          ],
+          object: 'block',
+          type: 'div',
+        },
+      });
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    const da = () => ({ data: { attributes: {} } });
+    it('renders without space under tbody', () => {
+      wrapper.setProps({
+        layout: {
+          nodes: [
+            {
+              type: 'tbody',
+              ...da(),
+              nodes: [
+                {
+                  object: 'text',
+                  leaves: [{ text: ' ' }],
+                },
+                { type: 'tr', ...da(), nodes: [] },
+              ],
+            },
+          ],
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/serialization.test.js

@@ -0,0 +1,54 @@
+import { deserialize } from '../serialization';
+
+describe('serialization', () => {
+  it('ignores comments', () => {
+    const out = deserialize(`<!-- hi -->`);
+    expect(out.document.nodes[0]).toEqual(expect.objectContaining({ type: 'span' }));
+  });
+
+  it('ignores comments', () => {
+    const out = deserialize(`<!-- hi --><div>foo</div>`);
+    expect(out.document.nodes[0]).toEqual(
+      expect.objectContaining({
+        type: 'div',
+        nodes: [
+          expect.objectContaining({
+            object: 'text',
+            leaves: [{ text: 'foo' }],
+          }),
+        ],
+      }),
+    );
+  });
+
+  it('deserializes an em', () => {
+    const out = deserialize(`<!-- hi --><div> <em>x</em> </div>`);
+    expect(out.document.nodes[0]).toEqual(
+      expect.objectContaining({
+        type: 'div',
+        nodes: [
+          expect.objectContaining({
+            object: 'text',
+          }),
+          expect.objectContaining({
+            leaves: [
+              {
+                marks: [
+                  {
+                    data: undefined,
+                    type: 'italic',
+                  },
+                ],
+                text: 'x',
+              },
+            ],
+            object: 'text',
+          }),
+          expect.objectContaining({
+            object: 'text',
+          }),
+        ],
+      }),
+    );
+  });
+});

package/src/__tests__/utils.js

@@ -0,0 +1 @@
+export const choice = (v, id) => ({ label: v, value: v, id });

package/src/__tests__/with-mask.test.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { withMask } from '../with-mask';
+
+describe('WithMask', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    markup: '<p>Foo bar {{0}} over the moon;</p>',
+    value: {
+      0: 'blank',
+    },
+    onChange,
+  };
+  const Masked = withMask('foo', (props) => (node) => {
+    const dataset = node.data ? node.data.dataset || {} : {};
+
+    if (dataset.component === 'foo') {
+      return <input type="text" value="Foo" />;
+    }
+  });
+
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<Masked {...defaultProps} />);
+  });
+
+  describe('render', () => {
+    it('renders correctly with default props', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('onChange', () => {
+    const event = (value) => ({
+      target: { value },
+    });
+
+    it('should call the function', () => {
+      const e = event('ceva');
+
+      wrapper.simulate('change', e);
+
+      expect(onChange).toHaveBeenCalledWith({
+        target: {
+          value: 'ceva',
+        },
+      });
+    });
+  });
+});

package/src/choices/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index Choice render renders correctly with default props 1`] = `
+<BlankContentComp
+  classes={
+    Object {
+      "chip": "BlankContentComp-chip-2",
+      "chipLabel": "BlankContentComp-chipLabel-3",
+      "choice": "BlankContentComp-choice-1",
+      "disabled": "BlankContentComp-disabled-4",
+    }
+  }
+  disabled={false}
+  label="Label"
+  targetId="1"
+  value="1"
+/>
+`;
+
+exports[`index Choice render renders correctly with disabled prop as true 1`] = `
+<BlankContentComp
+  classes={
+    Object {
+      "chip": "BlankContentComp-chip-2",
+      "chipLabel": "BlankContentComp-chipLabel-3",
+      "choice": "BlankContentComp-choice-1",
+      "disabled": "BlankContentComp-disabled-4",
+    }
+  }
+  disabled={true}
+  label="Label"
+  targetId="1"
+  value="1"
+/>
+`;
+
+exports[`index Choices renders correctly with default props 1`] = `
+<div
+  style={
+    Object {
+      "margin": "0 40px 0 0",
+      "minWidth": "100px",
+    }
+  }
+>
+  <DropTarget(DroppablePlaceholder)
+    disabled={false}
+  >
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "0",
+          "label": "Jumped",
+          "value": "Jumped",
+        }
+      }
+      disabled={false}
+      key="Jumped-0"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "1",
+          "label": "Laughed",
+          "value": "Laughed",
+        }
+      }
+      disabled={false}
+      key="Laughed-1"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "2",
+          "label": "Spoon",
+          "value": "Spoon",
+        }
+      }
+      disabled={false}
+      key="Spoon-2"
+    />
+  </DropTarget(DroppablePlaceholder)>
+</div>
+`;
+
+exports[`index Choices renders correctly with disabled prop as true 1`] = `
+<div
+  style={
+    Object {
+      "margin": "0 40px 0 0",
+      "minWidth": "100px",
+    }
+  }
+>
+  <DropTarget(DroppablePlaceholder)
+    disabled={true}
+  >
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "0",
+          "label": "Jumped",
+          "value": "Jumped",
+        }
+      }
+      disabled={true}
+      key="Jumped-0"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "1",
+          "label": "Laughed",
+          "value": "Laughed",
+        }
+      }
+      disabled={true}
+      key="Laughed-1"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "2",
+          "label": "Spoon",
+          "value": "Spoon",
+        }
+      }
+      disabled={true}
+      key="Spoon-2"
+    />
+  </DropTarget(DroppablePlaceholder)>
+</div>
+`;
+
+exports[`index Choices renders with duplicates 1`] = `
+<div
+  style={
+    Object {
+      "margin": "0 40px 0 0",
+      "minWidth": "100px",
+    }
+  }
+>
+  <DropTarget(DroppablePlaceholder)
+    disabled={false}
+  >
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "0",
+          "label": "Jumped",
+          "value": "Jumped",
+        }
+      }
+      disabled={false}
+      key="Jumped-0"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "1",
+          "label": "Laughed",
+          "value": "Laughed",
+        }
+      }
+      disabled={false}
+      key="Laughed-1"
+    />
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "2",
+          "label": "Spoon",
+          "value": "Spoon",
+        }
+      }
+      disabled={false}
+      key="Spoon-2"
+    />
+  </DropTarget(DroppablePlaceholder)>
+</div>
+`;
+
+exports[`index Choices renders without duplicates 1`] = `
+<div
+  style={
+    Object {
+      "margin": "0 40px 0 0",
+      "minWidth": "100px",
+    }
+  }
+>
+  <DropTarget(DroppablePlaceholder)
+    disabled={false}
+  >
+    <DragSource(WithStyles(BlankContentComp))
+      choice={
+        Object {
+          "id": "2",
+          "label": "Spoon",
+          "value": "Spoon",
+        }
+      }
+      disabled={false}
+      key="Spoon-0"
+    />
+  </DropTarget(DroppablePlaceholder)>
+</div>
+`;

package/src/choices/__tests__/index.test.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { BlankContent as Choice } from '../choice';
+import { choice } from '../../__tests__/utils';
+import Choices from '../index';
+
+describe('index', () => {
+  describe('Choices', () => {
+    const defaultProps = {
+      disabled: false,
+      choices: [choice('Jumped', '0'), choice('Laughed', '1'), choice('Spoon', '2')],
+    };
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = shallow(<Choices {...defaultProps} />);
+    });
+
+    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 without duplicates', () => {
+      wrapper.setProps({ duplicates: undefined, value: { 0: '0', 1: '1' } });
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders with duplicates', () => {
+      wrapper.setProps({ duplicates: true, value: { 0: '0', 1: '1' } });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('Choice', () => {
+    const defaultProps = {
+      disabled: false,
+      value: '1',
+      label: 'Label',
+      targetId: '1',
+    };
+    let wrapper;
+
+    beforeEach(() => {
+      wrapper = shallow(<Choice {...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();
+      });
+    });
+  });
+});