Remove user props from group component

FormidableLabs · May 24, 2022 · 812749d · 812749d
1 parent 4e5ee20
commit 812749d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/packages/victory-core/src/victory-util/add-events.js b/packages/victory-core/src/victory-util/add-events.js
@@ -14,7 +14,6 @@ import {
 import * as Events from "./events";
 import isEqual from "react-fast-compare";
 import VictoryTransition from "../victory-transition/victory-transition";
-import * as UserProps from "../victory-util/user-props";
 
 const datumHasXandY = (datum) => {
   return !isNil(datum._x) && !isNil(datum._y);
@@ -330,7 +329,6 @@ export default (WrappedComponent, options) => {
 
     renderData(props, shouldRenderDatum = datumHasXandY) {
       const { dataComponent, labelComponent, groupComponent } = props;
-      const userProps = UserProps.getSafeUserProps(props);
       const dataComponents = this.dataKeys.reduce(
         (validDataComponents, _dataKey, index) => {
           const dataProps = this.getComponentProps(
@@ -363,8 +361,7 @@ export default (WrappedComponent, options) => {
         .filter(Boolean);
 
       const children = [...dataComponents, ...labelComponents];
-      const group = React.cloneElement(groupComponent, userProps, children);
-      return this.renderContainer(group, children);
+      return this.renderContainer(groupComponent, children);
     }
   };
 };
diff --git a/test/jest/victory-bar/victory-bar.test.js b/test/jest/victory-bar/victory-bar.test.js
@@ -5,12 +5,24 @@ import { render, fireEvent, screen } from "@testing-library/react";
 import { range } from "lodash";
 import { VictoryBar, Bar } from "victory-bar";
 import { isBar, getBarHeight } from "../../svg-test-helper";
+import "@testing-library/jest-dom";
 
 describe("components/victory-bar", () => {
   describe("default component rendering", () => {
-    it("accepts user props", () => {
-      render(<VictoryBar data-testid="victory-bar" aria-label="Chart" />);
-      expect(screen.getAllByLabelText("Chart")).toBeDefined();
+    it("attaches safe user props to the container component", () => {
+      render(
+        <VictoryBar
+          data-testid="victory-bar"
+          aria-label="Chart"
+          unsafe-prop="test"
+        />
+      );
+
+      expect(screen.getByTestId("victory-bar")).toBeDefined();
+      expect(screen.getByLabelText("Chart")).toBeDefined();
+      expect(screen.getByTestId("victory-bar")).not.toHaveAttribute(
+        "unsafe-prop"
+      );
     });
 
     it("renders an svg with the correct width and height", () => {

diff --git a/test/jest/victory-line/victory-line.test.js b/test/jest/victory-line/victory-line.test.js
@@ -4,14 +4,24 @@ import { VictoryLine, Curve } from "victory-line";
 import { calculateD3Path } from "../../svg-test-helper";
 import { curveCatmullRom } from "victory-vendor/d3-shape";
 import { range, random } from "lodash";
+import "@testing-library/jest-dom";
 
 describe("components/victory-line", () => {
   describe("default component rendering", () => {
-    it("accepts user props", () => {
-      render(<VictoryLine data-testid="victory-line" aria-label="Chart" />);
+    it("attaches safe user props to the container component", () => {
+      render(
+        <VictoryLine
+          data-testid="victory-line"
+          aria-label="Chart"
+          unsafe-prop="test"
+        />
+      );
 
-      expect(screen.queryByTestId("victory-line")).toBeDefined();
+      expect(screen.getByTestId("victory-line")).toBeDefined();
       expect(screen.getByLabelText("Chart")).toBeDefined();
+      expect(screen.getByTestId("victory-line")).not.toHaveAttribute(
+        "unsafe-prop"
+      );
     });
 
     it("renders an svg with the correct viewBox", () => {