@instructure/canvas-rce 5.6.2 → 5.6.4

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/__tests__/Footer.test.js

@@ -1,127 +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 userEvent from '@testing-library/user-event';
-import { Footer } from '../Footer';
-describe('<Footer />', () => {
-  let defaults;
-  beforeEach(() => {
-    defaults = {
-      onCancel: jest.fn(),
-      onSubmit: jest.fn(),
-      onReplace: jest.fn(),
-      editing: false,
-      isModified: false
-    };
-  });
-  afterEach(() => jest.clearAllMocks());
-  it('submits the icon maker tray', () => {
-    const onSubmit = jest.fn();
-    render( /*#__PURE__*/React.createElement(Footer, Object.assign({}, defaults, {
-      onSubmit: onSubmit
-    })));
-    userEvent.click(screen.getByRole('button', {
-      name: /apply/i
-    }));
-    expect(onSubmit).toHaveBeenCalled();
-  });
-  it('closes the icon maker tray', () => {
-    const onCancel = jest.fn();
-    render( /*#__PURE__*/React.createElement(Footer, Object.assign({}, defaults, {
-      onCancel: onCancel
-    })));
-    userEvent.click(screen.getByRole('button', {
-      name: /cancel/i
-    }));
-    expect(onCancel).toHaveBeenCalled();
-  });
-  it('renders the footer disabled', () => {
-    render( /*#__PURE__*/React.createElement(Footer, Object.assign({}, defaults, {
-      disabled: true
-    })));
-    const cancelButton = screen.getByRole('button', {
-      name: /cancel/i
-    });
-    const applyButton = screen.getByRole('button', {
-      name: /apply/i
-    });
-    expect(cancelButton).toBeDisabled();
-    expect(applyButton).toBeDisabled();
-  });
-  describe('when editing', () => {
-    beforeEach(() => {
-      defaults.editing = true;
-    });
-
-    const subject = function () {
-      let overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return render( /*#__PURE__*/React.createElement(Footer, Object.assign({}, defaults, overrides)));
-    };
-
-    it('renders the "apply to all" checkbox', async () => {
-      const {
-        findByTestId
-      } = subject();
-      expect(await findByTestId('cb-replace-all')).toBeInTheDocument();
-    });
-    it('renders the "save" button', async () => {
-      const {
-        findByText
-      } = subject();
-      expect(await findByText('Save')).toBeInTheDocument();
-    });
-    it('Disable the "save" button when the user has not made changes', async () => {
-      const {
-        findByText
-      } = subject();
-      const saveButton = await findByText('Save');
-      expect(saveButton.closest('button')).toHaveAttribute('disabled');
-    });
-    it('renders Tooltip when hover the "save" button', async () => {
-      const {
-        findByText
-      } = subject();
-      const saveButton = await findByText('Save');
-      fireEvent.mouseOver(saveButton);
-      expect(await findByText('No changes to save.')).toBeInTheDocument();
-    });
-    it('does not render the "apply" button', async () => {
-      const {
-        queryByText
-      } = subject();
-      expect(await queryByText('Apply')).not.toBeInTheDocument();
-    });
-    it('Enable the "save" button when the user has made changes', async () => {
-      defaults.isModified = true;
-      const {
-        findByText
-      } = subject();
-      const saveButton = await findByText('Save');
-      expect(saveButton.closest('button')).not.toBeDisabled();
-    });
-    it('calls "onSubmit" when "Save" is pressed"', async () => {
-      defaults.isModified = true;
-      const {
-        findByText
-      } = subject();
-      userEvent.click(await findByText('Save'));
-      expect(defaults.onSubmit).toHaveBeenCalled();
-    });
-  });
-});

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/__tests__/Header.test.js

