Fixed bug in WebvizPluginPlaceholder preventing download from worki…

…ng (#122)

Fixed bug in `WebvizPluginPlaceholder` preventing download button from working. Added tests for `WebvizPluginPlaceholder`.

CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [UNRELEASED] - YYYY-MM-DD
 ### Fixed
+- [#122](https://github.com/equinor/webviz-core-components/pull/122) - Fixed bug in `WebvizPluginPlaceholder` preventing download button from working. Added tests for `WebvizPluginPlaceholder`.
 - [#120](https://github.com/equinor/webviz-core-components/pull/120) - Multiple bug fixes (deletion of currently selected tag not possible; state not dynamically updated;
 empty or invalid node names no longer allowed; auto resizing not working when initializing tag component) and new tests for these bugs. Also removed unnecessary properties.
 

src/lib/components/WebvizPluginPlaceholder/WebvizPluginPlaceholder.tsx

@@ -59,15 +59,6 @@ const InnerWebvizPluginPlaceholder = (
 
     useEffect(() => {
         if (didMountRef.current) {
-            if (download !== null && download !== undefined) {
-                downloadFile({
-                    filename: download.filename,
-                    data: download.content,
-                    mimeType: download.mime_type
-                });
-                setProps({ download: null });
-            }
-
             // Hide/show body scrollbar depending on plugin going in/out of full screen mode.
             if (prevExpandedRef.current !== expanded) {
                 document.body.style.overflow = expanded
@@ -79,20 +70,39 @@ const InnerWebvizPluginPlaceholder = (
         else {
             didMountRef.current = true;
         }
+    }, [prevExpandedRef]);
+
+    useEffect(() => {
         showDeprecationWarnings();
     }, []);
 
+    useEffect(() => {
+        if (didMountRef.current) {
+            if (download !== null && download !== undefined) {
+                downloadFile({
+                    filename: download.filename,
+                    data: download.content,
+                    mimeType: download.mime_type
+                });
+                setProps({ download: null });
+            }
+        }
+        else {
+            didMountRef.current = true;
+        }
+    }, [download]);
+
     const showDeprecationWarnings = () => {
         for (const warning of deprecation_warnings) {
             enqueueSnackbar(
                 warning.message,
                 {
                     variant: "warning",
                     action: (
-                        <a 
-                            className="webviz-config-plugin-deprecation-link" 
-                            href={warning.url} 
-                            target="_blank" 
+                        <a
+                            className="webviz-config-plugin-deprecation-link"
+                            href={warning.url}
+                            target="_blank"
                             rel="noopener noreferrer"
                         >
                             More info
@@ -148,13 +158,15 @@ const InnerWebvizPluginPlaceholder = (
                                             scrollY: -window.scrollY,
                                         }
                                     ).then(canvas =>
-                                        canvas.toBlob(blob =>
-                                            downloadFile({
-                                                filename: screenshot_filename,
-                                                data: blob,
-                                                mimeType: "image/png"
-                                            })
-                                        )
+                                        canvas.toBlob(blob => {
+                                            if (blob !== null) {
+                                                downloadFile({
+                                                    filename: screenshot_filename,
+                                                    data: blob,
+                                                    mimeType: "image/png"
+                                                })
+                                            }
+                                        })
                                     )
                             }
                             }

src/lib/components/WebvizPluginPlaceholder/utils/downloadFile.ts

@@ -12,7 +12,7 @@ export default function downloadFile(
         mimeType
     }: {
         filename: string,
-        data: Blob | null,
+        data: Blob | string,
         mimeType: string
     }
 ): void {

tests/js/WebvizPluginPlaceholder.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { WebvizPluginPlaceholder } from '../../src/lib';
+import { WebvizPluginPlaceholderInteractiveContainer } from './WebvizPluginPlaceholderInteractiveContainer';
+
+export type PropType = {
+    data_requested?: number;
+};
+
+
+const renderWebvizPluginPlaceholder = (
+): RenderResult => {
+    const steps = [
+        {
+            selector: "#blue-rect",
+            content: "This is my first step",
+        },
+        {
+            selector: "#green-rect",
+            content: "This is my second step",
+        },
+    ];
+    return render(
+        <WebvizPluginPlaceholder
+            id="WebvizPluginPlaceholder"
+            tour_steps={steps}
+            setProps={() => { return; }}
+            deprecation_warnings={
+                [
+                    {
+                        message: "Deprecated 1",
+                        url: "https://github.com/equinor/webviz-core-components"
+                    },
+                    {
+                        message: "Deprecated 2",
+                        url: "https://github.com/equinor/webviz-core-components"
+                    }
+                ]
+            }
+        />
+    );
+}
+
+const renderInteractiveWebvizPluginPlaceholder = (): RenderResult => {
+    return render(<WebvizPluginPlaceholderInteractiveContainer />);
+};
+
+describe('WebvizPluginPlaceholder', () => {
+
+    it('Renders correctly (compare to snapshot in ./__snapshots__/WebvizPluginPlaceholder.test.tsx.snap)', () => {
+        const { container } = renderWebvizPluginPlaceholder();
+        expect(container).toMatchSnapshot();
+    });
+
+    it('Data is downloaded correctly', () => {
+        const { container } = renderInteractiveWebvizPluginPlaceholder();
+
+        const link = document.createElement("a");
+
+        jest.spyOn(document, "createElement").mockImplementationOnce(() => link);
+
+        expect(container).toBeDefined();
+
+        const button = container.querySelectorAll(".webviz-config-plugin-button")[2] as HTMLElement;
+        expect(button).toBeDefined();
+
+        userEvent.click(button);
+
+        expect(link.href).toEqual('data:application/txt;base64,test');
+        expect(link.download).toEqual("test.txt");
+        jest.spyOn(document, "createElement").mockRestore();
+    });
+
+});

tests/js/WebvizPluginPlaceholderInteractiveContainer.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { WebvizPluginPlaceholder } from '../../src/lib';
+import { PropType } from './WebvizPluginPlaceholder.test';
+
+
+export const WebvizPluginPlaceholderInteractiveContainer: React.FC = (): JSX.Element => {
+    const [download, setDownload] = React.useState(undefined);
+
+    const steps = [
+        {
+            selector: "#blue-rect",
+            content: "This is my first step",
+        },
+        {
+            selector: "#green-rect",
+            content: "This is my second step",
+        },
+    ];
+
+    const setProps = (props: PropType): void => {
+        if (props.data_requested) {
+            setDownload({
+                filename: "test.txt",
+                content: "test",
+                mime_type: "application/txt"
+            });
+        }
+    };
+
+    return (
+        <WebvizPluginPlaceholder
+            id="WebvizPluginPlaceholder"
+            tour_steps={steps}
+            setProps={setProps}
+            download={download}
+        />
+    )
+};
+
+WebvizPluginPlaceholderInteractiveContainer.propTypes = {
+    data_requested: PropTypes.number
+};