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

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

@@ -0,0 +1,316 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DragInTheBlank render renders correctly with default props 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": undefined,
+      "display": "flex",
+      "flexDirection": "column-reverse",
+      "justifyContent": undefined,
+      "minWidth": "100px",
+    }
+  }
+>
+  <Choices
+    choicePosition="below"
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={false}
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+  <WithMask
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={false}
+    elementType="drag-in-the-blank"
+    feedback={Object {}}
+    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>"
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`DragInTheBlank render renders correctly with disabled prop as true 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": undefined,
+      "display": "flex",
+      "flexDirection": "column-reverse",
+      "justifyContent": undefined,
+      "minWidth": "100px",
+    }
+  }
+>
+  <Choices
+    choicePosition="below"
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={true}
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+  <WithMask
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={true}
+    elementType="drag-in-the-blank"
+    feedback={Object {}}
+    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>"
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+</div>
+`;
+
+exports[`DragInTheBlank render renders correctly with feedback 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": undefined,
+      "display": "flex",
+      "flexDirection": "column-reverse",
+      "justifyContent": undefined,
+      "minWidth": "100px",
+    }
+  }
+>
+  <Choices
+    choicePosition="below"
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={false}
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+  <WithMask
+    choices={
+      Array [
+        Object {
+          "id": "0",
+          "value": "Jumped",
+        },
+        Object {
+          "id": "1",
+          "value": "Laughed",
+        },
+        Object {
+          "id": "2",
+          "value": "Spoon",
+        },
+        Object {
+          "id": "3",
+          "value": "Fork",
+        },
+        Object {
+          "id": "4",
+          "value": "Bumped",
+        },
+        Object {
+          "id": "5",
+          "value": "Smiled",
+        },
+      ]
+    }
+    disabled={false}
+    elementType="drag-in-the-blank"
+    feedback={
+      Object {
+        "0": Object {
+          "correct": "Jumped",
+          "value": "Jumped",
+        },
+        "1": Object {
+          "correct": "Laughed",
+          "value": "Laughed",
+        },
+        "2": Object {
+          "correct": "Spoon",
+          "value": "Spoon",
+        },
+      }
+    }
+    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>"
+    value={
+      Object {
+        "0": undefined,
+      }
+    }
+  />
+</div>
+`;

package/src/__tests__/__snapshots__/mask.test.js.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Mask render renders correctly a div 1`] = `
+<div>
+  <div
+    key="div-0"
+  >
+    <WithStyles(Component)
+      key="p-0"
+    >
+      Foo
+    </WithStyles(Component)>
+  </div>
+</div>
+`;
+
+exports[`Mask render renders correctly a em 1`] = `
+<WithStyles(Component)>
+  Foo 
+  <em
+    key="1"
+  >
+    x
+  </em>
+   bar
+</WithStyles(Component)>
+`;
+
+exports[`Mask render renders correctly a paragraph 1`] = `
+<div>
+  <WithStyles(Component)
+    key="p-0"
+  >
+    Foo
+  </WithStyles(Component)>
+</div>
+`;
+
+exports[`Mask render renders correctly with default props 1`] = `
+<div>
+  Foo
+</div>
+`;
+
+exports[`Mask render renders without space under tbody 1`] = `
+<div>
+  <tbody
+    key="tbody-0"
+  >
+    <tr
+      key="tr-1"
+    />
+  </tbody>
+</div>
+`;

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

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WithMask render renders correctly with default props 1`] = `
+<Mask
+  layout={
+    Object {
+      "data": Object {},
+      "nodes": Array [
+        Object {
+          "data": Object {
+            "attributes": Object {},
+            "dataset": Object {},
+          },
+          "nodes": Array [
+            Object {
+              "leaves": Array [
+                Object {
+                  "text": "Foo bar ",
+                },
+              ],
+              "object": "text",
+            },
+            Object {
+              "data": Object {
+                "attributes": Object {
+                  "data-component": "foo",
+                  "data-id": "0",
+                },
+                "dataset": Object {
+                  "component": "foo",
+                  "id": "0",
+                },
+              },
+              "nodes": Array [],
+              "object": "inline",
+              "type": "span",
+            },
+            Object {
+              "leaves": Array [
+                Object {
+                  "text": " over the moon;",
+                },
+              ],
+              "object": "text",
+            },
+          ],
+          "object": "block",
+          "type": "p",
+        },
+      ],
+      "object": "document",
+    }
+  }
+  onChange={[MockFunction]}
+  renderChildren={[Function]}
+  value={
+    Object {
+      "0": "blank",
+    }
+  }
+/>
+`;

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();
+    });
+  });
+});