@pie-lib/render-ui 4.15.10-next.1 → 4.16.0-beta.1

package/src/__tests__/__snapshots__/response-indicators.test.jsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`response-indicators snapshot  - no feedback  1`] = `
+<div>
+  <span
+    onClick={[Function]}
+  >
+    <div
+      style={
+        Object {
+          "display": "inline-block",
+          "height": "30px",
+          "position": "relative",
+          "width": "30px",
+        }
+      }
+    >
+      <svg
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "enableBackground": "new 0 0 44 40",
+          }
+        }
+        version="1.1"
+        viewBox="0 0 44 40"
+        x="0px"
+        y="0px"
+      >
+         
+        <circle
+          className="IconBase-bg-5"
+          cx="23"
+          cy="20.4"
+          r="16"
+          transform="translate(-3, 0)"
+        />
+        <polygon
+          className="IconBase-fg-6"
+          points="19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
+          transform="translate(0, 0)"
+        />
+      </svg>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`response-indicators snapshot  - with feedback  1`] = `
+<div
+  className="RawIndicator-responseIndicator-1"
+>
+  <span
+    onClick={[Function]}
+  >
+    <div
+      style={
+        Object {
+          "display": "inline-block",
+          "height": "30px",
+          "position": "relative",
+          "width": "30px",
+        }
+      }
+    >
+      <svg
+        preserveAspectRatio="xMinYMin meet"
+        style={
+          Object {
+            "enableBackground": "new 0 0 44 40",
+          }
+        }
+        version="1.1"
+        viewBox="0 0 44 40"
+        x="0px"
+        y="0px"
+      >
+         
+        <circle
+          className="IconBase-bg-5"
+          cx="23"
+          cy="20.4"
+          r="16"
+          transform="translate(-3, 0)"
+        />
+        <polygon
+          className="IconBase-fg-6"
+          points="19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
+          transform="translate(0, 0)"
+        />
+      </svg>
+    </div>
+  </span>
+</div>
+`;

package/src/__tests__/color.test.js

@@ -0,0 +1,12 @@
+import { v } from '../color';
+describe('v', () => {
+  it.each`
+    args                                 | expected
+    ${['text', 'black']}                 | ${'var(--pie-text, black)'}
+    ${['primary-text', 'text', 'black']} | ${'var(--pie-primary-text, var(--pie-text, black))'}
+    ${['black']}                         | ${'black'}
+    ${['#00ff00']}                       | ${'#00ff00'}
+  `('$args => $expected', ({ args, expected }) => {
+    expect(v('pie')(...args)).toEqual(expected);
+  });
+});

package/src/__tests__/has-media.test.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { hasMedia } from '../has-media'; // Assuming you have a hasMedia function
+
+describe('hasMedia', () => {
+  it.each`
+    input                                     | expected
+    ${'<img src="image.jpg" />'}              | ${true}
+    ${'<audio src="audio.mp3" />'}            | ${true}
+    ${'<div><img src="image.jpg" /></div>'}   | ${true}
+    ${'<div><audio src="audio.mp3" /></div>'} | ${true}
+    ${'<div>No media here</div>'}             | ${false}
+    ${'<div></div>'}                          | ${false}
+    ${' '}                                    | ${false}
+    ${null}                                   | ${false}
+  `('$input -> $expected', ({ input, expected }) => {
+    const output = hasMedia(input);
+
+    expect(output).toEqual(expected);
+  });
+});

package/src/__tests__/has-text.test.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { hasText } from '../has-text';
+
+describe('has-text', () => {
+  it.each`
+    input                     | expected
+    ${'<div>Rationale</div>'} | ${true}
+    ${'Rationale'}            | ${true}
+    ${'<div>hi</div>'}        | ${true}
+    ${'<div>hi'}              | ${true}
+    ${'<div></div>'}          | ${false}
+    ${'<div>  </div>'}        | ${false}
+    ${'<div><br />   </div>'} | ${false}
+    ${' '}                    | ${false}
+    ${null}                   | ${false}
+  `('$input -> $expected', ({ input, expected }) => {
+    const output = hasText(input);
+
+    expect(output).toEqual(expected);
+  });
+});

package/src/__tests__/html-and-math.test.js

@@ -0,0 +1,46 @@
+import HtmlAndMath from '../html-and-math';
+import { shallow } from 'enzyme';
+import React from 'react';
+import { renderMath } from '@pie-lib/math-rendering';
+
+jest.mock('@pie-lib/math-rendering', () => ({ renderMath: jest.fn() }));
+
+describe('html-and-math', () => {
+  const mkWrapper = (extras) => {
+    const props = {
+      html: '<p>hi</p>',
+      ...extras,
+    };
+
+    return shallow(<HtmlAndMath {...props} />, {
+      disableLifecycleMethods: true,
+    });
+  };
+
+  describe('render', () => {
+    it('renders', () => {
+      const w = mkWrapper();
+
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('componentDidMount', () => {
+    it('calls renderMath', () => {
+      const w = mkWrapper();
+      //mock the ref
+      w.instance().node = { node: true };
+      w.instance().componentDidMount();
+      expect(renderMath).toHaveBeenCalled();
+    });
+  });
+  describe('componentDidUpdate', () => {
+    it('calls renderMath', () => {
+      const w = mkWrapper();
+      //mock the ref
+      w.instance().node = { node: true };
+      w.instance().componentDidUpdate();
+      expect(renderMath).toHaveBeenCalled();
+    });
+  });
+});

package/src/__tests__/preview-prompt.test.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import PreviewPrompt from '../preview-prompt';
+
+describe('Prompt without Custom tag ', () => {
+  let wrapper;
+  let mkWrapper = (opts) => {
+    opts = {
+      classes: {},
+      prompt:
+        'Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>',
+      tagName: '',
+      className: '',
+      ...opts,
+    };
+
+    return shallow(<PreviewPrompt {...opts} />);
+  };
+
+  beforeEach(() => {
+    wrapper = mkWrapper();
+  });
+
+  describe('default class with markup', () => {
+    it('renders', () => {
+      expect(wrapper.hasClass('prompt')).toEqual(false);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
+
+describe('Prompt with Custom tag ', () => {
+  let wrapper;
+  let mkWrapper = (opts) => {
+    opts = {
+      classes: {},
+      prompt:
+        'Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>',
+      tagName: '',
+      className: '',
+      ...opts,
+    };
+    return shallow(<PreviewPrompt {...opts} />);
+  };
+
+  beforeEach(() => {
+    wrapper = mkWrapper({ tagName: 'span', className: 'prompt' });
+  });
+
+  describe('renders with custom tag "span" correctly', () => {
+    it('renders', () => {
+      expect(wrapper.hasClass('prompt')).toEqual(true);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/purpose.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Purpose from '../purpose';
+
+describe('Purpose', () => {
+  let wrapper;
+
+  describe('renders fine', () => {
+    it('renders child unaltered without purpose prop', () => {
+      wrapper = mount(
+        <Purpose>
+          <div>text</div>
+        </Purpose>,
+      );
+      expect(wrapper.find('div')).toHaveLength(1);
+      expect(wrapper.html().includes('data-pie-purpose=""')).toEqual(false);
+      expect(wrapper.html().includes('text')).toEqual(true);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('renders child unaltered', () => {
+      wrapper = mount(
+        <Purpose purpose="passage">
+          <div>text</div>
+        </Purpose>,
+      );
+      expect(wrapper.find('div')).toHaveLength(1);
+      expect(wrapper.html().includes('data-pie-purpose="passage"')).toEqual(true);
+      expect(wrapper.html().includes('text')).toEqual(true);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('renders children unaltered', () => {
+      wrapper = mount(
+        <Purpose purpose="something">
+          <div>
+            <div>text1</div>
+            <div>text2</div>
+          </div>
+        </Purpose>,
+      );
+      expect(wrapper.find('div')).toHaveLength(3);
+      expect(wrapper.html().includes('data-pie-purpose="something"')).toEqual(true);
+      expect(wrapper.html().includes('text1')).toEqual(true);
+      expect(wrapper.html().includes('text3')).toEqual(false);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/readable.test.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Readable from '../readable';
+
+describe('Readable', () => {
+  let wrapper;
+
+  describe('renders fine', () => {
+    it('renders child unaltered', () => {
+      wrapper = mount(
+        <Readable>
+          <div>text</div>
+        </Readable>,
+      );
+      expect(wrapper.find('div')).toHaveLength(1);
+      expect(wrapper.html().includes('data-pie-readable="true"')).toEqual(true);
+      expect(wrapper.html().includes('text')).toEqual(true);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('renders children unaltered', () => {
+      wrapper = mount(
+        <Readable>
+          <div>
+            <div>text1</div>
+            <div>text2</div>
+          </div>
+        </Readable>,
+      );
+      expect(wrapper.find('div')).toHaveLength(3);
+      expect(wrapper.html().includes('data-pie-readable="true"')).toEqual(true);
+      expect(wrapper.html().includes('text1')).toEqual(true);
+      expect(wrapper.html().includes('text3')).toEqual(false);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('renders with false tag', () => {
+      wrapper = mount(
+        <Readable false>
+          <div>
+            <div>text1</div>
+            <div>text2</div>
+          </div>
+        </Readable>,
+      );
+      expect(wrapper.find('div')).toHaveLength(3);
+      expect(wrapper.html().includes('data-pie-readable="false"')).toEqual(true);
+      expect(wrapper.html().includes('text1')).toEqual(true);
+      expect(wrapper.html().includes('text3')).toEqual(false);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('renders even with specific true tag', () => {
+      wrapper = mount(
+        <Readable false={true}>
+          <div>
+            <div>text1</div>
+            <div>text2</div>
+          </div>
+        </Readable>,
+      );
+      expect(wrapper.find('div')).toHaveLength(3);
+      expect(wrapper.html().includes('data-pie-readable="false"')).toEqual(true);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

package/src/__tests__/response-indicators.test.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import debug from 'debug';
+import renderer from 'react-test-renderer';
+import { Correct } from '../response-indicators';
+
+describe('response-indicators', () => {
+  it('snapshot  - no feedback ', () => {
+    const tree = renderer.create(<Correct />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('snapshot  - with feedback ', () => {
+    const tree = renderer.create(<Correct feedback="hi" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/__tests__/ui-layout.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { UiLayout } from '../index';
+
+describe('UiLayout', () => {
+  let wrapper;
+  const mockClasses = { extraCSSRules: 'extra-class' };
+  const fontSizeFactor = 1.5;
+
+  // Mock `getComputedStyle` to return a specific root font size.
+  jest.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
+    fontSize: '16px', // Default font size for root
+  }));
+
+  wrapper = mount(<UiLayout classes={mockClasses} fontSizeFactor={fontSizeFactor} />);
+
+  it('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('applies the correct classes', () => {
+    const div = wrapper.find('.extra-class');
+    expect(div.exists()).toBe(true);
+  });
+
+  it('computes style correctly based on fontSizeFactor', () => {
+    const div = wrapper.find('.extra-class');
+
+    // Get the style property of the rendered div
+    const computedStyle = div.getDOMNode().style;
+    // Assert the computed font size
+    expect(computedStyle.fontSize).toBe('24px');
+  });
+});

package/src/__tests__/withUndoReset.test.jsx

@@ -0,0 +1,254 @@
+import * as React from 'react';
+import withUndoReset from '../withUndoReset';
+import { mount, shallow } from 'enzyme';
+import { shallowChild } from '@pie-lib/test-utils';
+
+describe('withUndoReset', () => {
+  let wrapper;
+  let defaultProps;
+  const WrappedClass = class WrappedComponent extends React.Component {
+    onSessionChange = (session) => {
+      this.props.onSessionChange(session);
+    };
+
+    onAddItem = (item) => {
+      this.onSessionChange({
+        ...this.props.session,
+        items: this.props.session.items.concat(item),
+      });
+    };
+
+    onRemoveLastItem = () => {
+      const newItems = [...this.props.session.items];
+
+      newItems.pop();
+
+      this.onSessionChange({
+        ...this.props.session,
+        items: newItems,
+      });
+    };
+
+    render() {
+      const { session } = this.props;
+      const items = session.items || {};
+
+      return (
+        <div>
+          {items.map((item) => (
+            <span key={item.id}>{item.id}</span>
+          ))}
+        </div>
+      );
+    }
+  };
+
+  const Component = withUndoReset(WrappedClass);
+
+  describe('retains internal component functionality', () => {
+    beforeEach(() => {
+      defaultProps = {
+        session: {
+          items: [],
+        },
+        onSessionChange: jest.fn(),
+      };
+    });
+
+    it('moves past HoC and returns the rendered component using enzyme', () => {
+      wrapper = mount(<Component {...defaultProps} />);
+      expect(wrapper.find(WrappedClass).length).toEqual(1);
+      expect(wrapper.find(WrappedClass).props()).toEqual(
+        expect.objectContaining({
+          session: { items: [] },
+        }),
+      );
+    });
+
+    it('contains the reset logic container', () => {
+      wrapper = mount(<Component {...defaultProps} />);
+      expect(wrapper.html().includes('Start Over')).toEqual(true);
+      expect(wrapper.html().includes('Undo')).toEqual(true);
+    });
+
+    it('can interact with session', () => {
+      wrapper = mount(<Component {...defaultProps} />);
+
+      expect(wrapper.find('span').length).toEqual(2);
+
+      wrapper
+        .find(WrappedClass)
+        .instance()
+        .onAddItem({ id: 1 });
+
+      expect(
+        wrapper
+          .find(WrappedClass)
+          .html()
+          .includes('span'),
+      ).toEqual(true);
+
+      wrapper
+        .find(WrappedClass)
+        .instance()
+        .onRemoveLastItem();
+
+      expect(
+        wrapper
+          .find(WrappedClass)
+          .html()
+          .includes('span'),
+      ).toEqual(false);
+    });
+
+    it('can undo changes in the session', () => {
+      wrapper = shallowChild(Component, defaultProps, 1)();
+      const instance = wrapper.instance();
+
+      instance.onSessionChange({
+        items: [
+          {
+            id: 2,
+          },
+        ],
+      });
+
+      instance.onSessionChange({
+        items: [
+          {
+            id: 2,
+          },
+          {
+            id: 3,
+          },
+        ],
+      });
+
+      expect(wrapper.state().changes).toEqual([
+        {
+          items: [
+            {
+              id: 2,
+            },
+          ],
+        },
+        {
+          items: [
+            {
+              id: 2,
+            },
+            {
+              id: 3,
+            },
+          ],
+        },
+      ]);
+
+      expect(wrapper.state().session).toEqual({
+        items: [
+          {
+            id: 2,
+          },
+          {
+            id: 3,
+          },
+        ],
+      });
+
+      instance.onUndo();
+
+      expect(wrapper.state().changes).toEqual([
+        {
+          items: [
+            {
+              id: 2,
+            },
+          ],
+        },
+      ]);
+
+      expect(wrapper.state().session).toEqual({
+        items: [
+          {
+            id: 2,
+          },
+        ],
+      });
+
+      instance.onUndo();
+
+      expect(wrapper.state().changes).toEqual([]);
+
+      expect(wrapper.state().session).toEqual({
+        items: [],
+      });
+
+      expect(wrapper.find(WrappedClass).html()).toEqual('<div></div>');
+    });
+
+    it('can reset changes in the session', () => {
+      wrapper = shallowChild(Component, defaultProps, 1)();
+      const instance = wrapper.instance();
+
+      instance.onSessionChange({
+        items: [
+          {
+            id: 2,
+          },
+        ],
+      });
+
+      instance.onSessionChange({
+        items: [
+          {
+            id: 2,
+          },
+          {
+            id: 3,
+          },
+        ],
+      });
+
+      expect(wrapper.state().changes).toEqual([
+        {
+          items: [
+            {
+              id: 2,
+            },
+          ],
+        },
+        {
+          items: [
+            {
+              id: 2,
+            },
+            {
+              id: 3,
+            },
+          ],
+        },
+      ]);
+
+      expect(wrapper.state().session).toEqual({
+        items: [
+          {
+            id: 2,
+          },
+          {
+            id: 3,
+          },
+        ],
+      });
+
+      instance.onReset();
+
+      expect(wrapper.state().changes).toEqual([]);
+
+      expect(wrapper.state().session).toEqual({
+        items: [],
+      });
+
+      expect(wrapper.find(WrappedClass).html()).toEqual('<div></div>');
+    });
+  });
+});