@instructure/outcomes-ui 2.1.4 → 2.1.5

package/es/translated/zh-Hant/util/__tests__/outcomesReportUtils.test.js

@@ -0,0 +1,104 @@
+import { expect } from 'chai';
+import { formatDataIntoRow, hasMastery, fileName, getDate, formatPercentage } from "../outcomesReportUtils.js";
+import { STUDENT_NAME, STUDENT_UUID, ATTEMPT_COUNT, ALIGNED_QUESTIONS_COUNT, LOR_POINTS, LOR_POINTS_POSSIBLE, LO_NAME, LO_ID, LO_MASTERY_PERCENT, LO_MASTERED } from "../../constants.js";
+var user1 = {
+  uuid: 'user1-uuid',
+  full_name: 'Student 1'
+};
+var user2 = {
+  uuid: 'user2-uuid',
+  full_name: 'Student 2'
+};
+var rollup = {
+  outcomeId: '1',
+  childArtifactCount: 1,
+  usesBank: false
+};
+var outcome = {
+  id: '1',
+  guid: 'outcome-guid',
+  group: false,
+  label: 'outcome friendly name',
+  title: 'outcome name',
+  description: 'outcome description',
+  external_id: 10,
+  scoring_method: {
+    algorithm: 'average',
+    algorithm_data: {},
+    mastery_percent: 0.6,
+    points_possible: 5
+  }
+};
+var masteryResult = {
+  userId: user1.uuid,
+  percentScore: 0.6667,
+  points: 2,
+  pointsPossible: 3,
+  attempt: 1
+};
+var nonMasteryResult = {
+  userId: user2.uuid,
+  percentScore: 0.3333,
+  points: 1,
+  pointsPossible: 3,
+  attempt: 1
+};
+describe('outcomesReportUtils', function () {
+  describe('formatDataInRow', function () {
+    it('returns the correct value for each row header', function () {
+      var formattedRow = formatDataIntoRow(user1, outcome, rollup, masteryResult);
+      expect(formattedRow[STUDENT_NAME]).to.eq(user1.full_name);
+      expect(formattedRow[STUDENT_UUID]).to.eq(user1.uuid);
+      expect(formattedRow[ATTEMPT_COUNT]).to.eq(masteryResult.attempt);
+      expect(formattedRow[ALIGNED_QUESTIONS_COUNT]).to.eq(rollup.childArtifactCount);
+      expect(formattedRow[LOR_POINTS]).to.eq(masteryResult.points);
+      expect(formattedRow[LOR_POINTS_POSSIBLE]).to.eq(masteryResult.pointsPossible);
+      expect(formattedRow[LO_NAME]).to.eq(outcome.title);
+      expect(formattedRow[LO_ID]).to.eq(outcome.id);
+      expect(formattedRow[LO_MASTERY_PERCENT]).to.eq(outcome.scoring_method.mastery_percent);
+      expect(formattedRow[LO_MASTERED]).to.be.true;
+      expect(Object.keys(formattedRow).length).eq(10);
+    });
+    describe('for aligned questions count row', function () {
+      it('returns Variable Questions for aligned questions count if a bank was used', function () {
+        var usesBank = {
+          outcomeId: '1',
+          usesBank: true
+        };
+        var formattedRow = formatDataIntoRow(user1, outcome, usesBank, masteryResult);
+        expect(formattedRow[ALIGNED_QUESTIONS_COUNT]).to.eq('Variable Questions');
+      });
+    });
+  });
+  describe('hasMastery', function () {
+    it('returns true if the student achieved mastery for the given outcome', function () {
+      expect(hasMastery(masteryResult, outcome)).to.be.true;
+    });
+    it('returns false if the student did not reach mastery for the given outcome', function () {
+      expect(hasMastery(nonMasteryResult, outcome)).to.be.false;
+    });
+  });
+  describe('fileName', function () {
+    it('returns the file name for the csv report', function () {
+      var name = fileName(1);
+      expect(name.includes('outcome_analysis_csv_')).to.be.true;
+      expect(name.includes('_quiz_1.csv')).to.be.true;
+    });
+  });
+  describe('getDate', function () {
+    // Regex for yyyy-mm-dd format was found here:
+    // https://stackoverflow.com/questions/22061723/regex-date-validation-for-yyyy-mm-dd
+    it('returns the date in yyyy-mm-dd format', function () {
+      expect(getDate().match(/^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/)).not.to.empty;
+    });
+  });
+  describe('formatPercentage', function () {
+    it('formats two numbers into a percentage', function () {
+      expect(formatPercentage(50, 100)).to.eq(50);
+      expect(formatPercentage(5, 10)).to.eq(50);
+    });
+    it('formats two numbers into a percentage and rounds', function () {
+      expect(formatPercentage(1, 3)).to.eq(33);
+    });
+  });
+});

