@instructure/canvas-rce 5.6.2 → 5.6.4

package/es/rce/plugins/instructure_image/ImageOptionsTray/__tests__/TrayController.IconOptions.test.js

@@ -1,161 +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 { screen, waitFor, fireEvent } from '@testing-library/dom';
-import TrayController from '../TrayController';
-import FakeEditor from '../../../shared/__tests__/FakeEditor';
-describe('RCE "Images" Plugin > ImageOptionsTray > TrayController for Icon Maker Icons', () => {
-  const isIconMaker = true;
-
-  function createEditorForIcon(iconForEditor) {
-    const ed = new FakeEditor();
-    ed.initialize();
-    ed.appendElement(iconForEditor);
-    ed.setSelectedNode(iconForEditor);
-    return ed;
-  }
-
-  function createIcon(altText) {
-    const isDecorative = altText === '';
-    const iconUrl = isDecorative ? 'https://www.fillmurray.com/200/201' : 'https://www.fillmurray.com/200/200';
-    const $icon = document.createElement('img');
-    $icon.src = iconUrl;
-    $icon.alt = altText;
-    $icon.setAttribute('data-inst-icon-maker-icon', true);
-
-    if (isDecorative) {
-      $icon.role = 'presentation';
-    }
-
-    return $icon;
-  }
-
-  function setup() {
-    const iconImage = createIcon('stripes');
-    const editorForIcon = createEditorForIcon(iconImage);
-    const iconDecorative = createIcon('');
-    const editorForDecorative = createEditorForIcon(iconDecorative);
-    const iconTrayController = new TrayController();
-    return {
-      iconImage,
-      editorForIcon,
-      iconTrayController,
-      iconDecorative,
-      editorForDecorative
-    };
-  }
-
-  function getAltTextFromTrayInput() {
-    return screen.getByPlaceholderText(/(describe the icon)/i);
-  }
-
-  function setAltTextInTray(newAltText) {
-    fireEvent.change(screen.getByPlaceholderText(/(describe the icon)/i), {
-      target: {
-        value: `${newAltText}`
-      }
-    });
-  }
-
-  function changeIsDecorativeCheckbox() {
-    fireEvent.click(screen.getByText(/decorative icon/i));
-  }
-
-  function clickDoneButton() {
-    fireEvent.click(screen.getByText(/done/i));
-  }
-
-  function getIconAltTextFromEditor(targetEditor) {
-    return targetEditor.$container.querySelector('img[data-inst-icon-maker-icon="true"]').getAttribute('alt');
-  }
-
-  function getIconRoleFromEditor(targetEditor) {
-    return targetEditor.$container.querySelector('img[data-inst-icon-maker-icon="true"]').getAttribute('role');
-  }
-
-  let iconTrayController, editorForIcon, iconImage, editorForDecorative;
-  beforeEach(() => {
-    ;
-    ({
-      iconTrayController,
-      editorForIcon,
-      iconImage,
-      editorForDecorative
-    } = setup());
-  });
-  afterEach(() => {
-    editorForIcon.uninitialize();
-    editorForDecorative.uninitialize();
-  });
-  describe('#showTrayForEditor()', () => {
-    it('opens the tray for icon options when the tray is not open', async () => {
-      iconTrayController.showTrayForEditor(editorForIcon, isIconMaker);
-      await waitFor(() => expect(iconTrayController.isOpen).toBe(true));
-    });
-    it('uses the word "icon" instead of "image" in the tray', () => {
-      iconTrayController.showTrayForEditor(editorForIcon, isIconMaker);
-      expect(screen.getByPlaceholderText(/describe the icon/i)).toBeInTheDocument();
-      expect(screen.getByText(/decorative icon/i)).toBeInTheDocument();
-    });
-    it('opens the tray and uses the selected icon alt text from the editor when the tray is not open', () => {
-      iconTrayController.showTrayForEditor(editorForIcon, isIconMaker);
-      const altTextInput = getAltTextFromTrayInput();
-      expect(altTextInput).toHaveTextContent(iconImage.alt);
-    });
-  });
-  describe('#hideTrayForEditor()', () => {
-    it('closes the tray for the editor', async () => {
-      iconTrayController.showTrayForEditor(editorForIcon, isIconMaker);
-      iconTrayController.hideTrayForEditor(editorForIcon);
-      await waitFor(() => expect(iconTrayController.isOpen).toBe(false));
-    });
-  });
-  describe('#_applyIconAltTextChanges', () => {
-    it('uses the icon maker "apply" function', () => {
-      const applyIconOptionsSpy = jest.spyOn(iconTrayController, '_applyIconAltTextChanges');
-      iconTrayController.showTrayForEditor(editorForIcon, isIconMaker);
-      setAltTextInTray('and thats the fact jack');
-      clickDoneButton();
-      expect(applyIconOptionsSpy).toHaveBeenCalled();
-    });
-    it('updates the icon alt text', () => {
-      iconTrayController.showTrayForEditor(editorForIcon, isIconMaker);
-      const newAltText = 'and thats the fact jack';
-      setAltTextInTray(newAltText);
-      clickDoneButton();
-      expect(getIconAltTextFromEditor(editorForIcon)).toEqual(newAltText);
-    });
-    it('sets role="presentation" when the icon is marked as decorative', () => {
-      iconTrayController.showTrayForEditor(editorForIcon, isIconMaker);
-      changeIsDecorativeCheckbox(); // checks "Is Decorative"
-
-      clickDoneButton();
-      expect(getIconRoleFromEditor(editorForIcon)).toEqual('presentation');
-      expect(getIconAltTextFromEditor(editorForIcon)).toEqual('');
-    });
-    it('removes role="presentation" when the icon has the decorative option unset', () => {
-      iconTrayController.showTrayForEditor(editorForDecorative, isIconMaker);
-      changeIsDecorativeCheckbox(); // unchecks "Is Decorative"
-
-      const newAltText = 'groundhog day';
-      setAltTextInTray(newAltText);
-      clickDoneButton();
-      expect(getIconRoleFromEditor(editorForDecorative)).toBeNull();
-      expect(getIconAltTextFromEditor(editorForDecorative)).toEqual(newAltText);
-    });
-  });
-});

