@instructure/outcomes-ui 4.1.2 → 4.1.4

package/lib/components/Gradebook/dialogs/MessageStudentsWhoDialog/__tests__/index.test.js

@@ -0,0 +1,527 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _regenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+var _index = _interopRequireDefault(require("../index.js"));
+jest.mock('format-message', function () {
+  return function (msg) {
+    return msg;
+  };
+});
+jest.mock('@instructure/ui-tooltip', function () {
+  return {
+    Tooltip: function Tooltip(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+    }
+  };
+});
+var mockSelection = {
+  removeAllRanges: function removeAllRanges() {},
+  addRange: function addRange() {},
+  getRangeAt: function getRangeAt() {
+    return null;
+  },
+  setBaseAndExtent: function setBaseAndExtent() {},
+  rangeCount: 0,
+  focusNode: null,
+  isCollapsed: true,
+  toString: function toString() {
+    return '';
+  }
+};
+beforeAll(function () {
+  window.getSelection = function () {
+    return mockSelection;
+  };
+  Document.prototype.getSelection = function () {
+    return mockSelection;
+  };
+  document.createRange = function () {
+    return {
+      setStart: function setStart() {},
+      setEnd: function setEnd() {},
+      commonAncestorContainer: {
+        nodeName: 'BODY',
+        ownerDocument: document
+      },
+      getBoundingClientRect: function getBoundingClientRect() {
+        return {
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          width: 0,
+          height: 0
+        };
+      },
+      getClientRects: function getClientRects() {
+        return [];
+      },
+      collapse: function collapse() {},
+      cloneRange: function cloneRange() {
+        return document.createRange();
+      }
+    };
+  };
+});
+var makeStudent = function makeStudent(id, name) {
+  return {
+    id: id,
+    name: name,
+    sortableName: name,
+    submittedAt: null,
+    workflowState: 'graded'
+  };
+};
+var students = [makeStudent('1', 'Alice'), makeStudent('2', 'Bob'), makeStudent('3', 'Carol')];
+var observersByStudentID = {
+  '1': [{
+    id: 'obs-1',
+    name: 'Alice Parent',
+    sortableName: 'Parent, Alice'
+  }],
+  '2': [{
+    id: 'obs-2',
+    name: 'Bob Guardian',
+    sortableName: 'Guardian, Bob'
+  }, {
+    id: 'obs-3',
+    name: 'Bob Guardian 2',
+    sortableName: 'Guardian 2, Bob'
+  }]
+};
+var defaultProps = {
+  students: students,
+  onClose: jest.fn(),
+  onSend: jest.fn()
+};
+var renderDialog = function renderDialog() {
+  var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+  var user = _userEvent.default.setup();
+  (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.default, Object.assign({}, defaultProps, props)));
+  return {
+    user: user
+  };
+};
+var studentCheckbox = function studentCheckbox() {
+  return _react2.screen.getByTestId('total-student-checkbox');
+};
+var observerCheckbox = function observerCheckbox() {
+  return _react2.screen.getByTestId('total-observer-checkbox');
+};
+var messageInput = function messageInput() {
+  return _react2.screen.getByTestId('message-input');
+};
+var subjectInput = function subjectInput() {
+  return _react2.screen.getByTestId('subject-input');
+};
+
+// userEvent.type() causes infinite recursion with InstUI TextArea/TextInput on jsdom 15
+// (bundled by jest-environment-jsdom 25.x). Use fireEvent.change as a workaround.
+var fillInput = function fillInput(element, value) {
+  _react2.fireEvent.change(element, {
+    target: {
+      value: value
+    }
+  });
+};
+describe('MessageStudentsWhoDialog', function () {
+  beforeEach(function () {
+    return jest.clearAllMocks();
+  });
+  describe('Send validation', function () {
+    it('does not call onSend and shows message error when message is empty', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee() {
+      var _renderDialog, user;
+      return (0, _regenerator2.default)().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            _renderDialog = renderDialog(), user = _renderDialog.user;
+            _context.n = 1;
+            return user.click(_react2.screen.getByTestId('send-message-button'));
+          case 1:
+            expect(defaultProps.onSend).not.toHaveBeenCalled();
+            expect(_react2.screen.getByText('A message is required to send this message.')).toBeInTheDocument();
+          case 2:
+            return _context.a(2);
+        }
+      }, _callee);
+    })));
+    it('does not call onSend and shows recipient error when all students are deselected', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee2() {
+      var _renderDialog2, user;
+      return (0, _regenerator2.default)().w(function (_context2) {
+        while (1) switch (_context2.n) {
+          case 0:
+            _renderDialog2 = renderDialog(), user = _renderDialog2.user;
+            _context2.n = 1;
+            return user.click(studentCheckbox());
+          case 1:
+            fillInput(messageInput(), 'Hello');
+            _context2.n = 2;
+            return user.click(_react2.screen.getByTestId('send-message-button'));
+          case 2:
+            expect(defaultProps.onSend).not.toHaveBeenCalled();
+            expect(_react2.screen.getByText('Please select at least one recipient.')).toBeInTheDocument();
+          case 3:
+            return _context2.a(2);
+        }
+      }, _callee2);
+    })));
+    it('shows both errors when message is empty and no recipients are selected', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee3() {
+      var _renderDialog3, user;
+      return (0, _regenerator2.default)().w(function (_context3) {
+        while (1) switch (_context3.n) {
+          case 0:
+            _renderDialog3 = renderDialog(), user = _renderDialog3.user;
+            _context3.n = 1;
+            return user.click(studentCheckbox());
+          case 1:
+            _context3.n = 2;
+            return user.click(_react2.screen.getByTestId('send-message-button'));
+          case 2:
+            expect(_react2.screen.getByText('Please select at least one recipient.')).toBeInTheDocument();
+            expect(_react2.screen.getByText('A message is required to send this message.')).toBeInTheDocument();
+          case 3:
+            return _context3.a(2);
+        }
+      }, _callee3);
+    })));
+  });
+  describe('Sending', function () {
+    it('calls onSend with all student IDs and message body', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee4() {
+      var _renderDialog4, user;
+      return (0, _regenerator2.default)().w(function (_context4) {
+        while (1) switch (_context4.n) {
+          case 0:
+            _renderDialog4 = renderDialog(), user = _renderDialog4.user;
+            fillInput(messageInput(), 'Please review your work.');
+            _context4.n = 1;
+            return user.click(_react2.screen.getByTestId('send-message-button'));
+          case 1:
+            expect(defaultProps.onSend).toHaveBeenCalledWith(expect.objectContaining({
+              recipientsIds: expect.arrayContaining(['1', '2', '3']),
+              body: 'Please review your work.'
+            }));
+          case 2:
+            return _context4.a(2);
+        }
+      }, _callee4);
+    })));
+    it('includes subject in onSend args', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee5() {
+      var _renderDialog5, user;
+      return (0, _regenerator2.default)().w(function (_context5) {
+        while (1) switch (_context5.n) {
+          case 0:
+            _renderDialog5 = renderDialog(), user = _renderDialog5.user;
+            fillInput(subjectInput(), 'Feedback');
+            fillInput(messageInput(), 'Great job!');
+            _context5.n = 1;
+            return user.click(_react2.screen.getByTestId('send-message-button'));
+          case 1:
+            expect(defaultProps.onSend).toHaveBeenCalledWith(expect.objectContaining({
+              subject: 'Feedback'
+            }));
+          case 2:
+            return _context5.a(2);
+        }
+      }, _callee5);
+    })));
+    it('sends empty string for subject when not filled in', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee6() {
+      var _renderDialog6, user;
+      return (0, _regenerator2.default)().w(function (_context6) {
+        while (1) switch (_context6.n) {
+          case 0:
+            _renderDialog6 = renderDialog(), user = _renderDialog6.user;
+            fillInput(messageInput(), 'Hello');
+            _context6.n = 1;
+            return user.click(_react2.screen.getByTestId('send-message-button'));
+          case 1:
+            expect(defaultProps.onSend).toHaveBeenCalledWith(expect.objectContaining({
+              subject: ''
+            }));
+          case 2:
+            return _context6.a(2);
+        }
+      }, _callee6);
+    })));
+    it('includes attachment IDs when attachments are provided', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee7() {
+      var _renderDialog7, user;
+      return (0, _regenerator2.default)().w(function (_context7) {
+        while (1) switch (_context7.n) {
+          case 0:
+            _renderDialog7 = renderDialog({
+              onAddAttachment: jest.fn(),
+              onDeleteAttachment: jest.fn(),
+              attachments: [{
+                id: 'att-1',
+                display_name: 'file.pdf',
+                mime_class: 'pdf'
+              }, {
+                id: 'att-2',
+                display_name: 'notes.docx',
+                mime_class: 'doc'
+              }]
+            }), user = _renderDialog7.user;
+            fillInput(messageInput(), 'See attached.');
+            _context7.n = 1;
+            return user.click(_react2.screen.getByTestId('send-message-button'));
+          case 1:
+            expect(defaultProps.onSend).toHaveBeenCalledWith(expect.objectContaining({
+              attachmentIds: ['att-1', 'att-2']
+            }));
+          case 2:
+            return _context7.a(2);
+        }
+      }, _callee7);
+    })));
+    it('deduplicates recipient IDs if observers overlap with students', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee8() {
+      var _renderDialog8, user, call, ids;
+      return (0, _regenerator2.default)().w(function (_context8) {
+        while (1) switch (_context8.n) {
+          case 0:
+            _renderDialog8 = renderDialog({
+              observersByStudentID: {
+                '1': [{
+                  id: '1',
+                  name: 'Parent',
+                  sortableName: 'Parent'
+                }]
+              }
+            }), user = _renderDialog8.user;
+            _context8.n = 1;
+            return user.click(observerCheckbox());
+          case 1:
+            fillInput(messageInput(), 'Hello');
+            _context8.n = 2;
+            return user.click(_react2.screen.getByTestId('send-message-button'));
+          case 2:
+            call = defaultProps.onSend.mock.calls[0][0];
+            ids = call.recipientsIds;
+            expect(ids.length).toBe(new Set(ids).size);
+          case 3:
+            return _context8.a(2);
+        }
+      }, _callee8);
+    })));
+  });
+  describe('Student checkbox', function () {
+    it('starts with all students selected', function () {
+      renderDialog();
+      expect(studentCheckbox().checked).toBe(true);
+      expect(studentCheckbox().indeterminate).toBe(false);
+    });
+    it('deselects all students when unchecked', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee9() {
+      var _renderDialog9, user;
+      return (0, _regenerator2.default)().w(function (_context9) {
+        while (1) switch (_context9.n) {
+          case 0:
+            _renderDialog9 = renderDialog(), user = _renderDialog9.user;
+            _context9.n = 1;
+            return user.click(studentCheckbox());
+          case 1:
+            expect(studentCheckbox().checked).toBe(false);
+          case 2:
+            return _context9.a(2);
+        }
+      }, _callee9);
+    })));
+    it('becomes indeterminate after one student is deselected via the table', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee0() {
+      var _renderDialog0, user;
+      return (0, _regenerator2.default)().w(function (_context0) {
+        while (1) switch (_context0.n) {
+          case 0:
+            _renderDialog0 = renderDialog(), user = _renderDialog0.user;
+            _context0.n = 1;
+            return user.click(_react2.screen.getByTestId('show_all_recipients'));
+          case 1:
+            _context0.n = 2;
+            return user.click(_react2.screen.getByText('Alice'));
+          case 2:
+            expect(studentCheckbox().indeterminate).toBe(true);
+          case 3:
+            return _context0.a(2);
+        }
+      }, _callee0);
+    })));
+    it('is disabled when there are no students', function () {
+      renderDialog({
+        students: []
+      });
+      expect(studentCheckbox().disabled).toBe(true);
+    });
+  });
+  describe('Observer checkbox', function () {
+    it('is disabled when no observers are provided', function () {
+      renderDialog();
+      expect(observerCheckbox().disabled).toBe(true);
+    });
+    it('is enabled when observers are provided', function () {
+      renderDialog({
+        observersByStudentID: observersByStudentID
+      });
+      expect(observerCheckbox().disabled).toBe(false);
+    });
+    it('checking includes all observer IDs in the send call', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee1() {
+      var _renderDialog1, user, call;
+      return (0, _regenerator2.default)().w(function (_context1) {
+        while (1) switch (_context1.n) {
+          case 0:
+            _renderDialog1 = renderDialog({
+              observersByStudentID: observersByStudentID
+            }), user = _renderDialog1.user;
+            _context1.n = 1;
+            return user.click(observerCheckbox());
+          case 1:
+            fillInput(messageInput(), 'Hello observers');
+            _context1.n = 2;
+            return user.click(_react2.screen.getByTestId('send-message-button'));
+          case 2:
+            call = defaultProps.onSend.mock.calls[0][0];
+            expect(call.recipientsIds).toContain('obs-1');
+            expect(call.recipientsIds).toContain('obs-2');
+            expect(call.recipientsIds).toContain('obs-3');
+          case 3:
+            return _context1.a(2);
+        }
+      }, _callee1);
+    })));
+    it('unchecking removes all observers from recipients', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee10() {
+      var _renderDialog10, user, call;
+      return (0, _regenerator2.default)().w(function (_context10) {
+        while (1) switch (_context10.n) {
+          case 0:
+            _renderDialog10 = renderDialog({
+              observersByStudentID: observersByStudentID
+            }), user = _renderDialog10.user;
+            _context10.n = 1;
+            return user.click(observerCheckbox());
+          case 1:
+            _context10.n = 2;
+            return user.click(observerCheckbox());
+          case 2:
+            fillInput(messageInput(), 'Students only');
+            _context10.n = 3;
+            return user.click(_react2.screen.getByTestId('send-message-button'));
+          case 3:
+            call = defaultProps.onSend.mock.calls[0][0];
+            expect(call.recipientsIds).not.toContain('obs-1');
+          case 4:
+            return _context10.a(2);
+        }
+      }, _callee10);
+    })));
+  });
+  describe('Recipients table', function () {
+    it('is hidden by default', function () {
+      renderDialog();
+      expect(_react2.screen.queryByText('Students')).not.toBeInTheDocument();
+    });
+    it('shows when "Show all recipients" is clicked', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee11() {
+      var _renderDialog11, user;
+      return (0, _regenerator2.default)().w(function (_context11) {
+        while (1) switch (_context11.n) {
+          case 0:
+            _renderDialog11 = renderDialog(), user = _renderDialog11.user;
+            _context11.n = 1;
+            return user.click(_react2.screen.getByTestId('show_all_recipients'));
+          case 1:
+            expect(_react2.screen.getByText('Students')).toBeInTheDocument();
+            expect(_react2.screen.getByText('Alice')).toBeInTheDocument();
+          case 2:
+            return _context11.a(2);
+        }
+      }, _callee11);
+    })));
+    it('hides again when clicked a second time', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee12() {
+      var _renderDialog12, user;
+      return (0, _regenerator2.default)().w(function (_context12) {
+        while (1) switch (_context12.n) {
+          case 0:
+            _renderDialog12 = renderDialog(), user = _renderDialog12.user;
+            _context12.n = 1;
+            return user.click(_react2.screen.getByTestId('show_all_recipients'));
+          case 1:
+            _context12.n = 2;
+            return user.click(_react2.screen.getByTestId('show_all_recipients'));
+          case 2:
+            expect(_react2.screen.queryByText('Students')).not.toBeInTheDocument();
+          case 3:
+            return _context12.a(2);
+        }
+      }, _callee12);
+    })));
+    it('shows observer pills in the table when observers are provided', /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regenerator2.default)().m(function _callee13() {
+      var _renderDialog13, user;
+      return (0, _regenerator2.default)().w(function (_context13) {
+        while (1) switch (_context13.n) {
+          case 0:
+            _renderDialog13 = renderDialog({
+              observersByStudentID: observersByStudentID
+            }), user = _renderDialog13.user;
+            _context13.n = 1;
+            return user.click(_react2.screen.getByTestId('show_all_recipients'));
+          case 1:
+            expect(_react2.screen.getByText('Alice Parent')).toBeInTheDocument();
+            expect(_react2.screen.getByText('Bob Guardian')).toBeInTheDocument();
+          case 2:
+            return _context13.a(2);
+        }
+      }, _callee13);
+    })));
+  });
+  describe('Loading state', function () {
+    it('shows a spinner when isLoadingObservers is true', function () {
+      renderDialog({
+        isLoadingObservers: true
+      });
+      expect(_react2.screen.getByTitle('Loading')).toBeInTheDocument();
+    });
+    it('hides the form while observers are loading', function () {
+      renderDialog({
+        isLoadingObservers: true
+      });
+      expect(_react2.screen.queryByRole('textbox', {
+        name: 'Message'
+      })).not.toBeInTheDocument();
+      expect(_react2.screen.queryByRole('textbox', {
+        name: 'Subject'
+      })).not.toBeInTheDocument();
+    });
+  });
+  describe('File attachment button', function () {
+    it('is not rendered when onAddAttachment is not provided', function () {
+      renderDialog();
+      expect(_react2.screen.queryByTestId('attachment-upload')).not.toBeInTheDocument();
+    });
+    it('is rendered when onAddAttachment is provided', function () {
+      renderDialog({
+        onAddAttachment: jest.fn(),
+        onDeleteAttachment: jest.fn()
+      });
+      expect(_react2.screen.getByTestId('attachment-upload')).toBeInTheDocument();
+    });
+  });
+  describe('Media recording button', function () {
+    it('is not rendered when userId is not provided', function () {
+      renderDialog();
+      expect(_react2.screen.queryByTestId('media-upload')).not.toBeInTheDocument();
+    });
+    it('is rendered when userId is provided', function () {
+      renderDialog({
+        userId: 'user-123'
+      });
+      expect(_react2.screen.getByTestId('media-upload')).toBeInTheDocument();
+    });
+    it('is enabled by default before any recording is attached', function () {
+      renderDialog({
+        userId: 'user-123'
+      });
+      expect(_react2.screen.getByTestId('media-upload')).not.toBeDisabled();
+    });
+  });
+});

