@instructure/canvas-rce 5.14.1 → 5.15.0

package/{mocha-reporter-config.js → __tests__/sidebar/actions/all_files.test.js}

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2021 - present Instructure, Inc.
+ * Copyright (C) 2020 - present Instructure, Inc.
  *
  * This file is part of Canvas.
  *
@@ -15,12 +15,13 @@
  * 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 * as actions from '../../../src/sidebar/actions/all_files'
 
-module.exports = {
-  reporterEnabled: 'mocha-junit-reporter, spec',
-  mochaJunitReporterReporterOptions: {
-    mochaFile: `${process.env.TEST_RESULT_OUTPUT_DIR || './coverage'}/canvas-rce-junit.xml`,
-    testsuitesTitle: 'Canvas RCE Mocha Tests',
-    rootSuiteTitle: 'Canvas RCE Mocha Tests'
-  }
-}
+describe('all_files actions', () => {
+  it('alFilesLoading returns ALL_FILES_LOADING with the new value', () => {
+    expect(actions.allFilesLoading(true)).toEqual({
+      type: actions.ALL_FILES_LOADING,
+      payload: true,
+    })
+  })
+})

package/__tests__/sidebar/actions/data.test.js

@@ -0,0 +1,196 @@
+/*
+ * Copyright (C) 2018 - 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 * as actions from '../../../src/sidebar/actions/data'
+import RceApiSource from '../../../src/rcs/api'
+import {spiedStore} from './utils'
+
+describe('Sidebar data actions', () => {
+  // collection key to use in testing
+  const collectionKey = 'theCollection'
+  const searchString = 'search-string'
+  const uriFor = () => 'uriFor/bookmark'
+
+  // trivial "always succeeds" source
+  const successPage = {links: 'successLinks', bookmark: 'successBookmark'}
+  const successSource = {
+    fetchLinks(key) {
+      return this.fetchPage(key)
+    },
+    fetchPage(_uri) {
+      return new Promise(resolve => {
+        resolve(successPage)
+      })
+    },
+    uriFor,
+  }
+
+  // trivial "always fails" source
+  const brokenError = new Error('broken')
+  const brokenSource = {
+    fetchLinks(key) {
+      return this.fetchPage(key)
+    },
+    fetchPage(_uri) {
+      return new Promise(() => {
+        throw brokenError
+      })
+    },
+    uriFor,
+  }
+
+  // returns a "black hole" source that spies fetchLinks
+  function stubbedSource() {
+    const source = new RceApiSource()
+    jest.spyOn(source, 'fetchPage').mockReturnValue(new Promise(resolve => resolve(successPage)))
+    jest.spyOn(source, 'uriFor').mockReturnValue('uriFor/bookmark')
+    return source
+  }
+
+  // constants for testing that can be overridden in props to storeState (see
+  // below)
+  const defaultCollection = {
+    links: [],
+    bookmark: 'bookmark',
+    isLoading: false,
+    searchString,
+  }
+  const defaults = {
+    jwt: 'theJWT',
+    source: successSource,
+    searchString,
+    collections: {
+      [`${collectionKey}`]: defaultCollection,
+    },
+  }
+
+  // defaults and reshapes the given props into the shape needed by the store
+  function setupState(props = {}, collectionProps = {}) {
+    const retval = {...defaults, ...props}
+    const collection = {...defaultCollection, ...collectionProps}
+    retval.collections[collectionKey] = collection
+    return retval
+  }
+
+  describe('fetchPage', () => {
+    it('uses bookmark from store to call source.fetchPage', () => {
+      const source = stubbedSource()
+      const state = setupState({source})
+      const store = spiedStore(state)
+      store.dispatch(actions.fetchPage(collectionKey))
+      expect(source.fetchPage).toHaveBeenCalledWith(defaultCollection.bookmark)
+    })
+
+    it('dispatches receivePage with page retrieved from source', async () => {
+      const store = spiedStore(setupState())
+      await store.dispatch(actions.fetchPage(collectionKey))
+      const callArgs = store.spy.mock.lastCall[0]
+      expect(callArgs.type).toEqual(actions.RECEIVE_PAGE)
+      expect(callArgs.key).toEqual(collectionKey)
+      expect(callArgs.links).toEqual(successPage.links)
+      expect(callArgs.bookmark).toEqual(successPage.bookmark)
+    })
+
+    it('dispatches failPage on error retrieving page from source', async () => {
+      const store = spiedStore(setupState({source: brokenSource}))
+      await store.dispatch(actions.fetchPage(collectionKey))
+      const callArgs = store.spy.mock.lastCall[0]
+      expect(callArgs.type).toEqual(actions.FAIL_PAGE)
+      expect(callArgs.key).toEqual(collectionKey)
+      expect(callArgs.error).toEqual(brokenError)
+    })
+  })
+
+  describe('fetchNextPage', () => {
+    it('dispatches requestPage first', () => {
+      const store = spiedStore(setupState())
+      store.dispatch(actions.fetchNextPage(collectionKey))
+      const callArgs = store.spy.mock.calls[0][0]
+      expect(callArgs.type).toEqual(actions.REQUEST_PAGE)
+      expect(callArgs.key).toEqual(collectionKey)
+    })
+
+    it('fetches next page if collection has bookmark and is not loading', () => {
+      const store = spiedStore(setupState())
+      store.dispatch(actions.fetchNextPage(collectionKey))
+      expect(store.spy).toHaveBeenCalledWith({
+        type: actions.REQUEST_PAGE,
+        cancel: expect.any(Function),
+        key: collectionKey,
+      })
+    })
+
+    it('cancels previous fetch if collection is already loading', () => {
+      const cancel = jest.fn()
+      const store = spiedStore(setupState({}, {isLoading: true, cancel}))
+      store.dispatch(actions.fetchNextPage(collectionKey))
+
+      expect(cancel).toHaveBeenCalled()
+      expect(store.spy).toHaveBeenCalledWith({
+        type: actions.REQUEST_PAGE,
+        cancel: expect.any(Function),
+        key: collectionKey,
+      })
+    })
+  })
+
+  describe('fetchInitialPage', () => {
+    it('fetches initial page if collection is empty, has bookmark, and is not loading', () => {
+      const store = spiedStore(setupState())
+      store.dispatch(actions.fetchInitialPage(collectionKey))
+      expect(store.spy).toHaveBeenCalledWith({
+        type: actions.REQUEST_INITIAL_PAGE,
+        cancel: expect.any(Function),
+        key: collectionKey,
+        searchString,
+      })
+    })
+
+    it('skips fetching initial page if collection is not empty', () => {
+      const store = spiedStore(setupState({}, {links: [{href: 'link', title: 'A Link'}]}))
+      store.dispatch(actions.fetchInitialPage(collectionKey))
+      expect(store.spy).not.toHaveBeenCalledWith({
+        type: actions.REQUEST_INITIAL_PAGE,
+        cancel: expect.any(Function),
+        key: collectionKey,
+        searchString,
+      })
+    })
+
+    it('creates the URL if collection has no bookmark', () => {
+      const source = stubbedSource()
+      const store = spiedStore(setupState({source}, {bookmark: null}))
+      store.dispatch(actions.fetchInitialPage(collectionKey))
+      expect(source.fetchPage).toHaveBeenCalledWith('uriFor/bookmark')
+    })
+
+    it('cancels previous fetch if collection is already loading', () => {
+      const cancel = jest.fn()
+      const store = spiedStore(setupState({}, {isLoading: true, cancel}))
+      store.dispatch(actions.fetchInitialPage(collectionKey))
+
+      expect(cancel).toHaveBeenCalled()
+
+      expect(store.spy).toHaveBeenCalledWith({
+        type: actions.REQUEST_INITIAL_PAGE,
+        cancel: expect.any(Function),
+        key: collectionKey,
+        searchString,
+      })
+    })
+  })
+})

package/__tests__/sidebar/actions/utils.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2018 - 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 {createStore, applyMiddleware} from 'redux'
+import {thunk} from 'redux-thunk'
+import {batch, batching} from 'redux-batch-middleware'
+
+// creates a reducer that just alerts a spy on each action and leaves state
+// alone. the associated spy is hung off the returned reducer
+export function spiedReducer() {
+  const spy = jest.fn()
+  const reducer = (state = {}, action) => {
+    if (!action.type.includes('@@redux/INIT')) {
+      spy(action)
+    }
+    return state
+  }
+  reducer.spy = spy
+  return reducer
+}
+
+// creates a store with the given state and with a spiedReducer; the spy from
+// the reducer is also hung off the returned store
+export function spiedStore(state) {
+  const reducer = spiedReducer()
+  const store = createStore(batching(reducer), state, applyMiddleware(thunk, batch))
+  store.spy = reducer.spy
+  return store
+}

package/{es/rce/__mocks__/_mockStudioPlayer.js → __tests__/sidebar/reducers/all_files.test.js}

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2024 - present Instructure, Inc.
+ * Copyright (C) 2020 - present Instructure, Inc.
  *
  * This file is part of Canvas.
  *
@@ -15,6 +15,14 @@
  * 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/>.
  */