package/es/rce/plugins/instructure_image/ImageOptionsTray/__tests__/TrayController.test.js

@@ -1,205 +0,0 @@
-/*
- * Copyright (C) 2019 - 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 ReactDOM from 'react-dom';
-import TrayController, { CONTAINER_ID } from '../TrayController';
-import FakeEditor from '../../../shared/__tests__/FakeEditor';
-import ImageOptionsTrayDriver from './ImageOptionsTrayDriver';
-describe('RCE "Images" Plugin > ImageOptionsTray > TrayController', () => {
-  let $images;
-  let editors;
-  let trayController;
-  beforeEach(() => {
-    $images = [];
-    editors = [new FakeEditor(), new FakeEditor()];
-    editors.forEach((editor, index) => {
-      editor.initialize();
-      const $image = createImage(200 + index, 200 + index);
-      $images.push($image);
-      editor.appendElement($image);
-      editor.setSelectedNode($image);
-    });
-    trayController = new TrayController();
-  });
-  afterEach(() => {
-    editors.forEach(editor => editor.uninitialize());
-    const $container = document.getElementById(CONTAINER_ID);
-
-    if ($container != null) {
-      ReactDOM.unmountComponentAtNode($container);
-    }
-  });
-
-  function createImage() {
-    let height = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 200;
-    let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
-    const $el = document.createElement('img');
-    $el.src = `https://www.fillmurray.com/${height}/${width}`;
-    $el.alt = `Bill Murray, ${width} by ${height}`;
-    $el.setAttribute('height', height);
-    $el.setAttribute('width', width);
-    return $el;
-  }
-
-  function getTray() {
-    return ImageOptionsTrayDriver.find();
-  }
-
-  function getImageOptionsFromTray() {
-    const driver = ImageOptionsTrayDriver.find();
-    return {
-      altText: driver.altText,
-      displayAs: driver.displayAs,
-      isDecorativeImage: driver.isDecorativeImage,
-      size: driver.size
-    };
-  }
-
-  describe('#showTrayForEditor()', () => {
-    describe('when the tray is not already open', () => {
-      it('opens the tray', async () => {
-        trayController.showTrayForEditor(editors[0]);
-        expect(getTray()).not.toBeNull();
-      });
-      it('uses the selected image from the editor', async () => {
-        trayController.showTrayForEditor(editors[0]);
-        expect(getImageOptionsFromTray().altText).toEqual($images[0].alt);
-      });
-    });
-    describe('when the tray is open for a different editor', () => {
-      beforeEach(async () => {
-        trayController.showTrayForEditor(editors[0]);
-        trayController.showTrayForEditor(editors[1]);
-      });
-      it('keeps the tray open', () => {
-        expect(getTray()).not.toBeNull();
-      });
-      it('updates the tray for the given editor', () => {
-        expect(getImageOptionsFromTray().altText).toEqual($images[1].alt);
-      });
-    });
-    describe('when the tray is already open for the given editor', () => {
-      let $otherImage;
-      beforeEach(async () => {
-        trayController.showTrayForEditor(editors[0]);
-        $otherImage = createImage(210, 210);
-        editors[0].setSelectedNode($otherImage);
-        trayController.showTrayForEditor(editors[0]);
-      });
-      it('keeps the tray open', () => {
-        expect(getTray()).not.toBeNull();
-      });
-      it('updates the tray with the selected image from the editor', () => {
-        expect(getImageOptionsFromTray().altText).toEqual($otherImage.alt);
-      });
-    });
-  });
-  describe('#hideTrayForEditor()', () => {
-    it('closes the tray when open for the given editor', () => {
-      trayController.showTrayForEditor(editors[0]);
-      trayController.hideTrayForEditor(editors[0]);
-      expect(getTray()).toBeNull();
-    });
-    it('does not close the tray when open for a different editor', () => {
-      trayController.showTrayForEditor(editors[0]);
-      trayController.showTrayForEditor(editors[1]);
-      trayController.hideTrayForEditor(editors[0]);
-      expect(getTray()).not.toBeNull();
-    });
-    it('does nothing when the tray was not open', () => {
-      // In effect, it does not explode.
-      trayController.hideTrayForEditor(editors[0]);
-      expect(getTray()).toBeNull();
-    });
-  });
-  describe('when saving image options', () => {
-    let tray;
-    describe('when the image url text is changing', () => {
-      it('updates the image element url', () => {
-        trayController.showTrayForEditor(editors[0]);
-        tray = getTray();
-        tray.setUrl('https://www.fillmurray.com/140/100');
-        tray.$doneButton.click();
-        expect(editors[0].$container.querySelector('img').getAttribute('src')).toEqual('https://www.fillmurray.com/140/100');
-      });
-    });
-    describe('when the image alt text is changing', () => {
-      it('updates the image element alt text', () => {
-        trayController.showTrayForEditor(editors[0]);
-        tray = getTray();
-        tray.setAltText('Bill Murray, always amazing');
-        tray.$doneButton.click();
-        expect(editors[0].$container.querySelector('img').getAttribute('alt')).toEqual('Bill Murray, always amazing');
-      });
-    });
-    describe('when the image is set as decorative', () => {
-      beforeEach(() => {
-        trayController.showTrayForEditor(editors[0]);
-        tray = getTray();
-        tray.setIsDecorativeImage(true);
-        tray.$doneButton.click();
-      });
-      it('sets a role to persist the option', () => {
-        expect(editors[0].$container.querySelector('img').getAttribute('role')).toEqual('presentation');
-      });
-    });
-    describe('when the image is unset as decorative', () => {
-      beforeEach(() => {
-        $images[0].alt = '';
-        $images[0].setAttribute('role', 'presentation');
-        trayController.showTrayForEditor(editors[0]);
-        tray = getTray();
-        tray.setIsDecorativeImage(false);
-        tray.setAltText('Bill Murray, always amazing');
-        tray.$doneButton.click();
-      });
-      it('updates the image element alt text', () => {
-        expect(editors[0].$container.querySelector('img').getAttribute('alt')).toEqual('Bill Murray, always amazing');
-      });
-      it('sets a role attribute to persist the option', () => {
-        expect(editors[0].$container.querySelector('img').getAttribute('role')).toBeNull();
-      });
-    });
-    describe('when the image will be displayed as a link', () => {
-      beforeEach(() => {
-        trayController.showTrayForEditor(editors[0]);
-        tray = getTray();
-        tray.setDisplayAs('link');
-        tray.$doneButton.click();
-      });
-      it('removes the image', () => {
-        expect(editors[0].$container.querySelector('img')).toBeNull();
-      });
-      it('replaces the image with a link', () => {
-        const $link = editors[0].selection.getNode();
-        expect($link.tagName.toLowerCase()).toEqual('a');
-      });
-      it('uses the image src for the link href', () => {
-        const $link = editors[0].selection.getNode();
-        expect($link.href).toEqual($images[0].src);
-      });
-      it('uses the image alt text for the link label', () => {
-        const $link = editors[0].selection.getNode();
-        expect($link.textContent.trim()).toEqual($images[0].alt);
-      });
-      it('sets focus on the editor', () => {
-        // Focus otherwise goes to the document body at this time.
-        expect(document.activeElement).toEqual(editors[0].$container);
-      });
-    });
-  });
-});

package/es/rce/plugins/instructure_image/Images/__tests__/Images.test.js

@@ -1,215 +0,0 @@
-/*
- * Copyright (C) 2019 - 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, getByText } from '@testing-library/react';
-import { buildImage } from '../../../../../rcs/fake';
-import Images from '..';
-describe('RCE "Images" Plugin > Images', () => {
-  let component;
-  let props;
-  beforeEach(() => {
-    component = null;
-    props = {
-      fetchInitialImages: jest.fn(),
-      fetchNextImages: jest.fn(),
-      images: {
-        course: {
-          hasMore: false,
-          isLoading: false,
-          files: []
-        }
-      },
-      contextType: 'course',
-      sortBy: {
-        sort: 'alphabetical',
-        order: 'desc'
-      },
-      searchString: 'whereami?',
-
-      onImageEmbed() {}
-
-    };
-  });
-
-  function renderComponent() {
-    if (component) {
-      // Update the existing instance when previously rendered
-      component.rerender( /*#__PURE__*/React.createElement(Images, props));
-    } else {
-      component = render( /*#__PURE__*/React.createElement(Images, props));
-    }
-  }
-
-  function getLoadingIndicator() {
-    return component.queryByTitle('Loading');
-  }
-
-  function getImages() {
-    return component.container.querySelectorAll('img');
-  }
-
-  function getLoadMoreButton() {
-    return [...component.container.querySelectorAll('button')].find($button => $button.textContent.trim() === 'Load More') || null;
-  }
-
-  describe('upon initial render', () => {
-    it('calls the .fetchInitialImages prop', () => {
-      renderComponent();
-      expect(props.fetchInitialImages).toHaveBeenCalledTimes(1);
-      expect(props.fetchInitialImages).toHaveBeenCalledWith();
-    });
-    it('does not display the "Load More" button', () => {
-      renderComponent();
-      expect(getLoadMoreButton()).not.toBeInTheDocument();
-    });
-  });
-  describe('after updating for initial data load', () => {
-    beforeEach(() => {
-      renderComponent();
-      props.images[props.contextType].isLoading = true;
-      renderComponent();
-    });
-    it('indicates the initial load in progress', () => {
-      expect(getLoadingIndicator()).toBeInTheDocument();
-    });
-    it('does not call the .fetchInitialImages prop again', () => {
-      expect(props.fetchInitialImages).toHaveBeenCalledTimes(1);
-    });
-    it('does not display the "Load More" button', () => {
-      renderComponent();
-      expect(getLoadMoreButton()).not.toBeInTheDocument();
-    });
-  });
-  describe('after initial load resolves with images', () => {
-    beforeEach(() => {
-      renderComponent();
-      props.images[props.contextType].isLoading = true;
-      renderComponent();
-      props.images[props.contextType].isLoading = false;
-      props.images[props.contextType].files = [buildImage(0, 'example_1.png', 100, 200), buildImage(1, 'example_2.png', 101, 201), buildImage(2, 'example_3.png', 102, 202)];
-    });
-    it('removes the initial load indicator', () => {
-      renderComponent();
-      expect(getLoadingIndicator()).not.toBeInTheDocument();
-    });
-    it('displays the loaded images', () => {
-      renderComponent();
-      expect(getImages()).toHaveLength(3);
-    });
-    it('displays the "Load More" button when more results can be loaded', () => {
-      props.images[props.contextType].hasMore = true;
-      renderComponent();
-      expect(getLoadMoreButton()).toBeInTheDocument();
-    });
-    it('does not display the "Load More" button when no more results can be loaded', () => {
-      props.images[props.contextType].hasMore = false;
-      renderComponent();
-      expect(getLoadMoreButton()).not.toBeInTheDocument();
-    });
-    it('does not change focus', () => {
-      const previousActiveElement = document.activeElement;
-      props.images[props.contextType].hasMore = false;
-      renderComponent();
-      expect(document.activeElement).toEqual(previousActiveElement);
-    });
-  });
-  describe('after inital load resolves with no images', () => {
-    beforeEach(() => {
-      renderComponent();
-      props.images[props.contextType].isLoading = true;
-      renderComponent();
-      props.images[props.contextType].isLoading = false;
-    });
-    it('displays No Results message', () => {
-      renderComponent();
-      expect(getByText(component.container, 'No results.')).toBeInTheDocument();
-      expect(getImages()).toHaveLength(0);
-    });
-  });
-  describe('after updating to load additional images', () => {
-    beforeEach(() => {
-      // Initial render
-      renderComponent(); // Begin initial load after mounting
-
-      props.images[props.contextType].isLoading = true;
-      renderComponent(); // Initial load completes
-
-      props.images[props.contextType] = {
-        hasMore: true,
-        isLoading: false,
-        files: [buildImage(0, 'example_1.png', 100, 200), buildImage(1, 'example_2.png', 101, 201), buildImage(2, 'example_3.png', 102, 202)]
-      };
-      renderComponent();
-      fireEvent.focus(getLoadMoreButton()); // Load more
-
-      props.images[props.contextType].isLoading = true;
-      renderComponent();
-    });
-    it('displays all previously-loaded images', () => {
-      renderComponent();
-      expect(getImages()).toHaveLength(3);
-    });
-    it('displays the loading indicator', () => {
-      expect(getLoadingIndicator()).toBeInTheDocument();
-    });
-    it('moves focus from the "Load More" button to the last image', () => {
-      const $images = getImages();
-      const $lastImage = $images[$images.length - 1];
-      expect(document.activeElement.contains($lastImage)).toEqual(true);
-    });
-  });
-  describe('after additional load resolves with images', () => {
-    beforeEach(() => {
-      // Initial render
-      renderComponent(); // Begin initial load after mounting
-
-      props.images[props.contextType].isLoading = true;
-      renderComponent(); // Initial load completes
-
-      props.images[props.contextType] = {
-        hasMore: true,
-        isLoading: false,
-        files: [buildImage(0, 'example_1.png', 100, 200), buildImage(1, 'example_2.png', 101, 201), buildImage(2, 'example_3.png', 102, 202)]
-      };
-      renderComponent(); // Load more
-
-      props.images[props.contextType].isLoading = true;
-      renderComponent(); // Additional images loaded
-
-      props.images[props.contextType] = {
-        hasMore: true,
-        isLoading: false,
-        files: [...props.images[props.contextType].files, buildImage(3, 'example_4.png', 103, 203)]
-      };
-    });
-    it('displays all previously- and new-loaded images', () => {
-      renderComponent();
-      expect(getImages()).toHaveLength(4);
-    });
-    it('displays the "Load More" button when more results can be loaded', () => {
-      props.images[props.contextType].hasMore = true;
-      renderComponent();
-      expect(getLoadMoreButton()).toBeInTheDocument();
-    });
-    it('does not display the "Load More" button when no more results can be loaded', () => {
-      props.images[props.contextType].hasMore = false;
-      renderComponent();
-      expect(getLoadMoreButton()).not.toBeInTheDocument();
-    });
-  });
-});