package/lib/components/Gradebook/dialogs/MessageStudentsWhoDialog/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { Student, SendMessageArgs, ObserverUser } from './types';
+import { type Attachment } from './messageAttachments';
+export type { Student, SendMessageArgs, ObserverUser };
+export type Props = {
+    onClose: () => void;
+    students: Student[];
+    onSend: (args: SendMessageArgs) => void;
+    attachments?: Attachment[];
+    pendingUploads?: Attachment[];
+    onAddAttachment?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onDeleteAttachment?: (id: string) => void;
+    observersByStudentID?: Record<string, ObserverUser[]>;
+    isLoadingObservers?: boolean;
+    userId?: string;
+};
+declare const MessageStudentsWhoDialog: ({ onClose, students, onSend, attachments, pendingUploads, onAddAttachment, onDeleteAttachment, observersByStudentID, isLoadingObservers, userId, }: Props) => React.JSX.Element;
+export default MessageStudentsWhoDialog;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Gradebook/dialogs/MessageStudentsWhoDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/dialogs/MessageStudentsWhoDialog/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAsBhD,OAAO,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAErE,OAAO,EACL,KAAK,UAAU,EAIhB,MAAM,sBAAsB,CAAA;AAS7B,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,CAAA;AAwBtD,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,MAAM,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IACvC,WAAW,CAAC,EAAE,UAAU,EAAE,CAAA;IAC1B,cAAc,CAAC,EAAE,UAAU,EAAE,CAAA;IAC7B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAClE,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,oBAAoB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IACrD,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,QAAA,MAAM,wBAAwB,GAAI,oJAW/B,KAAK,sBAsYP,CAAA;AAED,eAAe,wBAAwB,CAAA"}