@instructure/canvas-rce 5.6.2 → 5.6.3

package/es/rce/plugins/instructure_record/MediaPanel/__tests__/MediaPanel.test.js

@@ -1,181 +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 { render } from '@testing-library/react';
-import MediaPanel from '../index';
-
-function getPanelProps(contextType, mediaprops) {
-  return {
-    contextType,
-    fetchInitialMedia: () => {},
-    fetchNextMedia: () => {},
-    onMediaMebed: () => {},
-    media: {
-      [contextType]: {
-        files: [],
-        bookmark: null,
-        isLoading: false,
-        hasMore: false,
-        ...mediaprops
-      }
-    },
-    sortBy: {
-      sort: 'alphabetical',
-      order: 'asc'
-    },
-    searchString: 'whereami'
-  };
-}
-
-function renderComponent(props) {
-  return render( /*#__PURE__*/React.createElement(MediaPanel, Object.assign({}, getPanelProps('course', {
-    bookmark: 'http://next.docs'
-  }), {
-    fetchInitialMedia: () => {},
-    fetchNextMedia: () => {},
-    onMediaEmbed: () => {}
-  }, props)));
-}
-
-function makeFiles(override) {
-  return {
-    files: [1, 2].map(i => {
-      return {
-        id: i,
-        filename: `file${i}.mp4`,
-        content_type: 'video/mp4',
-        display_name: `file${i}`,
-        href: `http://the.net/${i}`,
-        date: `2019-05-25T13:0${i}:00Z`
-      };
-    }),
-    bookmark: null,
-    hasMore: false,
-    isLoading: false,
-    ...override
-  };
-}
-
-describe('RCE "Media" Plugin > MediaPanel', () => {
-  it('renders empty notice', () => {
-    const {
-      getByText
-    } = renderComponent(getPanelProps());
-    expect(getByText('No results.')).toBeInTheDocument();
-  });
-  it('renders loading spinner', () => {
-    const {
-      getByText
-    } = renderComponent(getPanelProps('course', {
-      isLoading: true
-    }));
-    expect(getByText('Loading')).toBeInTheDocument();
-  });
-  it('renders media files', () => {
-    const {
-      getByText,
-      getAllByTestId
-    } = renderComponent(getPanelProps('course', makeFiles()));
-    expect(getAllByTestId('instructure_links-Link')).toHaveLength(2);
-    expect(getByText('file1')).toBeInTheDocument();
-    expect(getByText('file2')).toBeInTheDocument();
-  });
-  describe('when there is a pending media file', () => {
-    let filesObj;
-    beforeEach(() => {
-      filesObj = makeFiles();
-      filesObj.files.push({
-        id: 3,
-        filename: `3.mp4`,
-        content_type: 'video/mp4',
-        display_name: `pending file`,
-        href: `http://the.net/3`,
-        date: `2019-05-25T13:03:00Z`,
-        media_entry_id: 'maybe'
-      });
-    });
-    it('shows a "pending" message for the file', () => {
-      const {
-        getByText
-      } = renderComponent(getPanelProps('course', filesObj));
-      expect(getByText('pending file').parentElement.parentElement.outerHTML).toContain('Media file is processing. Please try again later.');
-    });
-  });
-  it('renders load more button if there is more', () => {
-    const {
-      getByText
-    } = renderComponent(getPanelProps('course', makeFiles({
-      hasMore: true,
-      bookmark: 'next.docs'
-    })));
-    expect(getByText('Load More')).toBeInTheDocument();
-  });
-  it('fetches initial data when mounted', () => {
-    const fetchInitialMedia = jest.fn();
-    renderComponent({
-      fetchInitialMedia
-    });
-    expect(fetchInitialMedia).toHaveBeenCalled();
-  });
-  it('fetches more when the load more button is clicked', () => {
-    const fetchNextMedia = jest.fn();
-    const {
-      getByText
-    } = renderComponent({ ...getPanelProps('course', makeFiles({
-        hasMore: true,
-        bookmark: 'more.docs'
-      })),
-      fetchNextMedia
-    });
-    const loadMoreBtn = getByText('Load More');
-    loadMoreBtn.click();
-    expect(fetchNextMedia).toHaveBeenCalled();
-  });
-  it('shows an error message if the fetch failed', () => {
-    const fetchNextMedia = jest.fn();
-    const {
-      getByText
-    } = renderComponent({ ...getPanelProps('course', makeFiles({
-        error: 'whoops'
-      })),
-      fetchNextMedia
-    });
-    expect(getByText('Loading failed.')).toBeInTheDocument();
-  });
-  it('shows spinner during initial load', () => {
-    const fetchInitialMedia = jest.fn();
-    const {
-      getByText
-    } = renderComponent({ ...getPanelProps('course', makeFiles({
-        files: [],
-        isLoading: true
-      })),
-      fetchInitialMedia
-    });
-    expect(getByText('Loading')).toBeInTheDocument();
-  });
-  it('shows spinner while loading more', () => {
-    const {
-      getByText
-    } = renderComponent(getPanelProps('course', makeFiles({
-      isLoading: true,
-      hasMore: true
-    })));
-    expect(getByText('Loading')).toBeInTheDocument();
-  });
-});

