@instructure/canvas-rce 5.1.2-alpha.7 → 5.2.0

package/lib/translated/mi/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageCropper/ImageCropper.js

@@ -31,6 +31,12 @@ const SHAPE_OPTIONS = [{
 }, {
   id: 'triangle',
   label: "Tapatoru"
+}, {
+  id: 'diamond',
+  label: "Diamond"
+}, {
+  id: 'pentagon',
+  label: "Pentagon"
 }, {
   id: 'hexagon',
   label: "Tapaono"

package/lib/translated/mi/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageCropper/svg/__tests__/shape.test.js

@@ -42,12 +42,21 @@ describe('buildShape()', () => {
       />
     `);
   });
-  it('builds a triangle', () => {
+  it('builds a diamond', () => {
     expect(buildShapeMask({
-      shape: 'triangle'
+      shape: 'diamond'
     })).toMatchInlineSnapshot(`
       <path
-        d="M175 0L350 350H0L175 0Z"
+        d="M175 0L350 175L175 350L0 175L175 0Z"
+      />
+    `);
+  });
+  it('builds a pentagon', () => {
+    expect(buildShapeMask({
+      shape: 'pentagon'
+    })).toMatchInlineSnapshot(`
+      <path
+        d="M175 0L350 136.71L295.15999999999997 350H54.84L0 136.71L175 0L175 0Z"
       />
     `);
   });
@@ -74,7 +83,7 @@ describe('buildShape()', () => {
       shape: 'star'
     })).toMatchInlineSnapshot(`
       <path
-        d="M175 0L215.01 136.71H350L237.27 211.47L295.15999999999997 350L175 257.04L54.84 350L112.72999999999999 211.47L0 136.71H134.99L175 0L175 0Z"
+        d="M175 0L215.01 136.71H350L237.27 211.47L295.15999999999997 350L175 257.04L54.84 350L112.72999999999999 211.47L0 136.71H134.99L175 0Z"
       />
     `);
   });

package/lib/translated/mi/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/ImageCropper/svg/shape.js

@@ -31,6 +31,12 @@ export function buildShapeMask({
     case 'triangle':
       return buildTriangle();
 
+    case 'diamond':
+      return buildDiamond();
+
+    case 'pentagon':
+      return buildPentagon();
+
     case 'hexagon':
       return buildHexagon();
 
@@ -70,6 +76,21 @@ function buildTriangle() {
   });
 }
 
+function buildDiamond() {
+  return createSvgElement('path', {
+    d: `M${SHAPE_CONTAINER_LENGTH / 2} 0L${SHAPE_CONTAINER_LENGTH} ${SHAPE_CONTAINER_LENGTH / 2}L${SHAPE_CONTAINER_LENGTH / 2} ${SHAPE_CONTAINER_LENGTH}L0 ${SHAPE_CONTAINER_LENGTH / 2}L${SHAPE_CONTAINER_LENGTH / 2} 0Z`
+  });
+}
+
+function buildPentagon() {
+  const half = round(SHAPE_CONTAINER_LENGTH / 2, 2);
+  const alpha = round(0.3906 * SHAPE_CONTAINER_LENGTH, 2);
+  const beta = round(0.3433 * SHAPE_CONTAINER_LENGTH, 2);
+  return createSvgElement('path', {
+    d: `M${half} 0L${SHAPE_CONTAINER_LENGTH} ${alpha}L${half + beta} ${SHAPE_CONTAINER_LENGTH}H${half - beta}L0 ${alpha}L${half} 0L${half} 0Z`
+  });
+}
+
 function buildHexagon() {
   const leg = round(0.2895 * SHAPE_CONTAINER_LENGTH, 2);
   return createSvgElement('path', {
@@ -94,6 +115,6 @@ function buildStar() {
   const zeta = round(0.3433 * SHAPE_CONTAINER_LENGTH, 2);
   const eta = round(0.7344 * SHAPE_CONTAINER_LENGTH, 2);
   return createSvgElement('path', {
-    d: `M${half} 0L${half + alpha} ${beta}H${SHAPE_CONTAINER_LENGTH}L${half + gamma} ${delta}L${half + zeta} ${SHAPE_CONTAINER_LENGTH}L${half} ${eta}L${half - zeta} ${SHAPE_CONTAINER_LENGTH}L${half - gamma} ${delta}L0 ${beta}H${half - alpha}L${half} 0L${half} 0Z`
+    d: `M${half} 0L${half + alpha} ${beta}H${SHAPE_CONTAINER_LENGTH}L${half + gamma} ${delta}L${half + zeta} ${SHAPE_CONTAINER_LENGTH}L${half} ${eta}L${half - zeta} ${SHAPE_CONTAINER_LENGTH}L${half - gamma} ${delta}L0 ${beta}H${half - alpha}L${half} 0Z`
   });
 }

package/lib/translated/mi/modules/rce/plugins/instructure_buttons/components/CreateButtonForm/ShapeSection.js

@@ -19,7 +19,7 @@ import React from 'react';
 import { Flex } from '@instructure/ui-flex';
 import { SimpleSelect } from '@instructure/ui-simple-select';
 import formatMessage from "../../../../../format-message.js";
-const SHAPES = ['square', 'circle', 'triangle', 'hexagon', 'octagon', 'star'];
+const SHAPES = ['square', 'circle', 'triangle', 'diamond', 'pentagon', 'hexagon', 'octagon', 'star'];
 const SIZES = ['x-small', 'small', 'medium', 'large'];
 export const ShapeSection = ({
   settings,
@@ -62,6 +62,8 @@ const SHAPE_DESCRIPTION = {
   square: "Tapawha",
   circle: "Porohita",
   triangle: "Tapatoru",
+  diamond: "Diamond",
+  pentagon: "Pentagon",
   hexagon: "Tapaono",
   octagon: "Tapawaru",
   star: "Whet\u016B"

package/lib/translated/mi/modules/rce/plugins/instructure_buttons/svg/__tests__/shape.test.js

@@ -173,6 +173,92 @@ describe('buildShape()', () => {
       `);
     });
   });
