@pie-lib/rubric 1.0.0-beta.4 → 1.0.0-next.0

package/lib/point-menu.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.IconMenu = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _Menu = _interopRequireDefault(require("@mui/material/Menu"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
+var _MoreHoriz = _interopRequireDefault(require("@mui/icons-material/MoreHoriz"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var IconMenu = exports.IconMenu = /*#__PURE__*/function (_React$Component) {
+  function IconMenu(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, IconMenu);
+    _this = _callSuper(this, IconMenu, [props]);
+    (0, _defineProperty2["default"])(_this, "handleClick", function (event) {
+      return _this.setState({
+        open: true,
+        anchorEl: event.currentTarget
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "handleRequestClose", function () {
+      return _this.setState({
+        open: false
+      });
+    });
+    _this.state = {
+      anchorEl: undefined,
+      open: false
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(IconMenu, _React$Component);
+  return (0, _createClass2["default"])(IconMenu, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        opts = _this$props.opts,
+        onClick = _this$props.onClick;
+      var _this$state = this.state,
+        open = _this$state.open,
+        anchorEl = _this$state.anchorEl;
+      var keys = Object.keys(opts) || [];
+      var handleMenuClick = function handleMenuClick(key) {
+        return function () {
+          onClick(key);
+          _this2.handleRequestClose();
+        };
+      };
+      var iconColor = open ? 'inherit' : 'disabled';
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        onClick: this.handleClick
+      }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        size: "large"
+      }, open ? /*#__PURE__*/_react["default"].createElement(_MoreVert["default"], {
+        color: iconColor
+      }) : /*#__PURE__*/_react["default"].createElement(_MoreHoriz["default"], {
+        color: iconColor
+      }))), /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
+        id: "point-menu",
+        anchorEl: anchorEl,
+        open: open,
+        onClose: this.handleRequestClose,
+        style: {
+          transform: 'translate(-15px, -15px)'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        }
+      }, keys.map(function (k, index) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: index,
+          onClick: handleMenuClick(k)
+        }, opts[k]);
+      })));
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(IconMenu, "propTypes", {
+  opts: _propTypes["default"].object,
+  onClick: _propTypes["default"].func.isRequired
+});
+var PointMenu = exports["default"] = /*#__PURE__*/function (_React$Component2) {
+  function PointMenu() {
+    (0, _classCallCheck2["default"])(this, PointMenu);
+    return _callSuper(this, PointMenu, arguments);
+  }
+  (0, _inherits2["default"])(PointMenu, _React$Component2);
+  return (0, _createClass2["default"])(PointMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        onChange = _this$props2.onChange,
+        showSampleAnswer = _this$props2.showSampleAnswer;
+      var sampleText = showSampleAnswer ? 'Provide Sample Response' : 'Remove Sample Response';
+      return /*#__PURE__*/_react["default"].createElement(IconMenu, {
+        onClick: function onClick(key) {
+          return onChange(key);
+        },
+        opts: {
+          sample: sampleText
+        }
+      });
+    }
+  }]);
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(PointMenu, "propTypes", {
+  onChange: _propTypes["default"].func.isRequired,
+  showSampleAnswer: _propTypes["default"].bool.isRequired
+});
+//# sourceMappingURL=point-menu.js.map

