@instructure/canvas-rce 5.6.2 → 5.6.3

package/es/rce/plugins/shared/__tests__/CanvasContentTray.test.js

@@ -1,247 +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 { act, render, waitFor, waitForElementToBeRemoved, fireEvent } from '@testing-library/react';
-import bridge from '../../../../bridge';
-import * as fakeSource from '../../../../rcs/fake';
-import CanvasContentTray from '../CanvasContentTray';
-jest.useFakeTimers();
-jest.mock('../../../../canvasFileBrowser/FileBrowser', () => {
-  return jest.fn(() => 'Files Browser');
-});
-jest.mock('../ContentSelection', () => ({
-  getLinkContentFromEditor: jest.fn().mockReturnValue({
-    fileName: 'some filename',
-    contentType: 'wikiPages',
-    url: '/pages',
-    published: true,
-    text: 'some text'
-  })
-}));
-jest.mock('../../../../bridge', () => {
-  const original = jest.requireActual('../../../../bridge');
-  original.default.insertLink = jest.fn();
-  return original;
-});
-describe('RCE Plugins > CanvasContentTray', () => {
-  let component;
-  let props;
-  const editor = {
-    id: 'editor_id'
-  };
-
-  function getProps() {
-    let override = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    props = {
-      bridge,
-      editor,
-      containingContext: {
-        contextType: 'course',
-        contextId: '1201',
-        userId: '17'
-      },
-      contextId: '1201',
-      contextType: 'course',
-      source: fakeSource,
-      themeUrl: 'http://localhost/tinymce-theme.swf',
-      ...override
-    };
-    return props;
-  }
-
-  function renderComponent(trayprops) {
-    getProps(trayprops);
-    props.bridge.focusEditor(editor);
-    component = render( /*#__PURE__*/React.createElement(CanvasContentTray, props));
-  }
-
-  function getTray() {
-    const $tray = component.queryByRole('dialog');
-
-    if ($tray) {
-      return $tray;
-    }
-
-    throw new Error('not mounted');
-  }
-
-  async function showTrayForPlugin(plugin) {
-    act(() => {
-      props.bridge.showTrayForPlugin(plugin, 'editor_id');
-    });
-    await waitFor(getTray, {
-      timeout: 19500
-    });
-  }
-
-  function getTrayLabel() {
-    return getTray().getAttribute('aria-label');
-  }
-
-  describe('Edit Course Links Tray', () => {
-    beforeEach(async () => {
-      renderComponent();
-      await showTrayForPlugin('course_link_edit');
-    });
-    it('is labeled with "Edit Course Link"', async () => {
-      await waitFor(() => {
-        const header = getTray().querySelector('[data-cid="Heading"]').textContent;
-        expect(header).toEqual('Edit Course Link');
-      });
-    });
-    it('renders the LinkDisplay Component', async () => {
-      await waitFor(() => {
-        expect(component.getByTestId('LinkDisplay')).toBeInTheDocument();
-      });
-    });
-    it('replaces the old link when the Replace button is clicked', async () => {
-      const button = await component.findByTestId('replace-link-button');
-      fireEvent.click(button);
-      await waitFor(() => {
-        expect(bridge.insertLink).toHaveBeenCalledWith({
-          forceRename: true,
-          href: '/pages',
-          text: 'some text',
-          title: 'some filename',
-          type: 'wikiPages',
-          published: true
-        });
-      });
-    });
-  });
-  describe('Tray Label in course context', () => {
-    beforeEach(() => {
-      renderComponent();
-    }); // course
-
-    it('is labeled with "Course Links" when using the "links" content type', async () => {
-      await showTrayForPlugin('links');
-      expect(getTrayLabel()).toEqual('Course Links');
-    });
-    it('is labeled with "Course Images" when using the "images" content type', async () => {
-      await showTrayForPlugin('course_images');
-      expect(getTrayLabel()).toEqual('Course Images');
-    });
-    it('is labeled with "Course Media" when using the "media" content type', async () => {
-      await showTrayForPlugin('course_media');
-      expect(getTrayLabel()).toEqual('Course Media');
-    });
-    it('is labeled with "Course Documents" when using the "course_documents" content type', async () => {
-      await showTrayForPlugin('course_documents');
-      expect(getTrayLabel()).toEqual('Course Documents');
-    }); // user
-
-    it('is labeled with "User Images" when using the "user_images" content type', async () => {
-      await showTrayForPlugin('user_images');
-      expect(getTrayLabel()).toEqual('User Images');
-    });
-    it('is labeled with "User Media" when using the "user_media" content type', async () => {
-      await showTrayForPlugin('user_media');
-      expect(getTrayLabel()).toEqual('User Media');
-    });
-    it('is labeled with "User Documents" when using the "user_documents" content type', async () => {
-      await showTrayForPlugin('user_documents');
-      expect(getTrayLabel()).toEqual('User Documents');
-    });
-    it('is labeled with "Icon Maker Icons" when using the "list_icon_maker_icons" content type', async () => {
-      await showTrayForPlugin('list_icon_maker_icons');
-      expect(getTrayLabel()).toEqual('Icon Maker Icons');
-    });
-  });
-  describe('Tray Label in group context', () => {
-    beforeEach(() => {
-      renderComponent({
-        contextType: 'group'
-      });
-    });
-    it('is labeled with "Group Links" when using the "links" content type', async () => {
-      await showTrayForPlugin('links');
-      expect(getTrayLabel()).toEqual('Group Links');
-    });
-    it('is labeled with "Group Images" when using the "images" content type', async () => {
-      await showTrayForPlugin('group_images');
-      expect(getTrayLabel()).toEqual('Group Images');
-    });
-    it('is labeled with "Group Media" when using the "media" content type', async () => {
-      await showTrayForPlugin('group_media');
-      expect(getTrayLabel()).toEqual('Group Media');
-    });
-    it('is labeled with "Group Documents" when using the "group_documents" content type', async () => {
-      await showTrayForPlugin('group_documents');
-      expect(getTrayLabel()).toEqual('Group Documents');
-    });
-  });
-  describe('content panel', () => {
-    beforeEach(() => {
-      renderComponent();
-    });
-    it('is the links panel for links content types', async () => {
-      await showTrayForPlugin('links');
-      await waitFor(() => expect(component.getByTestId('instructure_links-LinksPanel')).toBeInTheDocument());
-    });
-    it('is the documents panel for document content types', async () => {
-      await showTrayForPlugin('course_documents');
-      await waitFor(() => expect(component.getByTestId('instructure_links-DocumentsPanel')).toBeInTheDocument());
-    });
-    it('is the images panel for image content types', async () => {
-      await showTrayForPlugin('course_images');
-      await waitFor(() => expect(component.getByTestId('instructure_links-ImagesPanel')).toBeInTheDocument());
-    });
-    it('is the images panel for icon maker content types', async () => {
-      await showTrayForPlugin('list_icon_maker_icons');
-      await waitFor(() => expect(component.getByTestId('instructure_links-ImagesPanel')).toBeInTheDocument());
-    });
-    it('is the media panel for media content types', async () => {
-      await showTrayForPlugin('course_media');
-      await waitFor(() => expect(component.getByTestId('instructure_links-MediaPanel')).toBeInTheDocument());
-    });
-    it('is the file browser for the all content type', async () => {
-      await showTrayForPlugin('all');
-      await waitFor(() => expect(component.getByTestId('instructure_links-FilesPanel')).toBeInTheDocument());
-    });
-  });
-  describe('focus', () => {
-    beforeEach(() => {
-      renderComponent();
-    });
-    it('is set on tinymce after tray closes if focus was on the tray', async () => {
-      const mockFocus = jest.fn();
-      props.bridge.focusActiveEditor = mockFocus;
-      await showTrayForPlugin('links');
-      await waitFor(() => expect(component.getByTestId('instructure_links-LinksPanel')).toBeInTheDocument());
-      const closeBtn = component.getByTestId('CloseButton_ContentTray').querySelector('button');
-      closeBtn.focus();
-      closeBtn.click(); // immediately after being asked to close, INSTUI Tray removes role='dialog' and
-      // adds aria-hidden='true', so the getTray() function above does not work
-
-      await waitForElementToBeRemoved(() => component.queryByTestId('CanvasContentTray'));
-      expect(mockFocus).toHaveBeenCalledWith(false);
-    });
-    it('is not set on tinymce after tray closes if focus was elsewhere', async () => {
-      const mockFocus = jest.fn();
-      props.bridge.focusActiveEditor = mockFocus;
-      await showTrayForPlugin('links');
-      await waitFor(() => expect(component.getByTestId('instructure_links-LinksPanel')).toBeInTheDocument());
-      props.bridge.hideTrays(); // immediately after being asked to close, INSTUI Tray removes role='dialog' and
-      // adds aria-hidden='true', so the getTray() function above does not work
-
-      await waitForElementToBeRemoved(() => component.queryByTestId('CanvasContentTray'));
-      expect(mockFocus).not.toHaveBeenCalled();
-    });
-  });
-});

