Merge pull request #148 from tokidrill/feat/allow-xlabel-to-describe-with-htlm-like

Allow xlabel to be decribed with "Node" HTML like element

Author: kamiazya

src/components/Node.tsx

@@ -3,13 +3,17 @@ import PropTypes from 'prop-types';
 import { useNode, NodeProps } from '../hooks/use-node';
 import { useRenderedID } from '../hooks/use-rendered-id';
 
-type Props = Omit<NodeProps, 'label'> & {
+type Props = Omit<NodeProps, 'label' | 'xlabel'> & {
   label?: ReactElement | string;
+  xlabel?: ReactElement | string;
 };
 
-export const Node: FC<Props> = ({ children, label, ...props }) => {
+export const Node: FC<Props> = ({ children, label, xlabel, ...props }) => {
   const renderedLabel = useRenderedID(label);
+  const renderedXlabel = useRenderedID(xlabel);
+
   if (renderedLabel !== undefined) Object.assign(props, { label: renderedLabel });
+  if (renderedXlabel !== undefined) Object.assign(props, { xlabel: renderedXlabel });
   useNode(props);
   return <>{children}</>;
 };
@@ -20,9 +24,11 @@ Node.propTypes = {
   id: PropTypes.string.isRequired,
   comment: PropTypes.string,
   label: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+  xlabel: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
 };
 
 Node.defaultProps = {
   comment: undefined,
   label: undefined,
+  xlabel: undefined,
 };

src/components/__tests__/Node.spec.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import 'jest-graphviz';
+import { Digraph } from '../Digraph';
+import { Node } from '../Node';
+import { DOT } from '../HtmlLike';
+import { renderToDot } from '../../renderer/render';
+
+describe('Node', () => {
+  test('pass without optional props and render correctly', () => {
+    const dot = renderToDot(
+      <Digraph>
+        <Node id="aaa" />
+      </Digraph>,
+    );
+    expect(dot).toBeValidDotAndMatchSnapshot();
+  });
+
+  test('pass label with string and render correctly', () => {
+    const dot = renderToDot(
+      <Digraph>
+        <Node id="aaa" label="label test" />
+      </Digraph>,
+    );
+    expect(dot).toBeValidDotAndMatchSnapshot();
+  });
+
+  test('pass label with HTMLLike ReactElement and render correctly', () => {
+    const dot = renderToDot(
+      <Digraph>
+        <Node
+          id="aaa"
+          label={
+            <DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
+              <DOT.TR>
+                <DOT.TD>left</DOT.TD>
+                <DOT.TD PORT="m">middle</DOT.TD>
+                <DOT.TD PORT="r">right</DOT.TD>
+              </DOT.TR>
+            </DOT.TABLE>
+          }
+        />
+      </Digraph>,
+    );
+    expect(dot).toBeValidDotAndMatchSnapshot();
+  });
+
+  test('pass xlabel with string and render correctly', () => {
+    const dot = renderToDot(
+      <Digraph>
+        <Node id="aaa" xlabel="xlabel test" />
+      </Digraph>,
+    );
+    expect(dot).toBeValidDotAndMatchSnapshot();
+  });
+
+  test('pass xlabel with HTMLLike ReactElement and render correctly', () => {
+    const dot = renderToDot(
+      <Digraph>
+        <Node
+          id="aaa"
+          xlabel={
+            <DOT.TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0">
+              <DOT.TR>
+                <DOT.TD>left</DOT.TD>
+                <DOT.TD PORT="m">middle</DOT.TD>
+                <DOT.TD PORT="r">right</DOT.TD>
+              </DOT.TR>
+            </DOT.TABLE>
+          }
+        />
+      </Digraph>,
+    );
+    expect(dot).toBeValidDotAndMatchSnapshot();
+  });
+});

src/components/__tests__/__snapshots__/Node.spec.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Node pass label with HTMLLike ReactElement and render correctly 1`] = `
+digraph {
+  "aaa" [
+    label = <<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0"><TR><TD>left</TD><TD PORT="m">middle</TD><TD PORT="r">right</TD></TR></TABLE>>,
+  ];
+}
+`;
+
+exports[`Node pass label with string and render correctly 1`] = `
+digraph {
+  "aaa" [
+    label = "label test",
+  ];
+}
+`;
+
+exports[`Node pass without optional props and render correctly 1`] = `
+digraph {
+  "aaa";
+}
+`;
+
+exports[`Node pass xlabel with HTMLLike ReactElement and render correctly 1`] = `
+digraph {
+  "aaa" [
+    xlabel = <<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0"><TR><TD>left</TD><TD PORT="m">middle</TD><TD PORT="r">right</TD></TR></TABLE>>,
+  ];
+}
+`;
+
+exports[`Node pass xlabel with string and render correctly 1`] = `
+digraph {
+  "aaa" [
+    xlabel = "xlabel test",
+  ];
+}
+`;