@instructure/canvas-rce 5.6.2 → 5.6.4

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/ModeSelect.test.js

@@ -1,98 +0,0 @@
-/*
- * 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 { fireEvent, render } from '@testing-library/react';
-import ModeSelect from '../ModeSelect';
-import { actions } from '../../../../reducers/imageSection';
-describe('ModeSelect', () => {
-  const defaultProps = {
-    dispatch: jest.fn()
-  };
-
-  const subject = overrides => render( /*#__PURE__*/React.createElement(ModeSelect, Object.assign({}, defaultProps, overrides)));
-
-  afterEach(() => jest.resetAllMocks());
-  it('renders the "Add Image" button', () => {
-    const {
-      getByText
-    } = subject();
-    expect(getByText('Add Image')).toBeInTheDocument();
-  });
-  describe('with the menu open', () => {
-    let getByText;
-    beforeEach(() => {
-      const rendered = subject({
-        rcsConfig: {
-          features: {
-            icon_maker_cropper: true
-          }
-        }
-      });
-      getByText = rendered.getByText;
-      fireEvent.click(getByText('Add Image'));
-    });
-    it('renders the upload images option', () => {
-      expect(getByText('Upload Image')).toBeInTheDocument();
-    });
-    it('renders the singe color images option', () => {
-      expect(getByText('Single Color Image')).toBeInTheDocument();
-    });
-    it('renders the multi color images option', () => {
-      expect(getByText('Multi Color Image')).toBeInTheDocument();
-    });
-    it('renders the course images option', () => {
-      expect(getByText('Course Images')).toBeInTheDocument();
-    });
-
-    const sharedExamplesForMenuItemClick = type => {
-      it('dispatches the correct action', () => {
-        expect(defaultProps.dispatch).toHaveBeenCalledWith({
-          type
-        });
-        expect(defaultProps.dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_COLLECTION_OPEN,
-          payload: true
-        });
-      });
-    };
-
-    describe('when the upload images option is clicked', () => {
-      beforeEach(() => {
-        fireEvent.click(getByText('Upload Image'));
-      });
-      sharedExamplesForMenuItemClick('Upload');
-    });
-    describe('when the singe color images option is clicked', () => {
-      beforeEach(() => {
-        fireEvent.click(getByText('Single Color Image'));
-      });
-      sharedExamplesForMenuItemClick('SingleColor');
-    });
-    describe('when the multi color images option is clicked', () => {
-      beforeEach(() => {
-        fireEvent.click(getByText('Multi Color Image'));
-      });
-      sharedExamplesForMenuItemClick('MultiColor');
-    });
-    describe('when the course images option is clicked', () => {
-      beforeEach(() => {
-        fireEvent.click(getByText('Course Images'));
-      });
-      sharedExamplesForMenuItemClick('Course');
-    });
-  });
-});

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/SVGIcon.test.js

@@ -1,53 +0,0 @@
-/*
- * 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 React from 'react';
-import { render } from '@testing-library/react';
-import SVGThumbnail from '../SVGThumbnail';
-describe('SVGThumbnail', () => {
-  let name;
-  const source = {
-    foo: {
-      source: () => '<svg />',
-      label: 'Foo'
-    }
-  };
-
-  const subject = () => render( /*#__PURE__*/React.createElement(SVGThumbnail, {
-    name: name,
-    source: source
-  }));
-
-  describe('when the name corresponds to an icon', () => {
-    beforeEach(() => name = 'foo');
-    it('renders the SVG icon', () => {
-      const {
-        getByTestId
-      } = subject();
-      expect(getByTestId('icon-foo')).toBeInTheDocument();
-    });
-  });
-  describe('when the name does not correspond to an icon', () => {
-    beforeEach(() => name = 'banana');
-    it('renders the empty SVG without error', () => {
-      const {
-        getByTestId
-      } = subject();
-      expect(getByTestId('icon-banana')).toBeInTheDocument();
-    });
-  });
-});

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/SVGList.test.js