package/es/rce/plugins/instructure_record/VideoOptionsTray/__tests__/TrayController.test.js

@@ -1,231 +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 VideoOptionsTrayDriver from './VideoOptionsTrayDriver';
-import * as contentSelection from '../../../shared/ContentSelection';
-const mockVideoPlayers = [{
-  titleText: 'video title 0',
-  appliedWidth: 400,
-  appliedHeight: 300,
-  naturalWidth: 800,
-  naturalHeight: 600,
-  source: '/path/to/video0.mp4',
-  type: 'video-embed',
-  id: 'm-video-id0'
-}, {
-  titleText: 'video title 1',
-  appliedWidth: 400,
-  appliedHeight: 300,
-  naturalWidth: 800,
-  naturalHeight: 600,
-  source: '/path/to/video1.mp4',
-  type: 'video-embed',
-  id: 'm-video-id1'
-}, {
-  titleText: 'video title2',
-  appliedWidth: 400,
-  appliedHeight: 300,
-  naturalWidth: 800,
-  naturalHeight: 600,
-  source: '/path/to/video2.mp4',
-  type: 'video-embed',
-  id: 'm-video-id2'
-}];
-beforeAll(() => {
-  contentSelection.asVideoElement = jest.fn(elem => {
-    const vid = elem.parentElement.getAttribute('id');
-    return mockVideoPlayers.find(vp => vp.id === vid);
-  });
-});
-afterAll(() => {
-  jest.restoreAllMocks();
-});
-describe('RCE "Videos" Plugin > VideoOptionsTray > TrayController', () => {
-  let $videos;
-  let editors;
-  let trayController;
-  beforeEach(() => {
-    $videos = [];
-    editors = [new FakeEditor(), new FakeEditor()];
-    editors.forEach((editor, i) => {
-      editor.initialize();
-      const $video = createVideo(i);
-      $videos.push($video);
-      editor.appendElement($video);
-      editor.setSelectedNode($video);
-    });
-    trayController = new TrayController();
-  });
-  afterEach(() => {
-    editors.forEach(editor => editor.uninitialize());
-    const $container = document.getElementById(CONTAINER_ID);
-
-    if ($container != null) {
-      ReactDOM.unmountComponentAtNode($container);
-    }
-  });
-
-  function createVideo(i) {
-    const velem = document.createElement('div');
-    velem.setAttribute('id', mockVideoPlayers[i].id);
-    velem.setAttribute('title', mockVideoPlayers[i].titleText);
-    velem.setAttribute('data-mce-p-src', 'http://video.is.here/');
-    const ifr = document.createElement('iframe');
-    velem.appendChild(ifr);
-    return velem;
-  }
-
-  function getTray() {
-    return VideoOptionsTrayDriver.find();
-  }
-
-  function getVideoOptionsFromTray() {
-    const driver = VideoOptionsTrayDriver.find();
-    return {
-      titleText: driver.titleText,
-      displayAs: driver.displayAs,
-      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 video from the editor', async () => {
-        trayController.showTrayForEditor(editors[0]);
-        expect(getVideoOptionsFromTray().titleText).toEqual($videos[0].getAttribute('title'));
-      });
-    });
-    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();
-      });
-    });
-    describe('when the tray is already open for the given editor', () => {
-      let $otherVideo;
-      beforeEach(async () => {
-        trayController.showTrayForEditor(editors[0]);
-        $otherVideo = createVideo(0);
-        editors[0].setSelectedNode($otherVideo);
-        trayController.showTrayForEditor(editors[0]);
-      });
-      it('keeps the tray open', () => {
-        expect(getTray()).not.toBeNull();
-        expect(trayController.$videoContainer).not.toBeNull();
-      });
-    });
-  });
-  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('#_applyVideoOptions', () => {
-    it('updates the video', () => {
-      const updateMediaObject = jest.fn().mockResolvedValue();
-      trayController.showTrayForEditor(editors[0]);
-
-      trayController._applyVideoOptions({
-        displayAs: 'embed',
-        appliedHeight: '101',
-        appliedWidth: '321',
-        titleText: 'new title',
-        media_object_id: 'm_somevideo',
-        updateMediaObject
-      });
-
-      expect(getTray()).toBeNull(); // the tray is closed
-
-      const videoIframe = trayController.$videoContainer;
-      const videoContainer = videoIframe.parentElement;
-      expect(videoContainer.getAttribute('data-mce-p-title')).toBe('new title');
-      expect(videoIframe.getAttribute('title')).toBe('new title');
-      expect(videoContainer.style.height).toBe('101px');
-      expect(videoContainer.style.width).toBe('321px');
-      expect(updateMediaObject).toHaveBeenCalled();
-    });
-    it('does not updates the video w/o a media_object_id', () => {
-      const updateMediaObject = jest.fn().mockResolvedValue();
-      trayController.showTrayForEditor(editors[0]);
-
-      trayController._applyVideoOptions({
-        displayAs: 'embed',
-        appliedHeight: '101',
-        appliedWidth: '321',
-        titleText: 'new title',
-        media_object_id: undefined,
-        updateMediaObject
-      });
-
-      expect(getTray()).toBeNull(); // the tray is closed
-
-      const videoIframe = trayController.$videoContainer;
-      const videoContainer = videoIframe.parentElement;
-      expect(videoContainer.getAttribute('data-mce-p-title')).toBe('new title');
-      expect(videoIframe.getAttribute('title')).toBe('new title');
-      expect(videoContainer.style.height).toBe('101px');
-      expect(videoContainer.style.width).toBe('321px');
-      expect(updateMediaObject).not.toHaveBeenCalled();
-    });
-    it('replaces the video with a link', () => {
-      const updateMediaObject = jest.fn().mockResolvedValue();
-      const ed = editors[0];
-      trayController.showTrayForEditor(ed);
-
-      trayController._applyVideoOptions({
-        displayAs: 'link',
-        titleText: 'new <em>fancy</em> title',
-        media_object_id: 'm_somevideo',
-        updateMediaObject
-      });
-
-      expect(getTray()).toBeNull(); // the tray is closed
-
-      const videoContainer = trayController.$videoContainer;
-      expect(videoContainer).toBe(null);
-      const sel = ed.selection.getNode();
-      expect(sel.tagName).toBe('A');
-      expect(sel.getAttribute('href')).toBe('http://video.is.here/');
-      expect(sel.innerHTML).toBe('new &lt;em&gt;fancy&lt;/em&gt; title'); // see, html is not evaluated
-
-      expect(updateMediaObject).toHaveBeenCalled();
-    });
-  });
-});