package/es/rce/plugins/shared/__tests__/CheckerboardStyling.test.js

@@ -1,28 +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 checkerboardStyle from '../CheckerboardStyling';
-describe('checkerboardStyle', () => {
-  it('creates 4px squares when passed squareSize 4', () => {
-    const checkerboard = checkerboardStyle(4);
-    expect(checkerboard.backgroundSize).toBe('4px 4px');
-  });
-  it('creates 8px squares when passed squareSize 8', () => {
-    const checkerboard = checkerboardStyle(8);
-    expect(checkerboard.backgroundSize).toBe('8px 8px');
-  });
-});

package/es/rce/plugins/shared/__tests__/ColorInput.test.js

@@ -1,94 +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 { render, screen, fireEvent } from '@testing-library/react';
-import { ColorInput } from '../ColorInput';
-describe('<ColorInput />', () => {
-  const defaults = {
-    color: '#212121',
-    onChange: jest.fn(),
-    label: 'Some color input',
-    name: 'some-color'
-  };
-  beforeEach(() => jest.clearAllMocks());
-  it('renders the selected color preview', () => {
-    render( /*#__PURE__*/React.createElement(ColorInput, defaults));
-    const preview = screen.getByTestId(`colorPreview-${defaults.color}`);
-    expect(preview.style.background).toBe('rgb(33, 33, 33)');
-  });
-  it('renders no background when no color is selected', () => {
-    render( /*#__PURE__*/React.createElement(ColorInput, Object.assign({}, defaults, {
-      color: null
-    })));
-    const preview = screen.getByTestId('colorPreview-none'); // js dom does not support linear gradient yet
-
-    expect(preview.style.background).toBe('');
-  });
-  it('changes the color by typing', () => {
-    render( /*#__PURE__*/React.createElement(ColorInput, defaults));
-    const input = screen.getByRole('textbox', {
-      name: /some color input/i
-    });
-    fireEvent.change(input, {
-      target: {
-        value: ''
-      }
-    });
-    expect(defaults.onChange).toHaveBeenCalledWith(null);
-    fireEvent.change(input, {
-      target: {
-        value: '#fff'
-      }
-    });
-    expect(defaults.onChange).toHaveBeenCalledWith('#fff');
-  });
-  it('changes the color using the predefined colors', () => {
-    render( /*#__PURE__*/React.createElement(ColorInput, defaults));
-    fireEvent.click(screen.getByText(/color picker/i));
-    fireEvent.click(screen.getByTestId('colorPreview-#06A3B7'));
-    expect(defaults.onChange).toHaveBeenCalledWith('#06A3B7');
-    fireEvent.click(screen.getByText(/color picker/i));
-    fireEvent.click(screen.getByTestId('colorPreview-none'));
-    expect(defaults.onChange).toHaveBeenCalledWith(null);
-  });
-  describe('screenreader label', () => {
-    it('just says color picker if nothing is selected', () => {
-      render( /*#__PURE__*/React.createElement(ColorInput, Object.assign({}, defaults, {
-        color: null
-      }))); // signifies 'None' is selected
-
-      expect(screen.getByText(/color picker/i)).toBeInTheDocument();
-      expect(screen.queryByText(/selected/i)).not.toBeInTheDocument();
-    });
-    it('just says color picker if a non-named color is selected', () => {
-      render( /*#__PURE__*/React.createElement(ColorInput, Object.assign({}, defaults, {
-        color: "#654321"
-      }))); // not one of our named colors
-
-      expect(screen.getByText(/color picker/i)).toBeInTheDocument();
-      expect(screen.queryByText(/selected/i)).not.toBeInTheDocument();
-    });
-    it('includes the named color if a named color is selected', () => {
-      render( /*#__PURE__*/React.createElement(ColorInput, Object.assign({}, defaults, {
-        color: "#FFFFFF"
-      }))); // white
-
-      expect(screen.getByText(/color picker \(white selected\)/i)).toBeInTheDocument();
-    });
-  });
-});

