Fixed tests

IPWright83 · Jul 6, 2023 · 7031fa6 · 7031fa6
1 parent d11d198
commit 7031fa6
Show file tree

Hide file tree

Showing 23 changed files with 75 additions and 15 deletions.
diff --git a/packages/react/src/lib/components/ClipPath/RectangleClipPath.unit.tsx b/packages/react/src/lib/components/ClipPath/RectangleClipPath.unit.tsx
@@ -1,20 +1,39 @@
+import { Provider, useSelector } from "react-redux";
 import React from "react";
 
-import { renderChart, wait } from "../../testUtils";
+import { chartSelectors, IState } from "../../store";
+import { createMockStore, renderChart, wait } from "../../testUtils";
+import { themes } from "../../themes";
 
 import { RectangleClipPath } from "./RectangleClipPath";
 
 describe("RectangleClipPath", () => {
-    const Circle = ({ clipPath }: { clipPath?: string }) => {
-        return <circle clipPath={`url(#${clipPath})`} cx={0} cy={0} r={100} fill="red" />;
+    const store = createMockStore({
+        chart: {
+            dimensions: {
+                width: 800,
+                height: 400,
+            },
+            theme: themes.light,
+        },
+        event: {
+            mouse: { x: 150, y: 200 },
+        },
+    });
+
+    const Circle = () => {
+        const plotClipPath = useSelector((s: IState) => chartSelectors.plotClipPath(s));
+
+        return <circle clipPath={`url(#${plotClipPath})`} cx={0} cy={0} r={100} fill="red" />;
     };
 
     it("renders correctly", async () => {
         const { asFragment } = await renderChart({
             children: (
-                <RectangleClipPath>
+                <Provider store={store}>
+                    <RectangleClipPath />
                     <Circle />
-                </RectangleClipPath>
+                </Provider>
             ),
         });
 

diff --git a/packages/react/src/lib/components/ClipPath/__snapshots__/RectangleClipPath.unit.tsx.snap b/packages/react/src/lib/components/ClipPath/__snapshots__/RectangleClipPath.unit.tsx.snap
@@ -5,18 +5,18 @@ exports[`RectangleClipPath renders correctly 1`] = `
   <svg>
     <defs>
       <clippath
-        id="clip-path-"
+        id="clip-path-test"
       >
         <rect
-          height="200"
-          width="200"
+          height="400"
+          width="800"
           x="0"
           y="0"
         />
       </clippath>
     </defs>
     <circle
-      clip-path="url(#clip-path-)"
+      clip-path="url(#clip-path-test)"
       cx="0"
       cy="0"
       fill="red"

diff --git a/packages/react/src/lib/components/Plots/Area/Area/__snapshots__/Area.unit.tsx.snap b/packages/react/src/lib/components/Plots/Area/Area/__snapshots__/Area.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`Area using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot area"
+      clip-path="url(#clip-path-test)"
     >
       <path
         class="area"
@@ -25,6 +26,7 @@ exports[`Area using SVG should skip rendering if there is no x scale avaliable 1
   <svg>
     <g
       class="g-plot area"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>
@@ -35,6 +37,7 @@ exports[`Area using SVG should skip rendering if there is no y scale avaliable 1
   <svg>
     <g
       class="g-plot area"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>

diff --git a/...s/react/src/lib/components/Plots/Area/StackedArea/__snapshots__/StackedArea.unit.tsx.snap b/...s/react/src/lib/components/Plots/Area/StackedArea/__snapshots__/StackedArea.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`StackedArea using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot stacked-area"
+      clip-path="url(#clip-path-test)"
     >
       <path
         class="area"
@@ -26,6 +27,7 @@ exports[`StackedArea using SVG should skip rendering if there is no x scale aval
   <svg>
     <g
       class="g-plot stacked-area"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>
@@ -36,6 +38,7 @@ exports[`StackedArea using SVG should skip rendering if there is no y scale aval
   <svg>
     <g
       class="g-plot stacked-area"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>

diff --git a/packages/react/src/lib/components/Plots/Area/__snapshots__/Areas.unit.tsx.snap b/packages/react/src/lib/components/Plots/Area/__snapshots__/Areas.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`Areas Multiple Series using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot area"
+      clip-path="url(#clip-path-test)"
     >
       <path
         class="area"
@@ -18,6 +19,7 @@ exports[`Areas Multiple Series using SVG should render correctly 1`] = `
     </g>
     <g
       class="g-plot area"
+      clip-path="url(#clip-path-test)"
     >
       <path
         class="area"
@@ -38,6 +40,7 @@ exports[`Areas Stacked using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot stacked-area"
+      clip-path="url(#clip-path-test)"
     >
       <path
         class="area"

diff --git a/packages/react/src/lib/components/Plots/Bar/Bar/__snapshots__/Bar.unit.tsx.snap b/packages/react/src/lib/components/Plots/Bar/Bar/__snapshots__/Bar.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`Bar using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot bar"
+      clip-path="url(#clip-path-test)"
     >
       <rect
         class="bar"
@@ -32,6 +33,7 @@ exports[`Bar using SVG should skip rendering if there is no x scale avaliable 1`
   <svg>
     <g
       class="g-plot bar"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>
@@ -42,6 +44,7 @@ exports[`Bar using SVG should skip rendering if there is no y scale avaliable 1`
   <svg>
     <g
       class="g-plot bar"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>

diff --git a/...ages/react/src/lib/components/Plots/Bar/GroupedBar/__snapshots__/GroupedBar.unit.tsx.snap b/...ages/react/src/lib/components/Plots/Bar/GroupedBar/__snapshots__/GroupedBar.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`GroupedColumn using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot grouped-bar"
+      clip-path="url(#clip-path-test)"
     >
       <g>
         <rect
@@ -52,6 +53,7 @@ exports[`GroupedColumn using SVG should skip rendering if there is no x scale av
   <svg>
     <g
       class="g-plot grouped-bar"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>
@@ -62,6 +64,7 @@ exports[`GroupedColumn using SVG should skip rendering if there is no y scale av
   <svg>
     <g
       class="g-plot grouped-bar"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>

diff --git a/...ages/react/src/lib/components/Plots/Bar/StackedBar/__snapshots__/StackedBar.unit.tsx.snap b/...ages/react/src/lib/components/Plots/Bar/StackedBar/__snapshots__/StackedBar.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`StackedBar using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot stacked-bar"
+      clip-path="url(#clip-path-test)"
     >
       <g>
         <rect
@@ -52,6 +53,7 @@ exports[`StackedBar using SVG should skip rendering if there is no x scale avali
   <svg>
     <g
       class="g-plot stacked-bar"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>
@@ -62,6 +64,7 @@ exports[`StackedBar using SVG should skip rendering if there is no y scale avali
   <svg>
     <g
       class="g-plot stacked-bar"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>

diff --git a/packages/react/src/lib/components/Plots/Bar/__snapshots__/Bars.unit.tsx.snap b/packages/react/src/lib/components/Plots/Bar/__snapshots__/Bars.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`Bars Grouped using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot grouped-bar"
+      clip-path="url(#clip-path-test)"
     >
       <g>
         <rect
@@ -52,6 +53,7 @@ exports[`Bars Stacked using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot stacked-bar"
+      clip-path="url(#clip-path-test)"
     >
       <g>
         <rect

diff --git a/packages/react/src/lib/components/Plots/Column/Column/__snapshots__/Column.unit.tsx.snap b/packages/react/src/lib/components/Plots/Column/Column/__snapshots__/Column.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`Column using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot column"
+      clip-path="url(#clip-path-test)"
     >
       <rect
         class="column"
@@ -32,6 +33,7 @@ exports[`Column using SVG should skip rendering if there is no x scale avaliable
   <svg>
     <g
       class="g-plot column"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>
@@ -42,6 +44,7 @@ exports[`Column using SVG should skip rendering if there is no y scale avaliable
   <svg>
     <g
       class="g-plot column"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>

diff --git a/...t/src/lib/components/Plots/Column/GroupedColumn/__snapshots__/GroupedColumn.unit.tsx.snap b/...t/src/lib/components/Plots/Column/GroupedColumn/__snapshots__/GroupedColumn.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`GroupedColumn using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot grouped-column"
+      clip-path="url(#clip-path-test)"
     >
       <g>
         <rect
@@ -52,6 +53,7 @@ exports[`GroupedColumn using SVG should skip rendering if there is no x scale av
   <svg>
     <g
       class="g-plot grouped-column"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>
@@ -62,6 +64,7 @@ exports[`GroupedColumn using SVG should skip rendering if there is no y scale av
   <svg>
     <g
       class="g-plot grouped-column"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>

diff --git a/...t/src/lib/components/Plots/Column/StackedColumn/__snapshots__/StackedColumn.unit.tsx.snap b/...t/src/lib/components/Plots/Column/StackedColumn/__snapshots__/StackedColumn.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`StackedColumn using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot stacked-column"
+      clip-path="url(#clip-path-test)"
     >
       <g>
         <rect
@@ -52,6 +53,7 @@ exports[`StackedColumn using SVG should skip rendering if there is no x scale av
   <svg>
     <g
       class="g-plot stacked-column"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>
@@ -62,6 +64,7 @@ exports[`StackedColumn using SVG should skip rendering if there is no y scale av
   <svg>
     <g
       class="g-plot stacked-column"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>

diff --git a/packages/react/src/lib/components/Plots/Column/__snapshots__/Columns.unit.tsx.snap b/packages/react/src/lib/components/Plots/Column/__snapshots__/Columns.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`Columns Grouped using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot grouped-column"
+      clip-path="url(#clip-path-test)"
     >
       <g>
         <rect
@@ -52,6 +53,7 @@ exports[`Columns Stacked using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot stacked-column"
+      clip-path="url(#clip-path-test)"
     >
       <g>
         <rect

diff --git a/packages/react/src/lib/components/Plots/Line/Line/__snapshots__/Line.unit.tsx.snap b/packages/react/src/lib/components/Plots/Line/Line/__snapshots__/Line.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`Line using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot line"
+      clip-path="url(#clip-path-test)"
     >
       <path
         class="line"
@@ -26,6 +27,7 @@ exports[`Line using SVG should skip rendering if there is no x scale avaliable 1
   <svg>
     <g
       class="g-plot line"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>
@@ -36,6 +38,7 @@ exports[`Line using SVG should skip rendering if there is no y scale avaliable 1
   <svg>
     <g
       class="g-plot line"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>

diff --git a/packages/react/src/lib/components/Plots/Line/__snapshots__/Lines.unit.tsx.snap b/packages/react/src/lib/components/Plots/Line/__snapshots__/Lines.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`Lines Multiple Series using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot line"
+      clip-path="url(#clip-path-test)"
     >
       <path
         class="line"
@@ -19,6 +20,7 @@ exports[`Lines Multiple Series using SVG should render correctly 1`] = `
     </g>
     <g
       class="g-plot line"
+      clip-path="url(#clip-path-test)"
     >
       <path
         class="line"

diff --git a/packages/react/src/lib/components/Plots/Scatter/Scatter/__snapshots__/Scatter.unit.tsx.snap b/packages/react/src/lib/components/Plots/Scatter/Scatter/__snapshots__/Scatter.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`Scatter using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot scatter"
+      clip-path="url(#clip-path-test)"
     >
       <circle
         class="scatter-point"
@@ -30,6 +31,7 @@ exports[`Scatter using SVG should skip rendering if there is no x scale avaliabl
   <svg>
     <g
       class="g-plot scatter"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>
@@ -40,6 +42,7 @@ exports[`Scatter using SVG should skip rendering if there is no y scale avaliabl
   <svg>
     <g
       class="g-plot scatter"
+      clip-path="url(#clip-path-test)"
     />
   </svg>
 </DocumentFragment>

diff --git a/packages/react/src/lib/components/Plots/Scatter/__snapshots__/Scatters.unit.tsx.snap b/packages/react/src/lib/components/Plots/Scatter/__snapshots__/Scatters.unit.tsx.snap
@@ -5,6 +5,7 @@ exports[`Scatters using SVG should render correctly 1`] = `
   <svg>
     <g
       class="g-plot scatter"
+      clip-path="url(#clip-path-test)"
     >
       <circle
         class="scatter-point"
@@ -23,6 +24,7 @@ exports[`Scatters using SVG should render correctly 1`] = `
     </g>
     <g
       class="g-plot scatter"
+      clip-path="url(#clip-path-test)"
     >
       <circle
         class="scatter-point"