@@ -1,72 +0,0 @@
-/*
- * 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 React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import SVGList, { TYPE } from '../SVGList';
-import MultiColorSVG from '../MultiColor/svg';
-describe('SVGList', () => {
-  let type, onSelect, onMount;
-  beforeEach(() => onSelect = () => {});
-
-  const subject = () => render( /*#__PURE__*/React.createElement(SVGList, {
-    type: type,
-    onSelect: onSelect,
-    onMount: onMount
-  }));
-
-  describe('when "type" is "multicolor"', () => {
-    beforeEach(() => type = TYPE.Multicolor);
-    it('renders the multicolor SVG list', () => {
-      const {
-        getByTestId
-      } = subject();
-      expect(getByTestId('multicolor-svg-list')).toBeInTheDocument();
-    });
-    it('renders an entry for each multicolor icon', () => {
-      const {
-        getByTestId
-      } = subject();
-      Object.keys(MultiColorSVG).forEach(iconName => {
-        expect(getByTestId(`icon-${iconName}`)).toBeInTheDocument();
-      });
-    });
-  });
-  describe('when an entry is clicked', () => {
-    beforeEach(() => {
-      type = TYPE.Multicolor;
-      onSelect = jest.fn();
-    });
-    afterEach(() => jest.clearAllMocks());
-    it('calls the "onSelect" handler with the selected icon', () => {
-      const {
-        getByTestId
-      } = subject();
-      fireEvent.click(getByTestId('icon-maker-art'));
-      expect(onSelect).toHaveBeenCalledWith(expect.stringContaining('art'), expect.objectContaining({
-        label: 'Art Icon'
-      }));
-    });
-  });
-  describe('when an "onMount" function is given', () => {
-    beforeEach(() => onMount = jest.fn());
-    it('calls "onMount"', () => {
-      subject();
-      expect(onMount).toHaveBeenCalledTimes(1);
-    });
-  });
-});

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/Upload.test.js

@@ -1,186 +0,0 @@
-/*
- * 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 React from 'react';
-import { render, waitFor, fireEvent } from '@testing-library/react';
-import Upload, { onSubmit } from '../Upload';
-import { actions } from '../../../../reducers/imageSection';
-import FakeEditor from '../../../../../shared/__tests__/FakeEditor';
-import fetchMock from 'fetch-mock';
-import { isAnUnsupportedGifPngImage } from '../utils';
-jest.mock('../../../../../../../bridge', () => {
-  return {
-    trayProps: {
-      get: () => ({
-        foo: 'bar'
-      })
-    }
-  };
-});
-jest.mock('../compressionUtils', () => ({ ...jest.requireActual('../compressionUtils'),
-  compressImage: jest.fn().mockReturnValue(Promise.resolve('data:image/jpeg;base64,abcdefghijk=='))
-}));
-jest.mock('../utils', () => ({ ...jest.requireActual('../utils'),
-  isAnUnsupportedGifPngImage: jest.fn().mockReturnValue(false)
-}));
-let props;
-
-const subject = () => render( /*#__PURE__*/React.createElement(Upload, props));
-
-describe('Upload()', () => {
-  beforeEach(() => {
-    props = {
-      editor: new FakeEditor(),
-      dispatch: jest.fn()
-    };
-    fetchMock.mock('/api/session', '{}');
-  });
-  afterEach(() => {
-    fetchMock.restore();
-    jest.clearAllMocks();
-  });
-  it('renders an upload modal', async () => {
-    const {
-      getAllByText
-    } = subject(props);
-    await waitFor(() => expect(getAllByText('Upload Image').length).toBe(2));
-  });
-  describe('when the "Close" button is pressed', () => {
-    let rendered;
-    beforeEach(async () => {
-      rendered = subject();
-      const button = await rendered.findAllByText(/Close/i);
-      fireEvent.click(button[0]);
-    });
-    it('closes the modal', async () => {
-      expect(props.dispatch).toHaveBeenCalled();
-    });
-  });
-  describe('onSubmit()', () => {
-    const dispatch = jest.fn();
-    const onChange = jest.fn();
-    const theFile = {
-      preview: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEBCAMAAAD1kWivAAADAFBMVEWysrL5nCYYGBj7/+rceo3w1tD+yAfwFTPrIj36',
-      name: 'Test Image.png',
-      type: 'image/png',
-      size: 100000
-    };
-
-    const onSubmitCall = () => onSubmit(dispatch, onChange)({}, {}, {}, {
-      theFile
-    });
-
-    afterEach(() => jest.clearAllMocks());
-    it('sets the selected image', () => {
-      onSubmitCall();
-      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE,
-        payload: theFile.preview
-      });
-    });
-    it('sets the selected image name', () => {
-      onSubmitCall();
-      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_NAME,
-        payload: theFile.name
-      });
-    });
-    it('closes the collection', () => {
-      onSubmitCall();
-      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_COLLECTION_OPEN,
-        payload: false
-      });
-    });
-    it('opens image cropper', () => {
-      onSubmitCall();
-      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_CROPPER_OPEN,
-        payload: true
-      });
-    });
-    describe('with an unsupported image', () => {
-      beforeAll(() => {
-        isAnUnsupportedGifPngImage.mockReturnValue(true);
-      });
-      afterAll(() => {
-        isAnUnsupportedGifPngImage.mockReturnValue(false);
-      });
-      it('closes the collection', () => {
-        onSubmitCall();
-        expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_COLLECTION_OPEN,
-          payload: false
-        });
-      });
-      it('sets the error', () => {
-        onSubmitCall();
-        expect(onChange).toHaveBeenCalledWith({
-          type: 'SetError',
-          payload: 'GIF/PNG format images larger than 250 KB are not currently supported.'
-        });
-      });
-    });
-  });
-  describe('onSubmit() with an image to be compressed', () => {
-    const dispatch = jest.fn();
-    const theFile = {
-      preview: 'data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEBCAMAAAD1kWivAAADAFBMVEWysrL5nCYYGBj7/+rceo3w1tD+yAfwFTPrIj36',
-      name: 'Test Image.jpeg',
-      type: 'image/jpeg',
-      size: 600000
-    };
-
-    const onSubmitCall = () => onSubmit(dispatch)({}, {}, {}, {
-      theFile
-    });
-
-    const flushPromises = () => new Promise(setTimeout);
-
-    afterEach(() => jest.clearAllMocks());
-    it('sets the compression status', async () => {
-      onSubmitCall();
-      await flushPromises();
-      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_COMPRESSION_STATUS,
-        payload: true
-      });
-    });
-    it('sets the selected image', async () => {
-      onSubmitCall();
-      await flushPromises();
-      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE,
-        payload: 'data:image/jpeg;base64,abcdefghijk=='
-      });
-    });
-    it('sets the selected image name', async () => {
-      onSubmitCall();
-      await flushPromises();
-      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_NAME,
-        payload: 'Test Image.jpeg'
-      });
-    });
-    it('closes the collection', async () => {
-      onSubmitCall();
-      await flushPromises();
-      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_IMAGE_COLLECTION_OPEN,
-        payload: false
-      });
-    });
-    it('opens image cropper', async () => {
-      onSubmitCall();
-      await flushPromises();
-      expect(dispatch).toHaveBeenCalledWith({ ...actions.SET_CROPPER_OPEN,
-        payload: true
-      });
-    });
-  });
-});

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/compressionUtils.test.js

