@eeacms/react-chart-editor/lib/components/containers/__tests__/ConnectedContainersVisibility-test.js

plotly.js chart editor react component UI

"use strict";var _fields=require("../../fields");var _=require("..");var _react=_interopRequireDefault(require("react"));var _testUtils=require("../../../lib/test-utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};describe("Basic PlotlyPanel rules",()=>{describe("no PlotlyPanel, no context for Fields",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement("div",null,_react.default.createElement("div",{id:"thediv"}," ok "),_react.default.createElement(_fields.Numeric,{attr:"title"}))));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0));it("SHOWS div which does not need context",()=>expect(wrapper.find("input").length).toEqual(0))});describe("PlotlyPanel gives context to Field",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_fields.Numeric,{attr:"title"}))));it("SHOWS Field",()=>expect(wrapper.find("input").length).toEqual(1))});describe("no PlotlyPanel, does not affect PlotlySection",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement("div",null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement("div",{id:"thediv"}," ok "),_react.default.createElement(_fields.Numeric,{attr:"title"})))));it("SHOWS PlotlySection and #thediv",()=>{expect(wrapper.find("div.section").length).toEqual(1);expect(wrapper.find("#thediv").length).toEqual(1)});it("HIDES Field because it needs context from PlotlyPanel",()=>expect(wrapper.find("input").length).toEqual(0))})});describe("Basic PlotlySection rules",()=>{describe("hides itself when it has no visible children",()=>{describe("PlotlyPanel > PlotlySection > Field-with-no-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement(_fields.Numeric,{attr:"not_an_attr"})))));it("HIDES PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))});describe("PlotlyPanel > PlotlySection > Field-with-no-visible-attr-based-on-customConfig",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter({customConfig:{visibility_rules:{blacklist:[{type:"attrName",regex_match:"color"}]}}}),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement(_fields.Numeric,{attr:"title.font.color"})))));it("HIDES Field based on customConfig",()=>expect(wrapper.find("input").length).toEqual(0));it("HIDES PlotlySection because no visible children according to custom config",()=>expect(wrapper.find("div.section").length).toEqual(0))});describe("PlotlyPanel > PlotlySection > Field-with-no-visible-attr-based-on-customConfig",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter({customConfig:{visibility_rules:{blacklist:[{type:"attrName",regex_match:"color"}]}}}),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlySection,{attr:"title"},_react.default.createElement(_fields.Numeric,{attr:"title.font.color"}),_react.default.createElement(_fields.Numeric,{attr:"title"})))));it("HIDES the title.font.color Field based on customConfig",()=>expect(wrapper.find("input").length).toEqual(1));it("SHOWS PlotlySection if it has an attr that is accepted by customConfig",()=>expect(wrapper.find("div.section").length).toEqual(1))});describe("div > PlotlySection > Field-with-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement("div",null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement(_fields.Numeric,{attr:"title"})))));it("HIDES PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))})});describe("shows itself when it has visible children",()=>{describe("PlotlyPanel > PlotlySection > Field-with-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement(_fields.Numeric,{attr:"title"})))));it("SHOWS PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(1));it("SHOWS Field",()=>expect(wrapper.find("input").length).toEqual(1))});describe("PlotlyPanel > PlotlySection > div",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement("div",{id:"thediv"}),_react.default.createElement(_fields.Numeric,{attr:"not_an_attr"})))));it("SHOWS PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(1));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0));it("SHOWS div",()=>expect(wrapper.find("#thediv").length).toEqual(1))})})});describe("Basic PlotlyFold rules",()=>{describe("when children have an attr prop",()=>{describe("Field-with-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_fields.Numeric,{attr:"title"})))));it("SHOWS PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(1));it("SHOWS Field",()=>expect(wrapper.find("input").length).toEqual(1))});describe("Field-with-invisible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_fields.Numeric,{attr:"not_an_attr"})))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))})});describe("when childen do not have an attr prop",()=>{describe("div",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement("div",{id:"thediv"}," ok ")))));it("SHOWS PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(1));it("SHOWS div",()=>expect(wrapper.find("#thediv").length).toEqual(1))});describe("when children have a no_visibility_forcing, plotly_editor_trait",()=>{describe("PlotlySection",()=>{describe("div",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement("div",{id:"thediv"}," ok "))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(0));it("HIDES div",()=>expect(wrapper.find("#thediv").length).toEqual(0))});describe("Field-with-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement(_fields.Numeric,{attr:"title"}))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))});describe("Field-with-invisible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement(_fields.Numeric,{attr:"not_an_attr"}))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))})})});describe("PlotlyPanel",()=>{describe("Field-with-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_fields.Numeric,{attr:"title"}))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES inner PlotlyPanel",()=>expect(wrapper.find("div.panel").length).toEqual(1));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))})});describe("Info",()=>{describe("Field-with-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_fields.Info,null,_react.default.createElement(_fields.Numeric,{attr:"title"}))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES Info",()=>expect(wrapper.find(".js-test-info").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))})});describe("no_visibility_forcing containers can be visibility forcing with a visible attr",()=>{describe("PlotlySection-with-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,{attr:"title"},_react.default.createElement(_fields.Numeric,{attr:"not_an_attr"}))))));it("SHOWS PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(1));it("SHOWS PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(1));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))});describe("PlotlySection-with-invisible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,{attr:"not_an_attr"},_react.default.createElement(_fields.Numeric,{attr:"title"}))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))})})})});describe("Other ways to force PlotlyFold visibility",()=>{describe("Adding a custom component as child of PlotlyFold",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement("p",null,"I force visibility of the fold"),_react.default.createElement(_.PlotlySection,null,_react.default.createElement("div",{id:"thediv"}," ok "))))));it("shows PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(1));it("shows PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(1));it("shows div",()=>expect(wrapper.find("#thediv").length).toEqual(1))});describe("adding a Field with visible attr as child of PlotlyFold",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_fields.Numeric,{attr:"width"}),_react.default.createElement(_.PlotlySection,null,_react.default.createElement("div",{id:"thediv"}," ok "),_react.default.createElement(_fields.Numeric,{attr:"title"}))))));it("shows PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(1));it("shows PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(1));it("shows div",()=>expect(wrapper.find("#thediv").length).toEqual(1));it("shows Field in PlotlySection",()=>expect(wrapper.find("input").length).toEqual(2))});describe("adding a Field with invisible attr will hide PlotlyFold",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_fields.Numeric,{attr:"not_an_attr"}),_react.default.createElement(_.PlotlySection,null,_react.default.createElement(_fields.Numeric,{attr:"not_an_attr"}))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(0));it("HIDES Field in PlotlySection",()=>expect(wrapper.find("input").length).toEqual(0))})});describe("PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold",()=>{describe("div",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement("div",{id:"thediv"}," ok ")))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES div",()=>expect(wrapper.find("#thediv").length).toEqual(0))});describe("Field-with-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_fields.Numeric,{attr:"title"})))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))});describe("Field-with-invisible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_fields.Numeric,{attr:"not_an_attr"})))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))})});describe("PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold > PlotlySection",()=>{describe("div",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement("div",{id:"thediv"}," ok "))))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(0));it("HIDES div",()=>expect(wrapper.find("#thediv").length).toEqual(0))});describe("Field-with-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement(_fields.Numeric,{attr:"title"}))))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))});describe("Field-with-invisible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,null,_react.default.createElement(_fields.Numeric,{attr:"not_an_attr"}))))))));it("HIDES PlotlyFold",()=>expect(wrapper.find("div.fold").length).toEqual(0));it("HIDES PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(0));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))})});describe("PlotlyPanel > PlotlyFold > PlotlyPanel-with-visible-attr > PlotlyFold > PlotlySection-with-visible-attr",()=>{describe("div",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.LayoutPanel,{attr:"title"},_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,{attr:"title"},_react.default.createElement("div",{id:"thediv"}," ok "))))))));it("shows 2 PlotlyFolds",()=>expect(wrapper.find("div.fold").length).toEqual(2));it("shows PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(1));it("shows div",()=>expect(wrapper.find("#thediv").length).toEqual(1))});describe("Field-with-visible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.LayoutPanel,{attr:"title"},_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,{attr:"title"},_react.default.createElement(_fields.Numeric,{attr:"title"}))))))));it("shows 2 PlotlyFolds",()=>expect(wrapper.find("div.fold").length).toEqual(2));it("shows PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(1));it("shows Field",()=>expect(wrapper.find("input").length).toEqual(1))});describe("Field-with-invisible-attr",()=>{const wrapper=(0,_testUtils.mount)(_react.default.createElement(_testUtils.TestEditor,_testUtils.fixtures.scatter(),_react.default.createElement(_.LayoutPanel,null,_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.LayoutPanel,{attr:"title"},_react.default.createElement(_.PlotlyFold,null,_react.default.createElement(_.PlotlySection,{attr:"title"},_react.default.createElement(_fields.Numeric,{attr:"not_an_attr"}))))))));it("shows 2 PlotlyFolds",()=>expect(wrapper.find("div.fold").length).toEqual(2));it("shows PlotlySection",()=>expect(wrapper.find("div.section").length).toEqual(1));it("HIDES Field",()=>expect(wrapper.find("input").length).toEqual(0))})});
//# sourceMappingURL=ConnectedContainersVisibility-test.js.map