Fix the title and description not being updated when props change

gilbarbara · Oct 3, 2023 · 61891ae · 61891ae
1 parent 9158b87
commit 61891ae
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -70,7 +70,7 @@ class ReactInlineSVG extends React.PureComponent<Props, State> {
     }
 
     const { isCached, status } = this.state;
-    const { onLoad, src } = this.props;
+    const { description, onLoad, src, title } = this.props;
 
     if (previousState.status !== STATUS.READY && status === STATUS.READY) {
       /* istanbul ignore else */
@@ -88,6 +88,10 @@ class ReactInlineSVG extends React.PureComponent<Props, State> {
 
       this.load();
     }
+
+    if (previousProps.title !== title || previousProps.description !== description) {
+      this.getElement();
+    }
   }
 
   public componentWillUnmount(): void {

diff --git a/test/__snapshots__/index.spec.tsx.snap b/test/__snapshots__/index.spec.tsx.snap
@@ -343,7 +343,6 @@ exports[`react-inlinesvg basic functionality should render a svg string src 1`]
 <svg
   height="24px"
   preserveAspectRatio="xMidYMid"
-  version="1.1"
   viewBox="0 0 24 24"
   width="24px"
   xmlns="http://www.w3.org/2000/svg"

diff --git a/test/index.spec.tsx b/test/index.spec.tsx
@@ -27,7 +27,7 @@ const fixtures = {
     'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1098px" height="768px" viewBox="-0.5 -0.5 1098 768"%3E%3Cdefs /%3E%3Cg%3E%3Ca xlink:href="/dashboard/dash-l1MVuUCUAQ67LmpaHyH6"%3E%3Cimage x="428.5" y="617.5" width="86.25" height="80" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaWQ9ImZmZDY1ZWYwLTQ2ZjEtNDEyMy1hYTg2LTZjMjI0MzI5MmY1ZiIKICAgd2lkdGg9IjE4IgogICBoZWlnaHQ9IjE2Ljc2MDA3OCIKICAgdmlld0JveD0iMCAwIDE4IDE2Ljc2MDA3OCIKICAgdmVyc2lvbj0iMS4xIgogICBzb2RpcG9kaTpkb2NuYW1lPSJBenVyZV9BRF9CMkMuc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjMgKDI0MDU1NDYsIDIwMTgtMDMtMTEpIj4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE5MjAiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTAxNyIKICAgICBpZD0ibmFtZWR2aWV3NTMwNjYiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwIgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIgogICAgIGlua3NjYXBlOnpvb209IjQ4LjExMTExMSIKICAgICBpbmtzY2FwZTpjeD0iOSIKICAgICBpbmtzY2FwZTpjeT0iOC4zODAwNzgxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iLTgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJmZmQ2NWVmMC00NmYxLTQxMjMtYWE4Ni02YzIyNDMyOTJmNWYiIC8+CiAgPGRlZnMKICAgICBpZD0iZGVmczUzMDMzIj4KICAgIDxsaW5lYXJHcmFkaWVudAogICAgICAgaWQ9ImFlMGM0ZTA4LTI0NDAtNDg4Yy1iYWUxLTY1MDljN2E0ZWYwNyIKICAgICAgIHgxPSIxMy4yNSIKICAgICAgIHkxPSIxMi44MyIKICAgICAgIHgyPSI4LjYxOTk5OTkiCiAgICAgICB5Mj0iNC4wNTk5OTk5IgogICAgICAgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiCiAgICAgICBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMC42MikiPgogICAgICA8c3RvcAogICAgICAgICBvZmZzZXQ9IjAiCiAgICAgICAgIHN0b3AtY29sb3I9IiMxOTg4ZDkiCiAgICAgICAgIGlkPSJzdG9wNTMwMjgiIC8+CiAgICAgIDxzdG9wCiAgICAgICAgIG9mZnNldD0iMC45IgogICAgICAgICBzdG9wLWNvbG9yPSIjNTRhZWYwIgogICAgICAgICBpZD0ic3RvcDUzMDMwIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPGcKICAgICBpZD0iZzUzMDYxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTAuNjIpIj4KICAgIDxwb2x5Z29uCiAgICAgICBwb2ludHM9IjE2Ljk5LDkuOTkgMTgsMTEuMTYgOC45MywxNy4wMSAwLDExLjE3IDEuMDEsMTAuMDEgOC45MywxNS4xNCAiCiAgICAgICBpZD0icG9seWdvbjUzMDM1IgogICAgICAgc3R5bGU9ImZpbGw6IzUwZTZmZiIgLz4KICAgIDxwb2x5Z29uCiAgICAgICBwb2ludHM9IjE2LjQsOS4zNiA4LjkzLDE0LjA4IDEuNjEsOS4zNSA4LjkzLDAuNjIgIgogICAgICAgaWQ9InBvbHlnb241MzAzNyIKICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmYiIC8+CiAgICA8cG9seWdvbgogICAgICAgcG9pbnRzPSIxLjYxLDkuMzUgOC45MywwLjYyIDguOTMsMTQuMDggIgogICAgICAgaWQ9InBvbHlnb241MzAzOSIKICAgICAgIHN0eWxlPSJmaWxsOiM1MGU2ZmYiIC8+CiAgICA8cG9seWdvbgogICAgICAgcG9pbnRzPSIxNi40LDkuMzYgOC45MywwLjYyIDguOTMsMTQuMDggIgogICAgICAgaWQ9InBvbHlnb241MzA0MSIKICAgICAgIHN0eWxlPSJmaWxsOnVybCgjYWUwYzRlMDgtMjQ0MC00ODhjLWJhZTEtNjUwOWM3YTRlZjA3KSIgLz4KICAgIDxwb2x5Z29uCiAgICAgICBwb2ludHM9IjguOTMsMTQuMDggOC45Myw3LjU3IDE2LjQsOS4zNiAiCiAgICAgICBpZD0icG9seWdvbjUzMDQzIgogICAgICAgc3R5bGU9ImZpbGw6IzUzYjFlMCIgLz4KICAgIDxwb2x5Z29uCiAgICAgICBwb2ludHM9IjguOTMsNy41NyA4LjkzLDE0LjA4IDEuNjEsOS4zNSAiCiAgICAgICBpZD0icG9seWdvbjUzMDQ1IgogICAgICAgc3R5bGU9ImZpbGw6IzljZWJmZiIgLz4KICAgIDxwb2x5Z29uCiAgICAgICBwb2ludHM9IjE2Ljk5LDkuOTkgOC45MywxNS4xNCA4LjkzLDE3LjAxIDE4LDExLjE2ICIKICAgICAgIGlkPSJwb2x5Z29uNTMwNDciCiAgICAgICBzdHlsZT0iZmlsbDojNWVhMGVmIiAvPgogICAgPHBhdGgKICAgICAgIGQ9Im0gMTcuNDUsMTYgYSAwLjQ0LDAuNDQgMCAwIDAgMC40NCwtMC40NCB2IDAgYSAyLjUsMi41IDAgMCAwIC0yLjQ1LC0yLjUgYyAtMS41MywwIC0yLjMyLDAuOTUgLTIuNDcsMi41IGEgMC40NSwwLjQ1IDAgMCAwIDAuMzksMC40OSBoIDQuMDkgeiIKICAgICAgIGlkPSJwYXRoNTMwNDkiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIgogICAgICAgc3R5bGU9ImZpbGw6Izc3M2FkYyIgLz4KICAgIDxwYXRoCiAgICAgICBkPSJtIDE1LjQ0LDEzLjM4IGEgMS4zNSwxLjM1IDAgMCAxIC0wLjc1LC0wLjIyIGwgMC43NCwxLjkzIDAuNzMsLTEuOTIgYSAxLjM4LDEuMzggMCAwIDEgLTAuNzIsMC4yMSB6IgogICAgICAgaWQ9InBhdGg1MzA1MSIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzdHlsZT0ib3BhY2l0eTowLjg7ZmlsbDojZmZmZmZmIiAvPgogICAgPGNpcmNsZQogICAgICAgY3g9IjE1LjQ0IgogICAgICAgY3k9IjEyIgogICAgICAgcj0iMS4zOCIKICAgICAgIGlkPSJjaXJjbGU1MzA1MyIKICAgICAgIHN0eWxlPSJmaWxsOiM3NzNhZGMiIC8+CiAgICA8cGF0aAogICAgICAgZD0ibSAxNC42OCwxNy4zOCBhIDAuNjUsMC42NSAwIDAgMCAwLjY2LC0wLjY2IHYgLTAuMDggYyAtMC4yNiwtMi4wNSAtMS40MywtMy43MyAtMy42NywtMy43MyAtMi4yNCwwIC0zLjQ1LDEuNDIgLTMuNjcsMy43NCBhIDAuNjUsMC42NSAwIDAgMCAwLjU4LDAuNzIgaCA2LjExIHoiCiAgICAgICBpZD0icGF0aDUzMDU1IgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgIHN0eWxlPSJmaWxsOiNhNjdhZjQiIC8+CiAgICA8cGF0aAogICAgICAgZD0ibSAxMS43LDEzLjQgYSAyLDIgMCAwIDEgLTEuMTEsLTAuMzMgbCAxLjEsMi45MyAxLjEsLTIuODcgQSAyLDIgMCAwIDEgMTEuNywxMy40IFoiCiAgICAgICBpZD0icGF0aDUzMDU3IgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgIHN0eWxlPSJvcGFjaXR5OjAuODtmaWxsOiNmZmZmZmYiIC8+CiAgICA8Y2lyY2xlCiAgICAgICBjeD0iMTEuNjkiCiAgICAgICBjeT0iMTEuMzQiCiAgICAgICByPSIyLjA1OTk5OTkiCiAgICAgICBpZD0iY2lyY2xlNTMwNTkiCiAgICAgICBzdHlsZT0iZmlsbDojYTY3YWY0IiAvPgogIDwvZz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE1MzA2MyI+CiAgICA8cmRmOlJERj4KICAgICAgPHJkZjpsaT5wdWJsaWM6dHJ1ZWU8L3JkZjpsaT4KICAgICAgPHJkZjpsaT5zZGs6ZmFsc2U8L3JkZjpsaT4KICAgICAgPHJkZjpsaT5jYXRlZ29yeTogSWRlbnRpdHk8L3JkZjpsaT4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+Cjwvc3ZnPgo=" /%3E%3C/a%3E%3C/g%3E%3C/svg%3E%0A',
   html: 'data:image/svg+xml,%3Chtml%20lang%3D%22en%22%3E%3Cbody%3EText%3C%2Fbody%3E%3C%2Fhtml%3E',
   string:
-    '<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><g> <polygon fill="#000000" points="7 5 7 19 18 12"></polygon></g></svg>',
+    '<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><g> <polygon fill="#000000" points="7 5 7 19 18 12"></polygon></g></svg>',
 } as const;
 
 const mockOnError = jest.fn();
@@ -396,6 +396,32 @@ describe('react-inlinesvg', () => {
 
       expect(container.querySelector('svg')).toMatchSnapshot();
     });
+
+    it('should update the title and description after the initial render', async () => {
+      const { container, rerender } = setup({
+        src: fixtures.react,
+      });
+
+      await waitFor(() => {
+        expect(mockOnLoad).toHaveBeenCalledTimes(1);
+      });
+      expect(container.querySelector('title')).toHaveTextContent('React');
+      expect(container.querySelector('desc')).not.toBeInTheDocument();
+
+      rerender(
+        <ReactInlineSVG
+          description="A view library"
+          loader={<Loader />}
+          onError={mockOnError}
+          onLoad={mockOnLoad}
+          src={fixtures.react}
+          title="React Rocks"
+        />,
+      );
+
+      expect(container.querySelector('title')).toHaveTextContent('React Rocks');
+      expect(container.querySelector('desc')).toHaveTextContent('A view library');
+    });
   });
 
   describe('cached requests', () => {