@instructure/outcomes-ui 2.1.4 → 2.1.6

package/es/translated/sl/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/sl/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/sl/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 ? "Spremenljiva vpra\u0161anja" : rollup.childArtifactCount;
+};

package/es/translated/sv/components/AlignmentItem/__tests__/index.test.js

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

package/es/translated/sv/components/AlignmentItem/index.js

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { Flex } from '@instructure/ui-flex';
+import { Heading } from '@instructure/ui-heading';
 import { Text } from '@instructure/ui-text';
 import { IconArrowOpenDownLine, IconArrowOpenEndLine, IconTrashLine } from '@instructure/ui-icons';
 import { IconButton } from '@instructure/ui-buttons';
@@ -59,6 +60,7 @@ var AlignmentItem = function AlignmentItem(_ref) {
       showTooltip = _useBoolean2[1],
       hideTooltip = _useBoolean2[2];
 
+  var displayTitle = !canManageOutcomes && label ? label : title;
   useEffect(function () {
     if (shouldFocus) {
       var _trashIconRef$current;
@@ -75,14 +77,6 @@ var AlignmentItem = function AlignmentItem(_ref) {
     }
   };
 
-  var renderTitleText = function renderTitleText(size, weight) {
-    return /*#__PURE__*/React.createElement(Text, {
-      size: size,
-      weight: weight,
-      wrap: "break-word"
-    }, !canManageOutcomes && label ? label : title);
-  };
-
   var handleUpdate = function handleUpdate(isTruncated) {
     if (titleTruncated !== isTruncated) {
       setTitleTruncated(isTruncated);
@@ -95,10 +89,22 @@ var AlignmentItem = function AlignmentItem(_ref) {
         padding: isTray ? '0.5rem 0' : '0.4rem 0 0 0.3rem'
       },
       "data-automation": "alignmentItem__outcomeName"
-    }, truncated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TruncateText, {
+    }, truncated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, /*#__PURE__*/React.createElement(TruncateText, {
       position: "middle",
       onUpdate: handleUpdate
-    }, renderTitleText('medium', 'bold'), /*#__PURE__*/React.createElement("span", null))) : renderTitleText('medium', 'bold'));
+    }, displayTitle, /*#__PURE__*/React.createElement("span", null)))) : /*#__PURE__*/React.createElement(Heading, {
+      level: "h4",
+      as: "h2",
+      theme: {
+        lineHeight: '1.5rem'
+      }
+    }, displayTitle));
   };
 
   var renderDeleteButton = function renderDeleteButton() {
@@ -178,7 +184,11 @@ var AlignmentItem = function AlignmentItem(_ref) {
     as: "div",
     maxWidth: "19rem",
     padding: "small"
-  }, renderTitleText('small', 'normal'))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/React.createElement(Flex.Item, null, renderDeleteButton())), /*#__PURE__*/React.createElement(Flex, {
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    weight: "normal",
+    wrap: "break-word"
+  }, displayTitle))) : renderOutcomeTitle()), canManageOutcomes && !isTray && /*#__PURE__*/React.createElement(Flex.Item, null, renderDeleteButton())), /*#__PURE__*/React.createElement(Flex, {
     as: "div",
     alignItems: "start"
   }, /*#__PURE__*/React.createElement(Flex.Item, {

package/es/translated/sv/components/FlashAlert/index.js

@@ -0,0 +1,233 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import { Alert } from '@instructure/ui-alerts';
+import { Link } from '@instructure/ui-link';
+import { Text } from '@instructure/ui-text';
+import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { Transition } from '@instructure/ui-motion';
+import { findDetailMessage, isLoadingChunkError } from "../../util/flashAlertUtils.js";
+/*
+ * Note: This file is copied over from canvas-lms/ui/shared/alerts/react/FlashAlert.js
+ * It has a few minor changes so that it works with outcomes-ui, but is overall
+ * pretty much the same and it works the same. Some functions were moved into a utils
+ * file for testing purposes.
+ */
+
+var messageHolderId = 'flashalert_message_holder'; // specs fail if I reuse jquery's elements
+
+var screenreaderMessageHolderId = 'flash_screenreader_holder';
+export var defaultTimeout = 10000;
+export function showFlashAlert(_ref) {
+  var message = _ref.message,
+      err = _ref.err,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? err ? 'error' : 'info' : _ref$type,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? defaultTimeout : _ref$timeout,
+      _ref$srOnly = _ref.srOnly,
+      srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly;
+
+  function closeAlert(atNode) {
+    ReactDOM.unmountComponentAtNode(atNode);
+    atNode.remove();
+  }
+
+  function getAlertContainer() {
+    var alertContainer = document.getElementById(messageHolderId);
+
+    if (!alertContainer) {
+      alertContainer = document.createElement('div');
+      alertContainer.classList.add('clickthrough-container');
+      alertContainer.id = messageHolderId;
+      alertContainer.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 100%; z-index: 100000;');
+      document.body.appendChild(alertContainer);
+    }
+
+    return alertContainer;
+  }
+
+  function renderAlert(parent) {
+    ReactDOM.render( /*#__PURE__*/React.createElement(FlashAlert, {
+      message: message,
+      timeout: timeout,
+      error: err,
+      variant: type,
+      onClose: closeAlert.bind(null, parent),
+      screenReaderOnly: srOnly
+    }), parent);
+  }
+
+  var div = document.createElement('div'); // div.setAttribute('class', styles.flashMessage)
+
+  div.setAttribute('style', 'max-width:50em;margin:1rem auto;');
+  div.setAttribute('class', 'flashalert-message');
+  getAlertContainer().appendChild(div);
+  renderAlert(div);
+}
+export function destroyContainer() {
+  var container = document.getElementById(messageHolderId);
+  var liveRegion = document.getElementById(screenreaderMessageHolderId);
+  if (container) container.remove();
+  if (liveRegion) liveRegion.remove();
+}
+export function showFlashError() {
+  var message = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "An error occurred making a network request";
+  return function (err) {
+    return showFlashAlert({
+      message: message,
+      err: err,
+      type: 'error'
+    });
+  };
+}
+export function showFlashSuccess(message) {
+  return function () {
+    return showFlashAlert({
+      message: message,
+      type: 'success'
+    });
+  };
+} // An Alert with a message and "Details" button which surfaces
+// more info about the error when pressed.
+// Is displayed at the top of the document, and will close itself after a while
+
+var FlashAlert = /*#__PURE__*/function (_React$Component) {
+  _inherits(FlashAlert, _React$Component);
+
+  var _super = _createSuper(FlashAlert);
+
+  function FlashAlert(props) {
+    var _this;
+
+    _classCallCheck(this, FlashAlert);
+
+    _this = _super.call(this, props);
+
+    _this.showDetails = function () {
+      _this.setState({
+        showDetails: true
+      });
+
+      clearTimeout(_this.timerId);
+      _this.timerId = setTimeout(function () {
+        return _this.closeAlert();
+      }, _this.props.timeout);
+    };
+
+    _this.closeAlert = function () {
+      _this.setState({
+        isOpen: false
+      }, function () {
+        setTimeout(function () {
+          clearTimeout(_this.timerId);
+
+          _this.props.onClose();
+        }, 500);
+      });
+    };
+
+    _this.state = {
+      showDetails: false,
+      isOpen: true
+    };
+    _this.timerId = 0;
+    return _this;
+  }
+
+  _createClass(FlashAlert, [{
+    key: "getLiveRegion",
+    value: function getLiveRegion() {
+      // return element where flash screenreader messages go.
+      // create if necessary
+      var liveRegion = document.getElementById(screenreaderMessageHolderId);
+
+      if (!liveRegion) {
+        liveRegion = document.createElement('div');
+        liveRegion.id = screenreaderMessageHolderId;
+        liveRegion.setAttribute('role', 'alert');
+        document.body.appendChild(liveRegion);
+      }
+
+      return liveRegion;
+    }
+  }, {
+    key: "renderDetailMessage",
+    value: function renderDetailMessage(a, b) {
+      var showPrimaryDetails = a && !isLoadingChunkError(a);
+      var showSecondaryDetails = b && !isLoadingChunkError(b);
+      return /*#__PURE__*/React.createElement(Text, {
+        as: "p",
+        fontStyle: "italic"
+      }, showPrimaryDetails && /*#__PURE__*/React.createElement(Text, null, a), showSecondaryDetails && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Text, null, b)));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var details = null;
+
+      if (this.props.error) {
+        var _findDetailMessage = findDetailMessage(this.props.error),
+            a = _findDetailMessage.a,
+            b = _findDetailMessage.b;
+
+        var showPrimaryDetails = a && !isLoadingChunkError(a);
+        var showSecondaryDetails = b && !isLoadingChunkError(b);
+
+        if (showPrimaryDetails || showSecondaryDetails) {
+          if (this.state.showDetails) {
+            details = this.renderDetailMessage(a, b);
+          } else {
+            details = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement(Link, {
+              isWithinText: false,
+              as: "button",
+              onClick: this.showDetails
+            }, "Detaljer")), /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.renderDetailMessage(a, b)));
+          }
+        }
+      }
+
+      return /*#__PURE__*/React.createElement(Transition, {
+        transitionOnMount: true,
+        in: this.state.isOpen,
+        type: "fade"
+      }, /*#__PURE__*/React.createElement(Alert, {
+        variant: this.props.variant,
+        renderCloseButtonLabel: "St\xE4ng",
+        onDismiss: this.closeAlert,
+        margin: "small auto",
+        timeout: this.props.timeout,
+        liveRegion: this.getLiveRegion,
+        transition: "fade",
+        screenReaderOnly: this.props.screenReaderOnly
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+        style: {
+          margin: '0 -5px'
+        }
+      }, this.props.message), details)));
+    }
+  }]);
+
+  FlashAlert.displayName = "FlashAlert";
+  return FlashAlert;
+}(React.Component);
+
+FlashAlert.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  message: PropTypes.string.isRequired,
+  error: PropTypes.instanceOf(Error),
+  variant: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
+  timeout: PropTypes.number,
+  screenReaderOnly: PropTypes.bool
+};
+FlashAlert.defaultProps = {
+  error: null,
+  variant: 'info',
+  timeout: defaultTimeout,
+  screenReaderOnly: false
+};
+export default FlashAlert;