package/es/translated/zh-Hant/util/flashAlertUtils.js

@@ -0,0 +1,30 @@
+export function findDetailMessage(err) {
+  var a = err.message;
+  var b;
+
+  if (err.response) {
+    if (err.response.data) {
+      try {
+        if (Array.isArray(err.response.data.errors)) {
+          // probably a canvas api
+          a = err.response.data.errors[0].message;
+          b = err.message;
+        } else if (err.response.data.message) {
+          // probably a canvas api too
+          a = err.response.data.message;
+          b = err.message;
+        }
+      } catch (ignore) {
+        a = err.message;
+      }
+    }
+  }
+
+  return {
+    a: a,
+    b: b
+  };
+}
+export var isLoadingChunkError = function isLoadingChunkError(a) {
+  return typeof a === 'string' && a.toLowerCase().includes('loading chunk');
+};

package/es/translated/zh-Hant/util/outcomesReportUtils.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { STUDENT_NAME, STUDENT_UUID, ATTEMPT_COUNT, ALIGNED_QUESTIONS_COUNT, LOR_POINTS, LOR_POINTS_POSSIBLE, LO_NAME, LO_ID, LO_MASTERY_PERCENT, LO_MASTERED } from "../constants.js";
+export var formatDataIntoRow = function formatDataIntoRow(user, outcome, rollup, result) {
+  var _ref;
+
+  return _ref = {}, _defineProperty(_ref, STUDENT_NAME, user.full_name), _defineProperty(_ref, STUDENT_UUID, user.uuid), _defineProperty(_ref, ATTEMPT_COUNT, result.attempt), _defineProperty(_ref, ALIGNED_QUESTIONS_COUNT, getAlignedQuestionsCount(rollup)), _defineProperty(_ref, LOR_POINTS, result.points), _defineProperty(_ref, LOR_POINTS_POSSIBLE, result.pointsPossible), _defineProperty(_ref, LO_NAME, outcome.title), _defineProperty(_ref, LO_ID, outcome.id), _defineProperty(_ref, LO_MASTERY_PERCENT, outcome.scoring_method.mastery_percent), _defineProperty(_ref, LO_MASTERED, hasMastery(result, outcome)), _ref;
+};
+export var hasMastery = function hasMastery(result, outcome) {
+  return result && result.percentScore >= outcome.scoring_method.mastery_percent;
+};
+export var fileName = function fileName(id) {
+  var date = getDate();
+  return "outcome_analysis_csv_".concat(date, "_quiz_").concat(id, ".csv");
+};
+export var getDate = function getDate() {
+  // Found this solution on stackoverflow:
+  // https://stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-dd
+  var now = new Date(Date.now());
+  var offset = now.getTimezoneOffset();
+  return new Date(now.getTime() - offset * 60 * 1000).toISOString().split('T')[0];
+};
+export var formatPercentage = function formatPercentage(value, maxValue) {
+  return Math.round(value / maxValue * 100);
+}; // Note: Once OS has Item Bank alignments, this will need to be updated
+
+var getAlignedQuestionsCount = function getAlignedQuestionsCount(rollup) {
+  return rollup.usesBank ? "\u8B8A\u6578\u554F\u984C" : rollup.childArtifactCount;
+};

package/es/util/__tests__/flashAlertUtils.test.js

