Merge pull request #248 from ollelauribostrom/test-split

Adding tests for Split component

src/components/Split.tsx

@@ -23,70 +23,14 @@ import * as React from "react";
 import { MouseEvent } from "react";
 import { EventDispatcher } from "../model";
 import { assert } from "../util";
+import { assignObject, toCSSPx } from "../utils/splitUtils";
 
 const Cassowary = require("cassowary");
 
-// Cassowary.trace = true;
-
 interface CassowaryVar {
   value: number;
 }
 
-function arrayEqual(a: any[], b: any[]) {
-  if (a === b) {
-    return true;
-  }
-  if (a.length !== b.length) {
-    return false;
-  }
-  for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function toCSSPercent(x: number) {
-  return x + "%";
-}
-
-function toCSSPx(x: number) {
-  return (x | 0) + "px";
-}
-
-function isCSSPercentage(x: string) {
-  return x[x.length - 1] === "%";
-}
-
-function parseCSSPercentage(x: string) {
-  return Number(x.substring(0, x.length - 1)) / 100;
-}
-
-function clone(array: any[]): any[] {
-  return array.slice(0);
-}
-
-function sum(array: number[], n?: number) {
-  let x = 0;
-  if (n === undefined) {
-    n = array.length;
-  }
-  for (let i = 0; i < n; i++) {
-    x += array[i];
-  }
-  return x;
-}
-
-function assignObject(to: any, from: any) {
-  for (const x in from) {
-    if (!(x in to)) {
-      to[x] = from[x];
-    }
-  }
-  return to;
-}
-
 export enum SplitOrientation {
   Horizontal,
   Vertical
@@ -99,22 +43,6 @@ export interface SplitInfo {
   resize?: "fixed" | "stretch";
 }
 
-function splitInfoEquals(a: SplitInfo, b: SplitInfo) {
-  return a.min === b.min && a.max === b.max && a.value === b.value && a.resize === b.resize;
-}
-
-function splitInfoArrayEquals(a: SplitInfo[], b: SplitInfo[]) {
-  if (a.length !== b.length) {
-    return false;
-  }
-  for (let i = 0; i < a.length; i++) {
-    if (!splitInfoEquals(a[i], b[i])) {
-      return false;
-    }
-  }
-  return true;
-}
-
 export interface SplitProps {
   orientation: SplitOrientation;
   onChange?: (splits: SplitInfo[]) => void;
@@ -128,7 +56,7 @@ export class Split extends React.Component<SplitProps, {
   splits: SplitInfo[];
 }> {
   container: HTMLDivElement;
-  static onGlobalResize = new EventDispatcher("Split Resize");
+  index: number = -1;
   static onResizeBegin = new EventDispatcher("Resize Begin");
   static onResizeEnd = new EventDispatcher("Resize End");
   constructor(props: any) {
@@ -138,7 +66,27 @@ export class Split extends React.Component<SplitProps, {
     };
   }
 
-  index: number = -1;
+  componentDidMount() {
+    document.addEventListener("mousemove", this.onResizerMouseMove as any);
+    document.addEventListener("mouseup", this.onResizerMouseUp);
+    const splits = this.canonicalizeSplits(this.props);
+    this.setupSolver(splits, this.getContainerSize(this.props.orientation));
+    this.querySolver(splits);
+    this.setState({ splits });
+  }
+
+  componentWillReceiveProps(nextProps: SplitProps) {
+    const splits = this.canonicalizeSplits(nextProps);
+    this.setupSolver(splits, this.getContainerSize(nextProps.orientation));
+    this.querySolver(splits);
+    this.setState({ splits });
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("mousemove", this.onResizerMouseMove as any);
+    document.removeEventListener("mouseup", this.onResizerMouseUp);
+  }
+
   onResizerMouseDown(i: number) {
     this.index = i;
     this.solver.addEditVar(this.vars[this.index + 1], Cassowary.Strength.strong).beginEdit();
@@ -185,13 +133,6 @@ export class Split extends React.Component<SplitProps, {
     }
   }
 
-  componentWillReceiveProps(nextProps: SplitProps) {
-    const splits = this.canonicalizeSplits(nextProps);
-    this.setupSolver(splits, this.getContainerSize(nextProps.orientation));
-    this.querySolver(splits);
-    this.setState({ splits });
-  }
-
   private getContainerSize(orientation: SplitOrientation): number {
     return orientation === SplitOrientation.Horizontal ? this.container.clientHeight : this.container.clientWidth;
   }
@@ -293,19 +234,6 @@ export class Split extends React.Component<SplitProps, {
     }
   }
 
-  componentDidMount() {
-    document.addEventListener("mousemove", this.onResizerMouseMove as any);
-    document.addEventListener("mouseup", this.onResizerMouseUp);
-    const splits = this.canonicalizeSplits(this.props);
-    this.setupSolver(splits, this.getContainerSize(this.props.orientation));
-    this.querySolver(splits);
-    this.setState({ splits });
-  }
-  componentWillUnmount() {
-    document.removeEventListener("mousemove", this.onResizerMouseMove as any);
-    document.removeEventListener("mouseup", this.onResizerMouseUp);
-  }
-
   render() {
     const { splits } = this.state;
     let resizerClassName = "resizer";

src/utils/splitUtils.ts

@@ -0,0 +1,35 @@
+/* Copyright 2018 Mozilla Foundation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {SplitInfo} from "../components/Split";
+
+export function toCSSPx(x: number) {
+  return (x | 0) + "px";
+}
+
+export function assignObject(to: any, from: any) {
+  for (const x in from) {
+    if (!(x in to)) {
+      to[x] = from[x];
+    }
+  }
+  return to;
+}

tests/components/Split/Split.spec.tsx

@@ -0,0 +1,113 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+import * as React from "react";
+import {mount} from "enzyme";
+import {Split, SplitOrientation} from "../../../src/components/Split";
+
+describe("Tests for Split", () => {
+  const setup = (props?, children?) => {
+    return mount(
+      <Split {...props}>
+        <div className="div0" />
+        <div className="div1" />
+      </Split>
+    );
+  };
+  it("should render correctly (horizontal)", () => {
+    const wrapper = setup({ orientation: SplitOrientation.Horizontal });
+    const split = wrapper.find(".split");
+    expect(split.prop("style")).toEqual({ flexDirection: "column" });
+    expect(split.children().length).toEqual(3);
+    expect(split.childAt(0).hasClass("split-pane")).toEqual(true);
+    expect(split.childAt(0).prop("style")).toEqual({ flexBasis: "0px" });
+    expect(split.childAt(0).childAt(0).hasClass("div0")).toEqual(true);
+    expect(split.childAt(1).prop("className")).toEqual("resizer horizontal");
+    expect(split.childAt(2).hasClass("split-pane")).toEqual(true);
+    expect(split.childAt(2).prop("style")).toEqual({ flex: 1 });
+    expect(split.childAt(2).childAt(0).hasClass("div1")).toEqual(true);
+    wrapper.unmount();
+  });
+  it("should render correctly (vertical)", () => {
+    const wrapper = setup({ orientation: SplitOrientation.Vertical });
+    const split = wrapper.find(".split");
+    expect(split.prop("style")).toEqual({ flexDirection: "row" });
+    expect(split.childAt(1).prop("className")).toEqual("resizer vertical");
+    wrapper.unmount();
+  });
+  it("should add event listeners for mousemove and mouseup events on mount", () => {
+    const addEventListenerSpy = jest.spyOn(document, "addEventListener");
+    const wrapper = setup({ orientation: SplitOrientation.Horizontal });
+    expect(addEventListenerSpy.mock.calls[0][0]).toEqual("mousemove");
+    expect(addEventListenerSpy.mock.calls[1][0]).toEqual("mouseup");
+    wrapper.unmount();
+    addEventListenerSpy.mockRestore();
+  });
+  it("should remove event listeners on unmount", () => {
+    const removeEventListenerSpy = jest.spyOn(document, "removeEventListener");
+    const wrapper = setup({ orientation: SplitOrientation.Horizontal });
+    wrapper.unmount();
+    expect(removeEventListenerSpy.mock.calls[0][0]).toEqual("mousemove");
+    expect(removeEventListenerSpy.mock.calls[1][0]).toEqual("mouseup");
+    removeEventListenerSpy.mockRestore();
+  });
+  it("should react to mousedown events on the resizer", () => {
+    const onResizeBegin = jest.fn();
+    Split.onResizeBegin.register(onResizeBegin);
+    const wrapper = setup({ orientation: SplitOrientation.Horizontal });
+    const instance = wrapper.instance() as Split;
+    wrapper.find(".resizer").simulate("mousedown");
+    expect(instance.index).toEqual(0);
+    expect(onResizeBegin).toHaveBeenCalled();
+    expect(window.document.documentElement.style.pointerEvents).toEqual("none");
+    Split.onResizeBegin.unregister(onResizeBegin);
+    wrapper.unmount();
+  });
+  it("should react to mouseup events if resizing", () => {
+    const onChange = jest.fn();
+    const onResizeEnd = jest.fn();
+    Split.onResizeEnd.register(onResizeEnd);
+    const wrapper = setup({ orientation: SplitOrientation.Horizontal, onChange });
+    const instance = wrapper.instance() as Split;
+    wrapper.find(".resizer").simulate("mousedown");
+    document.dispatchEvent(new Event("mouseup"));
+    expect(instance.index).toEqual(-1);
+    expect(onResizeEnd).toHaveBeenCalled();
+    expect(window.document.documentElement.style.pointerEvents).toEqual("auto");
+    expect(onChange).toHaveBeenCalled();
+    Split.onResizeEnd.unregister(onResizeEnd);
+    wrapper.unmount();
+  });
+  it("should ignore mouseup events if not resizing", () => {
+    const onChange = jest.fn();
+    const onResizeEnd = jest.fn();
+    Split.onResizeEnd.register(onResizeEnd);
+    const wrapper = setup({ orientation: SplitOrientation.Horizontal, onChange });
+    document.dispatchEvent(new Event("mouseup"));
+    expect(onResizeEnd).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+    wrapper.unmount();
+  });
+  it("should react to mousemove events if resizing", () => {
+    const preventDefault = jest.fn();
+    const wrapper = setup({ orientation: SplitOrientation.Horizontal });
+    const event: any = new Event("mousemove");
+    event.preventDefault = preventDefault;
+    wrapper.find(".resizer").simulate("mousedown");
+    document.dispatchEvent(event);
+    expect(preventDefault).toHaveBeenCalled();
+    wrapper.unmount();
+  });
+  it("should ignore mousemove events if not resizing", () => {
+    const preventDefault = jest.fn();
+    const wrapper = setup({ orientation: SplitOrientation.Horizontal });
+    const event: any = new Event("mousemove");
+    event.preventDefault = preventDefault;
+    document.dispatchEvent(event);
+    expect(preventDefault).not.toHaveBeenCalled();
+    wrapper.unmount();
+  });
+  /*
+    TODO: Add tests to verify the actual solving after #184 is done
+  */
+});

tests/unit/splitUtils.spec.ts

@@ -0,0 +1,28 @@
+/* Any copyright is dedicated to the Public Domain.
+* http://creativecommons.org/publicdomain/zero/1.0/ */
+
+import * as React from "react";
+import * as splitUtils from "../../src/utils/splitUtils";
+
+describe("Tests for splitUtils", () => {
+  describe("toCSSPx", () => {
+    it("should transform a number to CSS px value", () => {
+      expect(splitUtils.toCSSPx(10)).toEqual("10px");
+    });
+    it("should default to 0px", () => {
+      expect(splitUtils.toCSSPx(null)).toEqual("0px");
+    });
+  });
+  describe("assignObject", () => {
+    it("should assign properties", () => {
+      const to = { a: 1 };
+      const from =  { b: 2 };
+      expect(splitUtils.assignObject(to, from)).toEqual({ a: 1, b: 2});
+    });
+    it("should only assign non existing properties", () => {
+      const to = { a: 1 };
+      const from =  { a: 2, b: 3 };
+      expect(splitUtils.assignObject(to, from)).toEqual({ a: 1, b: 3});
+    });
+  });
+});