-module.exports = {
-  StudioPlayer: () => null
-};
+
+import {allFilesLoading} from '../../../src/sidebar/reducers/all_files'
+import * as actions from '../../../src/sidebar/actions/all_files'
+
+describe('all_files reducer', () => {
+  it('sets isLoading', () => {
+    const state = {isLoading: false}
+    const newState = allFilesLoading(state, actions.allFilesLoading(true))
+    expect(newState.isLoading).toEqual(true)
+  })
+})

package/babel.config.js

@@ -37,7 +37,6 @@ module.exports = {
   },
 
   presets: [
-    '@babel/preset-typescript',
     [
       '@babel/preset-env',
       {
@@ -63,6 +62,9 @@ module.exports = {
         extractDefaultTranslations: false,
       },
     ],
+    ['@babel/preset-typescript', {
+      allowDeclareFields: true
+    }],
   ],
 
   plugins: [

package/es/bridge/Bridge.js

@@ -15,16 +15,16 @@
  * 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 K5Uploader from '@instructure/k5uploader';
+
+import { K5Uploader } from '@instructure/k5uploader';
 import { fileEmbed } from '../common/mimeClass';
-/* eslint no-console: 0 */
+import mediaTranslations from '../rce/plugins/instructure_record/mediaTranslations';
 
+/* eslint no-console: 0 */
 export default class Bridge {
   constructor() {
     this.insertLink = link => {
       if (this.focusedEditor) {
-        var _this$controller;
-
         const {
           selection
         } = this.focusedEditor.props.tinymce.get(this.focusedEditor.props.textareaId);
@@ -32,31 +32,25 @@ export default class Bridge {
           node: selection.getNode(),
           range: selection.getRng()
         };
-
         if (!link.text || link.text.trim().length === 0) {
           link.text = link.title || link.href;
         }
-
         this.focusedEditor.insertLink(link);
-        (_this$controller = this.controller(this.focusedEditor.id)) === null || _this$controller === void 0 ? void 0 : _this$controller.hideTray();
+        this.controller(this.focusedEditor.id)?.hideTray();
       } else {
         console.warn('clicked sidebar link without a focused editor');
       }
     };
-
     this.insertFileLink = link => {
       const embedData = fileEmbed(link);
-
       if (embedData.type === 'image') {
         return this.insertImage(link);
       } else if (embedData.type === 'video' || embedData.type === 'audio') {
         link.embedded_iframe_url = link.embedded_iframe_url || link.href;
         return this.embedMedia(link);
       }
-
       return this.insertLink(link);
     };
-
     this.embedImage = image => {
       if (this.existingContentToLink() && !this.existingContentToLinkIsImg()) {
         this.insertLink({
@@ -70,41 +64,30 @@ export default class Bridge {
         this.insertImage(image);
       }
     };
-
     this.embedMedia = media => {
       const embedData = fileEmbed(media);
-
       if (embedData.type === 'video') {
         this.insertVideo(media);
       } else {
         this.insertAudio(media);
       }
     };
-
     this.insertEmbedCode = embedCode => {
       this.focusedEditor.insertEmbedCode(embedCode);
     };
-
     this.insertVideo = video => {
       if (this.focusedEditor) {
-        var _this$controller2;
-
         this.focusedEditor.insertVideo(video);
-        (_this$controller2 = this.controller(this.focusedEditor.id)) === null || _this$controller2 === void 0 ? void 0 : _this$controller2.hideTray();
+        this.controller(this.focusedEditor.id)?.hideTray();
       }
     };
-
     this.insertAudio = audio => {
       if (this.focusedEditor) {
-        var _this$controller3;
-
         this.focusedEditor.insertAudio(audio);
-        (_this$controller3 = this.controller(this.focusedEditor.id)) === null || _this$controller3 === void 0 ? void 0 : _this$controller3.hideTray();
+        this.controller(this.focusedEditor.id)?.hideTray();
       }
     };
-
     this.focusedEditor = null; // the RCEWrapper, not tinymce
-
     this.resolveEditorRendered = null;
     this._editorRendered = new Promise(resolve => {
       this.resolveEditorRendered = resolve;
@@ -115,146 +98,111 @@ export default class Bridge {
     this._uploadMediaTranslations = null;
     this._canvasOrigin = '';
   }
-
   get editorRendered() {
     return this._editorRendered;
   }
-
   controller(editorId) {
     return this._controller[editorId];
   }
-
   activeEditor() {
     return this.focusedEditor;
   }
-
   focusEditor(editor) {
     if (this.focusedEditor !== editor) {
       this.hideTrays();
     }
-
     this.focusedEditor = editor;
   }
-
   blurEditor(editor) {
     if (this.focusedEditor === editor) {
       this.hideTrays();
       this.focusedEditor = null;
     }
   }
-
-  focusActiveEditor() {
-    var _this$focusedEditor, _this$focusedEditor$m, _this$focusedEditor$m2;
-
-    let skipFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    (_this$focusedEditor = this.focusedEditor) === null || _this$focusedEditor === void 0 ? void 0 : (_this$focusedEditor$m = _this$focusedEditor.mceInstance) === null || _this$focusedEditor$m === void 0 ? void 0 : (_this$focusedEditor$m2 = _this$focusedEditor$m.call(_this$focusedEditor)) === null || _this$focusedEditor$m2 === void 0 ? void 0 : _this$focusedEditor$m2.focus(skipFocus);
+  focusActiveEditor(skipFocus = false) {
+    this.focusedEditor?.mceInstance?.()?.focus(skipFocus);
   }
-
   get mediaServerSession() {
     return this._mediaServerSession;
   }
-
   get mediaServerUploader() {
     return this._mediaServerUploader;
   }
-
   setMediaServerSession(session) {
     this._mediaServerSession = session;
-
     if (this._mediaServerUploader) {
       this._mediaServerUploader.destroy();
-
       this._mediaServerUploader = null;
     }
-
     this._mediaServerUploader = new K5Uploader(session);
   }
-
   get canvasOrigin() {
     return this._canvasOrigin;
   }
-
   set canvasOrigin(origin) {
     this._canvasOrigin = origin;
-  } // we have to defer importing mediaTranslations until they are asked for
+  }
+
+  // we have to defer importing mediaTranslations until they are asked for
   // or they get imported before the locale has been setup and all the strings
   // are in English
-
-
   get uploadMediaTranslations() {
     if (!this._uploadMediaTranslations) {
-      const module = require('../rce/plugins/instructure_record/mediaTranslations');
-
-      this._uploadMediaTranslations = module.default;
+      this._uploadMediaTranslations = mediaTranslations;
     }
-
     return this._uploadMediaTranslations;
   }
-
   detachEditor(editor) {
     if (editor === this.focusedEditor) {
       this.focusedEditor = null;
     }
   }
-
   getEditor() {
     return this.focusedEditor;
   }
-
   renderEditor(editor) {
     this.resolveEditorRendered();
-
     if (this.focusedEditor === null) {
       this.focusEditor(editor);
     }
   }
-
   attachController(controller, editorId) {
     this._controller[editorId] = controller;
   }
-
   detachController(editorId) {
     delete this._controller[editorId];
   }
-
   showTrayForPlugin(plugin, editorId) {
-    var _this$_controller$edi;
-
-    (_this$_controller$edi = this._controller[editorId]) === null || _this$_controller$edi === void 0 ? void 0 : _this$_controller$edi.showTrayForPlugin(plugin);
+    this._controller[editorId]?.showTrayForPlugin(plugin);
   }
-
   hideTrays() {
     Object.keys(this._controller).forEach(eid => {
       this._controller[eid].hideTray(true);
     });
   }
-
   existingContentToLink() {
     if (this.focusedEditor) {
       return this.focusedEditor.existingContentToLink();
     }
-
     return false;
   }
-
   existingContentToLinkIsImg() {
     if (this.focusedEditor) {
       return this.focusedEditor.existingContentToLinkIsImg();
     }
-
     return false;
   }
 
+  // insertFileLink is called from the FileBrowser when All files is chosen
+  // vs the above insertLink which is called from the other CanvasContentTray panels.
+
   insertImage(image) {
     if (this.focusedEditor) {
-      var _this$controller4;
-
       const result = this.focusedEditor.insertImage(image);
-      (_this$controller4 = this.controller(this.focusedEditor.id)) === null || _this$controller4 === void 0 ? void 0 : _this$controller4.hideTray();
+      this.controller(this.focusedEditor.id)?.hideTray();
       return result;
     }
   }
-
   insertImagePlaceholder(fileMetaProps) {
     if (this.focusedEditor) {
       // don't insert a placeholder if the user has selected content, because in some cases the selected
@@ -264,13 +212,11 @@ export default class Bridge {
       }
     }
   }
-
   removePlaceholders(name) {
     if (this.focusedEditor) {
       this.focusedEditor.removePlaceholders(name);
     }
   }
-
   showError(err) {
     if (this.focusedEditor) {
       this.focusedEditor.addAlert({
@@ -279,5 +225,4 @@ export default class Bridge {
       });
     }
   }
-
 }

package/es/bridge/index.js

@@ -17,5 +17,6 @@
  */
 
 /* eslint no-console: 0 */
+
 import Bridge from './Bridge';
 export default new Bridge();