@@ -0,0 +1,62 @@
+import { expect } from 'chai';
+import { findDetailMessage, isLoadingChunkError } from "../flashAlertUtils.js";
+describe('findDetailMessage', function () {
+  it('returns just the message if there is no response', function () {
+    var error = {
+      message: 'Error!'
+    };
+    expect(findDetailMessage(error)).to.deep.eq({
+      a: error.message,
+      b: void 0
+    });
+  });
+  it('returns both messages if errors is not an array', function () {
+    var error = {
+      message: 'Error!',
+      response: {
+        data: {
+          message: 'Message!',
+          errors: ''
+        }
+      }
+    };
+    expect(findDetailMessage(error)).to.deep.eq({
+      a: error.response.data.message,
+      b: error.message
+    });
+  });
+  it('returns the message and first error if errors is an array', function () {
+    var error = {
+      message: 'Error!',
+      response: {
+        data: {
+          message: 'Message!',
+          errors: [{
+            message: 'First error!'
+          }, {
+            message: 'Second error!'
+          }]
+        }
+      }
+    };
+    expect(findDetailMessage(error)).to.deep.eq({
+      a: error.response.data.errors[0].message,
+      b: error.message
+    });
+  });
+});
+describe('isLoadingChunkError', function () {
+  it('returns true if the string contains loading chunk text', function () {
+    expect(isLoadingChunkError('loading chunk')).to.be.true;
+    expect(isLoadingChunkError('loading chunk error')).to.be.true;
+    expect(isLoadingChunkError('error loading chunk')).to.be.true;
+  });
+  it('returns false if the string does not contain loading chunk text', function () {
+    expect(isLoadingChunkError('loading')).to.be.false;
+    expect(isLoadingChunkError('chunk')).to.be.false;
+    expect(isLoadingChunkError('error loading')).to.be.false;
+    expect(isLoadingChunkError('loading error')).to.be.false;
+    expect(isLoadingChunkError('error chunk')).to.be.false;
+    expect(isLoadingChunkError('chunk error')).to.be.false;
+  });
+});

package/es/util/__tests__/outcomesReportUtils.test.js

@@ -0,0 +1,104 @@
+import { expect } from 'chai';
+import { formatDataIntoRow, hasMastery, fileName, getDate, formatPercentage } from "../outcomesReportUtils.js";
+import { STUDENT_NAME, STUDENT_UUID, ATTEMPT_COUNT, ALIGNED_QUESTIONS_COUNT, LOR_POINTS, LOR_POINTS_POSSIBLE, LO_NAME, LO_ID, LO_MASTERY_PERCENT, LO_MASTERED } from "../../constants.js";
+var user1 = {
+  uuid: 'user1-uuid',
+  full_name: 'Student 1'
+};
+var user2 = {
+  uuid: 'user2-uuid',
+  full_name: 'Student 2'
+};
+var rollup = {
+  outcomeId: '1',
+  childArtifactCount: 1,
+  usesBank: false
+};
+var outcome = {
+  id: '1',
+  guid: 'outcome-guid',
+  group: false,
+  label: 'outcome friendly name',
+  title: 'outcome name',
+  description: 'outcome description',
+  external_id: 10,
+  scoring_method: {
+    algorithm: 'average',
+    algorithm_data: {},
+    mastery_percent: 0.6,
+    points_possible: 5
+  }
+};
+var masteryResult = {
+  userId: user1.uuid,
+  percentScore: 0.6667,
+  points: 2,
+  pointsPossible: 3,
+  attempt: 1
+};
+var nonMasteryResult = {
+  userId: user2.uuid,
+  percentScore: 0.3333,
+  points: 1,
+  pointsPossible: 3,
+  attempt: 1
+};
+describe('outcomesReportUtils', function () {
+  describe('formatDataInRow', function () {
+    it('returns the correct value for each row header', function () {
+      var formattedRow = formatDataIntoRow(user1, outcome, rollup, masteryResult);
+      expect(formattedRow[STUDENT_NAME]).to.eq(user1.full_name);
+      expect(formattedRow[STUDENT_UUID]).to.eq(user1.uuid);
+      expect(formattedRow[ATTEMPT_COUNT]).to.eq(masteryResult.attempt);
+      expect(formattedRow[ALIGNED_QUESTIONS_COUNT]).to.eq(rollup.childArtifactCount);
+      expect(formattedRow[LOR_POINTS]).to.eq(masteryResult.points);
+      expect(formattedRow[LOR_POINTS_POSSIBLE]).to.eq(masteryResult.pointsPossible);
+      expect(formattedRow[LO_NAME]).to.eq(outcome.title);
+      expect(formattedRow[LO_ID]).to.eq(outcome.id);
+      expect(formattedRow[LO_MASTERY_PERCENT]).to.eq(outcome.scoring_method.mastery_percent);
+      expect(formattedRow[LO_MASTERED]).to.be.true;
+      expect(Object.keys(formattedRow).length).eq(10);
+    });
+    describe('for aligned questions count row', function () {
+      it('returns Variable Questions for aligned questions count if a bank was used', function () {
+        var usesBank = {
+          outcomeId: '1',
+          usesBank: true
+        };
+        var formattedRow = formatDataIntoRow(user1, outcome, usesBank, masteryResult);
+        expect(formattedRow[ALIGNED_QUESTIONS_COUNT]).to.eq('Variable Questions');
+      });
+    });
+  });
+  describe('hasMastery', function () {
+    it('returns true if the student achieved mastery for the given outcome', function () {
+      expect(hasMastery(masteryResult, outcome)).to.be.true;
+    });
+    it('returns false if the student did not reach mastery for the given outcome', function () {
+      expect(hasMastery(nonMasteryResult, outcome)).to.be.false;
+    });
+  });
+  describe('fileName', function () {
+    it('returns the file name for the csv report', function () {
+      var name = fileName(1);
+      expect(name.includes('outcome_analysis_csv_')).to.be.true;
+      expect(name.includes('_quiz_1.csv')).to.be.true;
+    });
+  });
+  describe('getDate', function () {
+    // Regex for yyyy-mm-dd format was found here:
+    // https://stackoverflow.com/questions/22061723/regex-date-validation-for-yyyy-mm-dd
+    it('returns the date in yyyy-mm-dd format', function () {
+      expect(getDate().match(/^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/)).not.to.empty;
+    });
+  });
+  describe('formatPercentage', function () {
+    it('formats two numbers into a percentage', function () {
+      expect(formatPercentage(50, 100)).to.eq(50);
+      expect(formatPercentage(5, 10)).to.eq(50);
+    });
+    it('formats two numbers into a percentage and rounds', function () {
+      expect(formatPercentage(1, 3)).to.eq(33);
+    });
+  });
+});

