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

Add victory core tests

Author: Becca Bailey

packages/victory-core/src/victory-label/victory-label.js

@@ -12,6 +12,7 @@ import * as Log from "../victory-util/log";
 import * as CustomPropTypes from "../victory-util/prop-types";
 import * as Style from "../victory-util/style";
 import * as TextSize from "../victory-util/textsize";
+import * as UserProps from "../victory-util/user-props";
 
 const defaultStyles = {
   fill: "#252525",
@@ -487,6 +488,7 @@ const renderLabel = (calculatedProps, tspanValues) => {
     tspanComponent,
     textComponent
   } = calculatedProps;
+  const userProps = UserProps.getSafeUserProps(calculatedProps);
 
   const textProps = {
     "aria-label": ariaLabel,
@@ -501,7 +503,8 @@ const renderLabel = (calculatedProps, tspanValues) => {
     title,
     desc: Helpers.evaluateProp(desc, calculatedProps),
     tabIndex: Helpers.evaluateProp(tabIndex, calculatedProps),
-    id
+    id,
+    ...userProps
   };
 
   const tspans = text.map((line, i) => {
@@ -528,6 +531,7 @@ const VictoryLabel = (props) => {
     return null;
   }
   const calculatedProps = getCalculatedProps(props);
+
   const { text, style, capHeight, backgroundPadding, lineHeight } =
     calculatedProps;
 

test/jest/rendering-utils.js

@@ -0,0 +1,6 @@
+import { render } from "@testing-library/react";
+import * as React from "react";
+
+export const renderInSvg = (component) => {
+  return render(<svg>{component}</svg>);
+};

test/jest/victory-core/victory-accessible-group/victory-accessible-group.test.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { renderInSvg } from "../../rendering-utils";
+import { VictoryAccessibleGroup } from "victory-core";
+
+describe("components/victory-accessible-group", () => {
+  it("renders an g with an aria-label", () => {
+    const { container } = renderInSvg(
+      <VictoryAccessibleGroup aria-label="test-aria-label" />
+    );
+    expect(container.querySelector("g")).toMatchInlineSnapshot(`
+      <g
+        aria-label="test-aria-label"
+        class="VictoryAccessibleGroup"
+      />
+    `);
+  });
+
+  it("renders an g with a tabIndex and className", () => {
+    const { container } = renderInSvg(
+      <VictoryAccessibleGroup tabIndex={5} className="accessibility" />
+    );
+    expect(container.querySelector("g")).toMatchInlineSnapshot(`
+      <g
+        class="accessibility"
+        tabindex="5"
+      />
+    `);
+  });
+
+  it("renders an g with a desc node if given", () => {
+    const { container } = renderInSvg(
+      <VictoryAccessibleGroup
+        aria-label="desc node tests"
+        desc="test description"
+        aria-describedby="describes group"
+      />
+    );
+    expect(container.querySelector("g")).toMatchInlineSnapshot(`
+      <g
+        aria-describedby="describes group"
+        aria-label="desc node tests"
+        class="VictoryAccessibleGroup"
+      >
+        <desc
+          id="describes group"
+        >
+          test description
+        </desc>
+      </g>
+    `);
+  });
+
+  it("uses the desc getAttribute value for descId and aria-describedby if no aria-describedby getAttribute value", () => {
+    const { container } = renderInSvg(
+      <VictoryAccessibleGroup
+        aria-label="desc node tests"
+        desc="applies to both aria-describeby and descId"
+      />
+    );
+    expect(container.querySelector("g")).toMatchInlineSnapshot(`
+      <g
+        aria-describedby="applies-to-both-aria-describeby-and-descId"
+        aria-label="desc node tests"
+        class="VictoryAccessibleGroup"
+      >
+        <desc
+          id="applies-to-both-aria-describeby-and-descId"
+        >
+          applies to both aria-describeby and descId
+        </desc>
+      </g>
+    `);
+  });
+});

test/jest/victory-core/victory-animation/util.test.js

@@ -0,0 +1,76 @@
+/* eslint-disable no-unused-expressions */
+import { victoryInterpolator } from "victory-core/lib/victory-animation/util";
+
+describe("victoryInterpolator", () => {
+  it("does not attempt to interpolate identical values", () => {
+    // This case fails with the default interpolator, returning *almost* 3.
+    expect(victoryInterpolator(3, 3)(0.25920000000000004)).toEqual(3);
+  });
+
+  it("does not attempt to interpolate Boolean values", () => {
+    // The default interpolator would return 0.5.
+    expect(victoryInterpolator(false, true)(0.5)).toEqual(true);
+  });
+
+  it("always returns the end value if starting from null", () => {
+    const interpolator = victoryInterpolator(null, 5);
+    expect(interpolator(0)).toEqual(5);
+    expect(interpolator(0.49)).toEqual(5);
+    expect(interpolator(0.5)).toEqual(5);
+    expect(interpolator(1)).toEqual(5);
+  });
+
+  it("always returns the end value if ending on null", () => {
+    const interpolator = victoryInterpolator(5, null);
+    expect(interpolator(0)).toBeNull();
+    expect(interpolator(0.49)).toBeNull();
+    expect(interpolator(0.5)).toBeNull();
+    expect(interpolator(1)).toBeNull();
+  });
+
+  it("always returns the end value if starting from undefined", () => {
+    const interpolator = victoryInterpolator(undefined, 5);
+    expect(interpolator(0)).toEqual(5);
+    expect(interpolator(0.49)).toEqual(5);
+    expect(interpolator(0.5)).toEqual(5);
+    expect(interpolator(1)).toEqual(5);
+  });
+
+  it("always returns the end value if ending on undefined", () => {
+    const interpolator = victoryInterpolator(5, undefined);
+    expect(interpolator(0)).toBeUndefined();
+    expect(interpolator(0.49)).toBeUndefined();
+    expect(interpolator(0.5)).toBeUndefined();
+    expect(interpolator(1)).toBeUndefined();
+  });
+
+  it("interpolates functions", () => {
+    const fromFn = () => 5;
+    const toFn = () => 10;
+    const interpolator = victoryInterpolator(fromFn, toFn);
+    const halfwayFn = interpolator(0.5);
+    expect(halfwayFn).toBeInstanceOf(Function);
+    expect(halfwayFn()).toEqual(7.5);
+  });
+
+  it("interpolates string values", () => {
+    // From https://github.com/d3/d3-interpolate/blob/main/test/value-test.js#L5-L7
+    const interpolator = victoryInterpolator("foo", "bar");
+    expect(interpolator(0.5)).toEqual("bar");
+  });
+
+  it("interpolates color values", () => {
+    // From https://github.com/d3/d3-interpolate/blob/main/test/value-test.js#L15
+    const interpolator = victoryInterpolator("red", "blue");
+    expect(interpolator(0.5)).toEqual("rgb(128, 0, 128)");
+  });
+
+  it("interpolates object values", () => {
+    // From https://github.com/d3/d3-interpolate/blob/main/test/value-test.js#L44
+    const interpolator = victoryInterpolator(
+      { color: "red" },
+      { color: "blue" }
+    );
+    expect(interpolator(0.5)).toEqual({ color: "rgb(128, 0, 128)" });
+  });
+});

test/jest/victory-core/victory-container/victory-container.test.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { VictoryContainer } from "victory-core";
+import { fireEvent, render } from "@testing-library/react";
+
+describe("components/victory-container", () => {
+  it("renders an svg with a role of img", () => {
+    const { container } = render(<VictoryContainer />);
+    const output = container.querySelector("svg");
+    expect(output.getAttribute("role")).toContain("img");
+  });
+
+  it("renders an svg with a custom role", () => {
+    const { container } = render(<VictoryContainer role="presentation" />);
+    expect(container.querySelector("svg").getAttribute("role")).toEqual(
+      "presentation"
+    );
+  });
+
+  it("renders an svg with a title node", () => {
+    const { container } = render(<VictoryContainer title="Victory Chart" />);
+    expect(container.querySelector("title")).toMatchInlineSnapshot(`
+      <title
+        id="victory-container-3-title"
+      >
+        Victory Chart
+      </title>
+    `);
+  });
+
+  it("renders an svg with a desc node", () => {
+    const { container } = render(<VictoryContainer desc="description" />);
+    expect(container.querySelector("desc")).toMatchInlineSnapshot(`
+      <desc
+        id="victory-container-4-desc"
+      >
+        description
+      </desc>
+    `);
+  });
+
+  it("renders an svg with an aria-describedby attribute", () => {
+    const { container } = render(
+      <VictoryContainer aria-describedby="testid" desc="description" />
+    );
+    const describedElement = container.querySelector(
+      `svg[aria-describedby~="testid"]`
+    );
+    expect(describedElement).toBeDefined();
+  });
+
+  it("renders an svg with an aria-labelledby attribute", () => {
+    const { container } = render(
+      <VictoryContainer aria-labelledby="testid" title="title" />
+    );
+    const describedElement = container.querySelector(
+      `svg[aria-labelledby~="testid"]`
+    );
+    expect(describedElement).toBeDefined();
+  });
+
+  it("renders an svg with the correct viewbox", () => {
+    const width = 300;
+    const height = 300;
+    const { container } = render(
+      <VictoryContainer width={width} height={height} />
+    );
+    const svg = container.querySelector("svg");
+    const viewBoxValue = `0 0 ${width} ${height}`;
+    expect(svg.getAttribute("viewBox")).toEqual(viewBoxValue);
+  });
+
+  it("attaches an event to the container", () => {
+    const clickHandler = jest.fn();
+    const { container } = render(
+      <VictoryContainer events={{ onClick: clickHandler }} />
+    );
+    const svg = container.querySelector("svg");
+    fireEvent.click(svg);
+    expect(clickHandler).toBeCalled();
+  });
+});