@instructure/canvas-rce 5.6.2 → 5.6.4

package/es/rce/plugins/shared/Upload/__tests__/UploadFile.test.js

@@ -1,468 +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, fireEvent, act, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { UploadFile, handleSubmit } from '../UploadFile';
-describe('UploadFile', () => {
-  let trayProps;
-  let fakeEditor;
-  beforeEach(() => {
-    trayProps = {
-      source: {
-        initializeCollection() {},
-
-        initializeUpload() {},
-
-        initializeFlickr() {},
-
-        initializeImages() {},
-
-        initializeDocuments() {},
-
-        initializeMedia() {}
-
-      }
-    };
-    fakeEditor = {};
-  });
-  afterEach(() => {
-    trayProps = null;
-    fakeEditor = null;
-  });
-  it('calls onDismiss prop when closing', () => {
-    const handleDismiss = jest.fn();
-    const {
-      getAllByText
-    } = render( /*#__PURE__*/React.createElement(UploadFile, {
-      label: "Test",
-      editor: fakeEditor,
-      trayProps: trayProps,
-      onDismiss: handleDismiss,
-      panels: ['COMPUTER', 'URL']
-    }));
-    const closeBtn = getAllByText('Close')[0];
-    fireEvent.click(closeBtn);
-    expect(handleDismiss).toHaveBeenCalled();
-  });
-  it('calls handleSubmit on submit', () => {
-    const handleSubmit = jest.fn();
-
-    const handleDismiss = () => {};
-
-    const {
-      getByText,
-      getByLabelText
-    } = render( /*#__PURE__*/React.createElement(UploadFile, {
-      label: "Test",
-      editor: fakeEditor,
-      trayProps: trayProps,
-      onDismiss: handleDismiss,
-      onSubmit: handleSubmit,
-      panels: ['COMPUTER', 'URL']
-    })); // We need to make sure that a file is present, or the submit button will be disabled.
-
-    const fakeFile = new File(['(⌐□_□)'], 'somename.png', {
-      type: 'image/png'
-    });
-    const fileInput = getByLabelText(/click to browse your computer/, {
-      selector: 'input'
-    });
-    Object.defineProperty(fileInput, 'files', {
-      value: [fakeFile]
-    });
-    act(() => {
-      fireEvent.change(fileInput);
-    });
-    const submitBtn = getByText('Submit').closest('button');
-    act(() => {
-      fireEvent.click(submitBtn);
-    });
-    expect(handleSubmit).toHaveBeenCalled();
-  });
-  describe('panel selection', () => {
-    it('adds computer and url panels', () => {
-      const {
-        getByLabelText
-      } = render( /*#__PURE__*/React.createElement(UploadFile, {
-        label: "Test",
-        editor: fakeEditor,
-        trayProps: trayProps,
-        onDismiss: () => {},
-        panels: ['COMPUTER', 'URL']
-      }));
-      expect(getByLabelText('Computer')).toBeInTheDocument();
-      expect(getByLabelText('URL')).toBeInTheDocument();
-    });
-    it('adds only the computer panel', () => {
-      const {
-        getByLabelText,
-        queryByLabelText
-      } = render( /*#__PURE__*/React.createElement(UploadFile, {
-        label: "Test",
-        editor: fakeEditor,
-        trayProps: trayProps,
-        onDismiss: () => {},
-        panels: ['COMPUTER']
-      }));
-      expect(getByLabelText('Computer')).toBeInTheDocument();
-      expect(queryByLabelText('URL')).not.toBeInTheDocument();
-    });
-  });
-  describe('tab navigation', () => {
-    it('shows the Unsplash panel when the tab is clicked', async () => {
-      const {
-        getByText,
-        getByLabelText
-      } = render( /*#__PURE__*/React.createElement(UploadFile, {
-        label: "Test",
-        editor: fakeEditor,
-        trayProps: trayProps,
-        onDismiss: () => {},
-        onSubmit: () => {},
-        panels: ['COMPUTER', 'URL', 'UNSPLASH']
-      }));
-      const unsplashTab = getByText('Unsplash');
-      act(() => {
-        userEvent.click(unsplashTab);
-      });
-      const searchInput = await waitFor(() => getByLabelText('Search Term'));
-      expect(searchInput).toBeVisible();
-    });
-    it('shows the URL panel when the tab is clicked', async () => {
-      const {
-        getByText,
-        getByLabelText
-      } = render( /*#__PURE__*/React.createElement(UploadFile, {
-        label: "Test",
-        editor: fakeEditor,
-        trayProps: trayProps,
-        onDismiss: () => {},
-        onSubmit: () => {},
-        panels: ['COMPUTER', 'URL', 'UNSPLASH']
-      }));
-      const urlTab = getByText('URL');
-      act(() => {
-        userEvent.click(urlTab);
-      });
-      const urlInput = await waitFor(() => getByLabelText('URL'));
-      expect(urlInput).toBeVisible();
-    });
-    it('shows the computer panel when the tab is clicked', async () => {
-      const {
-        getByText
-      } = render( /*#__PURE__*/React.createElement(UploadFile, {
-        label: "Test",
-        editor: fakeEditor,
-        trayProps: trayProps,
-        onDismiss: () => {},
-        onSubmit: () => {},
-        panels: ['COMPUTER', 'URL', 'UNSPLASH']
-      }));
-      const computerTab = getByText('Computer');
-      act(() => {
-        userEvent.click(computerTab);
-      });
-      const fileDrop = await waitFor(() => getByText(/browse your computer/));
-      expect(fileDrop).toBeVisible();
-    });
-    it('navigates from one tab to another', async () => {
-      const {
-        getByText,
-        getByLabelText
-      } = render( /*#__PURE__*/React.createElement(UploadFile, {
-        label: "Test",
-        editor: fakeEditor,
-        trayProps: trayProps,
-        onDismiss: () => {},
-        onSubmit: () => {},
-        panels: ['COMPUTER', 'URL', 'UNSPLASH']
-      }));
-      const urlTab = getByText('URL');
-      act(() => {
-        userEvent.click(urlTab);
-      });
-      await waitFor(() => getByLabelText('URL'));
-      const unsplashTab = getByText('Unsplash');
-      act(() => {
-        userEvent.click(unsplashTab);
-      });
-      const searchBox = await waitFor(() => getByLabelText('Search Term'));
-      expect(searchBox).toBeVisible();
-    });
-  });
-  describe('handleSubmit', () => {
-    const fakeNode = {
-      addEventListener: jest.fn()
-    };
-    const fakeEditor = {
-      content: '',
-      dom: {
-        createHTML: (tag, _ref) => {
-          let {
-            src,
-            alt
-          } = _ref;
-
-          if (alt) {
-            return `<img src="${src}" alt="${alt}" />`;
-          } else {
-            return `<img src="${src}" />`;
-          }
-        }
-      },
-
-      insertContent(content) {
-        fakeEditor.content += content;
-      },
-
-      selection: {
-        getEnd() {
-          return fakeNode;
-        }
-
-      }
-    };
-    beforeEach(() => {
-      fakeEditor.content = '';
-    });
-    it('inserts image with url source when URL panel is selected', () => {
-      handleSubmit(fakeEditor, 'images/*', 'URL', {
-        fileUrl: 'http://fake/path'
-      });
-      expect(fakeEditor.content).toEqual('<img src="http://fake/path" />');
-    });
-    it('inserts the image with url source and includes alt text', () => {
-      handleSubmit(fakeEditor, 'images/*', 'URL', {
-        fileUrl: 'http://fake/path',
-        imageOptions: {
-          altText: '(╯°□°）╯︵ ┻━┻'
-        }
-      });
-      expect(fakeEditor.content).toEqual('<img src="http://fake/path" alt="(╯°□°）╯︵ ┻━┻" />');
-    });
-    describe('contentProps.startMediaUpload', () => {
-      it('called for images when Computer panel is selected', () => {
-        const fakeMediaUpload = jest.fn();
-        const fakeFile = {
-          name: 'foo.png',
-          size: 3000,
-          type: 'image/png'
-        };
-        handleSubmit(fakeEditor, 'images/*', 'COMPUTER', {
-          theFile: fakeFile
-        }, {
-          startMediaUpload: fakeMediaUpload
-        });
-        expect(fakeMediaUpload).toHaveBeenCalledWith('images', {
-          parentFolderId: 'media',
-          name: 'foo.png',
-          size: 3000,
-          contentType: 'image/png',
-          domObject: fakeFile
-        });
-      });
-      it('called for video media when Computer panel is selected', () => {
-        const fakeMediaUpload = jest.fn();
-        const fakeFile = {
-          name: 'foo.mov',
-          size: 3000,
-          type: 'video/mov'
-        };
-        handleSubmit(fakeEditor, 'video/*', 'COMPUTER', {
-          theFile: fakeFile
-        }, {
-          startMediaUpload: fakeMediaUpload
-        });
-        expect(fakeMediaUpload).toHaveBeenCalledWith('media', {
-          parentFolderId: 'media',
-          name: 'foo.mov',
-          size: 3000,
-          contentType: 'video/mov',
-          domObject: fakeFile
-        });
-      });
-      it('called for images when Computer panel is selected and includes image options', () => {
-        const fakeMediaUpload = jest.fn();
-        const fakeFile = {
-          name: 'foo.png',
-          size: 3000,
-          type: 'image/png'
-        };
-        handleSubmit(fakeEditor, 'images/*', 'COMPUTER', {
-          theFile: fakeFile,
-          imageOptions: {
-            altText: '(╯°□°）╯︵ ┻━┻',
-            displayAs: 'embed',
-            isDecorativeImage: true
-          }
-        }, {
-          startMediaUpload: fakeMediaUpload
-        });
-        expect(fakeMediaUpload).toHaveBeenCalledWith('images', {
-          altText: '(╯°□°）╯︵ ┻━┻',
-          displayAs: 'embed',
-          isDecorativeImage: true,
-          parentFolderId: 'media',
-          name: 'foo.png',
-          size: 3000,
-          contentType: 'image/png',
-          domObject: fakeFile
-        });
-      });
-      it('called for audio media when Computer panel is selected', () => {
-        const fakeMediaUpload = jest.fn();
-        const fakeFile = {
-          name: 'foo.mp3',
-          size: 3000,
-          type: 'audio/mp3'
-        };
-        handleSubmit(fakeEditor, 'audio/*', 'COMPUTER', {
-          theFile: fakeFile
-        }, {
-          startMediaUpload: fakeMediaUpload
-        });
-        expect(fakeMediaUpload).toHaveBeenCalledWith('media', {
-          parentFolderId: 'media',
-          name: 'foo.mp3',
-          size: 3000,
-          contentType: 'audio/mp3',
-          domObject: fakeFile
-        });
-      });
-      it('called for documents when Computer panel is selected', () => {
-        const fakeMediaUpload = jest.fn();
-        const fakeFile = {
-          name: 'foo.txt',
-          size: 3000,
-          type: 'text/plain'
-        };
-        handleSubmit(fakeEditor, 'video/*', 'COMPUTER', {
-          theFile: fakeFile
-        }, {
-          startMediaUpload: fakeMediaUpload
-        });
-        expect(fakeMediaUpload).toHaveBeenCalledWith('documents', {
-          parentFolderId: 'media',
-          name: 'foo.txt',
-          size: 3000,
-          contentType: 'text/plain',
-          domObject: fakeFile
-        });
-      });
-    });
-    describe('Unsplash Panel Selected', () => {
-      const fakeUnsplashData = {
-        id: '123abc',
-        url: 'http://instructure.com/img',
-        alt: 'fake'
-      };
-      it('calls source.pingbackUnsplash', () => {
-        const fakeSource = {
-          pingbackUnsplash: jest.fn()
-        };
-        handleSubmit(fakeEditor, 'images/*', 'UNSPLASH', {
-          unsplashData: fakeUnsplashData
-        }, {}, fakeSource);
-        expect(fakeSource.pingbackUnsplash).toHaveBeenCalledWith('123abc');
-      });
-      it('inserts an image tag with the proper URL and alt attributes', () => {
-        const fakeSource = {
-          pingbackUnsplash: () => {}
-        };
-        handleSubmit(fakeEditor, 'images/*', 'UNSPLASH', {
-          unsplashData: fakeUnsplashData
-        }, {}, fakeSource);
-        expect(fakeEditor.content).toEqual('<img src="http://instructure.com/img" alt="fake" />');
-      });
-    });
-  });
-  describe('Disabled Submit', () => {
-    let renderReturnOptions;
-    let fakeOnSubmit;
-    beforeEach(() => {
-      fakeOnSubmit = jest.fn();
-      renderReturnOptions = render( /*#__PURE__*/React.createElement(UploadFile, {
-        label: "Test",
-        editor: fakeEditor,
-        trayProps: trayProps,
-        onDismiss: () => {},
-        onSubmit: fakeOnSubmit,
-        panels: ['COMPUTER', 'URL', 'UNSPLASH']
-      }));
-    });
-    describe('Computer Panel', () => {
-      it('disables the submit button when there is no file uploaded', () => {
-        const {
-          getByText,
-          getByLabelText
-        } = renderReturnOptions;
-        const computerTab = getByLabelText('Computer');
-        act(() => {
-          userEvent.click(computerTab);
-        });
-        const submitBtn = getByText('Submit').closest('button');
-        expect(submitBtn).toBeDisabled();
-      });
-      it('does not allow Enter to submit the form when no file is uploaded', () => {
-        const {
-          getByLabelText
-        } = renderReturnOptions;
-        const computerTab = getByLabelText('Computer');
-        act(() => {
-          userEvent.click(computerTab);
-        });
-        const form = getByLabelText('Test');
-        act(() => {
-          fireEvent.keyDown(form, {
-            keyCode: 13
-          });
-        });
-        expect(fakeOnSubmit).not.toHaveBeenCalled();
-      });
-    });
-    describe('Unsplash Panel', () => {
-      it('disables the submit button when there is no unsplash image chosen', () => {
-        const {
-          getByText,
-          getByLabelText
-        } = renderReturnOptions;
-        const unsplashTab = getByLabelText('Unsplash');
-        act(() => {
-          userEvent.click(unsplashTab);
-        });
-        const submitBtn = getByText('Submit').closest('button');
-        expect(submitBtn).toBeDisabled();
-      });
-    });
-    describe('URL Panel', () => {
-      it('disables the submit button when there is no URL entered', () => {
-        const {
-          getByText,
-          getByLabelText
-        } = renderReturnOptions;
-        const urlTab = getByLabelText('URL');
-        act(() => {
-          userEvent.click(urlTab);
-        });
-        const submitBtn = getByText('Submit').closest('button');
-        expect(submitBtn).toBeDisabled();
-      });
-    });
-  });
-});