package/es/util/flashAlertUtils.js

@@ -0,0 +1,30 @@
+export function findDetailMessage(err) {
+  var a = err.message;
+  var b;
+
+  if (err.response) {
+    if (err.response.data) {
+      try {
+        if (Array.isArray(err.response.data.errors)) {
+          // probably a canvas api
+          a = err.response.data.errors[0].message;
+          b = err.message;
+        } else if (err.response.data.message) {
+          // probably a canvas api too
+          a = err.response.data.message;
+          b = err.message;
+        }
+      } catch (ignore) {
+        a = err.message;
+      }
+    }
+  }
+
+  return {
+    a: a,
+    b: b
+  };
+}
+export var isLoadingChunkError = function isLoadingChunkError(a) {
+  return typeof a === 'string' && a.toLowerCase().includes('loading chunk');
+};

package/es/util/outcomesReportUtils.js

@@ -0,0 +1,29 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import t from 'format-message';
+import { STUDENT_NAME, STUDENT_UUID, ATTEMPT_COUNT, ALIGNED_QUESTIONS_COUNT, LOR_POINTS, LOR_POINTS_POSSIBLE, LO_NAME, LO_ID, LO_MASTERY_PERCENT, LO_MASTERED } from "../constants.js";
+export var formatDataIntoRow = function formatDataIntoRow(user, outcome, rollup, result) {
+  var _ref;
+
+  return _ref = {}, _defineProperty(_ref, STUDENT_NAME, user.full_name), _defineProperty(_ref, STUDENT_UUID, user.uuid), _defineProperty(_ref, ATTEMPT_COUNT, result.attempt), _defineProperty(_ref, ALIGNED_QUESTIONS_COUNT, getAlignedQuestionsCount(rollup)), _defineProperty(_ref, LOR_POINTS, result.points), _defineProperty(_ref, LOR_POINTS_POSSIBLE, result.pointsPossible), _defineProperty(_ref, LO_NAME, outcome.title), _defineProperty(_ref, LO_ID, outcome.id), _defineProperty(_ref, LO_MASTERY_PERCENT, outcome.scoring_method.mastery_percent), _defineProperty(_ref, LO_MASTERED, hasMastery(result, outcome)), _ref;
+};
+export var hasMastery = function hasMastery(result, outcome) {
+  return result && result.percentScore >= outcome.scoring_method.mastery_percent;
+};
+export var fileName = function fileName(id) {
+  var date = getDate();
+  return "outcome_analysis_csv_".concat(date, "_quiz_").concat(id, ".csv");
+};
+export var getDate = function getDate() {
+  // Found this solution on stackoverflow:
+  // https://stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-dd
+  var now = new Date(Date.now());
+  var offset = now.getTimezoneOffset();
+  return new Date(now.getTime() - offset * 60 * 1000).toISOString().split('T')[0];
+};
+export var formatPercentage = function formatPercentage(value, maxValue) {
+  return Math.round(value / maxValue * 100);
+}; // Note: Once OS has Item Bank alignments, this will need to be updated
+
+var getAlignedQuestionsCount = function getAlignedQuestionsCount(rollup) {
+  return rollup.usesBank ? t('Variable Questions') : rollup.childArtifactCount;
+};

