@instructure/canvas-rce 5.6.0-beta.0 → 5.6.0

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/compressionUtils.js

@@ -0,0 +1,83 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
+/*
+ * Copyright (C) 2022 - 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 { PREVIEW_HEIGHT, PREVIEW_WIDTH } from '../ImageCropper/constants';
+const DEFAULT_TARGET_QUALITY = 0.75;
+export const MAX_IMAGE_SIZE_BYTES = 500 * 1024;
+
+function blobToBase64(blob) {
+  return new Promise(resolve => {
+    const reader = new FileReader();
+
+    reader.onloadend = () => resolve(reader.result);
+
+    reader.readAsDataURL(blob);
+  });
+}
+
+function drawImageOnCanvasElement(image, quality, resolve, reject) {
+  const {
+    width,
+    height
+  } = image;
+  let compressedImageWidth, compressedImageHeight;
+
+  if (width > PREVIEW_WIDTH || height > PREVIEW_HEIGHT) {
+    if (width > height) {
+      compressedImageWidth = PREVIEW_WIDTH;
+      compressedImageHeight = compressedImageWidth * (height / width);
+    } else if (height > width) {
+      compressedImageHeight = PREVIEW_HEIGHT;
+      compressedImageWidth = compressedImageHeight * (width / height);
+    } else {
+      compressedImageWidth = compressedImageHeight = PREVIEW_HEIGHT;
+    }
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = compressedImageWidth;
+  canvas.height = compressedImageHeight;
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(image, 0, 0, compressedImageWidth, compressedImageHeight);
+  canvas.toBlob(blob => blob ? resolve(blob) : reject(blob), 'image/jpeg', quality);
+}
+
+export function canCompressImage() {
+  // Some old browsers don't support toBlob
+  return Boolean(document.createElement('canvas').toBlob);
+}
+export function shouldCompressImage(_ref) {
+  var _context;
+
+  let {
+    type,
+    size
+  } = _ref;
+  return _includesInstanceProperty(_context = ['image/jpeg', 'image/webp', 'image/bmp', 'image/tiff']).call(_context, type) && size > MAX_IMAGE_SIZE_BYTES;
+}
+export function compressImage(encodedImage) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.src = encodedImage;
+
+    image.onload = function () {
+      drawImageOnCanvasElement(image, DEFAULT_TARGET_QUALITY, resolve, reject);
+    };
+  }).then(blob => blobToBase64(blob));
+}

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/TextSection.js

@@ -15,7 +15,7 @@
  * 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 React, { useEffect, useState } from 'react';
 import { Flex } from '@instructure/ui-flex';
 import { TextInput } from '@instructure/ui-text-input';
 import { SimpleSelect } from '@instructure/ui-simple-select';
@@ -23,22 +23,39 @@ import { ColorInput } from '../../../shared/ColorInput';
 import formatMessage from '../../../../../format-message';
 import { Group } from './Group';
 import { MAX_TOTAL_TEXT_CHARS } from '../../svg/constants';
-import useDebouncedValue from '../../utils/useDebouncedValue';
 const TEXT_SIZES = ['small', 'medium', 'large', 'x-large'];
 const TEXT_POSITIONS = ['middle', 'bottom-third', 'below'];
 
 const getTextSection = () => document.querySelector('#icons-tray-text-section');
 
+const processText = (oldValue, newValue) => {
+  let result = newValue;
+
+  if (newValue.length > MAX_TOTAL_TEXT_CHARS) {
+    if (oldValue.length >= MAX_TOTAL_TEXT_CHARS) {
+      // When typing chars
+      result = oldValue;
+    } else {
+      // When pasting text
+      result = result.substring(0, MAX_TOTAL_TEXT_CHARS);
+    }
+  }
+
+  return result;
+};
+
 export const TextSection = _ref => {
   let {
     settings,
     onChange
   } = _ref;
-  const [text, setText] = useDebouncedValue(settings.text, t => {
-    if (t.length <= MAX_TOTAL_TEXT_CHARS) onChange({
-      text: t
-    });
-  });
+  const [text, setText] = useState(settings.text);
+  useEffect(() => {
+    if (settings.text !== text) {
+      setText(processText(settings.text));
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [settings.text]);
   return /*#__PURE__*/React.createElement(Group, {
     as: "section",
     defaultExpanded: true,
@@ -53,7 +70,16 @@ export const TextSection = _ref => {
   }, /*#__PURE__*/React.createElement(TextInput, {
     id: "icon-text",
     renderLabel: "\u0646\u0635",
-    onChange: setText,
+    onChange: (e, value) => {
+      const processedText = processText(text, value);
+
+      if (processedText !== text) {
+        setText(processedText);
+        onChange({
+          text: processedText
+        });
+      }
+    },
     value: text,
     messages: [{
       text: `${text.length}/${MAX_TOTAL_TEXT_CHARS}`,

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/__tests__/TextSection.test.js

@@ -33,11 +33,13 @@ function selectOption(button, option) {
 describe('<TextSection />', () => {
   it('changes the icon text', async () => {
     const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(TextSection, {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(TextSection, {
       settings: DEFAULT_SETTINGS,
       onChange: onChange
     }));
-    const input = document.querySelector('#icon-text');
+    const input = container.querySelector('#icon-text');
     fireEvent.change(input, {
       target: {
         value: 'Hello World!'
@@ -47,6 +49,44 @@ describe('<TextSection />', () => {
       text: 'Hello World!'
     }));
   });
+  it("doesn't change the icon text when reaches the limit when typing", async () => {
+    const onChange = jest.fn();
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(TextSection, {
+      settings: { ...DEFAULT_SETTINGS,
+        text: 'Hello World!Hello World!Hello!12'
+      },
+      onChange: onChange
+    }));
+    const input = container.querySelector('#icon-text');
+    fireEvent.change(input, {
+      target: {
+        value: 'Hello World!Hello World!Hello!123'
+      }
+    });
+    await waitFor(() => expect(onChange).not.toHaveBeenCalled());
+  });
+  it("doesn't change the icon text when reaches the limit when pasting", async () => {
+    const onChange = jest.fn();
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(TextSection, {
+      settings: { ...DEFAULT_SETTINGS,
+        text: 'Hello World!'
+      },
+      onChange: onChange
+    }));
+    const input = container.querySelector('#icon-text');
+    fireEvent.change(input, {
+      target: {
+        value: 'Hello World!Hello World!Hello World!Hello World!Hello World!'
+      }
+    });
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith({
+      text: 'Hello World!Hello World!Hello Wo'
+    }));
+  });
   it('changes the icon text size', () => {
     const onChange = jest.fn();
     render( /*#__PURE__*/React.createElement(TextSection, {

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/components/IconMakerTray.js

@@ -35,7 +35,7 @@ import { useStoreProps } from '../../shared/StoreContext';
 import formatMessage from '../../../../format-message';
 import buildDownloadUrl from '../../shared/buildDownloadUrl';
 import { validIcon } from '../utils/iconValidation';
-import { hasChanges } from '../utils/iconMakerFormHasChanges';
+import { IconMakerFormHasChanges } from '../utils/IconMakerFormHasChanges';
 import bridge from '../../../../bridge';
 const INVALID_MESSAGE = "One of the following styles must be added to save an icon: Icon Color, Outline Size, Icon Text, or Image";
 const UNSAVED_CHANGES_MESSAGE = "You have unsaved changes in the Icon Maker tray. Do you want to continue without saving these changes?";
@@ -63,11 +63,12 @@ function renderHeader(title, settings, onKeyDown, isInvalid, onAlertDismissal, o
     as: "h2"
   }, title)), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "static",
-    variant: "icon",
+    color: "primary",
     onClick: onClose,
     onKeyDown: onKeyDown,
-    "data-testid": "icon-maker-close-button"
-  }, "\u0625\u063A\u0644\u0627\u0642")))), /*#__PURE__*/React.createElement(Flex.Item, {
+    "data-testid": "icon-maker-close-button",
+    screenReaderLabel: "\u0625\u063A\u0644\u0627\u0642"
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "div",
     padding: "small"
   }, /*#__PURE__*/React.createElement(Preview, {
@@ -111,8 +112,9 @@ function renderFooter(status, onClose, handleSubmit, editing, replaceAll, setRep
 
 const checkIfAnyUnsavedChanges = (initialSettings, currentSettings) => {
   let shouldCloseTray = true;
+  const imFormHasChanges = new IconMakerFormHasChanges(initialSettings, currentSettings);
 
-  if (hasChanges(initialSettings, currentSettings)) {
+  if (imFormHasChanges.hasChanges()) {
     // RCE already uses browser's confirm dialog for unsaved changes
     // Its use here in the Icon Maker tray keeps that consistency
     // eslint-disable-next-line no-restricted-globals, no-alert

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/components/__tests__/IconMakerTray.test.js

@@ -137,7 +137,7 @@ describe('RCE "Icon Maker" Plugin > IconMakerTray', () => {
       originalFocus = window.HTMLElement.prototype.focus;
     });
     beforeEach(() => {
-      window.HTMLElement.prototype.focus = jest.fn().mockImplementation(function (args) {
+      window.HTMLElement.prototype.focus = jest.fn().mockImplementation(function (_args) {
         focusedElement = this;
       });
     });
@@ -432,24 +432,20 @@ describe('RCE "Icon Maker" Plugin > IconMakerTray', () => {
     beforeEach(() => {
       fetchMock.mock('*', {
         body: `
-          <svg height="100" width="100">
-            <metadata>
-              {
-                "alt":"a test image",
-                "shape":"triangle",
-                "size":"large",
-                "color":"#FF2717",
-                "outlineColor":"#06A3B7",
-                "outlineSize":"small",
-                "text":"Some Text",
-                "textSize":"medium",
-                "textColor":"#009606",
-                "textBackgroundColor":"#E71F63",
-                "textPosition":"below"
-              }
-            </metadata>
-            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-          </svg>`
+          {
+            "name":"Test Icon.svg",
+            "alt":"a test image",
+            "shape":"triangle",
+            "size":"large",
+            "color":"#FF2717",
+            "outlineColor":"#06A3B7",
+            "outlineSize":"small",
+            "text":"Some Text",
+            "textSize":"medium",
+            "textColor":"#009606",
+            "textBackgroundColor":"#E71F63",
+            "textPosition":"below"
+          }`
       });
     });
     afterEach(() => {

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/reducers/imageSection.js

@@ -26,7 +26,8 @@ export const initialState = {
   loading: false,
   error: undefined,
   cropperOpen: false,
-  cropperSettings: null
+  cropperSettings: null,
+  compressed: false
 };
 export const actions = {
   RESET_ALL: {
@@ -38,6 +39,9 @@ export const actions = {
   SET_IMAGE_NAME: {
     type: 'SetImageName'
   },
+  SET_COMPRESSION_STATUS: {
+    type: 'SetCompressionStatus'
+  },
   CLEAR_IMAGE: {
     type: 'ClearImage'
   },
@@ -110,10 +114,16 @@ const imageSection = (state, action) => {
         imageName: action.payload
       };
 
+    case actions.SET_COMPRESSION_STATUS.type:
+      return { ...state,
+        compressed: action.payload
+      };
+
     case actions.CLEAR_IMAGE.type:
       return { ...state,
         image: '',
-        imageName: ''
+        imageName: '',
+        compressed: false
       };
 
     case actions.SET_ICON.type:

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/svg/__tests__/index.test.js

@@ -169,7 +169,7 @@ describe('buildSvg()', () => {
           </g>
         </svg>
         <path
-          d="M103,224 h14 a4,4 0 0 1 4,4 v16 a4,4 0 0 1 -4,4 h-14 a4,4 0 0 1 -4,-4 v-16 a4,4 0 0 1 4,-4 z"
+          d="M103,223 h14 a4,4 0 0 1 4,4 v16 a4,4 0 0 1 -4,4 h-14 a4,4 0 0 1 -4,-4 v-16 a4,4 0 0 1 4,-4 z"
           fill=""
         />
         <text

package/lib/translated/ar/modules/rce/plugins/instructure_icon_maker/svg/__tests__/settings.test.js

@@ -17,25 +17,18 @@
  */
 import fetchMock from 'fetch-mock';
 import { renderHook, act } from '@testing-library/react-hooks/dom';
-import { useSvgSettings, svgFromUrl, statuses } from '../settings';
+import { useSvgSettings, statuses } from '../settings';
 import Editor from '../../../shared/__tests__/FakeEditor';
-import RceApiSource from '../../../../../rcs/api';
-jest.mock('../../../../../rcs/api');
 describe('useSvgSettings()', () => {
   let editing, ed, rcs;
   beforeEach(() => {
     ed = new Editor();
     rcs = {
-      getFile: jest.fn(() => Promise.resolve({
-        name: 'Test Icon.svg'
-      })),
       contextType: 'course',
       contextId: 1,
       canvasUrl: 'https://domain.from.env'
     };
-    RceApiSource.mockImplementation(() => rcs);
   });
-  afterEach(() => RceApiSource.mockClear());
 
   const subject = () => renderHook(() => useSvgSettings(ed, editing, rcs)).result;
 
@@ -148,10 +141,8 @@ describe('useSvgSettings()', () => {
       //
 
       body = `
-        <svg height="100" width="100">
-        <metadata>
           {
-            "name":"Test Image",
+            "name":"Test Icon",
             "alt":"a test image",
             "shape":"triangle",
             "size":"large",
@@ -163,13 +154,10 @@ describe('useSvgSettings()', () => {
             "textColor":"#009606",
             "textBackgroundColor":"#06A3B7",
             "textPosition":"below"
-          }
-        </metadata>
-        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-      </svg>`; // Stub fetch to return an SVG file
+          }`; // Stub fetch to return an SVG file
 
       mock = fetchMock.mock({
-        name: 'download-url',
+        name: 'icon_metadata',
         matcher: '*',
         response: () => ({
           body
@@ -180,20 +168,20 @@ describe('useSvgSettings()', () => {
       jest.resetAllMocks();
       fetchMock.restore();
     });
-    it('fetches the SVG file, specifying the course ID and timestamp', () => {
+    it('fetches the icon metadata, specifying the course ID and timestamp', () => {
       subject();
-      expect(mock.called('download-url')).toBe(true);
-      expect(mock.calls('download-url')[0][0]).toMatch(/https:\/\/domain.from.env\/files\/1\/download\?replacement_chain_context_type=course&replacement_chain_context_id=1&ts=\d+&download_frd=1/);
+      expect(mock.called('icon_metadata')).toBe(true);
+      expect(mock.calls('icon_metadata')[0][0]).toMatch(/https:\/\/domain.from.env\/api\/v1\/files\/1\/icon_metadata/);
     });
     describe('when the download URL contains a course ID', () => {
       beforeEach(() => {
         ed.setContent('<img id="test-image" data-inst-icon-maker-icon="true" src="https://canvas.instructure.com/svg" data-download-url="courses/2/files/1/download" alt="a red circle" />');
         ed.setSelectedNode(ed.dom.select('#test-image')[0]);
       });
-      it('fetches the SVG file using the /files/:file_id/download endpoint', () => {
+      it('fetches the icon metadata using the /files/:file_id/icon_metadata endpoint', () => {
         subject();
-        expect(mock.called('download-url')).toBe(true);
-        expect(mock.calls('download-url')[0][0]).toMatch(/https:\/\/domain.from.env\/files\/1\/download\?replacement_chain_context_type=course&replacement_chain_context_id=1&ts=\d+&download_frd=1/);
+        expect(mock.called('icon_metadata')).toBe(true);
+        expect(mock.calls('icon_metadata')[0][0]).toMatch(/https:\/\/domain.from.env\/api\/v1\/files\/1\/icon_metadata/);
       });
     });
     describe('with a relative download URL', () => {
@@ -201,10 +189,10 @@ describe('useSvgSettings()', () => {
         ed.setContent('<img id="test-image" data-inst-icon-maker-icon="true" src="https://canvas.instructure.com/svg" data-download-url="/files/1/download" alt="a red circle" />');
         ed.setSelectedNode(ed.dom.select('#test-image')[0]);
       });
-      it('fetches the SVG file, specifying the course ID and timestamp', () => {
+      it('fetches the icon metadata, specifying the course ID and timestamp', () => {
         subject();
-        const calledUrl = mock.calls('download-url')[0][0];
-        expect(calledUrl).toMatch(/https:\/\/domain.from.env\/files\/1\/download\?replacement_chain_context_type=course&replacement_chain_context_id=1&ts=\d+&download_frd=1/);
+        const calledUrl = mock.calls('icon_metadata')[0][0];
+        expect(calledUrl).toMatch(/https:\/\/domain.from.env\/api\/v1\/files\/1\/icon_metadata/);
       });
     });
     describe('with a containing element selected', () => {
@@ -212,26 +200,13 @@ describe('useSvgSettings()', () => {
         ed.setContent('<p id="containing"><img data-inst-icon-maker-icon="true" src="https://canvas.instructure.com/svg" data-download-url="/files/1/download" alt="a red circle" /></p>');
         ed.setSelectedNode(ed.dom.select('#containing')[0]);
       });
-      it('fetches the SVG file, specifying the course ID and timestamp', () => {
+      it('fetches the icon metadata, specifying the course ID and timestamp', () => {
         subject();
-        const calledUrl = mock.calls('download-url')[0][0];
-        expect(calledUrl).toMatch(/https:\/\/domain.from.env\/files\/1\/download\?replacement_chain_context_type=course&replacement_chain_context_id=1&ts=\d+&download_frd=1/);
-      });
-    });
-    it('uses replacement chain context info in request for file name', async () => {
-      const {
-        result,
-        waitForValueToChange
-      } = renderHook(() => useSvgSettings(ed, editing, rcs));
-      await waitForValueToChange(() => {
-        return result.current[0];
-      });
-      expect(rcs.getFile).toHaveBeenCalledWith('1', {
-        replacement_chain_context_id: 1,
-        replacement_chain_context_type: 'course'
+        const calledUrl = mock.calls('icon_metadata')[0][0];
+        expect(calledUrl).toMatch(/https:\/\/domain.from.env\/api\/v1\/files\/1\/icon_metadata/);
       });
     });
-    it('parses the SVG settings from the SVG metadata', async () => {
+    it('parses the SVG settings from the icon metadata', async () => {
       const {
         result,
         waitForValueToChange
@@ -275,10 +250,8 @@ describe('useSvgSettings()', () => {
     });
     describe('parses the SVG settings from a legacy SVG metadata structure', () => {
       const bodyGenerator = overrideParams => `
-          <svg height="100" width="100">
-          <metadata>
-            ${JSON.stringify({ ...{
-          name: 'Test Image',
+        ${JSON.stringify({ ...{
+          name: 'Test Icon',
           alt: 'a test image',
           shape: 'triangle',
           size: 'large',
@@ -301,13 +274,10 @@ describe('useSvgSettings()', () => {
           }
         },
         ...overrideParams
-      })}
-          </metadata>
-          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-        </svg>`;
+      })}`;
 
       const overwriteUrl = () => mock = fetchMock.mock({
-        name: 'download-url',
+        name: 'icon_metadata',
         matcher: '*',
         response: () => ({
           body
@@ -590,47 +560,39 @@ describe('useSvgSettings()', () => {
           data-inst-icon-maker-icon="true"
           data-download-url="https://canvas.instructure.com/files/2/download" />
       `);
-      fetchMock.mock('begin:https://domain.from.env/files/1/download', {
+      fetchMock.mock('begin:https://domain.from.env/api/v1/files/1/icon_metadata', {
         body: `
-          <svg height="100" width="100">
-            <metadata>
-              {
-                "alt":"the first test image",
-                "shape":"triangle",
-                "size":"large",
-                "color":"#FF2717",
-                "outlineColor":"#06A3B7",
-                "outlineSize":"small",
-                "text":"Some Text",
-                "textSize":"medium",
-                "textColor":"#009606",
-                "textBackgroundColor":"#06A3B7",
-                "textPosition":"below"
-              }
-            </metadata>
-            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-          </svg>`
+          {
+            "name":"Test Icon.svg",
+            "alt":"the first test image",
+            "shape":"triangle",
+            "size":"large",
+            "color":"#FF2717",
+            "outlineColor":"#06A3B7",
+            "outlineSize":"small",
+            "text":"Some Text",
+            "textSize":"medium",
+            "textColor":"#009606",
+            "textBackgroundColor":"#06A3B7",
+            "textPosition":"below"
+          }`
       });
-      fetchMock.mock('begin:https://domain.from.env/files/2/download', {
+      fetchMock.mock('begin:https://domain.from.env/api/v1/files/2/icon_metadata', {
         body: `
-          <svg height="100" width="100">
-            <metadata>
-              {
-                "alt":"the second test image",
-                "shape":"square",
-                "size":"medium",
-                "color":"#FF2717",
-                "outlineColor":"#06A3B7",
-                "outlineSize":"small",
-                "text":"Some Text",
-                "textSize":"medium",
-                "textColor":"#009606",
-                "textBackgroundColor":"#06A3B7",
-                "textPosition":"below"
-              }
-            </metadata>
-            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-          </svg>`
+          {
+            "name":"Test Icon.svg",
+            "alt":"the second test image",
+            "shape":"square",
+            "size":"medium",
+            "color":"#FF2717",
+            "outlineColor":"#06A3B7",
+            "outlineSize":"small",
+            "text":"Some Text",
+            "textSize":"medium",
+            "textColor":"#009606",
+            "textBackgroundColor":"#06A3B7",
+            "textPosition":"below"
+          }`
       });
     });
     afterEach(() => fetchMock.reset());
@@ -650,40 +612,4 @@ describe('useSvgSettings()', () => {
       expect(result.current[0].shape).toEqual('square');
     });
   });
-});
-describe('svgFromUrl()', () => {
-  let svgResponse;
-
-  const subject = () => svgFromUrl('https://www.instructure.com/svg');
-
-  beforeEach(() => {
-    fetchMock.mock('https://www.instructure.com/svg', () => ({
-      body: svgResponse,
-      sendAsJson: false
-    }));
-  });
-  afterEach(() => {
-    fetchMock.restore();
-    jest.resetAllMocks();
-  });
-  describe('when the url points to an SVG file', () => {
-    beforeEach(() => {
-      svgResponse = `
-        <svg height="100" width="100">
-          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-        </svg>
-      `;
-    });
-    it('returns the parsed SVG document', async () => {
-      const svgDoc = await subject();
-      expect(svgDoc.querySelector('svg').innerHTML).toContain('<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>');
-    });
-  });
-  describe('when the url points to a document that is not parsable', () => {
-    beforeEach(() => svgResponse = 'asdf');
-    it('returns an empty document', async () => {
-      const doc = await subject();
-      expect(doc.firstChild.toString.innerHTML).toEqual(undefined);
-    });
-  });
 });