package/es/translated/sv/components/FlashAlert/index.test.js

@@ -0,0 +1,90 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import FlashAlert, { showFlashAlert, showFlashError, showFlashSuccess, defaultTimeout } from "../FlashAlert/index.js";
+describe('FlashAlert', function () {
+  var renderSpy;
+  var clock;
+  beforeEach(function () {
+    renderSpy = sinon.spy(ReactDOM, 'render');
+    clock = sinon.useFakeTimers();
+  });
+  afterEach(function () {
+    renderSpy.restore();
+    clock.restore();
+  });
+
+  var makeProps = function makeProps(props) {
+    return _objectSpread({
+      message: 'This is a test error message 123',
+      timeout: defaultTimeout,
+      error: new Error('This is a test error 321'),
+      variant: 'error',
+      onClose: sinon.spy(),
+      screenReaderOnly: false
+    }, props);
+  };
+
+  it('renders', function () {
+    var screen = mount( /*#__PURE__*/React.createElement(FlashAlert, makeProps({})));
+    expect(screen.text()).to.match(/This is a test error message 123/);
+    expect(screen.text()).to.match(/This is a test error 321/);
+  });
+  it('renders, but does not show loading chunk text', function () {
+    var screen = mount( /*#__PURE__*/React.createElement(FlashAlert, makeProps({
+      error: new Error('loading chunk 123')
+    })));
+    expect(screen.text()).to.match(/This is a test error message 123/);
+    expect(screen.text()).not.to.match(/loading chunk 123/);
+  });
+  it('renders Transition component', function () {
+    var screen = mount( /*#__PURE__*/React.createElement(FlashAlert, makeProps({})));
+    var transition = screen.find('Transition').first();
+    expect(transition).to.exist;
+    expect(transition.prop('transitionOnMount')).to.be.true;
+    expect(transition.prop('in')).to.be.true;
+    expect(transition.prop('type')).to.eq('fade');
+    clock.tick(defaultTimeout);
+    screen.update();
+    var transition2 = screen.find('Transition').at(1);
+    expect(transition2.prop('in')).to.be.false;
+  });
+  it('renders Alert component', function () {
+    var props = makeProps({});
+    var screen = mount( /*#__PURE__*/React.createElement(FlashAlert, props));
+    var alert = screen.find('Alert');
+    expect(alert).to.exist;
+    expect(alert.prop('variant')).to.eq(props.variant);
+    expect(alert.prop('renderCloseButtonLabel')).to.eq('Close');
+    expect(alert.prop('onDismiss')).to.not.be.undefined;
+    expect(alert.prop('margin')).to.eq('small auto');
+    expect(alert.prop('timeout')).to.eq(props.timeout);
+    expect(alert.prop('liveRegion')).to.not.be.undefined;
+    expect(alert.prop('transition')).to.eq('fade');
+    expect(alert.prop('screenReaderOnly')).to.eq(props.screenReaderOnly);
+  });
+  describe('showFlashAlert', function () {
+    it('calls render', function () {
+      var props = makeProps({});
+      showFlashAlert(_objectSpread({}, props));
+      expect(renderSpy).to.have.been.called;
+    });
+  });
+  describe('showFlashError', function () {
+    it('calls render', function () {
+      var showAlert = showFlashError();
+      showAlert();
+      expect(renderSpy).to.have.been.called;
+    });
+  });
+  describe('showFlashSuccess', function () {
+    it('calls render', function () {
+      var showAlert = showFlashSuccess();
+      showAlert();
+      expect(renderSpy).to.have.been.called;
+    });
+  });
+});

