From 6f49a850bf449622586031bc17054e0425a8efbc Mon Sep 17 00:00:00 2001
From: StraightOuttaCrompton <StraightOuttaCrompton@users.noreply.github.com>
Date: Sat, 7 Dec 2019 00:31:31 +0000
Subject: [PATCH] Added missing VictoryPortal type definitions with tests
 (#40748)

---
 types/victory/index.d.ts        | 14 ++++++
 types/victory/victory-tests.tsx | 87 ++++++++++++++++++++++++++++-----
 2 files changed, 90 insertions(+), 11 deletions(-)

diff --git a/types/victory/index.d.ts b/types/victory/index.d.ts
index e3499e4a6e..a0f699c8d2 100644
--- a/types/victory/index.d.ts
+++ b/types/victory/index.d.ts
@@ -2618,4 +2618,18 @@ declare module 'victory' {
      * @param c2 : "brush" | "cursor" | "selection" | "voronoi" | "zoom"
      */
     export function createContainer<V, W>(c1: ContainerType, c2: ContainerType): React.ComponentType<V & W>;
+
+    export class VictoryPortal extends React.Component<VictoryPortalProps, any> {}
+
+    export interface VictoryPortalProps {
+        /**
+         * The children of this component define the content of the label.
+         * This makes using the component similar to normal HTML spans or labels. strings, numbers, and functions of data / value are supported.
+         */
+        children?: React.ReactElement;
+        /**
+         * The groupComponent prop takes a component instance which will be used to create a group element for VictoryPortal to render its child component into. This prop defaults to a <g> tag.
+         */
+        groupComponent?: React.ReactElement;
+    }
 }
diff --git a/types/victory/victory-tests.tsx b/types/victory/victory-tests.tsx
index 28943c4d5a..41a3fb1f6c 100644
--- a/types/victory/victory-tests.tsx
+++ b/types/victory/victory-tests.tsx
@@ -20,6 +20,7 @@ import {
     createContainer,
     VictoryZoomContainerProps,
     VictoryBrushContainerProps,
+    VictoryPortal,
 } from 'victory';
 
 const commonData1 = [
@@ -30,7 +31,14 @@ const commonData1 = [
     { amount: 5, yield: 1, error: 1.5 },
 ];
 
-const commonData2 = [{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 4, y: 3 }, { x: 5, y: 2 }, { x: 6, y: 5 }];
+const commonData2 = [
+    { x: 1, y: 1 },
+    { x: 2, y: 2 },
+    { x: 3, y: 1 },
+    { x: 4, y: 3 },
+    { x: 5, y: 2 },
+    { x: 6, y: 5 },
+];
 
 // VictoryAnimation test
 let test = (
@@ -135,7 +143,11 @@ test = (
                     stroke: 'tomato',
                 },
             }}
-            data={[{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3 }]}
+            data={[
+                { x: 1, y: 1 },
+                { x: 2, y: 2 },
+                { x: 3, y: 3 },
+            ]}
         />
         <VictoryArea
             style={{
@@ -144,7 +156,11 @@ test = (
                     stroke: 'orange',
                 },
             }}
-            data={[{ x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 1 }]}
+            data={[
+                { x: 1, y: 2 },
+                { x: 2, y: 1 },
+                { x: 3, y: 1 },
+            ]}
         />
         <VictoryArea
             style={{
@@ -153,7 +169,11 @@ test = (
                     stroke: 'gold',
                 },
             }}
-            data={[{ x: 1, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 2 }]}
+            data={[
+                { x: 1, y: 3 },
+                { x: 2, y: 4 },
+                { x: 3, y: 2 },
+            ]}
         />
     </VictoryStack>
 );
@@ -252,7 +272,13 @@ test = (
             labels: { fontSize: 20 },
         }}
         labels={['a', 'b', 'c', 'd', 'e']}
-        data={[{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 3, label: 'click me' }, { x: 4, y: 2 }, { x: 5, y: 1 }]}
+        data={[
+            { x: 1, y: 1 },
+            { x: 2, y: 2 },
+            { x: 3, y: 3, label: 'click me' },
+            { x: 4, y: 2 },
+            { x: 5, y: 1 },
+        ]}
         alignment="start"
         barWidth={(datum, active) => (active ? datum.x : datum.y)}
         cornerRadius={{ top: 2, bottom: 4 }}
@@ -441,7 +467,11 @@ test = (
     <VictoryChart horizontal>
         <VictoryBar
             categories={{ x: ['A', 'B', 'C'] }}
-            data={[{ y: 5, x: 'A' }, { y: 6, x: 'B' }, { y: 7, x: 'C' }]}
+            data={[
+                { y: 5, x: 'A' },
+                { y: 6, x: 'B' },
+                { y: 7, x: 'C' },
+            ]}
             y0={d => d.y - 1}
         />
     </VictoryChart>
@@ -450,9 +480,27 @@ test = (
 // VictoryGroup test
 test = (
     <VictoryGroup color="#46c85e" offset={40}>
-        <VictoryBar data={[{ x: 'a', y: 2 }, { x: 'b', y: 3 }, { x: 'c', y: 5 }]} />
-        <VictoryBar data={[{ x: 'a', y: 1 }, { x: 'b', y: 4 }, { x: 'c', y: 5 }]} />
-        <VictoryBar data={[{ x: 'a', y: 3 }, { x: 'b', y: 2 }, { x: 'c', y: 6 }]} />
+        <VictoryBar
+            data={[
+                { x: 'a', y: 2 },
+                { x: 'b', y: 3 },
+                { x: 'c', y: 5 },
+            ]}
+        />
+        <VictoryBar
+            data={[
+                { x: 'a', y: 1 },
+                { x: 'b', y: 4 },
+                { x: 'c', y: 5 },
+            ]}
+        />
+        <VictoryBar
+            data={[
+                { x: 'a', y: 3 },
+                { x: 'b', y: 2 },
+                { x: 'c', y: 6 },
+            ]}
+        />
     </VictoryGroup>
 );
 
@@ -559,7 +607,12 @@ test = (
 
 test = (
     <VictoryPie
-        data={[{ x: 'Cat', y: 62 }, { x: 'Dog', y: 91 }, { x: 'Fish', y: 55 }, { x: 'Bird', y: 55 }]}
+        data={[
+            { x: 'Cat', y: 62 },
+            { x: 'Dog', y: 91 },
+            { x: 'Fish', y: 55 },
+            { x: 'Bird', y: 55 },
+        ]}
         events={[
             {
                 target: 'data',
@@ -582,7 +635,12 @@ test = (
 
 test = (
     <VictoryPie
-        data={[{ x: 'Cat', y: 62 }, { x: 'Dog', y: 91 }, { x: 'Fish', y: 55 }, { x: 'Bird', y: 55 }]}
+        data={[
+            { x: 'Cat', y: 62 },
+            { x: 'Dog', y: 91 },
+            { x: 'Fish', y: 55 },
+            { x: 'Bird', y: 55 },
+        ]}
         animate={{
             duration: 1000,
             onEnter: {
@@ -647,6 +705,13 @@ test = (
     />
 );
 
+// VictoryPortal test
+test = (
+    <VictoryPortal groupComponent={<div>groupComponent</div>}>
+        <div>Child</div>
+    </VictoryPortal>
+);
+
 // createContainer test
 const VictoryZoomBrushContainer = createContainer<VictoryZoomContainerProps, VictoryBrushContainerProps>(
     'zoom',