+  describe('when shape is diamond', () => {
+    beforeEach(() => {
+      settings = _objectSpread(_objectSpread({}, settings), {}, {
+        shape: 'diamond'
+      });
+    });
+    it('builds the x-small <path />', () => {
+      expect(buildShape(_objectSpread(_objectSpread({}, settings), {}, {
+        size: 'x-small'
+      }))).toMatchInlineSnapshot(`
+        <path
+          d="M33 4L66 33L33 66L4 33L33 4Z"
+        />
+      `);
+    });
+    it('builds the small <path />', () => {
+      expect(buildShape(_objectSpread(_objectSpread({}, settings), {}, {
+        size: 'small'
+      }))).toMatchInlineSnapshot(`
+        <path
+          d="M57 4L114 57L57 114L4 57L57 4Z"
+        />
+      `);
+    });
+    it('builds the medium <path />', () => {
+      expect(buildShape(_objectSpread(_objectSpread({}, settings), {}, {
+        size: 'medium'
+      }))).toMatchInlineSnapshot(`
+        <path
+          d="M75 4L150 75L75 150L4 75L75 4Z"
+        />
+      `);
+    });
+    it('builds the large <path />', () => {
+      expect(buildShape(_objectSpread(_objectSpread({}, settings), {}, {
+        size: 'large'
+      }))).toMatchInlineSnapshot(`
+        <path
+          d="M105 4L210 105L105 210L4 105L105 4Z"
+        />
+      `);
+    });
+  });
+  describe('when shape is pentagon', () => {
+    beforeEach(() => {
+      settings = _objectSpread(_objectSpread({}, settings), {}, {
+        shape: 'pentagon'
+      });
+    });
+    it('builds the x-small <path />', () => {
+      expect(buildShape(_objectSpread(_objectSpread({}, settings), {}, {
+        size: 'x-small'
+      }))).toMatchInlineSnapshot(`
+        <path
+          d="M37.0623 14L61 32.75L53.5195 62H21.1039L13 32.75L37.0623 14Z"
+        />
+      `);
+    });
+    it('builds the small <path />', () => {
+      expect(buildShape(_objectSpread(_objectSpread({}, settings), {}, {
+        size: 'small'
+      }))).toMatchInlineSnapshot(`
+        <path
+          d="M61.1247 13L109 50.5L94.039 109H29.2078L13 50.5L61.1247 13Z"
+        />
+      `);
+    });
+    it('builds the medium <path />', () => {
+      expect(buildShape(_objectSpread(_objectSpread({}, settings), {}, {
+        size: 'medium'
+      }))).toMatchInlineSnapshot(`
+        <path
+          d="M79.1714 13L145 64.56L124.429 145H35.285L13 64.5625L79.1714 13Z"
+        />
+      `);
+    });
+    it('builds the large <path />', () => {
+      expect(buildShape(_objectSpread(_objectSpread({}, settings), {}, {
+        size: 'large'
+      }))).toMatchInlineSnapshot(`
+        <path
+          d="M109.249 13L205 88L175.078 205H45.4156L13 88L109.249 13Z"
+        />
+      `);
+    });
+  });
   describe('when shape is hexagon', () => {
     beforeEach(() => {
       settings = _objectSpread(_objectSpread({}, settings), {}, {

package/lib/translated/mi/modules/rce/plugins/instructure_buttons/svg/shape.js

@@ -30,6 +30,12 @@ export function buildShape({
     case 'triangle':
       return buildTriangle(size);
 
+    case 'diamond':
+      return buildDiamond(size);
+
+    case 'pentagon':
+      return buildPentagon(size);
+
     case 'hexagon':
       return buildHexagon(size);
 
@@ -145,6 +151,60 @@ function buildTriangle(size) {
   }
 }
 
+function buildDiamond(size) {
+  switch (size) {
+    case 'x-small':
+      return createSvgElement('path', {
+        d: 'M33 4L66 33L33 66L4 33L33 4Z'
+      });
+
+    case 'small':
+      return createSvgElement('path', {
+        d: 'M57 4L114 57L57 114L4 57L57 4Z'
+      });
+
+    case 'medium':
+      return createSvgElement('path', {
+        d: 'M75 4L150 75L75 150L4 75L75 4Z'
+      });
+
+    case 'large':
+      return createSvgElement('path', {
+        d: 'M105 4L210 105L105 210L4 105L105 4Z'
+      });
+
+    default:
+      throw new Error(`Invalid size: ${size}`);
+  }
+}
+
+function buildPentagon(size) {
+  switch (size) {
+    case 'x-small':
+      return createSvgElement('path', {
+        d: 'M37.0623 14L61 32.75L53.5195 62H21.1039L13 32.75L37.0623 14Z'
+      });
+
+    case 'small':
+      return createSvgElement('path', {
+        d: 'M61.1247 13L109 50.5L94.039 109H29.2078L13 50.5L61.1247 13Z'
+      });
+
+    case 'medium':
+      return createSvgElement('path', {
+        d: 'M79.1714 13L145 64.56L124.429 145H35.285L13 64.5625L79.1714 13Z'
+      });
+
+    case 'large':
+      return createSvgElement('path', {
+        d: 'M109.249 13L205 88L175.078 205H45.4156L13 88L109.249 13Z'
+      });
+
+    default:
+      throw new Error(`Invalid size: ${size}`);
+  }
+}
+
 function buildHexagon(size) {
   switch (size) {
     case 'x-small':

package/lib/translated/mi/modules/rce/plugins/instructure_buttons/svg/text.js

@@ -197,6 +197,8 @@ function getYMiddleTextForShape(getYTextSizeCallback, shape, size) {
     case 'square':
     case 'circle':
     case 'triangle':
+    case 'diamond':
+    case 'pentagon':
     case 'hexagon':
     case 'octagon':
     case 'star':

package/lib/translated/mi/modules/rce/plugins/instructure_image/ImageEmbedOptions.js

@@ -22,6 +22,7 @@ import { scaleForHeight, scaleForWidth } from "../shared/DimensionUtils.js";
 export const MIN_HEIGHT = 10;
 export const MIN_WIDTH = 10;
 export const MIN_WIDTH_VIDEO = 320;
+export const MIN_PERCENTAGE = 10;
 export const SMALL = 'small';
 export const MEDIUM = 'medium';
 export const LARGE = 'large';
@@ -52,15 +53,27 @@ function imageSizeFromKnownOptions(imageOptions) {
   return sizeByMaximumDimension[largestDimension] || CUSTOM;
 }
 
+function getPercentageUnitsFromAttributes($element) {
+  const getAttribute = attribute => $element.hasAttribute(attribute) ? $element.getAttribute(attribute) : $element[attribute];
+
+  const widthValue = getAttribute('width');
+  const heightValue = getAttribute('height');
+  const value = [widthValue, heightValue].find(v => /\d+(?:\.\d+)?%/.test(v));
+  return value ? Math.round(Number.parseInt(value, 10)) : null;
+}
+
 export function fromImageEmbed($element) {
   const altText = $element.getAttribute('alt');
+  const percentageUnits = getPercentageUnitsFromAttributes($element);
   const imageOptions = {
-    altText: altText || '',
-    appliedHeight: parsedOrNull($element, 'height'),
     appliedWidth: parsedOrNull($element, 'width'),
-    isDecorativeImage: altText !== null && altText.replace(/\s/g, '') === '',
-    naturalHeight: $element.naturalHeight,
+    appliedHeight: parsedOrNull($element, 'height'),
     naturalWidth: $element.naturalWidth,
+    naturalHeight: $element.naturalHeight,
+    appliedPercentage: percentageUnits || 100,
+    usePercentageUnits: !!percentageUnits,
+    altText: altText || '',
+    isDecorativeImage: altText !== null && altText.replace(/\s/g, '') === '',
     url: $element.src
   };
   imageOptions.imageSize = imageSizeFromKnownOptions(imageOptions);

package/lib/translated/mi/modules/rce/plugins/instructure_image/ImageOptionsTray/__tests__/ImageOptionsTray.test.js

@@ -36,6 +36,8 @@ describe('RCE "Images" Plugin > ImageOptionsTray', () => {
         isDecorativeImage: false,
         naturalHeight: 200,
         naturalWidth: 100,
+        appliedPercentage: 100,
+        usePercentageUnits: false,
         url: 'https://www.fillmurray.com/200/100'
       },
       onRequestClose: jest.fn(),
@@ -287,6 +289,21 @@ describe('RCE "Images" Plugin > ImageOptionsTray', () => {
 
           expect(appliedHeight).toEqual(400);
         });
+        it.skip('includes the width and height to be applied', async () => {
+          props.appliedPercentage = 95;
+          props.usePercentageUnits = false;
+          renderComponent();
+          await tray.setSize('Large');
+          tray.$doneButton.click();
+
+          const _props$onSave$mock$ca9 = _slicedToArray(props.onSave.mock.calls[0], 1),
+                _props$onSave$mock$ca10 = _props$onSave$mock$ca9[0],
+                appliedWidth = _props$onSave$mock$ca10.appliedWidth,
+                appliedHeight = _props$onSave$mock$ca10.appliedHeight;
+
+          expect(appliedWidth).toEqual(50);
+          expect(appliedHeight).toEqual(50);
+        });
       });
     });
   });

package/lib/translated/mi/modules/rce/plugins/instructure_image/ImageOptionsTray/index.js

@@ -23,7 +23,7 @@ import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { Flex } from '@instructure/ui-flex';
 import { Tray } from '@instructure/ui-tray';
-import { CUSTOM, MIN_HEIGHT, MIN_WIDTH, scaleToSize } from "../ImageEmbedOptions.js";
+import { CUSTOM, MIN_HEIGHT, MIN_WIDTH, MIN_PERCENTAGE, scaleToSize } from "../ImageEmbedOptions.js";
 import formatMessage from "../../../../format-message.js";
 import { useDimensionsState } from "../../shared/DimensionsInput/index.js";
 import ImageOptionsForm from "../../shared/ImageOptionsForm.js";
@@ -85,7 +85,8 @@ export default function ImageOptionsTray(props) {
 
   const dimensionsState = useDimensionsState(imageOptions, {
     minHeight: MIN_HEIGHT,
-    minWidth: MIN_WIDTH
+    minWidth: MIN_WIDTH,
+    minPercentage: MIN_PERCENTAGE
   });
   useEffect(() => {
     let isValidURL;
@@ -201,8 +202,13 @@ export default function ImageOptionsTray(props) {
       let appliedWidth = imageWidth;
 
       if (imageSize === CUSTOM) {
-        appliedHeight = dimensionsState.height;
-        appliedWidth = dimensionsState.width;
+        if (dimensionsState.usePercentageUnits) {
+          appliedHeight = `${dimensionsState.percentage}%`;
+          appliedWidth = `${dimensionsState.percentage}%`;
+        } else {
+          appliedHeight = dimensionsState.height;
+          appliedWidth = dimensionsState.width;
+        }
       }
 
       onSave({

package/lib/translated/mi/modules/rce/plugins/instructure_image/__tests__/ImageEmbedOptions.test.js

@@ -336,6 +336,52 @@ describe('RCE > Plugins > Instructure Image > ImageEmbedOptions', () => {
         });
       });
     });
+    describe('.appliedPercentage', () => {
+      it('is the percentage width when applied to the image', () => {
+        $image.setAttribute('width', '50%');
+        expect(getImageOptions().appliedPercentage).toEqual(50);
+      });
+      it('is the percentage height when applied to the image', () => {
+        $image.setAttribute('height', '60%');
+        expect(getImageOptions().appliedPercentage).toEqual(60);
+      });
+      it('is the percentage attribute when percentage width and height applied to the image', () => {
+        $image.setAttribute('width', '50%');
+        $image.setAttribute('height', '60%');
+        expect(getImageOptions().appliedPercentage).toEqual(50);
+      });
+      it('is the percentage attribute when percentage and pixels width/height applied to the image', () => {
+        $image.setAttribute('width', '50%');
+        $image.setAttribute('height', '30px');
+        expect(getImageOptions().appliedPercentage).toEqual(50);
+      });
+      it('is 100 when no percentage width or height has been applied to the image', () => {
+        expect(getImageOptions().appliedPercentage).toEqual(100);
+      });
+    });
+    describe('.usePercentageUnits', () => {
+      it('is true when percentage width applied to the image', () => {
+        $image.setAttribute('width', '50%');
+        expect(getImageOptions().usePercentageUnits).toEqual(true);
+      });
+      it('is true when percentage height applied to the image', () => {
+        $image.setAttribute('height', '60%');
+        expect(getImageOptions().usePercentageUnits).toEqual(true);
+      });
+      it('is true when percentage width and height applied to the image', () => {
+        $image.setAttribute('width', '50%');
+        $image.setAttribute('height', '60%');
+        expect(getImageOptions().usePercentageUnits).toEqual(true);
+      });
+      it('is true when percentage width and pixels height applied to the image', () => {
+        $image.setAttribute('width', '50%');
+        $image.setAttribute('height', '30px');
+        expect(getImageOptions().usePercentageUnits).toEqual(true);
+      });
+      it('is false when no percentage width or height has been applied to the image', () => {
+        expect(getImageOptions().usePercentageUnits).toEqual(false);
+      });
+    });
     it('sets .naturalHeight to the natural height of the image', () => {
       expect(getImageOptions().naturalHeight).toEqual(480);
     });

package/lib/translated/mi/modules/rce/plugins/instructure_record/AudioOptionsTray/TrayController.js

@@ -0,0 +1,131 @@
+/*
+ * Copyright (C) 2021 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import bridge from "../../../../bridge/index.js";
+import { asAudioElement, findMediaPlayerIframe } from "../../shared/ContentSelection.js";
+import AudioOptionsTray from "./index.js";
+export const CONTAINER_ID = 'instructure-audio-options-tray-container';
+export default class TrayController {
+  constructor() {
+    this._isOpen = false;
+    this._shouldOpen = false;
+    this._editor = null;
+    this._audioContainer = null;
+  }
+
+  get container() {
+    let _container = document.getElementById(CONTAINER_ID);
+
+    if (_container == null) {
+      _container = document.createElement('div');
+      _container.id = CONTAINER_ID;
+      document.body.appendChild(_container);
+    }
+
+    return _container;
+  }
+
+  get isOpen() {
+    return this._isOpen;
+  }
+
+  showTrayForEditor(editor) {
+    this._shouldOpen = true;
+    this._editor = editor;
+    this._audioContainer = findMediaPlayerIframe(editor.selection.getNode());
+
+    if (bridge.focusedEditor) {
+      // Dismiss any content trays that may already be open
+      bridge.hideTrays();
+    }
+
+    const trayProps = bridge.trayProps.get(editor);
+
+    this._renderTray(trayProps);
+  }
+
+  hideTrayForEditor(editor) {
+    if (this._editor === editor) {
+      this._dismissTray();
+    }
+  }
+
+  _dismissTray() {
+    if (this._audioContainer) {
+      this._editor.selection.select(this._audioContainer);
+    }
+
+    this._resetController();
+  }
+
+  _resetController() {
+    this._shouldOpen = false;
+
+    this._renderTray();
+
+    this._editor = null;
+    this._audioContainer = null;
+    const elem = document.getElementById(CONTAINER_ID);
+    return elem.parentNode.removeChild(elem);
+  }
+
+  _applyAudioOptions(audioOptions) {
+    if (!audioOptions.media_object_id || audioOptions.media_object_id === 'undefined') {
+      return;
+    }
+
+    const container = this._audioContainer;
+    return audioOptions.updateMediaObject({
+      media_object_id: audioOptions.media_object_id,
+      subtitles: audioOptions.subtitles
+    }).then(() => container === null || container === void 0 ? void 0 : container.contentWindow.location.reload()).catch(ex => {
+      // eslint-disable-next-line no-console
+      console.error('Failed updating audio captions', ex);
+    });
+  }
+
+  _renderTray(trayProps) {
+    let audioOptions = {};
+
+    if (this._shouldOpen) {
+      audioOptions = asAudioElement(this._audioContainer);
+    }
+
+    const element = /*#__PURE__*/React.createElement(AudioOptionsTray, {
+      audioOptions: audioOptions,
+      onEntered: () => {
+        this._isOpen = true;
+      },
+      onExited: () => {
+        bridge.focusActiveEditor(false);
+        this._isOpen = false;
+      },
+      onSave: options => {
+        this._applyAudioOptions(options);
+
+        this._dismissTray();
+      },
+      onDismiss: () => this._dismissTray(),
+      open: this._shouldOpen,
+      trayProps: trayProps
+    });
+    ReactDOM.render(element, this.container);
+  }
+
+}

package/lib/translated/mi/modules/rce/plugins/instructure_record/AudioOptionsTray/__tests__/AudioOptionsTray.test.js

@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2021 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import AudioOptionsTray from "../index.js";
+import AudioOptionsTrayDriver from "./AudioOptionsTrayDriver.js";
+describe('RCE "Audios" Plugin > AudioOptionsTray', () => {
+  let props;
+  let tray;
+  beforeEach(() => {
+    props = {
+      onRequestClose: jest.fn(),
+      onSave: jest.fn(),
+      open: true,
+      audioOptions: {
+        id: 'm-audio-id'
+      },
+      trayOptions: {
+        host: 'localhost:3001',
+        jwt: 'someuglyvalue'
+      }
+    };
+  });
+
+  function renderComponent() {
+    render( /*#__PURE__*/React.createElement(AudioOptionsTray, props));
+    tray = AudioOptionsTrayDriver.find();
+  }
+
+  it('is optionally rendered open', () => {
+    props.open = true;
+    renderComponent();
+    expect(tray).not.toBeNull();
+  });
+  it('is optionally rendered closed', () => {
+    props.open = false;
+    renderComponent();
+    expect(tray).toBeNull();
+  });
+  it('is labeled with "Audio Options Tray"', () => {
+    renderComponent();
+    expect(tray.label).toEqual('Audio Options Tray');
+  });
+  it('when clicked calls the .onSave prop', () => {
+    renderComponent();
+    tray.$doneButton.click();
+    expect(props.onSave).toHaveBeenCalledTimes(1);
+  });
+});