add basic snapshot test

src/app/Dashboard/Charts/ChartCard.tsx

@@ -216,7 +216,6 @@ export const ChartCard: React.FC<ChartCardProps> = (props) => {
   }, [props.actions, expandButton, popoutButton]);
 
   const header = React.useMemo(() => {
-    console.log({ span: props.span, kind: props.chartKind, hasRecording });
     const isWide = props.span > 4;
     const style = {
       marginBottom: isWide ? '-2.8em' : '',

src/test/Dashboard/Charts/ChartCard.test.tsx

@@ -0,0 +1,88 @@
+/*
+ * Copyright The Cryostat Authors
+ *
+ * The Universal Permissive License (UPL), Version 1.0
+ *
+ * Subject to the condition set forth below, permission is hereby granted to any
+ * person obtaining a copy of this software, associated documentation and/or data
+ * (collectively the "Software"), free of charge and under any and all copyright
+ * rights in the Software, and any and all patent rights owned or freely
+ * licensable by each licensor hereunder covering either (i) the unmodified
+ * Software as contributed to or provided by such licensor, or (ii) the Larger
+ * Works (as defined below), to deal in both
+ *
+ * (a) the Software, and
+ * (b) any piece of software and/or hardware listed in the lrgrwrks.txt file if
+ * one is included with the Software (each a "Larger Work" to which the Software
+ * is contributed by such licensors),
+ *
+ * without restriction, including without limitation the rights to copy, create
+ * derivative works of, display, perform, and distribute the Software and make,
+ * use, sell, offer for sale, import, export, have made, and have sold the
+ * Software and the Larger Work(s), and to sublicense the foregoing rights on
+ * either these or other terms.
+ *
+ * This license is subject to the following condition:
+ * The above copyright notice and either this complete permission notice or at
+ * a minimum a reference to the UPL must be included in all copies or
+ * substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+jest.mock('@app/Dashboard/Charts/ChartController');
+import { ChartCard } from '@app/Dashboard/Charts/ChartCard';
+import { ChartContext } from '@app/Dashboard/Charts/ChartContext';
+import { ChartController } from '@app/Dashboard/Charts/ChartController';
+import { NotificationsContext, NotificationsInstance } from '@app/Notifications/Notifications';
+import { store } from '@app/Shared/Redux/ReduxStore';
+import { defaultServices, ServiceContext } from '@app/Shared/Services/Services';
+import React from 'react';
+import { Provider } from 'react-redux';
+import renderer, { act } from 'react-test-renderer';
+import { of } from 'rxjs';
+
+const mockGrafanaDashboardUrlResponse = 'http://localhost:3000';
+jest.spyOn(defaultServices.api, 'grafanaDashboardUrl').mockReturnValueOnce(of(mockGrafanaDashboardUrlResponse));
+
+const mockTarget = { connectUrl: 'service:jmx:rmi://someUrl', alias: 'fooTarget' };
+jest.spyOn(defaultServices.target, 'target').mockReturnValue(of(mockTarget));
+
+const mockController = new ChartController(
+  defaultServices.api,
+  defaultServices.target,
+  defaultServices.notificationChannel,
+  defaultServices.settings
+);
+const mockChartContext = {
+  controller: mockController,
+};
+
+describe('<ChartCard />', () => {
+  it('renders correctly', async () => {
+    jest.spyOn(mockController, 'hasActiveRecording').mockReturnValue(of(true));
+    jest.spyOn(mockController, 'attach').mockReturnValue(of(0));
+
+    let tree;
+    await act(async () => {
+      tree = renderer.create(
+        <ServiceContext.Provider value={defaultServices}>
+          <NotificationsContext.Provider value={NotificationsInstance}>
+            <ChartContext.Provider value={mockChartContext}>
+              <Provider store={store}>
+                <ChartCard theme={'light'} chartKind={'CPU Load'} duration={120} period={10} span={6} dashboardId={0} />
+              </Provider>
+            </ChartContext.Provider>
+          </NotificationsContext.Provider>
+        </ServiceContext.Provider>
+      );
+    });
+    expect(tree.toJSON()).toMatchSnapshot();
+  });
+});

src/test/Dashboard/Charts/__snapshots__/ChartCard.test.tsx.snap

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ChartCard /> renders correctly 1`] = `
+<div
+  className="draggable-ref-wrapper"
+  onDragStart={[Function]}
+  onTransitionEnd={[Function]}
+  style={Object {}}
+>
+  <div
+    className="dashboard-card-resizable-wrapper"
+  >
+    <article
+      className="pf-c-card pf-m-compact pf-m-rounded dashboard-card"
+      data-ouia-component-id="OUIA-Generated-Card-1"
+      data-ouia-component-type="PF4/Card"
+      data-ouia-safe={true}
+      id="CPU Load-chart-card"
+      style={
+        Object {
+          "height": 380,
+        }
+      }
+    >
+      <div
+        className="draggable-ref__grip"
+        draggable={true}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+      >
+        <div
+          className="pf-c-card__header"
+          style={
+            Object {
+              "marginBottom": "-2.8em",
+            }
+          }
+        >
+          <div
+            className="pf-c-card__actions"
+          >
+            <button
+              aria-disabled={false}
+              aria-label="Expand CPU Load chart window"
+              className="pf-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe={true}
+              disabled={false}
+              onClick={[Function]}
+              role={null}
+              type="button"
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z"
+                />
+              </svg>
+            </button>
+            <button
+              aria-disabled={false}
+              aria-label="Pop out CPU Load chart"
+              className="pf-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-2"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe={true}
+              disabled={false}
+              onClick={[Function]}
+              role={null}
+              type="button"
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 512 512"
+                width="1em"
+              >
+                <path
+                  d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        className="pf-c-card__body"
+      >
+        <iframe
+          src="http://localhost:3000/d-solo/main?theme=light&panelId=3&to=now&from=now-120s&refresh=10s"
+          style={
+            Object {
+              "height": "100%",
+              "width": "100%",
+            }
+          }
+        />
+      </div>
+    </article>
+    <div
+      className="resizable-ref"
+      onMouseDown={[Function]}
+    />
+  </div>
+</div>
+`;