package/es/rce/plugins/shared/Upload/__tests__/UploadFileModal.test.js

@@ -1,129 +0,0 @@
-/*
- * Copyright (C) 2020 - 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, fireEvent, waitFor } from '@testing-library/react';
-import UploadFileModal from '../UploadFileModal';
-describe('UploadFileModal', () => {
-  let modalProps;
-  beforeEach(() => {
-    modalProps = {
-      editor: {},
-      trayProps: {
-        contextType: 'course',
-        contextId: 17,
-        source: {}
-      },
-      contentProps: {
-        session: {
-          usageRightsRequired: true
-        },
-        loadSession: () => {}
-      },
-      onSubmit: () => {},
-      onDismiss: () => {},
-      panels: ['COMPUTER', 'UNSPLASH', 'URL'],
-      label: 'Upload Stuff',
-      accept: '*/*'
-    };
-  });
-  afterEach(() => {
-    modalProps = null;
-  });
-  it('renders', () => {
-    const {
-      getByText
-    } = render( /*#__PURE__*/React.createElement(UploadFileModal, modalProps));
-    expect(getByText('Upload Stuff')).toBeInTheDocument();
-    expect(getByText('Computer')).toBeInTheDocument();
-    expect(getByText('Unsplash')).toBeInTheDocument();
-    expect(getByText('URL')).toBeInTheDocument();
-  });
-  describe('Usage Rights', () => {
-    it('is rendered expanded when in a course context and rights are required', () => {
-      const {
-        getByText
-      } = render( /*#__PURE__*/React.createElement(UploadFileModal, modalProps));
-      expect(getByText('Usage Rights (required)')).toBeInTheDocument();
-      expect(getByText('Usage Right:')).toBeInTheDocument();
-      expect(getByText('Copyright Holder:')).toBeInTheDocument();
-    });
-    it('is not rendered in non-course context', () => {
-      modalProps.trayProps.contextType = 'user';
-      const {
-        queryByText
-      } = render( /*#__PURE__*/React.createElement(UploadFileModal, modalProps));
-      expect(queryByText('Usage Rights (required)')).not.toBeInTheDocument();
-    });
-    it('is not rendered if not required', () => {
-      modalProps.contentProps.session.usageRightsRequired = false;
-      const {
-        queryByText
-      } = render( /*#__PURE__*/React.createElement(UploadFileModal, modalProps));
-      expect(queryByText('Usage Rights (required)')).not.toBeInTheDocument();
-    });
-    it('disables the Submit button on the Computer panel unless set', () => {
-      modalProps.panels = ['COMPUTER'];
-      const {
-        getByText
-      } = render( /*#__PURE__*/React.createElement(UploadFileModal, modalProps));
-      expect(getByText('Submit').closest('button').disabled).toBe(true); // would like to see the button get enabled when a value is set,
-      // but the components aren't setup in a way to make that practical.
-    });
-    it('enables the Submit button on the URL panel even if not set', async () => {
-      modalProps.panels = ['URL'];
-      const {
-        getByText,
-        getByLabelText
-      } = render( /*#__PURE__*/React.createElement(UploadFileModal, modalProps));
-      await waitFor(() => getByLabelText('File URL'));
-      const urlinput = getByLabelText('File URL');
-      fireEvent.change(urlinput, {
-        target: {
-          value: 'http://example.com/'
-        }
-      });
-      await waitFor(() => expect(getByText('Submit').closest('button').disabled).toBe(false));
-    }); // IMO, testing the Unsplash panel is more effort than the value of the test,
-    // since it requires mocking the unsplash api + multiple interactions with
-    // the UI. If the Computer and URL panels behave OK, the Unsplash one will too.
-  });
-  describe('Image Attributes', () => {
-    it('is rendered when uploading only images', () => {
-      modalProps.accept = 'image/*';
-      const {
-        getByText
-      } = render( /*#__PURE__*/React.createElement(UploadFileModal, modalProps));
-      expect(getByText('Attributes')).toBeInTheDocument();
-    });
-    it('is not renderedd when uploading anything other than images', () => {
-      modalProps.accept = '*/*';
-      const {
-        queryByText
-      } = render( /*#__PURE__*/React.createElement(UploadFileModal, modalProps));
-      expect(queryByText('Attributes')).not.toBeInTheDocument();
-    });
-    it('is not renderedd when requireA11yAttributes is false', () => {
-      modalProps.accept = '*/*';
-      modalProps.requireA11yAttributes = false;
-      const {
-        queryByText
-      } = render( /*#__PURE__*/React.createElement(UploadFileModal, modalProps));
-      expect(queryByText('Attributes')).not.toBeInTheDocument();
-    });
-  });
-});

package/es/rce/plugins/shared/Upload/__tests__/UrlPanel.test.js

@@ -1,37 +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, fireEvent } from '@testing-library/react';
-import UrlPanel from '../UrlPanel';
-describe('UploadFile: UrlPanel', () => {
-  it('calls setFileUrl when the file url input changes', () => {
-    const fakeSetFileUrl = jest.fn();
-    const {
-      getByLabelText
-    } = render( /*#__PURE__*/React.createElement(UrlPanel, {
-      fileUrl: "",
-      setFileUrl: fakeSetFileUrl
-    }));
-    fireEvent.change(getByLabelText('File URL'), {
-      target: {
-        value: 'instructure.com'
-      }
-    });
-    expect(fakeSetFileUrl).toHaveBeenCalledWith('instructure.com');
-  });
-});