package/es/translated/sv/components/OutcomesPerStudent/ExportCSVButton/__tests__/index.test.js

@@ -0,0 +1,83 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+import { mount } from 'enzyme';
+import ExportCSVButton, { headers } from "../index.js";
+import checkA11y from "../../../../test/checkA11y.js";
+import { NOT_FETCHING } from "../../../../constants.js";
+describe('OutcomesPerStudent/ExportCSVButton', function () {
+  var clock;
+  beforeEach(function () {
+    clock = sinon.useFakeTimers();
+  });
+  afterEach(function () {
+    clock.restore();
+  });
+
+  var makeProps = function makeProps(props) {
+    return _objectSpread({
+      fetchCSVData: sinon.spy(),
+      formatCSVData: sinon.spy(),
+      fetchingStatus: NOT_FETCHING,
+      artifactId: 1
+    }, props);
+  };
+
+  it('renders the export CSV button', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    expect(wrapper.text()).to.match(/Export CSV/);
+  });
+  it('export CSV button is enabled by default', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    expect(wrapper.find('Flex Button').prop('interaction')).to.equal('enabled');
+  });
+  it('export CSV button color is primary', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    expect(wrapper.find('Flex Button').prop('color')).to.equal('primary');
+  });
+  it('export CSV button has onClick', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    expect(wrapper.find('Flex Button').prop('onClick')).to.be.not.undefined;
+  });
+  it('click export CSV calls fetchCSVData', function () {
+    var props = makeProps({});
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props));
+    var button = wrapper.find('Flex Button');
+    button.simulate('click');
+    expect(props.fetchCSVData).to.have.been.called;
+  });
+  it('starting export changes the export CSV button to cancel export', function () {
+    var props = makeProps({});
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props));
+    var button = wrapper.find('Flex Button');
+    button.simulate('click');
+    expect(wrapper.text()).not.to.match(/Export CSV/);
+    expect(wrapper.text()).to.match(/Cancel Export/);
+    expect(wrapper.find('Flex Button').prop('interaction')).to.equal('enabled');
+    expect(wrapper.find('Flex Button').prop('color')).to.equal('secondary');
+  });
+  it('starting export displays the ProgressBar', function () {
+    var props = makeProps({});
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, props));
+    var button = wrapper.find('Flex Button');
+    button.simulate('click');
+    expect(wrapper.text()).to.match(/Exporting/);
+    expect(wrapper.find('ProgressBar')).to.exist;
+  });
+  it('correct headers are passed into CSVLink', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    expect(wrapper.find('Flex span CSVLink').prop('headers')).to.equal(headers);
+  });
+  it('CSVLink is initially passed in no row data', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    expect(wrapper.find('Flex span CSVLink').prop('data')).to.be.empty;
+  });
+  it('CSVLink is not keyboard accessible', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+    expect(wrapper.find('Flex span CSVLink').prop('tabIndex')).to.equal(-1);
+  });
+  it('meets a11y standards', function () {
+    return checkA11y( /*#__PURE__*/React.createElement(ExportCSVButton, makeProps({})));
+  });
+});