@@ -1,108 +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 { fireEvent, render, waitFor } from '@testing-library/react';
-import { DEFAULT_SETTINGS } from '../../../svg/constants';
-import { Header } from '../Header';
-describe('<Header />', () => {
-  it('changes the icon name', async () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(Header, {
-      settings: DEFAULT_SETTINGS,
-      onChange: onChange
-    }));
-    const input = document.querySelector('#icon-name');
-    fireEvent.change(input, {
-      target: {
-        value: 'An IM name'
-      }
-    });
-    await waitFor(() => expect(onChange).toHaveBeenCalledWith({
-      name: 'An IM name'
-    }));
-  });
-  it('changes the icon alt text', async () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(Header, {
-      settings: DEFAULT_SETTINGS,
-      onChange: onChange
-    }));
-    const input = document.querySelector('#icon-alt-text');
-    fireEvent.change(input, {
-      target: {
-        value: 'A descriptive text'
-      }
-    });
-    await waitFor(() => expect(onChange).toHaveBeenCalledWith({
-      alt: 'A descriptive text'
-    }));
-  });
-  describe('when the decorative icon box is checked', () => {
-    it('changes the icon isDecorative field', async () => {
-      const onChange = jest.fn();
-      const {
-        getByRole
-      } = render( /*#__PURE__*/React.createElement(Header, {
-        settings: DEFAULT_SETTINGS,
-        onChange: onChange
-      }));
-      const checkBox = getByRole('checkbox', {
-        name: /Decorative Icon/
-      });
-      fireEvent.click(checkBox);
-      await waitFor(() => expect(onChange).toHaveBeenCalledWith({
-        isDecorative: true
-      }));
-    });
-  });
-  describe('when the isDecorative setting is true', () => {
-    let settings;
-    beforeAll(() => settings = { ...DEFAULT_SETTINGS,
-      isDecorative: true
-    });
-    it('disables the alt text input', () => {
-      const header = /*#__PURE__*/React.createElement(Header, {
-        settings: settings,
-        onChange: jest.fn()
-      });
-      const {
-        container
-      } = render(header);
-      const textArea = container.querySelector('#icon-alt-text');
-      expect(textArea).toBeDisabled();
-    });
-  });
-  describe('when the name contains html entities', () => {
-    let settings;
-
-    const subject = () => render( /*#__PURE__*/React.createElement(Header, {
-      settings: settings,
-      onChange: () => {}
-    }));
-
-    beforeEach(() => settings = { ...DEFAULT_SETTINGS,
-      name: 'Icon &amp; Maker'
-    });
-    it('decodes the html entities', () => {
-      const {
-        getByTestId
-      } = subject();
-      expect(getByTestId('icon-name').value).toEqual('Icon & Maker');
-    });
-  });
-});

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/__tests__/PreviewSection.test.js

@@ -1,101 +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 { getByText, render } from '@testing-library/react';
-import { DEFAULT_SETTINGS } from '../../../svg/constants';
-import { Preview } from '../Preview';
-describe('<Preview />', () => {
-  it('renders the svg preview', () => {
-    const {
-      container
-    } = render( /*#__PURE__*/React.createElement(Preview, {
-      settings: { ...DEFAULT_SETTINGS,
-        color: null,
-        outlineColor: '#0f0',
-        outlineSize: 'medium',
-        shape: 'triangle',
-        size: 'large'
-      }
-    }));
-    expect(container.querySelector('svg')).toMatchInlineSnapshot(`
-      <svg
-        fill="none"
-        height="218px"
-        style="padding: 16px"
-        viewBox="0 0 218 218"
-        width="218px"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <svg
-          fill="none"
-          height="218px"
-          viewBox="0 0 218 218"
-          width="218px"
-          x="0"
-        >
-          <g
-            fill="none"
-          >
-            <clippath
-              id="clip-path-for-embed"
-            >
-              <path
-                d="M109 8L210 214H8L109 8Z"
-              />
-            </clippath>
-            <path
-              d="M109 8L210 214H8L109 8Z"
-            />
-          </g>
-          <g
-            stroke="#0f0"
-            stroke-width="4"
-          >
-            <clippath
-              id="clip-path-for-embed"
-            >
-              <path
-                d="M109 8L210 214H8L109 8Z"
-              />
-            </clippath>
-            <path
-              d="M109 8L210 214H8L109 8Z"
-            />
-          </g>
-        </svg>
-      </svg>
-    `);
-  });
-  it('renders Preview div with screen reader only content and sibling div with aria-hidden="true"', () => {
-    const {
-      container
-    } = render( /*#__PURE__*/React.createElement(Preview, {
-      settings: { ...DEFAULT_SETTINGS,
-        color: null,
-        outlineColor: '#0f0',
-        outlineSize: 'medium',
-        shape: 'triangle',
-        size: 'large'
-      }
-    }));
-    const ariaLabelDiv = getByText(container, 'Icon Preview');
-    const ariaHiddenDiv = container.querySelector('div[aria-hidden="true"]');
-    expect(ariaLabelDiv).toBeInTheDocument();
-    expect(ariaHiddenDiv).toBeInTheDocument();
-  });
-});

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/__tests__/ShapeSection.test.js

