@instructure/outcomes-ui 4.1.3 → 4.1.5

package/es/components/Gradebook/dialogs/MessageStudentsWhoDialog/Pill.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Tag } from '@instructure/ui-tag';
+import { Text } from '@instructure/ui-text';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { Flex } from '@instructure/ui-flex';
+import { IconAddSolid, IconXSolid } from '@instructure/ui-icons';
+import { InstUISettingsProvider } from '@instructure/emotion';
+import { TruncateText } from '@instructure/ui-truncate-text';
+import t from 'format-message';
+var componentOverrides = {
+  Tag: {
+    defaultBackground: 'white'
+  }
+};
+var ellipsis = function ellipsis() {
+  return t('…');
+};
+var truncate = function truncate(text) {
+  return text.length > 14 ? text.slice(0, 13) + ellipsis() : text;
+};
+function renderText(text, truncatedText, textColor) {
+  var isTruncated = text.length > truncatedText.length;
+  if (isTruncated) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      renderTip: text
+    }, /*#__PURE__*/React.createElement(Text, {
+      as: "div",
+      color: textColor
+    }, /*#__PURE__*/React.createElement(TruncateText, null, truncatedText)));
+  } else {
+    return /*#__PURE__*/React.createElement(Text, {
+      as: "div",
+      color: textColor
+    }, /*#__PURE__*/React.createElement(TruncateText, null, text));
+  }
+}
+function renderIcon(selected) {
+  if (selected) {
+    return /*#__PURE__*/React.createElement(IconXSolid, {
+      "data-testid": "item-selected"
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(IconAddSolid, {
+      "data-testid": "item-unselected",
+      color: "brand"
+    });
+  }
+}
+var Pill = function Pill(_ref) {
+  var studentId = _ref.studentId,
+    observerId = _ref.observerId,
+    text = _ref.text,
+    _onClick = _ref.onClick,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected;
+  var textColor = selected ? 'primary' : 'secondary';
+  var truncatedText = truncate(text);
+  var testId = observerId ? 'observer-pill' : 'student-pill';
+  var ariaLabel = selected ? t('Remove { text }', {
+    text: text
+  }) : t('Add { text }', {
+    text: text
+  });
+  var contents = /*#__PURE__*/React.createElement(Flex, {
+    as: "div",
+    margin: "0 xxx-small 0 0",
+    justifyItems: "space-between"
+  }, /*#__PURE__*/React.createElement(Flex.Item, {
+    size: "0.75rem",
+    shouldGrow: true,
+    margin: "0 xx-small 0 0",
+    overflowX: "hidden",
+    "aria-label": ariaLabel
+  }, renderText(text, truncatedText, textColor)), /*#__PURE__*/React.createElement(Flex.Item, {
+    padding: "0 0 xxx-small 0"
+  }, renderIcon(selected)));
+  return /*#__PURE__*/React.createElement(InstUISettingsProvider, {
+    theme: {
+      componentOverrides: componentOverrides
+    }
+  }, /*#__PURE__*/React.createElement(Tag, {
+    text: contents,
+    "data-testid": testId,
+    onClick: function onClick() {
+      if (observerId !== void 0) {
+        _onClick(studentId, observerId);
+      } else {
+        _onClick(studentId);
+      }
+    }
+  }));
+};
+export default Pill;

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

@@ -0,0 +1,524 @@
+import _regenerator from "@babel/runtime/helpers/esm/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import MessageStudentsWhoDialog from "../../../../../../lib/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.createElement(React.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.setup();
+  render(/*#__PURE__*/React.createElement(MessageStudentsWhoDialog, Object.assign({}, defaultProps, props)));
+  return {
+    user: user
+  };
+};
+var studentCheckbox = function studentCheckbox() {
+  return screen.getByTestId('total-student-checkbox');
+};
+var observerCheckbox = function observerCheckbox() {
+  return screen.getByTestId('total-observer-checkbox');
+};
+var messageInput = function messageInput() {
+  return screen.getByTestId('message-input');
+};
+var subjectInput = function subjectInput() {
+  return 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) {
+  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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var _renderDialog, user;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            _renderDialog = renderDialog(), user = _renderDialog.user;
+            _context.n = 1;
+            return user.click(screen.getByTestId('send-message-button'));
+          case 1:
+            expect(defaultProps.onSend).not.toHaveBeenCalled();
+            expect(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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+      var _renderDialog2, user;
+      return _regenerator().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(screen.getByTestId('send-message-button'));
+          case 2:
+            expect(defaultProps.onSend).not.toHaveBeenCalled();
+            expect(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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+      var _renderDialog3, user;
+      return _regenerator().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(screen.getByTestId('send-message-button'));
+          case 2:
+            expect(screen.getByText('Please select at least one recipient.')).toBeInTheDocument();
+            expect(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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var _renderDialog4, user;
+      return _regenerator().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(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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+      var _renderDialog5, user;
+      return _regenerator().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(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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+      var _renderDialog6, user;
+      return _regenerator().w(function (_context6) {
+        while (1) switch (_context6.n) {
+          case 0:
+            _renderDialog6 = renderDialog(), user = _renderDialog6.user;
+            fillInput(messageInput(), 'Hello');
+            _context6.n = 1;
+            return user.click(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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+      var _renderDialog7, user;
+      return _regenerator().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(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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+      var _renderDialog8, user, call, ids;
+      return _regenerator().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(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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+      var _renderDialog9, user;
+      return _regenerator().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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+      var _renderDialog0, user;
+      return _regenerator().w(function (_context0) {
+        while (1) switch (_context0.n) {
+          case 0:
+            _renderDialog0 = renderDialog(), user = _renderDialog0.user;
+            _context0.n = 1;
+            return user.click(screen.getByTestId('show_all_recipients'));
+          case 1:
+            _context0.n = 2;
+            return user.click(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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
+      var _renderDialog1, user, call;
+      return _regenerator().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(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__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10() {
+      var _renderDialog10, user, call;
+      return _regenerator().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(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(screen.queryByText('Students')).not.toBeInTheDocument();
+    });
+    it('shows when "Show all recipients" is clicked', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11() {
+      var _renderDialog11, user;
+      return _regenerator().w(function (_context11) {
+        while (1) switch (_context11.n) {
+          case 0:
+            _renderDialog11 = renderDialog(), user = _renderDialog11.user;
+            _context11.n = 1;
+            return user.click(screen.getByTestId('show_all_recipients'));
+          case 1:
+            expect(screen.getByText('Students')).toBeInTheDocument();
+            expect(screen.getByText('Alice')).toBeInTheDocument();
+          case 2:
+            return _context11.a(2);
+        }
+      }, _callee11);
+    })));
+    it('hides again when clicked a second time', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee12() {
+      var _renderDialog12, user;
+      return _regenerator().w(function (_context12) {
+        while (1) switch (_context12.n) {
+          case 0:
+            _renderDialog12 = renderDialog(), user = _renderDialog12.user;
+            _context12.n = 1;
+            return user.click(screen.getByTestId('show_all_recipients'));
+          case 1:
+            _context12.n = 2;
+            return user.click(screen.getByTestId('show_all_recipients'));
+          case 2:
+            expect(screen.queryByText('Students')).not.toBeInTheDocument();
+          case 3:
+            return _context12.a(2);
+        }
+      }, _callee12);
+    })));
+    it('shows observer pills in the table when observers are provided', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee13() {
+      var _renderDialog13, user;
+      return _regenerator().w(function (_context13) {
+        while (1) switch (_context13.n) {
+          case 0:
+            _renderDialog13 = renderDialog({
+              observersByStudentID: observersByStudentID
+            }), user = _renderDialog13.user;
+            _context13.n = 1;
+            return user.click(screen.getByTestId('show_all_recipients'));
+          case 1:
+            expect(screen.getByText('Alice Parent')).toBeInTheDocument();
+            expect(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(screen.getByTitle('Loading')).toBeInTheDocument();
+    });
+    it('hides the form while observers are loading', function () {
+      renderDialog({
+        isLoadingObservers: true
+      });
+      expect(screen.queryByRole('textbox', {
+        name: 'Message'
+      })).not.toBeInTheDocument();
+      expect(screen.queryByRole('textbox', {
+        name: 'Subject'
+      })).not.toBeInTheDocument();
+    });
+  });
+  describe('File attachment button', function () {
+    it('is not rendered when onAddAttachment is not provided', function () {
+      renderDialog();
+      expect(screen.queryByTestId('attachment-upload')).not.toBeInTheDocument();
+    });
+    it('is rendered when onAddAttachment is provided', function () {
+      renderDialog({
+        onAddAttachment: jest.fn(),
+        onDeleteAttachment: jest.fn()
+      });
+      expect(screen.getByTestId('attachment-upload')).toBeInTheDocument();
+    });
+  });
+  describe('Media recording button', function () {
+    it('is not rendered when userId is not provided', function () {
+      renderDialog();
+      expect(screen.queryByTestId('media-upload')).not.toBeInTheDocument();
+    });
+    it('is rendered when userId is provided', function () {
+      renderDialog({
+        userId: 'user-123'
+      });
+      expect(screen.getByTestId('media-upload')).toBeInTheDocument();
+    });
+    it('is enabled by default before any recording is attached', function () {
+      renderDialog({
+        userId: 'user-123'
+      });
+      expect(screen.getByTestId('media-upload')).not.toBeDisabled();
+    });
+  });
+});