@instructure/canvas-rce 5.6.0-beta.0 → 5.6.0

package/lib/translated/ko/modules/rce/plugins/instructure_icon_maker/svg/__tests__/settings.test.js

@@ -17,25 +17,18 @@
  */
 import fetchMock from 'fetch-mock';
 import { renderHook, act } from '@testing-library/react-hooks/dom';
-import { useSvgSettings, svgFromUrl, statuses } from '../settings';
+import { useSvgSettings, statuses } from '../settings';
 import Editor from '../../../shared/__tests__/FakeEditor';
-import RceApiSource from '../../../../../rcs/api';
-jest.mock('../../../../../rcs/api');
 describe('useSvgSettings()', () => {
   let editing, ed, rcs;
   beforeEach(() => {
     ed = new Editor();
     rcs = {
-      getFile: jest.fn(() => Promise.resolve({
-        name: 'Test Icon.svg'
-      })),
       contextType: 'course',
       contextId: 1,
       canvasUrl: 'https://domain.from.env'
     };
-    RceApiSource.mockImplementation(() => rcs);
   });
-  afterEach(() => RceApiSource.mockClear());
 
   const subject = () => renderHook(() => useSvgSettings(ed, editing, rcs)).result;
 
@@ -148,10 +141,8 @@ describe('useSvgSettings()', () => {
       //
 
       body = `
-        <svg height="100" width="100">
-        <metadata>
           {
-            "name":"Test Image",
+            "name":"Test Icon",
             "alt":"a test image",
             "shape":"triangle",
             "size":"large",
@@ -163,13 +154,10 @@ describe('useSvgSettings()', () => {
             "textColor":"#009606",
             "textBackgroundColor":"#06A3B7",
             "textPosition":"below"
-          }
-        </metadata>
-        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-      </svg>`; // Stub fetch to return an SVG file
+          }`; // Stub fetch to return an SVG file
 
       mock = fetchMock.mock({
-        name: 'download-url',
+        name: 'icon_metadata',
         matcher: '*',
         response: () => ({
           body
@@ -180,20 +168,20 @@ describe('useSvgSettings()', () => {
       jest.resetAllMocks();
       fetchMock.restore();
     });
-    it('fetches the SVG file, specifying the course ID and timestamp', () => {
+    it('fetches the icon metadata, specifying the course ID and timestamp', () => {
       subject();
-      expect(mock.called('download-url')).toBe(true);
-      expect(mock.calls('download-url')[0][0]).toMatch(/https:\/\/domain.from.env\/files\/1\/download\?replacement_chain_context_type=course&replacement_chain_context_id=1&ts=\d+&download_frd=1/);
+      expect(mock.called('icon_metadata')).toBe(true);
+      expect(mock.calls('icon_metadata')[0][0]).toMatch(/https:\/\/domain.from.env\/api\/v1\/files\/1\/icon_metadata/);
     });
     describe('when the download URL contains a course ID', () => {
       beforeEach(() => {
         ed.setContent('<img id="test-image" data-inst-icon-maker-icon="true" src="https://canvas.instructure.com/svg" data-download-url="courses/2/files/1/download" alt="a red circle" />');
         ed.setSelectedNode(ed.dom.select('#test-image')[0]);
       });
-      it('fetches the SVG file using the /files/:file_id/download endpoint', () => {
+      it('fetches the icon metadata using the /files/:file_id/icon_metadata endpoint', () => {
         subject();
-        expect(mock.called('download-url')).toBe(true);
-        expect(mock.calls('download-url')[0][0]).toMatch(/https:\/\/domain.from.env\/files\/1\/download\?replacement_chain_context_type=course&replacement_chain_context_id=1&ts=\d+&download_frd=1/);
+        expect(mock.called('icon_metadata')).toBe(true);
+        expect(mock.calls('icon_metadata')[0][0]).toMatch(/https:\/\/domain.from.env\/api\/v1\/files\/1\/icon_metadata/);
       });
     });
     describe('with a relative download URL', () => {
@@ -201,10 +189,10 @@ describe('useSvgSettings()', () => {
         ed.setContent('<img id="test-image" data-inst-icon-maker-icon="true" src="https://canvas.instructure.com/svg" data-download-url="/files/1/download" alt="a red circle" />');
         ed.setSelectedNode(ed.dom.select('#test-image')[0]);
       });
-      it('fetches the SVG file, specifying the course ID and timestamp', () => {
+      it('fetches the icon metadata, specifying the course ID and timestamp', () => {
         subject();
-        const calledUrl = mock.calls('download-url')[0][0];
-        expect(calledUrl).toMatch(/https:\/\/domain.from.env\/files\/1\/download\?replacement_chain_context_type=course&replacement_chain_context_id=1&ts=\d+&download_frd=1/);
+        const calledUrl = mock.calls('icon_metadata')[0][0];
+        expect(calledUrl).toMatch(/https:\/\/domain.from.env\/api\/v1\/files\/1\/icon_metadata/);
       });
     });
     describe('with a containing element selected', () => {
@@ -212,26 +200,13 @@ describe('useSvgSettings()', () => {
         ed.setContent('<p id="containing"><img data-inst-icon-maker-icon="true" src="https://canvas.instructure.com/svg" data-download-url="/files/1/download" alt="a red circle" /></p>');
         ed.setSelectedNode(ed.dom.select('#containing')[0]);
       });
-      it('fetches the SVG file, specifying the course ID and timestamp', () => {
+      it('fetches the icon metadata, specifying the course ID and timestamp', () => {
         subject();
-        const calledUrl = mock.calls('download-url')[0][0];
-        expect(calledUrl).toMatch(/https:\/\/domain.from.env\/files\/1\/download\?replacement_chain_context_type=course&replacement_chain_context_id=1&ts=\d+&download_frd=1/);
-      });
-    });
-    it('uses replacement chain context info in request for file name', async () => {
-      const {
-        result,
-        waitForValueToChange
-      } = renderHook(() => useSvgSettings(ed, editing, rcs));
-      await waitForValueToChange(() => {
-        return result.current[0];
-      });
-      expect(rcs.getFile).toHaveBeenCalledWith('1', {
-        replacement_chain_context_id: 1,
-        replacement_chain_context_type: 'course'
+        const calledUrl = mock.calls('icon_metadata')[0][0];
+        expect(calledUrl).toMatch(/https:\/\/domain.from.env\/api\/v1\/files\/1\/icon_metadata/);
       });
     });
-    it('parses the SVG settings from the SVG metadata', async () => {
+    it('parses the SVG settings from the icon metadata', async () => {
       const {
         result,
         waitForValueToChange
@@ -275,10 +250,8 @@ describe('useSvgSettings()', () => {
     });
     describe('parses the SVG settings from a legacy SVG metadata structure', () => {
       const bodyGenerator = overrideParams => `
-          <svg height="100" width="100">
-          <metadata>
-            ${JSON.stringify({ ...{
-          name: 'Test Image',
+        ${JSON.stringify({ ...{
+          name: 'Test Icon',
           alt: 'a test image',
           shape: 'triangle',
           size: 'large',
@@ -301,13 +274,10 @@ describe('useSvgSettings()', () => {
           }
         },
         ...overrideParams
-      })}
-          </metadata>
-          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-        </svg>`;
+      })}`;
 
       const overwriteUrl = () => mock = fetchMock.mock({
-        name: 'download-url',
+        name: 'icon_metadata',
         matcher: '*',
         response: () => ({
           body
@@ -590,47 +560,39 @@ describe('useSvgSettings()', () => {
           data-inst-icon-maker-icon="true"
           data-download-url="https://canvas.instructure.com/files/2/download" />
       `);
-      fetchMock.mock('begin:https://domain.from.env/files/1/download', {
+      fetchMock.mock('begin:https://domain.from.env/api/v1/files/1/icon_metadata', {
         body: `
-          <svg height="100" width="100">
-            <metadata>
-              {
-                "alt":"the first test image",
-                "shape":"triangle",
-                "size":"large",
-                "color":"#FF2717",
-                "outlineColor":"#06A3B7",
-                "outlineSize":"small",
-                "text":"Some Text",
-                "textSize":"medium",
-                "textColor":"#009606",
-                "textBackgroundColor":"#06A3B7",
-                "textPosition":"below"
-              }
-            </metadata>
-            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-          </svg>`
+          {
+            "name":"Test Icon.svg",
+            "alt":"the first test image",
+            "shape":"triangle",
+            "size":"large",
+            "color":"#FF2717",
+            "outlineColor":"#06A3B7",
+            "outlineSize":"small",
+            "text":"Some Text",
+            "textSize":"medium",
+            "textColor":"#009606",
+            "textBackgroundColor":"#06A3B7",
+            "textPosition":"below"
+          }`
       });
-      fetchMock.mock('begin:https://domain.from.env/files/2/download', {
+      fetchMock.mock('begin:https://domain.from.env/api/v1/files/2/icon_metadata', {
         body: `
-          <svg height="100" width="100">
-            <metadata>
-              {
-                "alt":"the second test image",
-                "shape":"square",
-                "size":"medium",
-                "color":"#FF2717",
-                "outlineColor":"#06A3B7",
-                "outlineSize":"small",
-                "text":"Some Text",
-                "textSize":"medium",
-                "textColor":"#009606",
-                "textBackgroundColor":"#06A3B7",
-                "textPosition":"below"
-              }
-            </metadata>
-            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-          </svg>`
+          {
+            "name":"Test Icon.svg",
+            "alt":"the second test image",
+            "shape":"square",
+            "size":"medium",
+            "color":"#FF2717",
+            "outlineColor":"#06A3B7",
+            "outlineSize":"small",
+            "text":"Some Text",
+            "textSize":"medium",
+            "textColor":"#009606",
+            "textBackgroundColor":"#06A3B7",
+            "textPosition":"below"
+          }`
       });
     });
     afterEach(() => fetchMock.reset());
@@ -650,40 +612,4 @@ describe('useSvgSettings()', () => {
       expect(result.current[0].shape).toEqual('square');
     });
   });
-});
-describe('svgFromUrl()', () => {
-  let svgResponse;
-
-  const subject = () => svgFromUrl('https://www.instructure.com/svg');
-
-  beforeEach(() => {
-    fetchMock.mock('https://www.instructure.com/svg', () => ({
-      body: svgResponse,
-      sendAsJson: false
-    }));
-  });
-  afterEach(() => {
-    fetchMock.restore();
-    jest.resetAllMocks();
-  });
-  describe('when the url points to an SVG file', () => {
-    beforeEach(() => {
-      svgResponse = `
-        <svg height="100" width="100">
-          <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
-        </svg>
-      `;
-    });
-    it('returns the parsed SVG document', async () => {
-      const svgDoc = await subject();
-      expect(svgDoc.querySelector('svg').innerHTML).toContain('<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>');
-    });
-  });
-  describe('when the url points to a document that is not parsable', () => {
-    beforeEach(() => svgResponse = 'asdf');
-    it('returns an empty document', async () => {
-      const doc = await subject();
-      expect(doc.firstChild.toString.innerHTML).toEqual(undefined);
-    });
-  });
 });

package/lib/translated/ko/modules/rce/plugins/instructure_icon_maker/svg/__tests__/text.test.js

@@ -276,68 +276,158 @@ describe('buildText()', () => {
     });
   });
   describe('builds <text /> when text position', () => {
-    it('is middle', () => {
-      expect(buildText({ ...settings,
-        textPosition: 'below'
-      })).toMatchInlineSnapshot(`
-        <text
-          fill="#000000"
-          font-family="Lato Extended"
-          font-size="14"
-          font-weight="bold"
-          x="55"
-          y="144"
-        >
-          <tspan
-            dy="0"
+    describe('is middle', () => {
+      it('and it is a single line text', () => {
+        expect(buildText({ ...settings,
+          textPosition: 'middle'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
             x="55"
+            y="67"
           >
-            Hello World!
-          </tspan>
-        </text>
-      `);
+            <tspan
+              dy="0"
+              x="55"
+            >
+              Hello World!
+            </tspan>
+          </text>
+        `);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildText({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'middle'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
+            x="48"
+            y="60"
+          >
+            <tspan
+              dy="0"
+              x="48"
+            >
+              Hello World! Hello World!
+            </tspan>
+            <tspan
+              dy="14"
+              x="59"
+            >
+              Bye!
+            </tspan>
+          </text>
+        `);
+      });
     });
-    it('is bottom-third', () => {
-      expect(buildText({ ...settings,
-        textPosition: 'bottom-third'
-      })).toMatchInlineSnapshot(`
-        <text
-          fill="#000000"
-          font-family="Lato Extended"
-          font-size="14"
-          font-weight="bold"
-          x="55"
-          y="125"
-        >
-          <tspan
-            dy="0"
+    describe('is bottom-third', () => {
+      it('and it is a single line text', () => {
+        expect(buildText({ ...settings,
+          textPosition: 'bottom-third'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
             x="55"
+            y="121"
           >
-            Hello World!
-          </tspan>
-        </text>
-      `);
+            <tspan
+              dy="0"
+              x="55"
+            >
+              Hello World!
+            </tspan>
+          </text>
+        `);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildText({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'bottom-third'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
+            x="48"
+            y="114"
+          >
+            <tspan
+              dy="0"
+              x="48"
+            >
+              Hello World! Hello World!
+            </tspan>
+            <tspan
+              dy="14"
+              x="59"
+            >
+              Bye!
+            </tspan>
+          </text>
+        `);
+      });
     });
-    it('is below', () => {
-      expect(buildText({ ...settings,
-        textPosition: 'below'
-      })).toMatchInlineSnapshot(`
-        <text
-          fill="#000000"
-          font-family="Lato Extended"
-          font-size="14"
-          font-weight="bold"
-          x="55"
-          y="144"
-        >
-          <tspan
-            dy="0"
+    describe('is below', () => {
+      it('and it is a single line text', () => {
+        expect(buildText({ ...settings,
+          textPosition: 'below'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
             x="55"
+            y="144"
           >
-            Hello World!
-          </tspan>
-        </text>
-      `);
+            <tspan
+              dy="0"
+              x="55"
+            >
+              Hello World!
+            </tspan>
+          </text>
+        `);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildText({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'below'
+        })).toMatchInlineSnapshot(`
+          <text
+            fill="#000000"
+            font-family="Lato Extended"
+            font-size="14"
+            font-weight="bold"
+            x="48"
+            y="144"
+          >
+            <tspan
+              dy="0"
+              x="48"
+            >
+              Hello World! Hello World!
+            </tspan>
+            <tspan
+              dy="14"
+              x="59"
+            >
+              Bye!
+            </tspan>
+          </text>
+        `);
+      });
     });
   });
 });
@@ -350,7 +440,7 @@ describe('buildTextBackground()', () => {
       text: 'Hello World!'
     })).toMatchInlineSnapshot(`
       <path
-        d="M55,128 h14 a4,4 0 0 1 4,4 v16 a4,4 0 0 1 -4,4 h-14 a4,4 0 0 1 -4,-4 v-16 a4,4 0 0 1 4,-4 z"
+        d="M55,127 h14 a4,4 0 0 1 4,4 v16 a4,4 0 0 1 -4,4 h-14 a4,4 0 0 1 -4,-4 v-16 a4,4 0 0 1 4,-4 z"
         fill=""
       />
     `);
@@ -365,6 +455,62 @@ describe('buildTextBackground()', () => {
       text: '  '
     })).toBeNull();
   });
+  describe('builds <path /> when text position', () => {
+    describe('is middle', () => {
+      it('and it is a single line text', () => {
+        expect(buildTextBackground({ ...settings,
+          textPosition: 'middle'
+        })).toMatchInlineSnapshot(`null`);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildTextBackground({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'middle'
+        })).toMatchInlineSnapshot(`
+          <path
+            d="M48,43 h27 a4,4 0 0 1 4,4 v30 a4,4 0 0 1 -4,4 h-27 a4,4 0 0 1 -4,-4 v-30 a4,4 0 0 1 4,-4 z"
+            fill=""
+          />
+        `);
+      });
+    });
+    describe('is bottom-third', () => {
+      it('and it is a single line text', () => {
+        expect(buildTextBackground({ ...settings,
+          textPosition: 'bottom-third'
+        })).toMatchInlineSnapshot(`null`);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildTextBackground({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'bottom-third'
+        })).toMatchInlineSnapshot(`
+          <path
+            d="M48,97 h27 a4,4 0 0 1 4,4 v30 a4,4 0 0 1 -4,4 h-27 a4,4 0 0 1 -4,-4 v-30 a4,4 0 0 1 4,-4 z"
+            fill=""
+          />
+        `);
+      });
+    });
+    describe('is below', () => {
+      it('and it is a single line text', () => {
+        expect(buildTextBackground({ ...settings,
+          textPosition: 'below'
+        })).toMatchInlineSnapshot(`null`);
+      });
+      it('and it is a multi line text', () => {
+        expect(buildTextBackground({ ...settings,
+          text: 'Hello World! Hello World! Bye!',
+          textPosition: 'below'
+        })).toMatchInlineSnapshot(`
+          <path
+            d="M48,127 h27 a4,4 0 0 1 4,4 v30 a4,4 0 0 1 -4,4 h-27 a4,4 0 0 1 -4,-4 v-30 a4,4 0 0 1 4,-4 z"
+            fill=""
+          />
+        `);
+      });
+    });
+  });
 });
 describe('getContainerWidth()', () => {
   beforeEach(() => {

package/lib/translated/ko/modules/rce/plugins/instructure_icon_maker/svg/__tests__/utils.test.js

@@ -38,16 +38,49 @@ describe('splitTextIntoLines()', () => {
     expect(splitTextIntoLines('Incomprehensibility is a long word!', 10)).toStrictEqual(['Incompreh-', 'ensibility', 'is a long', 'word!']);
   });
   it('does not count beginning or trailing whitespace when computing lines', () => {
-    const text = ' some text         ';
-    const expectedLinesCount = 1;
+    const text = ' icon maker rocks !       ';
     const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
-    expect(lines.length).toBe(expectedLinesCount);
+    expect(lines).toStrictEqual(['icon maker rocks !']);
   });
   it('returns empty array when text is whitespace only', () => {
     const text = '';
     const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
     expect(lines).toStrictEqual([]);
   });
+  describe('ignores consecutive', () => {
+    it('whitespaces', () => {
+      const text = 'icon  maker   rocks !';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+    it('tabs', () => {
+      const text = 'icon\t\tmaker\t\t\trocks\t!';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+    it('line breaks', () => {
+      const text = 'icon\n\nmaker\n\n\nrocks\n!';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+  });
+  describe('beginning or trailing', () => {
+    it('whitespaces', () => {
+      const text = '  icon maker rocks ! ';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+    it('tabs', () => {
+      const text = '\ticon maker rocks !\t';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+    it('line breaks', () => {
+      const text = '\nicon maker rocks !\n';
+      const lines = splitTextIntoLines(text, MAX_TOTAL_TEXT_CHARS);
+      expect(lines).toStrictEqual(['icon maker rocks !']);
+    });
+  });
 });
 describe('convertFileToBase64()', () => {
   it('executes readAsDataURL with correct arguments', async () => {

package/lib/translated/ko/modules/rce/plugins/instructure_icon_maker/svg/constants.js

@@ -84,6 +84,12 @@ export const TEXT_SIZE = {
   [Size.Large]: 22,
   [Size.ExtraLarge]: 28
 };
+export const TEXT_SIZE_FONT_DIFF = {
+  [Size.Small]: -1,
+  [Size.Medium]: 0,
+  [Size.Large]: 1,
+  [Size.ExtraLarge]: 2
+};
 export const MAX_CHAR_COUNT = {
   [Size.Small]: 21,
   [Size.Medium]: 18,