package/lib/point-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"point-menu.js","names":["_Menu","_interopRequireDefault","require","_MenuItem","_MoreVert","_MoreHoriz","_IconButton","_propTypes","_react","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","IconMenu","exports","_React$Component","props","_this","_classCallCheck2","_defineProperty2","event","setState","open","anchorEl","currentTarget","state","undefined","_inherits2","_createClass2","key","value","render","_this2","_this$props","opts","onClick","_this$state","keys","Object","handleMenuClick","handleRequestClose","iconColor","createElement","handleClick","size","color","id","onClose","style","transform","transformOrigin","vertical","horizontal","map","k","index","React","Component","PropTypes","object","func","isRequired","PointMenu","_React$Component2","arguments","_this$props2","onChange","showSampleAnswer","sampleText","sample","bool"],"sources":["../src/point-menu.jsx"],"sourcesContent":["import Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\nimport MoreHorizIcon from '@mui/icons-material/MoreHoriz';\nimport IconButton from '@mui/material/IconButton';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nexport class IconMenu extends React.Component {\n  static propTypes = {\n    opts: PropTypes.object,\n    onClick: PropTypes.func.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      anchorEl: undefined,\n      open: false,\n    };\n  }\n\n  handleClick = (event) => this.setState({ open: true, anchorEl: event.currentTarget });\n\n  handleRequestClose = () => this.setState({ open: false });\n\n  render() {\n    const { opts, onClick } = this.props;\n    const { open, anchorEl } = this.state;\n    const keys = Object.keys(opts) || [];\n\n    const handleMenuClick = (key) => () => {\n      onClick(key);\n      this.handleRequestClose();\n    };\n\n    const iconColor = open ? 'inherit' : 'disabled';\n\n    return (\n      <div>\n        <div onClick={this.handleClick}>\n          <IconButton size=\"large\">\n            {open ? <MoreVertIcon color={iconColor} /> : <MoreHorizIcon color={iconColor} />}\n          </IconButton>\n        </div>\n        <Menu\n          id=\"point-menu\"\n          anchorEl={anchorEl}\n          open={open}\n          onClose={this.handleRequestClose}\n          style={{ transform: 'translate(-15px, -15px)' }}\n          transformOrigin={{\n            vertical: 'center',\n            horizontal: 'right',\n          }}\n        >\n          {keys.map((k, index) => (\n            <MenuItem key={index} onClick={handleMenuClick(k)}>\n              {opts[k]}\n            </MenuItem>\n          ))}\n        </Menu>\n      </div>\n    );\n  }\n}\n\nexport default class PointMenu extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func.isRequired,\n    showSampleAnswer: PropTypes.bool.isRequired,\n  };\n\n  render() {\n    const { onChange, showSampleAnswer } = this.props;\n    const sampleText = showSampleAnswer ? 'Provide Sample Response' : 'Remove Sample Response';\n\n    return (\n      <IconMenu\n        onClick={(key) => onChange(key)}\n        opts={{\n          sample: sampleText,\n        }}\n      />\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,20 +1,31 @@
 {
   "name": "@pie-lib/rubric",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-next.0",
   "publishConfig": {
     "access": "public"
   },
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@material-ui/core": "^3.9.3",
-    "@material-ui/icons": "^3.0.2",
-    "@pie-lib/editable-html": "10.0.0-beta.7",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@hello-pangea/dnd": "^18.0.1",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/editable-html": "11.21.3-next.15",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.1",
-    "react-beautiful-dnd": "^11.0.2",
-    "react-dom": "^16.9.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "gitHead": "e0f8f2250addd014938f4a631ab86cafe16b2730",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "import": "./src/index.js",
+      "default": "./lib/index.js"
+    },
+    "./esm": "./esm/index.js"
   }
 }

package/src/__tests__/rubric.test.jsx