@@ -1,114 +0,0 @@
-/*
- * 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 { shouldCompressImage, compressImage } from '../compressionUtils';
-jest.spyOn(global, 'FileReader').mockImplementation(function () {
-  this.readAsDataURL = () => {
-    this.result = 'data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==';
-    this.onloadend();
-  };
-});
-global.Image = class {
-  constructor() {
-    setTimeout(() => {
-      this.onload();
-    }, 100);
-  }
-
-};
-describe('shouldCompressImage()', () => {
-  describe('mime types', () => {
-    it('accepts jpeg images', () => {
-      expect(shouldCompressImage({
-        type: 'image/jpeg',
-        size: 600000
-      })).toBe(true);
-    });
-    it('accepts webp images', () => {
-      expect(shouldCompressImage({
-        type: 'image/webp',
-        size: 600000
-      })).toBe(true);
-    });
-    it('accepts bmp images', () => {
-      expect(shouldCompressImage({
-        type: 'image/bmp',
-        size: 600000
-      })).toBe(true);
-    });
-    it('accepts tiff images', () => {
-      expect(shouldCompressImage({
-        type: 'image/tiff',
-        size: 600000
-      })).toBe(true);
-    });
-    it("doesn't accept gif images", () => {
-      expect(shouldCompressImage({
-        type: 'image/gif',
-        size: 600000
-      })).toBe(false);
-    });
-    it("doesn't accept png images", () => {
-      expect(shouldCompressImage({
-        type: 'image/png',
-        size: 600000
-      })).toBe(false);
-    });
-    it("doesn't accept svg images", () => {
-      expect(shouldCompressImage({
-        type: 'image/svg+xml',
-        size: 600000
-      })).toBe(false);
-    });
-  });
-  describe('size', () => {
-    it('has greater size', () => {
-      expect(shouldCompressImage({
-        type: 'image/jpeg',
-        size: 600000
-      })).toBe(true);
-    });
-    it('has lower size', () => {
-      expect(shouldCompressImage({
-        type: 'image/jpeg',
-        size: 400000
-      })).toBe(false);
-    });
-  });
-});
-describe('compressImage()', () => {
-  beforeAll(() => {
-    const createElement = document.createElement.bind(document);
-
-    document.createElement = tagName => {
-      if (tagName === 'canvas') {
-        return {
-          getContext: () => ({
-            drawImage: jest.fn()
-          }),
-          toBlob: fn => fn('data:image/jpeg;base64,xxxxxxx==')
-        };
-      }
-
-      return createElement(tagName);
-    };
-  });
-  it('returns compressed blob image', async () => {
-    const result = await compressImage('data:image/jpeg;base64,abcdefhijk==');
-    expect(result).toEqual('data:image/jpeg;base64,SGVsbG8sIFdvcmxkIQ==');
-  });
-});

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/ImageSection/__tests__/utils.test.js

@@ -1,75 +0,0 @@
-/*
- * 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 { isAnUnsupportedGifPngImage } from '../utils';
-import { shouldCompressImage } from '../compressionUtils';
-describe('isAnUnsupportedGifPngImage()', () => {
-  it('returns true for a heavy GIF image', () => {
-    expect(isAnUnsupportedGifPngImage({
-      type: 'image/gif',
-      size: 300 * 1024
-    })).toBe(true);
-  });
-  it('returns true for a heavy PNG image', () => {
-    expect(isAnUnsupportedGifPngImage({
-      type: 'image/png',
-      size: 300 * 1024
-    })).toBe(true);
-  });
-  describe('returns false based on', () => {
-    describe('mime types', () => {
-      it('for jpeg images', () => {
-        expect(isAnUnsupportedGifPngImage({
-          type: 'image/jpeg',
-          size: 200 * 1024
-        })).toBe(false);
-      });
-      it('for webp images', () => {
-        expect(isAnUnsupportedGifPngImage({
-          type: 'image/webp',
-          size: 200 * 1024
-        })).toBe(false);
-      });
-      it('for bmp images', () => {
-        expect(isAnUnsupportedGifPngImage({
-          type: 'image/bmp',
-          size: 200 * 1024
-        })).toBe(false);
-      });
-      it('for tiff images', () => {
-        expect(isAnUnsupportedGifPngImage({
-          type: 'image/tiff',
-          size: 200 * 1024
-        })).toBe(false);
-      });
-    });
-    describe('size', () => {
-      it('for gif images with small size', () => {
-        expect(isAnUnsupportedGifPngImage({
-          type: 'image/gif',
-          size: 100 * 1024
-        })).toBe(false);
-      });
-      it('for png images with small size', () => {
-        expect(isAnUnsupportedGifPngImage({
-          type: 'image/png',
-          size: 100 * 1024
-        })).toBe(false);
-      });
-    });
-  });
-});

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/__tests__/ColorSection.test.js

@@ -1,87 +0,0 @@
-/*
- * 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 { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { DEFAULT_SETTINGS } from '../../../svg/constants';
-import { ColorSection } from '../ColorSection';
-
-function selectOption(button, option) {
-  userEvent.click(screen.getByRole('button', {
-    name: button
-  }));
-  userEvent.click(screen.getByRole('option', {
-    name: option
-  }));
-}
-
-describe('<ColorSection />', () => {
-  it('changes the icon color', () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(ColorSection, {
-      settings: DEFAULT_SETTINGS,
-      onChange: onChange
-    }));
-    const input = screen.getByRole('textbox', {
-      name: /icon color/i
-    });
-    fireEvent.change(input, {
-      target: {
-        value: '#fff'
-      }
-    });
-    expect(onChange).toHaveBeenCalledWith({
-      color: '#fff'
-    });
-  });
-  it('changes the outline color', () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(ColorSection, {
-      settings: DEFAULT_SETTINGS,
-      onChange: onChange
-    }));
-    const input = screen.getByRole('textbox', {
-      name: /outline color/i
-    });
-    fireEvent.change(input, {
-      target: {
-        value: '#000'
-      }
-    });
-    expect(onChange).toHaveBeenCalledWith({
-      outlineColor: '#000'
-    });
-  });
-  it('changes the icon outline size', () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(ColorSection, {
-      settings: { ...DEFAULT_SETTINGS,
-        outlineSize: 'medium'
-      },
-      onChange: onChange
-    }));
-    selectOption(/outline size/i, /small/i);
-    expect(onChange).toHaveBeenCalledWith({
-      outlineSize: 'small'
-    });
-    selectOption(/outline size/i, /none/i);
-    expect(onChange).toHaveBeenCalledWith({
-      outlineSize: 'none'
-    });
-  });
-});