diff --git a/src/app/credExplorer/pagerankTable/Connection.js b/src/app/credExplorer/pagerankTable/Connection.js index 6831bda..eb2de89 100644 --- a/src/app/credExplorer/pagerankTable/Connection.js +++ b/src/app/credExplorer/pagerankTable/Connection.js @@ -66,6 +66,7 @@ export class ConnectionRow extends React.PureComponent { ); return ( { return ( { this.setState(({expanded}) => ({ diff --git a/src/app/credExplorer/pagerankTable/TableRow.test.js b/src/app/credExplorer/pagerankTable/TableRow.test.js index 986b1a8..7488451 100644 --- a/src/app/credExplorer/pagerankTable/TableRow.test.js +++ b/src/app/credExplorer/pagerankTable/TableRow.test.js @@ -8,10 +8,11 @@ import {COLUMNS} from "./sharedTestUtils"; require("../../testUtil").configureEnzyme(); describe("app/credExplorer/pagerankTable/TableRow", () => { - function example(depth: number = 3) { + function example() { return shallow( } connectionProportion={0.5} score={133.7} @@ -19,22 +20,38 @@ describe("app/credExplorer/pagerankTable/TableRow", () => { /> ); } - it("has depth-based color", () => { + it("depth parameter changes the color, but not the indentation", () => { for (const depth of [0, 1, 2]) { - const el = example(depth); - const style = el.find("tr").props().style; - expect({depth, style}).toMatchSnapshot(); + const el = shallow( + } + connectionProportion={0.5} + score={133.7} + children={
} + /> + ); + const trStyle = el.find("tr").props().style; + const buttonStyle = el.find("button").props().style; + expect({depth, trStyle, buttonStyle}).toMatchSnapshot(); } }); - it("has depth-based indentation", () => { - for (const depth of [0, 1, 2]) { - const el = example(depth); - const style = el - .find("td") - .at(0) - .find("button") - .props().style; - expect({depth, style}).toMatchSnapshot(); + it("indent parameter changes the button indentation", () => { + for (const indent of [0, 1, 2]) { + const el = shallow( + } + connectionProportion={0.5} + score={133.7} + children={
} + /> + ); + const trStyle = el.find("tr").props().style; + const buttonStyle = el.find("button").props().style; + expect({indent, trStyle, buttonStyle}).toMatchSnapshot(); } }); it("expand button toggles symbol based on expansion state", () => { diff --git a/src/app/credExplorer/pagerankTable/__snapshots__/TableRow.test.js.snap b/src/app/credExplorer/pagerankTable/__snapshots__/TableRow.test.js.snap index 0bd0dab..2dec6a8 100644 --- a/src/app/credExplorer/pagerankTable/__snapshots__/TableRow.test.js.snap +++ b/src/app/credExplorer/pagerankTable/__snapshots__/TableRow.test.js.snap @@ -1,58 +1,79 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`app/credExplorer/pagerankTable/TableRow has depth-based color 1`] = ` +exports[`app/credExplorer/pagerankTable/TableRow depth parameter changes the color, but not the indentation 1`] = ` Object { + "buttonStyle": Object { + "marginLeft": 20, + "marginRight": 5, + }, "depth": 0, - "style": Object { + "trStyle": Object { "backgroundColor": "rgba(0,143.4375,0,0)", }, } `; -exports[`app/credExplorer/pagerankTable/TableRow has depth-based color 2`] = ` +exports[`app/credExplorer/pagerankTable/TableRow depth parameter changes the color, but not the indentation 2`] = ` Object { + "buttonStyle": Object { + "marginLeft": 20, + "marginRight": 5, + }, "depth": 1, - "style": Object { + "trStyle": Object { "backgroundColor": "rgba(0,143.4375,0,0.09999999999999998)", }, } `; -exports[`app/credExplorer/pagerankTable/TableRow has depth-based color 3`] = ` +exports[`app/credExplorer/pagerankTable/TableRow depth parameter changes the color, but not the indentation 3`] = ` Object { + "buttonStyle": Object { + "marginLeft": 20, + "marginRight": 5, + }, "depth": 2, - "style": Object { + "trStyle": Object { "backgroundColor": "rgba(0,143.4375,0,0.18999999999999995)", }, } `; -exports[`app/credExplorer/pagerankTable/TableRow has depth-based indentation 1`] = ` +exports[`app/credExplorer/pagerankTable/TableRow indent parameter changes the button indentation 1`] = ` Object { - "depth": 0, - "style": Object { - "marginLeft": 0, + "buttonStyle": Object { + "marginLeft": 5, "marginRight": 5, }, + "indent": 0, + "trStyle": Object { + "backgroundColor": "rgba(0,143.4375,0,0.2709999999999999)", + }, } `; -exports[`app/credExplorer/pagerankTable/TableRow has depth-based indentation 2`] = ` +exports[`app/credExplorer/pagerankTable/TableRow indent parameter changes the button indentation 2`] = ` Object { - "depth": 1, - "style": Object { - "marginLeft": 15, + "buttonStyle": Object { + "marginLeft": 20, "marginRight": 5, }, + "indent": 1, + "trStyle": Object { + "backgroundColor": "rgba(0,143.4375,0,0.2709999999999999)", + }, } `; -exports[`app/credExplorer/pagerankTable/TableRow has depth-based indentation 3`] = ` +exports[`app/credExplorer/pagerankTable/TableRow indent parameter changes the button indentation 3`] = ` Object { - "depth": 2, - "style": Object { - "marginLeft": 30, + "buttonStyle": Object { + "marginLeft": 35, "marginRight": 5, }, + "indent": 2, + "trStyle": Object { + "backgroundColor": "rgba(0,143.4375,0,0.2709999999999999)", + }, } `;