@@ -1,103 +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, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { DEFAULT_SETTINGS } from '../../../svg/constants';
-import { ShapeSection } from '../ShapeSection';
-import { createCroppedImageSvg } from '../ImageCropper/imageCropUtils';
-import { convertFileToBase64 } from '../../../svg/utils';
-jest.mock('../ImageCropper/imageCropUtils', () => {
-  return {
-    createCroppedImageSvg: jest.fn().mockImplementation(() => Promise.resolve({
-      outerHTML: '<svg />'
-    }))
-  };
-});
-jest.mock('../../../svg/utils', () => {
-  return {
-    convertFileToBase64: jest.fn().mockImplementation(() => Promise.resolve('data:image/svg+xml;base64,PHN2Zaaaaaaaaa'))
-  };
-});
-
-function selectOption(button, option) {
-  userEvent.click(screen.getByRole('button', {
-    name: button
-  }));
-  userEvent.click(screen.getByRole('option', {
-    name: option
-  }));
-}
-
-describe('<ShapeSection />', () => {
-  it('changes the icon shape', () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(ShapeSection, {
-      settings: { ...DEFAULT_SETTINGS,
-        shape: 'circle'
-      },
-      onChange: onChange
-    }));
-    selectOption(/icon shape/i, /triangle/i);
-    expect(onChange).toHaveBeenCalledWith({
-      shape: 'triangle'
-    });
-  });
-  it('changes the icon size', () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(ShapeSection, {
-      settings: { ...DEFAULT_SETTINGS,
-        size: 'small'
-      },
-      onChange: onChange
-    }));
-    selectOption(/icon size/i, /extra small/i);
-    expect(onChange).toHaveBeenCalledWith({
-      size: 'x-small'
-    });
-  });
-  describe('when there is an embedded image', () => {
-    const settings = { ...DEFAULT_SETTINGS,
-      shape: 'triangle',
-      imageSettings: {
-        cropperSettings: {}
-      }
-    };
-    it('recrops the embedded image', () => {
-      render( /*#__PURE__*/React.createElement(ShapeSection, {
-        settings: settings,
-        onChange: () => {}
-      }));
-      expect(createCroppedImageSvg).toHaveBeenCalledWith({
-        shape: 'triangle'
-      });
-    });
-    it('sets the encoded image to the newly cropped base64 encoded image', async () => {
-      const onChange = jest.fn();
-      render( /*#__PURE__*/React.createElement(ShapeSection, {
-        settings: settings,
-        onChange: onChange
-      }));
-      expect(convertFileToBase64).toHaveBeenCalled();
-      await waitFor(() => expect(onChange).toHaveBeenCalledWith({
-        payload: 'data:image/svg+xml;base64,PHN2Zaaaaaaaaa',
-        type: 'SetEncodedImage'
-      }));
-    });
-  });
-});

package/es/rce/plugins/instructure_icon_maker/components/CreateIconMakerForm/__tests__/TextSection.test.js

