Merge pull request #2246 from FormidableLabs/chore/victory-tests

Convert victory and victory-chart tests to jest

Author: Becca Bailey

packages/victory-axis/src/victory-axis.js

@@ -10,7 +10,8 @@ import {
   LineSegment,
   TextSize,
   addEvents,
-  Axis
+  Axis,
+  UserProps
 } from "victory-core";
 import { getBaseProps, getStyles } from "./helper-methods";
 
@@ -268,6 +269,7 @@ class VictoryAxis extends React.Component {
   render() {
     const { animationWhitelist } = VictoryAxis;
     const props = Axis.modifyProps(this.props, fallbackProps);
+    const userProps = UserProps.getSafeUserProps(this.props);
 
     if (this.shouldAnimate()) {
       return this.animateComponent(props, animationWhitelist);
@@ -282,9 +284,10 @@ class VictoryAxis extends React.Component {
       this.renderLabel(props),
       ...modifiedGridAndTicks
     ];
+    const container = React.cloneElement(props.containerComponent, userProps);
     return props.standalone
-      ? this.renderContainer(props.containerComponent, children)
-      : React.cloneElement(props.groupComponent, {}, children);
+      ? this.renderContainer(container, children)
+      : React.cloneElement(props.groupComponent, userProps, children);
   }
 }
 

test/client/spec/victory-axis/victory-axis.spec.js

@@ -15,6 +15,15 @@ import { _approximateTextSizeInternal } from "victory-core/es/victory-util/texts
 
 describe("components/victory-axis", () => {
   describe("default component rendering", () => {
+    it("accepts user props", () => {
+      const wrapper = mount(
+        <VictoryAxis data-testid="victory-axis" aria-label="Axis" />
+      );
+      const svgNode = wrapper.find("svg").at(0).getDOMNode();
+      expect(svgNode.getAttribute("data-testid")).to.equal("victory-axis");
+      expect(svgNode.getAttribute("aria-label")).to.equal("Axis");
+    });
+
     it("renders an svg with the correct width and height", () => {
       const wrapper = mount(<VictoryAxis />);
       const svg = wrapper.find("svg").at(0);

test/jest/victory-box-plot/victory-box.plot.test.js test/jest/victory-box-plot/victory-box-plot.test.js

@@ -0,0 +1,40 @@
+import { getChildComponents } from "victory-chart/lib/helper-methods";
+import React from "react";
+import { VictoryAxis } from "victory-axis";
+import { VictoryLine } from "victory-line";
+
+describe("victory-chart/helpers-methods", () => {
+  const getVictoryLine = (props) => React.createElement(VictoryLine, props);
+  const getVictoryAxis = (props) => React.createElement(VictoryAxis, props);
+
+  describe("getChildComponents", () => {
+    const defaultAxes = {
+      independent: getVictoryAxis({}),
+      dependent: getVictoryAxis({ dependentAxis: true })
+    };
+
+    it("returns a pair of default axes when no children are given", () => {
+      const children = [];
+      const result = getChildComponents({ children }, defaultAxes);
+      expect(result).toHaveLength(2);
+      expect(result).toEqual([defaultAxes.independent, defaultAxes.dependent]);
+    });
+
+    it("adds default axes when none of the children are axis components", () => {
+      const line = getVictoryLine({});
+      const children = [line];
+      const result = getChildComponents({ children }, defaultAxes);
+      expect(result).toHaveLength(3);
+      expect(result).toContain(defaultAxes.independent);
+      expect(result).toContain(defaultAxes.dependent);
+    });
+
+    it("does not add default axes if axis any axis components exist in children", () => {
+      const axis = getVictoryAxis({});
+      const children = [axis];
+      const result = getChildComponents({ children }, defaultAxes);
+      expect(result).toHaveLength(1);
+      expect(result[0].props).toEqual(axis.props);
+    });
+  });
+});

test/jest/victory-chart/helper-methods.test.js

@@ -0,0 +1,101 @@
+import React from "react";
+import { VictoryChart } from "victory-chart";
+import { VictoryAxis } from "victory-axis";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+describe("components/victory-chart", () => {
+  describe("default component rendering", () => {
+    it("renders an svg with the correct width and height", () => {
+      const { container } = render(<VictoryChart />);
+      const svg = container.querySelector("svg");
+
+      expect(svg.getAttribute("style")).toContain("width: 100%; height: 100%");
+    });
+
+    it("renders an svg with the correct viewBox", () => {
+      const { container } = render(<VictoryChart />);
+      const svg = container.querySelector("svg");
+      const viewBoxValue = `0 0 ${450} ${300}`;
+
+      expect(svg.getAttribute("viewBox")).toEqual(viewBoxValue);
+    });
+  });
+
+  describe("axis rendering", () => {
+    it("renders two axes by default", () => {
+      const props = {
+        defaultAxes: {
+          independent: <VictoryAxis data-testid="axis" />,
+          dependent: <VictoryAxis data-testid="axis" dependentAxis />
+        }
+      };
+      render(<VictoryChart {...props} />);
+
+      const axes = screen.getAllByTestId("axis");
+
+      expect(axes).toHaveLength(2);
+    });
+
+    it("renders one axis if one axis is given", () => {
+      render(
+        <VictoryChart>
+          <VictoryAxis data-testid="axis" />
+        </VictoryChart>
+      );
+      const axes = screen.getAllByTestId("axis");
+
+      expect(axes).toHaveLength(1);
+    });
+
+    // TODO: Is this test useful? It's hard to test this with react testing library, which
+    // may mean it should be removed.
+    it("allows axis to control the crossAxis, and offset props", () => {
+      render(
+        <VictoryChart>
+          <VictoryAxis
+            data-testid="axis"
+            crossAxis={false}
+            offsetX={50}
+            offsetY={50}
+            data-cross-axis={(props) => props.crossAxis}
+            data-offset-x={(props) => props.offsetX}
+            data-offset-y={(props) => props.offsetY}
+          />
+        </VictoryChart>
+      );
+      const axis = screen.getByTestId("axis");
+
+      expect(axis.getAttribute("data-cross-axis")).toEqual("false");
+      expect(axis.getAttribute("data-offset-x")).toEqual("50");
+      expect(axis.getAttribute("data-offset-y")).toEqual("50");
+    });
+
+    it("accepts user props", () => {
+      render(<VictoryChart data-testid="victory-chart" aria-label="Chart" />);
+
+      expect(screen.getByTestId("victory-chart")).toBeDefined();
+      expect(screen.getByLabelText("Chart")).toBeDefined();
+    });
+  });
+
+  describe("event handling", () => {
+    it("attaches an event to the parent svg", () => {
+      const clickHandler = jest.fn();
+      const { container } = render(
+        <VictoryChart
+          events={[
+            {
+              target: "parent",
+              eventHandlers: { onClick: clickHandler }
+            }
+          ]}
+        />
+      );
+      const svg = container.querySelector("svg");
+
+      fireEvent.click(svg);
+
+      expect(clickHandler).toHaveBeenCalled();
+    });
+  });
+});