@@ -0,0 +1,179 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { RawAuthoring } from '../authoring';
+import _ from 'lodash';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+// Mock dependencies
+jest.mock('@pie-lib/editable-html', () => {
+  return function EditableHtml(props) {
+    return <div data-testid="editable-html" data-markup={props.markup} />;
+  };
+});
+
+jest.mock('@pie-lib/config-ui', () => ({
+  FeedbackConfig: ({ feedback }) => <div data-testid="feedback-config">{JSON.stringify(feedback)}</div>,
+}));
+
+jest.mock('@hello-pangea/dnd', () => ({
+  DragDropContext: ({ children }) => <div data-testid="drag-drop-context">{children}</div>,
+  Droppable: ({ children }) => children({ droppableProps: {}, innerRef: () => {} }, {}),
+  Draggable: ({ children, index }) =>
+    children(
+      {
+        innerRef: () => {},
+        draggableProps: { 'data-draggable-index': index },
+        dragHandleProps: {}
+      },
+      {}
+    ),
+}));
+
+describe('Rubric', () => {
+  const points = ['nothing right', 'a teeny bit right', 'mostly right', 'bingo'];
+  const sampleAnswers = [null, 'just right', 'not left', null];
+  const theme = createTheme();
+
+  const renderComponent = (value = {}, props = {}) => {
+    const defaultProps = {
+      classes: {},
+      onChange: jest.fn(),
+      className: 'className',
+      value: {
+        excludeZero: false,
+        points,
+        sampleAnswers,
+        ...value,
+      },
+      ...props,
+    };
+
+    return {
+      ...render(
+        <ThemeProvider theme={theme}>
+          <RawAuthoring {...defaultProps} />
+        </ThemeProvider>
+      ),
+      onChange: defaultProps.onChange,
+      props: defaultProps,
+    };
+  };
+
+  describe('render', () => {
+    it('renders rubric title and main structure', () => {
+      renderComponent();
+      expect(screen.getByText('Rubric')).toBeInTheDocument();
+      expect(screen.getByLabelText('Max Points')).toBeInTheDocument();
+      expect(screen.getByLabelText('Exclude zeros')).toBeInTheDocument();
+    });
+
+    it('renders all point configurations', () => {
+      const { container } = renderComponent();
+      // Verify DragDropContext is rendered
+      expect(container.querySelector('[data-testid="drag-drop-context"]')).toBeInTheDocument();
+
+      // Check that point labels are rendered (4 points = "3 pts", "2 pts", "1 pt", "0 pt")
+      // Note: The PointConfig component uses singular "pt" for 0 and 1, plural "pts" for 2+
+      expect(screen.getByText('3 pts')).toBeInTheDocument();
+      expect(screen.getByText('2 pts')).toBeInTheDocument();
+      expect(screen.getByText('1 pt')).toBeInTheDocument();
+      expect(screen.getByText('0 pt')).toBeInTheDocument();
+    });
+
+    describe('draggable', () => {
+      it('renders 3 draggable items when excludeZero is true', () => {
+        const { container } = renderComponent({ excludeZero: true });
+
+        // When excludeZero is true, the last point (0 pts) should not be rendered
+        // So we should have 3 draggable items
+        const draggableItems = container.querySelectorAll('[data-draggable-index]');
+        expect(draggableItems.length).toEqual(3);
+
+        // Verify the 0 pt label is not rendered
+        expect(screen.queryByText('0 pt')).not.toBeInTheDocument();
+      });
+
+      it('renders 4 draggable items when excludeZero is false', () => {
+        const { container } = renderComponent({ excludeZero: false });
+
+        // When excludeZero is false, all points including 0 should be rendered
+        const draggableItems = container.querySelectorAll('[data-draggable-index]');
+        expect(draggableItems.length).toEqual(4);
+
+        // Verify all point labels are rendered
+        expect(screen.getByText('3 pts')).toBeInTheDocument();
+        expect(screen.getByText('2 pts')).toBeInTheDocument();
+        expect(screen.getByText('1 pt')).toBeInTheDocument();
+        expect(screen.getByText('0 pt')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('logic', () => {
+    describe('changeMaxPoints', () => {
+      const testChangeMaxPoints = (maxPoints, excludeZero, expectedPoints, expectedSampleAnswers) => {
+        it(`maxPoints=${maxPoints}, excludeZero=${excludeZero} calls onChange correctly`, () => {
+          const { onChange, container } = renderComponent({ excludeZero });
+
+          // Get the component instance through the container
+          // We need to call the method directly since we're testing internal behavior
+          const instance = container.querySelector('[class*="MuiBox-root"]')?._owner;
+
+          // Since we can't easily access instance methods in RTL, we'll test the behavior
+          // by verifying the onChange prop receives the correct values
+          // For now, we'll directly test the logic
+          const component = new RawAuthoring({
+            value: { excludeZero, points, sampleAnswers },
+            onChange,
+            classes: {},
+            className: 'className'
+          });
+
+          component.changeMaxPoints(maxPoints);
+
+          expect(onChange).toHaveBeenCalledWith({
+            excludeZero,
+            points: expectedPoints,
+            sampleAnswers: expectedSampleAnswers,
+            maxPoints: expectedPoints.length - 1,
+          });
+        });
+      };
+
+      testChangeMaxPoints(1, false, _.takeRight(points, 2), _.takeRight(sampleAnswers, 2));
+      testChangeMaxPoints(1, true, _.takeRight(points, 2), _.takeRight(sampleAnswers, 2));
+      testChangeMaxPoints(2, true, _.takeRight(points, 3), _.takeRight(sampleAnswers, 3));
+      testChangeMaxPoints(2, false, _.takeRight(points, 3), _.takeRight(sampleAnswers, 3));
+      testChangeMaxPoints(5, false, ['', ''].concat(points), [null, null].concat(sampleAnswers));
+    });
+
+    describe('changeSampleResponse', () => {
+      const testChangeSampleResponse = (index, clickedItem, excludeZero, expectedPoints, expectedSampleAnswers) => {
+        it(`Point ${index} with clickedItem="${clickedItem}" calls onChange correctly`, () => {
+          const { onChange } = renderComponent({ excludeZero });
+
+          // Test the logic by creating a component instance and calling the method
+          const component = new RawAuthoring({
+            value: { excludeZero, points, sampleAnswers },
+            onChange,
+            classes: {},
+            className: 'className'
+          });
+
+          component.onPointMenuChange(index, clickedItem);
+
+          expect(onChange).toHaveBeenCalledWith({
+            excludeZero,
+            points: expectedPoints,
+            sampleAnswers: expectedSampleAnswers,
+          });
+        });
+      };
+
+      testChangeSampleResponse(0, 'sample', false, points, ['', 'just right', 'not left', null]);
+      testChangeSampleResponse(3, 'sample', false, points, [null, 'just right', 'not left', '']);
+      testChangeSampleResponse(1, 'sample', true, points, [null, null, 'not left', null]);
+      testChangeSampleResponse(3, 'sample', true, points, [null, 'just right', 'not left', '']);
+    });
+  });
+});