@@ -1,150 +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 { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { DEFAULT_SETTINGS } from '../../../svg/constants';
-import { TextSection } from '../TextSection';
-
-function selectOption(button, option) {
-  userEvent.click(screen.getByRole('button', {
-    name: button
-  }));
-  userEvent.click(screen.getByRole('option', {
-    name: option
-  }));
-}
-
-describe('<TextSection />', () => {
-  it('changes the icon text', async () => {
-    const onChange = jest.fn();
-    const {
-      container
-    } = render( /*#__PURE__*/React.createElement(TextSection, {
-      settings: DEFAULT_SETTINGS,
-      onChange: onChange
-    }));
-    const input = container.querySelector('#icon-text');
-    fireEvent.change(input, {
-      target: {
-        value: 'Hello World!'
-      }
-    });
-    await waitFor(() => expect(onChange).toHaveBeenCalledWith({
-      text: 'Hello World!'
-    }));
-  });
-  it("doesn't change the icon text when reaches the limit when typing", async () => {
-    const onChange = jest.fn();
-    const {
-      container
-    } = render( /*#__PURE__*/React.createElement(TextSection, {
-      settings: { ...DEFAULT_SETTINGS,
-        text: 'Hello World!Hello World!Hello!12'
-      },
-      onChange: onChange
-    }));
-    const input = container.querySelector('#icon-text');
-    fireEvent.change(input, {
-      target: {
-        value: 'Hello World!Hello World!Hello!123'
-      }
-    });
-    await waitFor(() => expect(onChange).not.toHaveBeenCalled());
-  });
-  it("doesn't change the icon text when reaches the limit when pasting", async () => {
-    const onChange = jest.fn();
-    const {
-      container
-    } = render( /*#__PURE__*/React.createElement(TextSection, {
-      settings: { ...DEFAULT_SETTINGS,
-        text: 'Hello World!'
-      },
-      onChange: onChange
-    }));
-    const input = container.querySelector('#icon-text');
-    fireEvent.change(input, {
-      target: {
-        value: 'Hello World!Hello World!Hello World!Hello World!Hello World!'
-      }
-    });
-    await waitFor(() => expect(onChange).toHaveBeenCalledWith({
-      text: 'Hello World!Hello World!Hello Wo'
-    }));
-  });
-  it('changes the icon text size', () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(TextSection, {
-      settings: { ...DEFAULT_SETTINGS
-      },
-      onChange: onChange
-    }));
-    selectOption(/text size/i, /medium/i);
-    expect(onChange).toHaveBeenCalledWith({
-      textSize: 'medium'
-    });
-  });
-  it('changes the icon text color', () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(TextSection, {
-      settings: DEFAULT_SETTINGS,
-      onChange: onChange
-    }));
-    const input = screen.getByRole('textbox', {
-      name: /text color/i
-    });
-    fireEvent.change(input, {
-      target: {
-        value: '#f00'
-      }
-    });
-    expect(onChange).toHaveBeenCalledWith({
-      textColor: '#f00'
-    });
-  });
-  it('changes the icon text background color', () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(TextSection, {
-      settings: DEFAULT_SETTINGS,
-      onChange: onChange
-    }));
-    const input = screen.getByRole('textbox', {
-      name: /text background color/i
-    });
-    fireEvent.change(input, {
-      target: {
-        value: '#0f0'
-      }
-    });
-    expect(onChange).toHaveBeenCalledWith({
-      textBackgroundColor: '#0f0'
-    });
-  });
-  it('changes the icon text position', () => {
-    const onChange = jest.fn();
-    render( /*#__PURE__*/React.createElement(TextSection, {
-      settings: { ...DEFAULT_SETTINGS
-      },
-      onChange: onChange
-    }));
-    selectOption(/text position/i, /bottom third/i);
-    expect(onChange).toHaveBeenCalledWith({
-      textPosition: 'bottom-third'
-    });
-  });
-});