Moves IconWithTooltip to atoms/ and adds tests

frontend/src/atoms/IconWithTooltip.test.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2018 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import IconWithTooltip from './IconWithTooltip';
+import TestIcon from '@material-ui/icons/Help';
+import { create } from 'react-test-renderer';
+
+describe('IconWithTooltip', () => {
+  it('renders without height or weight', () => {
+    const tree = create(
+      <IconWithTooltip Icon={TestIcon} iconColor='green' tooltip='test icon tooltip' />
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders with height and weight', () => {
+    const tree = create(
+      <IconWithTooltip Icon={TestIcon} height={20} width={20} iconColor='green'
+        tooltip='test icon tooltip' />
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});

frontend/src/atoms/IconWithTooltip.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2018 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import Tooltip from '@material-ui/core/Tooltip';
+import { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+interface IconWithTooltipProps {
+  Icon: React.ComponentType<SvgIconProps>;
+  height?: number;
+  iconColor: string;
+  tooltip: string;
+  width?: number;
+}
+
+export default (props: IconWithTooltipProps) => {
+  const { height, Icon, iconColor, tooltip, width } = props;
+
+  return (
+    <Tooltip title={tooltip}>
+      <Icon style={{
+        color: iconColor,
+        height: height || 16,
+        width: width || 16
+      }}/>
+    </Tooltip>
+  );
+};

frontend/src/atoms/__snapshots__/IconWithTooltip.test.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconWithTooltip renders with height and weight 1`] = `
+<svg
+  aria-describedby={null}
+  aria-hidden="true"
+  className="MuiSvgIcon-root-9"
+  color={undefined}
+  focusable="false"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  role="presentation"
+  style={
+    Object {
+      "color": "green",
+      "height": 20,
+      "width": 20,
+    }
+  }
+  title="test icon tooltip"
+  viewBox="0 0 24 24"
+>
+  <path
+    d="M0 0h24v24H0z"
+    fill="none"
+  />
+  <path
+    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+  />
+</svg>
+`;
+
+exports[`IconWithTooltip renders without height or weight 1`] = `
+<svg
+  aria-describedby={null}
+  aria-hidden="true"
+  className="MuiSvgIcon-root-9"
+  color={undefined}
+  focusable="false"
+  onBlur={[Function]}
+  onFocus={[Function]}
+  onMouseLeave={[Function]}
+  onMouseOver={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+  role="presentation"
+  style={
+    Object {
+      "color": "green",
+      "height": 16,
+      "width": 16,
+    }
+  }
+  title="test icon tooltip"
+  viewBox="0 0 24 24"
+>
+  <path
+    d="M0 0h24v24H0z"
+    fill="none"
+  />
+  <path
+    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+  />
+</svg>
+`;

frontend/src/components/Graph.test.tsx

@@ -18,6 +18,8 @@ import * as dagre from 'dagre';
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import Graph from './Graph';
+import SuccessIcon from '@material-ui/icons/CheckCircle';
+import Tooltip from '@material-ui/core/Tooltip';
 
 function newGraph(): dagre.graphlib.Graph {
   const graph = new dagre.graphlib.Graph();
@@ -26,8 +28,17 @@ function newGraph(): dagre.graphlib.Graph {
   return graph;
 }
 
-const newNode = (label: string) => ({
+const testIcon = (
+  <Tooltip title='Test icon tooltip'>
+    <SuccessIcon />
+  </Tooltip>
+);
+
+const newNode = (label: string, isPlaceHolder?: boolean, color?: string, icon?: JSX.Element) => ({
+  bgColor: color,
   height: 10,
+  icon: icon || testIcon,
+  isPlaceholder: isPlaceHolder || false,
   label,
   width: 10,
 });
@@ -86,6 +97,29 @@ describe('Graph', () => {
     expect(shallow(<Graph graph={graph} />)).toMatchSnapshot();
   });
 
+  it('renders a graph with colored nodes', () => {
+    const graph = newGraph();
+    graph.setNode('node1', newNode('node1', false, 'red'));
+    graph.setNode('node2', newNode('node2', false, 'green'));
+    expect(shallow(<Graph graph={graph} />)).toMatchSnapshot();
+  });
+
+  it('renders a graph with colored edges', () => {
+    const graph = newGraph();
+    graph.setNode('node1', newNode('node1'));
+    graph.setNode('node2', newNode('node2'));
+    graph.setEdge('node1', 'node2', { color: 'red' });
+    expect(shallow(<Graph graph={graph} />)).toMatchSnapshot();
+  });
+
+  it('renders a graph with a placeholder node and edge', () => {
+    const graph = newGraph();
+    graph.setNode('node1', newNode('node1', false));
+    graph.setNode('node2', newNode('node2', true));
+    graph.setEdge('node1', 'node2', { isPlaceholder: true });
+    expect(shallow(<Graph graph={graph} />)).toMatchSnapshot();
+  });
+
   it('calls onClick callback when node is clicked', () => {
     const graph = newGraph();
     graph.setNode('node1', newNode('node1'));