Merge pull request #2247 from FormidableLabs/feature/jest-candlestick-tests

Feature/jest candlestick tests

Author: heythisispaul

test/jest/victory-bar/victory-bar.test.js

@@ -243,7 +243,7 @@ describe("components/victory-bar", () => {
         />
       );
 
-      Array.from(container.querySelectorAll("path")).forEach((bar, index) => {
+      container.querySelectorAll("path").forEach((bar, index) => {
         expect(parseInt(bar.getAttribute("tabindex"))).toEqual(index + 1);
         expect(bar.getAttribute("aria-label")).toEqual(`x: ${data[index].x}`);
       });

test/jest/victory-candlestick/candle.test.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Candle } from "victory-candlestick";
+import { VictoryContainer } from "victory-core";
+import * as d3Scale from "victory-vendor/d3-scale";
+
+describe("victory-primitives/candle", () => {
+  const baseProps = {
+    data: [
+      { x: 1, open: 10, close: 30, high: 50, low: 5, eventKey: 0 },
+      { x: 2, open: 40, close: 80, high: 100, low: 10, eventKey: 1 }
+    ],
+    datum: { x: 1, open: 10, close: 30, high: 50, low: 5, eventKey: 0 },
+    scale: {
+      x: d3Scale.scaleLinear(),
+      y: d3Scale.scaleLinear()
+    },
+    candleWidth: 2,
+    x: 5,
+    high: 50,
+    low: 5,
+    close: 30,
+    open: 10
+  };
+
+  const renderCandle = (props = {}) =>
+    render(
+      <VictoryContainer>
+        <Candle {...baseProps} {...props} />
+      </VictoryContainer>
+    );
+
+  it("should render a wick line", () => {
+    const { container } = renderCandle();
+    const wicks = container.querySelectorAll("line");
+    const values = [
+      {
+        x1: 5,
+        x2: 5,
+        y1: 50,
+        y2: 10
+      },
+      {
+        x1: 5,
+        x2: 5,
+        y1: 30,
+        y2: 5
+      }
+    ];
+
+    wicks.forEach((wick, i) => {
+      const [x1, x2, y1, y2] = ["x1", "x2", "y1", "y2"].map((prop) =>
+        parseInt(wick.getAttribute(prop))
+      );
+      expect(values[i]).toMatchObject({ x1, x2, y1, y2 });
+    });
+  });
+
+  it("should render a candle rectangle", () => {
+    const { container } = renderCandle();
+    const rect = container.querySelector("rect");
+    const [width, height, x, y] = ["width", "height", "x", "y"].map((prop) =>
+      rect.getAttribute(prop)
+    );
+
+    // width = style.width || 0.5 * (width - 2 * padding) / data.length;
+
+    expect(width).toEqual("2");
+    expect(height).toEqual("20");
+    // x = x - width / 2
+    expect(x).toEqual("4");
+    expect(y).toEqual("10");
+  });
+});

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

@@ -0,0 +1,75 @@
+/* eslint max-nested-callbacks: 0 */
+import { range } from "lodash";
+import { fromJS } from "immutable";
+import { getData, getDomain } from "victory-candlestick/lib/helper-methods";
+
+const immutableGetDataTest = {
+  createData: (x) => fromJS(x),
+  testLabel: "with immutable data"
+};
+const getDataTest = {
+  createData: (x) => x,
+  testLabel: "with js data"
+};
+
+[getDataTest, immutableGetDataTest].forEach(({ createData, testLabel }) => {
+  describe(`victory-candlestick/helper-methods ${testLabel}`, () => {
+    describe("getData", () => {
+      it("sorts data by sortKey", () => {
+        const data = createData(
+          range(5)
+            .map((i) => ({ x: i, open: i, close: i, high: i, low: i }))
+            .reverse()
+        );
+
+        const dataResult = getData({
+          data,
+          x: "x",
+          open: "open",
+          close: "close",
+          high: "high",
+          low: "low",
+          sortKey: "x"
+        });
+
+        expect(dataResult.map((datum) => datum.x)).toEqual([0, 1, 2, 3, 4]);
+      });
+    });
+
+    describe("getDomain", () => {
+      const dataSet = createData([
+        { x: 5, open: 10, close: 20, high: 25, low: 5 },
+        { x: 10, open: 15, close: 25, high: 30, low: 10 }
+      ]);
+
+      it("returns a domain array for the x axis", () => {
+        const domainXResult = getDomain(
+          {
+            data: dataSet,
+            x: "x",
+            open: "open",
+            close: "close",
+            high: "high",
+            low: "low"
+          },
+          "x"
+        );
+        expect(domainXResult).toEqual([5, 10]);
+      });
+
+      it("returns a domain array for the y axis", () => {
+        const domainYResult = getDomain(
+          {
+            data: dataSet,
+            open: "open",
+            close: "close",
+            high: "high",
+            low: "low"
+          },
+          "y"
+        );
+        expect(domainYResult).toEqual([5, 30]);
+      });
+    });
+  });
+});