package/es/rce/plugins/shared/__tests__/ConditionalTooltip.test.js

@@ -1,79 +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, fireEvent } from '@testing-library/react';
-import { ConditionalTooltip } from '../ConditionalTooltip';
-describe('ConditionalTooltip', () => {
-  const subject = function () {
-    let overrideProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return render( /*#__PURE__*/React.createElement(ConditionalTooltip, Object.assign({
-      condition: true,
-      renderTip: "explanation for something",
-      on: ['hover'],
-      children: /*#__PURE__*/React.createElement("p", null, "child 1") // eslint-disable-line react/no-children-prop
-
-    }, overrideProps)));
-  };
-
-  it('renders the tooltip when condition is true', () => {
-    const {
-      getByText
-    } = subject();
-    const tooltip = getByText('explanation for something');
-    expect(tooltip).toBeInTheDocument();
-  });
-  it('does not render the tooltip when condition is false', () => {
-    const {
-      queryByText
-    } = subject({
-      condition: false
-    });
-    const tooltip = queryByText('explanation for something');
-    expect(tooltip).not.toBeInTheDocument();
-  });
-  it('renders a child', () => {
-    const {
-      getByText
-    } = subject();
-    const child1 = getByText('child 1');
-    expect(child1).toBeInTheDocument();
-  });
-  it('renders multiple children', () => {
-    const {
-      getByText
-    } = subject({
-      children: [/*#__PURE__*/React.createElement("p", {
-        key: "1"
-      }, "child 1"), /*#__PURE__*/React.createElement("p", {
-        key: "2"
-      }, "child 2")]
-    });
-    const child1 = getByText('child 1');
-    const child2 = getByText('child 2');
-    expect(child1).toBeInTheDocument();
-    expect(child2).toBeInTheDocument();
-  });
-  it('tooltip is visible when hovered', () => {
-    const {
-      getByText
-    } = subject();
-    const tooltip = getByText('explanation for something');
-    fireEvent.mouseOver(tooltip);
-    expect(tooltip).toBeVisible();
-  });
-});