package/es/rce/plugins/instructure_record/VideoOptionsTray/__tests__/VideoOptionsTray.test.js

@@ -1,214 +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 { render } from '@testing-library/react';
-import VideoOptionsTray from '..';
-import VideoOptionsTrayDriver from './VideoOptionsTrayDriver';
-jest.useFakeTimers();
-describe('RCE "Videos" Plugin > VideoOptionsTray', () => {
-  let props;
-  let tray;
-  beforeEach(() => {
-    props = {
-      onRequestClose: jest.fn(),
-      onSave: jest.fn(),
-      open: true,
-      videoOptions: {
-        $element: null,
-        appliedHeight: 180,
-        appliedWidth: 320,
-        id: 'm-video-id',
-        naturalHeight: 730,
-        naturalWidth: 1280,
-        source: {},
-        titleText: '',
-        type: 'video-embed',
-        videoSize: 'medium'
-      },
-      trayOptions: {
-        host: 'localhost:3001',
-        jwt: 'someuglyvalue'
-      }
-    };
-  });
-
-  function renderComponent() {
-    render( /*#__PURE__*/React.createElement(VideoOptionsTray, props));
-    tray = VideoOptionsTrayDriver.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 "Video Options Tray"', () => {
-    renderComponent();
-    expect(tray.label).toEqual('Video Options Tray');
-  });
-  describe('Title field', () => {
-    it('uses the value of titleText in the given video options', () => {
-      props.videoOptions.titleText = 'A turtle in a party suit.';
-      renderComponent();
-      expect(tray.titleText).toEqual('A turtle in a party suit.');
-    });
-    it('is blank when the given video options titleText is blank', () => {
-      props.videoOptions.titleText = '';
-      renderComponent();
-      expect(tray.titleText).toEqual('');
-    });
-  });
-  describe('"Display Options" field', () => {
-    it('is set to "embed" by default', () => {
-      renderComponent();
-      expect(tray.displayAs).toEqual('embed');
-    });
-    it('can be set to "Display Text Link"', () => {
-      renderComponent();
-      tray.setDisplayAs('link');
-      expect(tray.displayAs).toEqual('link');
-    });
-    it('can be reset to "Embed Image"', () => {
-      renderComponent();
-      tray.setDisplayAs('link');
-      tray.setDisplayAs('embed');
-      expect(tray.displayAs).toEqual('embed');
-    });
-  });
-  describe('"Size" field', () => {
-    it('is set using the given image options', () => {
-      renderComponent();
-      expect(tray.size).toEqual('Medium');
-    });
-    it('can be re-set to "Medium"', async () => {
-      renderComponent();
-      await tray.setSize('Large');
-      await tray.setSize('Medium');
-      expect(tray.size).toEqual('Medium');
-    });
-    it('can be set to "Large"', async () => {
-      renderComponent();
-      await tray.setSize('Large');
-      expect(tray.size).toEqual('Large');
-    });
-    it('can be set to "Custom"', async () => {
-      renderComponent();
-      await tray.setSize('Custom');
-      expect(tray.size).toEqual('Custom');
-    });
-    it('requires 320px custom width', () => {
-      props.videoOptions.videoSize = 'custom';
-      props.videoOptions.appliedWidth = 310;
-      renderComponent(); // I don't know why, but getByText does not find the string,
-      // though I can prove it's there
-
-      expect(/Must be at least 320/.test(tray.$element.textContent)).toBeTruthy();
-    });
-  });
-  describe('"Closed Captions Panel"', () => {
-    it('is displayed when feature flag is true', () => {
-      renderComponent();
-      expect(tray.$closedCaptionPanel).toBeInTheDocument();
-    });
-    it('does not steal focus when changing other parts of the tray', () => {
-      renderComponent();
-      tray.$titleTextField.focus();
-      tray.setTitleText('hello');
-      expect(tray.$titleTextField).toBe(document.activeElement);
-    });
-  });
-  describe('"Done" button', () => {
-    describe('when Title Text is present', () => {
-      beforeEach(() => {
-        renderComponent();
-        tray.setTitleText('A turtle in a party suit.');
-      });
-      it('is enabled', () => {
-        expect(tray.doneButtonDisabled).toEqual(false);
-      });
-    });
-    describe('when Title Text is not present', () => {
-      beforeEach(() => {
-        renderComponent();
-        tray.setTitleText('');
-      });
-      it('is disabled ', () => {
-        expect(tray.doneButtonDisabled).toEqual(true);
-      });
-      it('is enabled when "Display Text Link" is selected', () => {
-        tray.setDisplayAs('link');
-        expect(tray.doneButtonDisabled).toEqual(false);
-      });
-    });
-  });
-  describe('when clicked', () => {
-    beforeEach(() => {
-      renderComponent();
-      tray.setTitleText('A turtle in a party suit.');
-    });
-    it('prevents the default click handler', () => {
-      const preventDefault = jest.fn(); // Override preventDefault before event reaches image
-
-      tray.$doneButton.addEventListener('click', event => {
-        Object.assign(event, {
-          preventDefault
-        });
-      }, true);
-      tray.$doneButton.click();
-      expect(preventDefault).toHaveBeenCalledTimes(1);
-    });
-    it('calls the .onSave prop', () => {
-      tray.$doneButton.click();
-      expect(props.onSave).toHaveBeenCalledTimes(1);
-    });
-    describe('when calling the .onSave prop', () => {
-      it('includes the Title Text', () => {
-        tray.setTitleText('A turtle in a party suit.');
-        tray.$doneButton.click();
-        const [{
-          titleText
-        }] = props.onSave.mock.calls[0];
-        expect(titleText).toEqual('A turtle in a party suit.');
-      });
-      it('includes the "Display As" setting', () => {
-        tray.setDisplayAs('link');
-        tray.$doneButton.click();
-        const [{
-          displayAs
-        }] = props.onSave.mock.calls[0];
-        expect(displayAs).toEqual('link');
-      });
-      it.skip('includes the size to be applied', async () => {
-        await tray.setSize('Large');
-        tray.$doneButton.click();
-        const [{
-          appliedHeight,
-          appliedWidth
-        }] = props.onSave.mock.calls[0];
-        expect(appliedWidth).toEqual(400);
-        const expectedHt = Math.round(props.videoOptions.naturalHeight / props.videoOptions.naturalWidth * 400);
-        expect(appliedHeight).toEqual(expectedHt);
-      });
-    });
-  });
-});