package/lib/components/AlignmentItem/__tests__/index.test.js

@@ -35,7 +35,7 @@ describe('AlignmentItem', function () {
 
   it('renders title', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps()));
-    (0, _chai.expect)(wrapper.find('Text')).to.have.length(1);
+    (0, _chai.expect)(wrapper.find('Heading')).to.have.length(1);
   });
   it('renders the friendly name if user cannot manage outcomes', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_index.default, makeProps({

package/lib/components/AlignmentItem/index.js

@@ -21,6 +21,8 @@ var _uiCheckbox = require("@instructure/ui-checkbox");
 
 var _uiFlex = require("@instructure/ui-flex");
 
+var _uiHeading = require("@instructure/ui-heading");
+
 var _uiText = require("@instructure/ui-text");
 
 var _uiIcons = require("@instructure/ui-icons");
@@ -86,6 +88,7 @@ var AlignmentItem = function AlignmentItem(_ref) {
       showTooltip = _useBoolean2[1],
       hideTooltip = _useBoolean2[2];
 
+  var displayTitle = !canManageOutcomes && label ? label : title;
   (0, _react.useEffect)(function () {
     if (shouldFocus) {
       var _trashIconRef$current;
@@ -102,14 +105,6 @@ var AlignmentItem = function AlignmentItem(_ref) {
     }
   };
 
-  var renderTitleText = function renderTitleText(size, weight) {
-    return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
-      size: size,
-      weight: weight,
-      wrap: "break-word"
-    }, !canManageOutcomes && label ? label : title);
-  };
-
   var handleUpdate = function handleUpdate(isTruncated) {
     if (titleTruncated !== isTruncated) {
       setTitleTruncated(isTruncated);
@@ -122,10 +117,22 @@ var AlignmentItem = function AlignmentItem(_ref) {
         padding: isTray ? '0.5rem 0' : '0.4rem 0 0 0.3rem'
       },
       "data-automation": "alignmentItem__outcomeName"
-    }, truncated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
+    }, truncated ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_uiTruncateText.TruncateText, {
       position: "middle",
       onUpdate: handleUpdate
-    }, renderTitleText('medium', 'bold'), /*#__PURE__*/_react.default.createElement("span", null))) : renderTitleText('medium', 'bold'));
+    }, displayTitle, /*#__PURE__*/_react.default.createElement("span", null)))) : /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, displayTitle));
   };
 
   var renderDeleteButton = function renderDeleteButton() {
@@ -213,7 +220,11 @@ var AlignmentItem = function AlignmentItem(_ref) {
     as: "div",
     maxWidth: "19rem",
     padding: "small"
-  }, renderTitleText('small', 'normal'))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, renderDeleteButton())), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+  }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+    size: "small",
+    weight: "normal",
+    wrap: "break-word"
+  }, displayTitle))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, renderDeleteButton())), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     as: "div",
     alignItems: "start"
   }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {