From b141f451a15951619cb5a0acc9be57c9cca4c239 Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Sat, 18 Nov 2017 04:24:28 +0300
Subject: [PATCH 1/4] Render navigation and addons panels even when they are
 hidden

---
 .../layout/__snapshots__/index.test.js.snap   | 781 ++++++++++++++++++
 .../src/modules/ui/components/layout/index.js |  39 +-
 .../ui/components/layout/index.test.js        |  22 +-
 3 files changed, 798 insertions(+), 44 deletions(-)
 create mode 100644 lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap

diff --git a/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap b/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000000..deed11e7f6b2
--- /dev/null
+++ b/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap
@@ -0,0 +1,781 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`manager.ui.components.layout.index with default options should render provided components 1`] = `
+<div
+  style={
+    Object {
+      "backgroundColor": "#F7F7F7",
+      "height": "100vh",
+    }
+  }
+>
+  <SplitPane
+    allowResize={true}
+    defaultSize={250}
+    maxSize={-400}
+    minSize={150}
+    onChange={[Function]}
+    onDragFinished={[Function]}
+    onDragStarted={[Function]}
+    pane1ClassName=""
+    pane2ClassName=""
+    paneClassName=""
+    prefixer={
+      Prefixer {
+        "_browserInfo": Object {
+          "blink": true,
+          "browserName": "safari",
+          "browserVersion": NaN,
+          "cssPrefix": "-webkit-",
+          "jsPrefix": "Webkit",
+          "name": "Safari",
+          "osVersion": NaN,
+          "safari": true,
+          "x": true,
+        },
+        "_hasPropsRequiringPrefix": false,
+        "_keepUnprefixed": false,
+        "_metaData": Object {
+          "browserName": "safari",
+          "browserVersion": NaN,
+          "cssPrefix": "-webkit-",
+          "jsPrefix": "Webkit",
+          "keepUnprefixed": false,
+          "requiresPrefix": Object {},
+        },
+        "_requiresPrefix": Object {},
+        "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
+        "prefixedKeyframes": "keyframes",
+      }
+    }
+    primary="first"
+    resizerStyle={
+      Object {
+        "cursor": "col-resize",
+        "height": "auto",
+        "width": 10,
+        "zIndex": 1,
+      }
+    }
+    size={250}
+    split="vertical"
+  >
+    <div
+      style={
+        Object {
+          "alignItems": "stretch",
+          "display": "flex",
+          "flexDirection": "row",
+          "paddingRight": 0,
+          "width": "100%",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "flexGrow": 1,
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      >
+        LeftPanel
+      </div>
+      <USplit
+        shift={5}
+        split="vertical"
+      />
+    </div>
+    <SplitPane
+      allowResize={true}
+      defaultSize={200}
+      maxSize={-200}
+      minSize={100}
+      onChange={[Function]}
+      onDragFinished={[Function]}
+      onDragStarted={[Function]}
+      pane1ClassName=""
+      pane2ClassName=""
+      paneClassName=""
+      prefixer={
+        Prefixer {
+          "_browserInfo": Object {
+            "blink": true,
+            "browserName": "safari",
+            "browserVersion": NaN,
+            "cssPrefix": "-webkit-",
+            "jsPrefix": "Webkit",
+            "name": "Safari",
+            "osVersion": NaN,
+            "safari": true,
+            "x": true,
+          },
+          "_hasPropsRequiringPrefix": false,
+          "_keepUnprefixed": false,
+          "_metaData": Object {
+            "browserName": "safari",
+            "browserVersion": NaN,
+            "cssPrefix": "-webkit-",
+            "jsPrefix": "Webkit",
+            "keepUnprefixed": false,
+            "requiresPrefix": Object {},
+          },
+          "_requiresPrefix": Object {},
+          "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
+          "prefixedKeyframes": "keyframes",
+        }
+      }
+      primary="second"
+      resizerStyle={
+        Object {
+          "cursor": "row-resize",
+          "height": 10,
+          "width": "100%",
+          "zIndex": 1,
+        }
+      }
+      size={200}
+      split="horizontal"
+    >
+      <div
+        style={
+          Object {
+            "boxSizing": "border-box",
+            "height": "100%",
+            "padding": "10px 10px 2px 0",
+            "paddingTop": 10,
+            "position": "absolute",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "backgroundColor": "#FFF",
+              "border": "1px solid #ECECEC",
+              "borderRadius": 4,
+              "height": "100%",
+              "width": "100%",
+            }
+          }
+        >
+          Preview
+        </div>
+        <Dimensions
+          height={0}
+          width={0}
+        />
+      </div>
+      <div
+        style={
+          Object {
+            "alignItems": "stretch",
+            "boxSizing": "border-box",
+            "display": "flex",
+            "flexDirection": "column",
+            "height": "100%",
+            "padding": "0px 10px 10px 0",
+            "position": "absolute",
+            "width": "100%",
+          }
+        }
+      >
+        <USplit
+          shift={-5}
+          split="horizontal"
+        />
+        DownPanel
+      </div>
+    </SplitPane>
+  </SplitPane>
+</div>
+`;
+
+exports[`manager.ui.components.layout.index with goFullScreen=true should render preview in fullscreen mode 1`] = `
+<div
+  style={
+    Object {
+      "backgroundColor": "#F7F7F7",
+      "height": "100vh",
+    }
+  }
+>
+  <SplitPane
+    allowResize={false}
+    defaultSize={250}
+    maxSize={-400}
+    minSize={150}
+    onChange={[Function]}
+    onDragFinished={[Function]}
+    onDragStarted={[Function]}
+    pane1ClassName=""
+    pane2ClassName=""
+    paneClassName=""
+    prefixer={
+      Prefixer {
+        "_browserInfo": Object {
+          "blink": true,
+          "browserName": "safari",
+          "browserVersion": NaN,
+          "cssPrefix": "-webkit-",
+          "jsPrefix": "Webkit",
+          "name": "Safari",
+          "osVersion": NaN,
+          "safari": true,
+          "x": true,
+        },
+        "_hasPropsRequiringPrefix": false,
+        "_keepUnprefixed": false,
+        "_metaData": Object {
+          "browserName": "safari",
+          "browserVersion": NaN,
+          "cssPrefix": "-webkit-",
+          "jsPrefix": "Webkit",
+          "keepUnprefixed": false,
+          "requiresPrefix": Object {},
+        },
+        "_requiresPrefix": Object {},
+        "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
+        "prefixedKeyframes": "keyframes",
+      }
+    }
+    primary="first"
+    resizerStyle={
+      Object {
+        "cursor": undefined,
+        "height": "auto",
+        "width": 10,
+        "zIndex": 1,
+      }
+    }
+    size={1}
+    split="vertical"
+  >
+    <div
+      style={
+        Object {
+          "alignItems": "stretch",
+          "display": "none",
+          "flexDirection": "row",
+          "paddingRight": 0,
+          "width": "100%",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "flexGrow": 1,
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      >
+        LeftPanel
+      </div>
+      <USplit
+        shift={5}
+        split="vertical"
+      />
+    </div>
+    <SplitPane
+      allowResize={false}
+      defaultSize={200}
+      maxSize={-200}
+      minSize={100}
+      onChange={[Function]}
+      onDragFinished={[Function]}
+      onDragStarted={[Function]}
+      pane1ClassName=""
+      pane2ClassName=""
+      paneClassName=""
+      prefixer={
+        Prefixer {
+          "_browserInfo": Object {
+            "blink": true,
+            "browserName": "safari",
+            "browserVersion": NaN,
+            "cssPrefix": "-webkit-",
+            "jsPrefix": "Webkit",
+            "name": "Safari",
+            "osVersion": NaN,
+            "safari": true,
+            "x": true,
+          },
+          "_hasPropsRequiringPrefix": false,
+          "_keepUnprefixed": false,
+          "_metaData": Object {
+            "browserName": "safari",
+            "browserVersion": NaN,
+            "cssPrefix": "-webkit-",
+            "jsPrefix": "Webkit",
+            "keepUnprefixed": false,
+            "requiresPrefix": Object {},
+          },
+          "_requiresPrefix": Object {},
+          "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
+          "prefixedKeyframes": "keyframes",
+        }
+      }
+      primary="second"
+      resizerStyle={
+        Object {
+          "cursor": undefined,
+          "height": 10,
+          "width": "100%",
+          "zIndex": 1,
+        }
+      }
+      size={1}
+      split="horizontal"
+    >
+      <div
+        style={
+          Object {
+            "boxSizing": "border-box",
+            "height": "100%",
+            "padding": "10px 10px 2px 0",
+            "paddingTop": 10,
+            "position": "absolute",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "backgroundColor": "#FFF",
+              "border": 0,
+              "height": "100%",
+              "left": "0px",
+              "margin": 0,
+              "overflow": "auto",
+              "padding": 0,
+              "position": "fixed",
+              "right": "0px",
+              "top": "0px",
+              "webkitOverflowScrolling": "touch",
+              "width": "100%",
+              "zIndex": 1,
+            }
+          }
+        >
+          Preview
+        </div>
+        <Dimensions
+          height={0}
+          width={0}
+        />
+      </div>
+      <div
+        style={
+          Object {
+            "alignItems": "stretch",
+            "boxSizing": "border-box",
+            "display": "none",
+            "flexDirection": "column",
+            "height": "100%",
+            "padding": "0px 10px 10px 0",
+            "position": "absolute",
+            "width": "100%",
+          }
+        }
+      >
+        <USplit
+          shift={-5}
+          split="horizontal"
+        />
+        DownPanel
+      </div>
+    </SplitPane>
+  </SplitPane>
+</div>
+`;
+
+exports[`manager.ui.components.layout.index with showDownPanel=false should hide the downPanel 1`] = `
+<div
+  style={
+    Object {
+      "backgroundColor": "#F7F7F7",
+      "height": "100vh",
+    }
+  }
+>
+  <SplitPane
+    allowResize={true}
+    defaultSize={250}
+    maxSize={-400}
+    minSize={150}
+    onChange={[Function]}
+    onDragFinished={[Function]}
+    onDragStarted={[Function]}
+    pane1ClassName=""
+    pane2ClassName=""
+    paneClassName=""
+    prefixer={
+      Prefixer {
+        "_browserInfo": Object {
+          "blink": true,
+          "browserName": "safari",
+          "browserVersion": NaN,
+          "cssPrefix": "-webkit-",
+          "jsPrefix": "Webkit",
+          "name": "Safari",
+          "osVersion": NaN,
+          "safari": true,
+          "x": true,
+        },
+        "_hasPropsRequiringPrefix": false,
+        "_keepUnprefixed": false,
+        "_metaData": Object {
+          "browserName": "safari",
+          "browserVersion": NaN,
+          "cssPrefix": "-webkit-",
+          "jsPrefix": "Webkit",
+          "keepUnprefixed": false,
+          "requiresPrefix": Object {},
+        },
+        "_requiresPrefix": Object {},
+        "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
+        "prefixedKeyframes": "keyframes",
+      }
+    }
+    primary="first"
+    resizerStyle={
+      Object {
+        "cursor": "col-resize",
+        "height": "auto",
+        "width": 10,
+        "zIndex": 1,
+      }
+    }
+    size={250}
+    split="vertical"
+  >
+    <div
+      style={
+        Object {
+          "alignItems": "stretch",
+          "display": "flex",
+          "flexDirection": "row",
+          "paddingRight": 0,
+          "width": "100%",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "flexGrow": 1,
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      >
+        LeftPanel
+      </div>
+      <USplit
+        shift={5}
+        split="vertical"
+      />
+    </div>
+    <SplitPane
+      allowResize={false}
+      defaultSize={200}
+      maxSize={-200}
+      minSize={100}
+      onChange={[Function]}
+      onDragFinished={[Function]}
+      onDragStarted={[Function]}
+      pane1ClassName=""
+      pane2ClassName=""
+      paneClassName=""
+      prefixer={
+        Prefixer {
+          "_browserInfo": Object {
+            "blink": true,
+            "browserName": "safari",
+            "browserVersion": NaN,
+            "cssPrefix": "-webkit-",
+            "jsPrefix": "Webkit",
+            "name": "Safari",
+            "osVersion": NaN,
+            "safari": true,
+            "x": true,
+          },
+          "_hasPropsRequiringPrefix": false,
+          "_keepUnprefixed": false,
+          "_metaData": Object {
+            "browserName": "safari",
+            "browserVersion": NaN,
+            "cssPrefix": "-webkit-",
+            "jsPrefix": "Webkit",
+            "keepUnprefixed": false,
+            "requiresPrefix": Object {},
+          },
+          "_requiresPrefix": Object {},
+          "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
+          "prefixedKeyframes": "keyframes",
+        }
+      }
+      primary="second"
+      resizerStyle={
+        Object {
+          "cursor": undefined,
+          "height": 10,
+          "width": "100%",
+          "zIndex": 1,
+        }
+      }
+      size={1}
+      split="horizontal"
+    >
+      <div
+        style={
+          Object {
+            "boxSizing": "border-box",
+            "height": "100%",
+            "padding": "10px 10px 2px 0",
+            "paddingTop": 10,
+            "position": "absolute",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "backgroundColor": "#FFF",
+              "border": "1px solid #ECECEC",
+              "borderRadius": 4,
+              "height": "100%",
+              "width": "100%",
+            }
+          }
+        >
+          Preview
+        </div>
+        <Dimensions
+          height={0}
+          width={0}
+        />
+      </div>
+      <div
+        style={
+          Object {
+            "alignItems": "stretch",
+            "boxSizing": "border-box",
+            "display": "none",
+            "flexDirection": "column",
+            "height": "100%",
+            "padding": "0px 10px 10px 0",
+            "position": "absolute",
+            "width": "100%",
+          }
+        }
+      >
+        <USplit
+          shift={-5}
+          split="horizontal"
+        />
+        DownPanel
+      </div>
+    </SplitPane>
+  </SplitPane>
+</div>
+`;
+
+exports[`manager.ui.components.layout.index with showLeftPanel=false should hide the leftPanel 1`] = `
+<div
+  style={
+    Object {
+      "backgroundColor": "#F7F7F7",
+      "height": "100vh",
+    }
+  }
+>
+  <SplitPane
+    allowResize={false}
+    defaultSize={250}
+    maxSize={-400}
+    minSize={150}
+    onChange={[Function]}
+    onDragFinished={[Function]}
+    onDragStarted={[Function]}
+    pane1ClassName=""
+    pane2ClassName=""
+    paneClassName=""
+    prefixer={
+      Prefixer {
+        "_browserInfo": Object {
+          "blink": true,
+          "browserName": "safari",
+          "browserVersion": NaN,
+          "cssPrefix": "-webkit-",
+          "jsPrefix": "Webkit",
+          "name": "Safari",
+          "osVersion": NaN,
+          "safari": true,
+          "x": true,
+        },
+        "_hasPropsRequiringPrefix": false,
+        "_keepUnprefixed": false,
+        "_metaData": Object {
+          "browserName": "safari",
+          "browserVersion": NaN,
+          "cssPrefix": "-webkit-",
+          "jsPrefix": "Webkit",
+          "keepUnprefixed": false,
+          "requiresPrefix": Object {},
+        },
+        "_requiresPrefix": Object {},
+        "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
+        "prefixedKeyframes": "keyframes",
+      }
+    }
+    primary="first"
+    resizerStyle={
+      Object {
+        "cursor": undefined,
+        "height": "auto",
+        "width": 10,
+        "zIndex": 1,
+      }
+    }
+    size={1}
+    split="vertical"
+  >
+    <div
+      style={
+        Object {
+          "alignItems": "stretch",
+          "display": "none",
+          "flexDirection": "row",
+          "paddingRight": 0,
+          "width": "100%",
+        }
+      }
+    >
+      <div
+        style={
+          Object {
+            "flexGrow": 1,
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      >
+        LeftPanel
+      </div>
+      <USplit
+        shift={5}
+        split="vertical"
+      />
+    </div>
+    <SplitPane
+      allowResize={true}
+      defaultSize={200}
+      maxSize={-200}
+      minSize={100}
+      onChange={[Function]}
+      onDragFinished={[Function]}
+      onDragStarted={[Function]}
+      pane1ClassName=""
+      pane2ClassName=""
+      paneClassName=""
+      prefixer={
+        Prefixer {
+          "_browserInfo": Object {
+            "blink": true,
+            "browserName": "safari",
+            "browserVersion": NaN,
+            "cssPrefix": "-webkit-",
+            "jsPrefix": "Webkit",
+            "name": "Safari",
+            "osVersion": NaN,
+            "safari": true,
+            "x": true,
+          },
+          "_hasPropsRequiringPrefix": false,
+          "_keepUnprefixed": false,
+          "_metaData": Object {
+            "browserName": "safari",
+            "browserVersion": NaN,
+            "cssPrefix": "-webkit-",
+            "jsPrefix": "Webkit",
+            "keepUnprefixed": false,
+            "requiresPrefix": Object {},
+          },
+          "_requiresPrefix": Object {},
+          "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
+          "prefixedKeyframes": "keyframes",
+        }
+      }
+      primary="second"
+      resizerStyle={
+        Object {
+          "cursor": "row-resize",
+          "height": 10,
+          "width": "100%",
+          "zIndex": 1,
+        }
+      }
+      size={200}
+      split="horizontal"
+    >
+      <div
+        style={
+          Object {
+            "boxSizing": "border-box",
+            "height": "100%",
+            "padding": "10px 10px 2px 0",
+            "paddingTop": 10,
+            "position": "absolute",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          style={
+            Object {
+              "backgroundColor": "#FFF",
+              "border": "1px solid #ECECEC",
+              "borderRadius": 4,
+              "height": "100%",
+              "width": "100%",
+            }
+          }
+        >
+          Preview
+        </div>
+        <Dimensions
+          height={0}
+          width={0}
+        />
+      </div>
+      <div
+        style={
+          Object {
+            "alignItems": "stretch",
+            "boxSizing": "border-box",
+            "display": "flex",
+            "flexDirection": "column",
+            "height": "100%",
+            "padding": "0px 10px 10px 0",
+            "position": "absolute",
+            "width": "100%",
+          }
+        }
+      >
+        <USplit
+          shift={-5}
+          split="horizontal"
+        />
+        DownPanel
+      </div>
+    </SplitPane>
+  </SplitPane>
+</div>
+`;
diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js
index 6746dd6ee375..c8157f728d28 100755
--- a/lib/ui/src/modules/ui/components/layout/index.js
+++ b/lib/ui/src/modules/ui/components/layout/index.js
@@ -11,16 +11,16 @@ const rootStyle = {
   backgroundColor: '#F7F7F7',
 };
 
-const leftPanelStyle = leftPanelOnTop => ({
+const leftPanelStyle = (showLeftPanel, leftPanelOnTop) => ({
   width: '100%',
-  display: 'flex',
+  display: showLeftPanel ? 'flex' : 'none',
   flexDirection: leftPanelOnTop ? 'column' : 'row',
   alignItems: 'stretch',
   paddingRight: leftPanelOnTop ? 10 : 0,
 });
 
-const downPanelStyle = downPanelInRight => ({
-  display: 'flex',
+const downPanelStyle = (showDownPanel, downPanelInRight) => ({
+  display: showDownPanel ? 'flex' : 'none',
   flexDirection: downPanelInRight ? 'row' : 'column',
   alignItems: 'stretch',
   position: 'absolute',
@@ -117,8 +117,6 @@ const getSavedSizes = sizes => {
   }
 };
 
-const conditionalRender = (condition, positive, negative) => (condition ? positive() : negative());
-
 class Layout extends React.Component {
   constructor(props) {
     super(props);
@@ -201,17 +199,10 @@ class Layout extends React.Component {
           onDragFinished={onDragEnd}
           onChange={this.onResize('storiesPanel', leftPanelOnTop ? 'top' : 'left')}
         >
-          {conditionalRender(
-            showLeftPanel,
-            () => (
-              <div style={leftPanelStyle(leftPanelOnTop)}>
-                <div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{leftPanel()}</div>
-                <USplit shift={5} split={storiesSplit} />
-              </div>
-            ),
-            () => <span />
-          )}
-
+          <div style={leftPanelStyle(showLeftPanel, leftPanelOnTop)}>
+            <div style={{ flexGrow: 1, height: '100%', width: '100%' }}>{leftPanel()}</div>
+            <USplit shift={5} split={storiesSplit} />
+          </div>
           <SplitPane
             split={addonSplit}
             allowResize={showDownPanel}
@@ -236,16 +227,10 @@ class Layout extends React.Component {
               </div>
               <Dimensions {...previewPanelDimensions} />
             </div>
-            {conditionalRender(
-              showDownPanel,
-              () => (
-                <div style={downPanelStyle(downPanelInRight)}>
-                  <USplit shift={-5} split={addonSplit} />
-                  {downPanel()}
-                </div>
-              ),
-              () => <span />
-            )}
+            <div style={downPanelStyle(showDownPanel, downPanelInRight)}>
+              <USplit shift={-5} split={addonSplit} />
+              {downPanel()}
+            </div>
           </SplitPane>
         </SplitPane>
       </div>
diff --git a/lib/ui/src/modules/ui/components/layout/index.test.js b/lib/ui/src/modules/ui/components/layout/index.test.js
index 76717982f48f..808bfd4419ce 100755
--- a/lib/ui/src/modules/ui/components/layout/index.test.js
+++ b/lib/ui/src/modules/ui/components/layout/index.test.js
@@ -17,15 +17,12 @@ describe('manager.ui.components.layout.index', () => {
         />
       );
 
-      const markup = wrap.html();
-      expect(markup).toMatch(/LeftPanel/);
-      expect(markup).toMatch(/DownPanel/);
-      expect(markup).toMatch(/Preview/);
+      expect(wrap).toMatchSnapshot();
     });
   });
 
   describe('with goFullScreen=true', () => {
-    test('should only render preview', () => {
+    test('should render preview in fullscreen mode', () => {
       const wrap = shallow(
         <Layout
           goFullScreen
@@ -38,10 +35,7 @@ describe('manager.ui.components.layout.index', () => {
         />
       );
 
-      const markup = wrap.html();
-      expect(markup).not.toMatch(/LeftPanel/);
-      expect(markup).not.toMatch(/DownPanel/);
-      expect(markup).toMatch(/Preview/);
+      expect(wrap).toMatchSnapshot();
     });
   });
 
@@ -59,10 +53,7 @@ describe('manager.ui.components.layout.index', () => {
         />
       );
 
-      const markup = wrap.html();
-      expect(markup).not.toMatch(/LeftPanel/);
-      expect(markup).toMatch(/DownPanel/);
-      expect(markup).toMatch(/Preview/);
+      expect(wrap).toMatchSnapshot();
     });
   });
 
@@ -80,10 +71,7 @@ describe('manager.ui.components.layout.index', () => {
         />
       );
 
-      const markup = wrap.html();
-      expect(markup).toMatch(/LeftPanel/);
-      expect(markup).not.toMatch(/DownPanel/);
-      expect(markup).toMatch(/Preview/);
+      expect(wrap).toMatchSnapshot();
     });
   });
 });

From e97f325e051243c5585713dbf7a92d7ba00658d1 Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Sat, 18 Nov 2017 04:44:57 +0300
Subject: [PATCH 2/4] mock react-split-pane in test to avoid
 useragent-dependent snapshots

---
 .../layout/__snapshots__/index.test.js.snap   | 252 ------------------
 .../ui/components/layout/index.test.js        |   2 +
 2 files changed, 2 insertions(+), 252 deletions(-)

diff --git a/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap b/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap
index deed11e7f6b2..4bcfa34972f0 100644
--- a/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap
+++ b/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap
@@ -17,38 +17,6 @@ exports[`manager.ui.components.layout.index with default options should render p
     onChange={[Function]}
     onDragFinished={[Function]}
     onDragStarted={[Function]}
-    pane1ClassName=""
-    pane2ClassName=""
-    paneClassName=""
-    prefixer={
-      Prefixer {
-        "_browserInfo": Object {
-          "blink": true,
-          "browserName": "safari",
-          "browserVersion": NaN,
-          "cssPrefix": "-webkit-",
-          "jsPrefix": "Webkit",
-          "name": "Safari",
-          "osVersion": NaN,
-          "safari": true,
-          "x": true,
-        },
-        "_hasPropsRequiringPrefix": false,
-        "_keepUnprefixed": false,
-        "_metaData": Object {
-          "browserName": "safari",
-          "browserVersion": NaN,
-          "cssPrefix": "-webkit-",
-          "jsPrefix": "Webkit",
-          "keepUnprefixed": false,
-          "requiresPrefix": Object {},
-        },
-        "_requiresPrefix": Object {},
-        "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
-        "prefixedKeyframes": "keyframes",
-      }
-    }
-    primary="first"
     resizerStyle={
       Object {
         "cursor": "col-resize",
@@ -95,37 +63,6 @@ exports[`manager.ui.components.layout.index with default options should render p
       onChange={[Function]}
       onDragFinished={[Function]}
       onDragStarted={[Function]}
-      pane1ClassName=""
-      pane2ClassName=""
-      paneClassName=""
-      prefixer={
-        Prefixer {
-          "_browserInfo": Object {
-            "blink": true,
-            "browserName": "safari",
-            "browserVersion": NaN,
-            "cssPrefix": "-webkit-",
-            "jsPrefix": "Webkit",
-            "name": "Safari",
-            "osVersion": NaN,
-            "safari": true,
-            "x": true,
-          },
-          "_hasPropsRequiringPrefix": false,
-          "_keepUnprefixed": false,
-          "_metaData": Object {
-            "browserName": "safari",
-            "browserVersion": NaN,
-            "cssPrefix": "-webkit-",
-            "jsPrefix": "Webkit",
-            "keepUnprefixed": false,
-            "requiresPrefix": Object {},
-          },
-          "_requiresPrefix": Object {},
-          "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
-          "prefixedKeyframes": "keyframes",
-        }
-      }
       primary="second"
       resizerStyle={
         Object {
@@ -210,38 +147,6 @@ exports[`manager.ui.components.layout.index with goFullScreen=true should render
     onChange={[Function]}
     onDragFinished={[Function]}
     onDragStarted={[Function]}
-    pane1ClassName=""
-    pane2ClassName=""
-    paneClassName=""
-    prefixer={
-      Prefixer {
-        "_browserInfo": Object {
-          "blink": true,
-          "browserName": "safari",
-          "browserVersion": NaN,
-          "cssPrefix": "-webkit-",
-          "jsPrefix": "Webkit",
-          "name": "Safari",
-          "osVersion": NaN,
-          "safari": true,
-          "x": true,
-        },
-        "_hasPropsRequiringPrefix": false,
-        "_keepUnprefixed": false,
-        "_metaData": Object {
-          "browserName": "safari",
-          "browserVersion": NaN,
-          "cssPrefix": "-webkit-",
-          "jsPrefix": "Webkit",
-          "keepUnprefixed": false,
-          "requiresPrefix": Object {},
-        },
-        "_requiresPrefix": Object {},
-        "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
-        "prefixedKeyframes": "keyframes",
-      }
-    }
-    primary="first"
     resizerStyle={
       Object {
         "cursor": undefined,
@@ -288,37 +193,6 @@ exports[`manager.ui.components.layout.index with goFullScreen=true should render
       onChange={[Function]}
       onDragFinished={[Function]}
       onDragStarted={[Function]}
-      pane1ClassName=""
-      pane2ClassName=""
-      paneClassName=""
-      prefixer={
-        Prefixer {
-          "_browserInfo": Object {
-            "blink": true,
-            "browserName": "safari",
-            "browserVersion": NaN,
-            "cssPrefix": "-webkit-",
-            "jsPrefix": "Webkit",
-            "name": "Safari",
-            "osVersion": NaN,
-            "safari": true,
-            "x": true,
-          },
-          "_hasPropsRequiringPrefix": false,
-          "_keepUnprefixed": false,
-          "_metaData": Object {
-            "browserName": "safari",
-            "browserVersion": NaN,
-            "cssPrefix": "-webkit-",
-            "jsPrefix": "Webkit",
-            "keepUnprefixed": false,
-            "requiresPrefix": Object {},
-          },
-          "_requiresPrefix": Object {},
-          "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
-          "prefixedKeyframes": "keyframes",
-        }
-      }
       primary="second"
       resizerStyle={
         Object {
@@ -411,38 +285,6 @@ exports[`manager.ui.components.layout.index with showDownPanel=false should hide
     onChange={[Function]}
     onDragFinished={[Function]}
     onDragStarted={[Function]}
-    pane1ClassName=""
-    pane2ClassName=""
-    paneClassName=""
-    prefixer={
-      Prefixer {
-        "_browserInfo": Object {
-          "blink": true,
-          "browserName": "safari",
-          "browserVersion": NaN,
-          "cssPrefix": "-webkit-",
-          "jsPrefix": "Webkit",
-          "name": "Safari",
-          "osVersion": NaN,
-          "safari": true,
-          "x": true,
-        },
-        "_hasPropsRequiringPrefix": false,
-        "_keepUnprefixed": false,
-        "_metaData": Object {
-          "browserName": "safari",
-          "browserVersion": NaN,
-          "cssPrefix": "-webkit-",
-          "jsPrefix": "Webkit",
-          "keepUnprefixed": false,
-          "requiresPrefix": Object {},
-        },
-        "_requiresPrefix": Object {},
-        "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
-        "prefixedKeyframes": "keyframes",
-      }
-    }
-    primary="first"
     resizerStyle={
       Object {
         "cursor": "col-resize",
@@ -489,37 +331,6 @@ exports[`manager.ui.components.layout.index with showDownPanel=false should hide
       onChange={[Function]}
       onDragFinished={[Function]}
       onDragStarted={[Function]}
-      pane1ClassName=""
-      pane2ClassName=""
-      paneClassName=""
-      prefixer={
-        Prefixer {
-          "_browserInfo": Object {
-            "blink": true,
-            "browserName": "safari",
-            "browserVersion": NaN,
-            "cssPrefix": "-webkit-",
-            "jsPrefix": "Webkit",
-            "name": "Safari",
-            "osVersion": NaN,
-            "safari": true,
-            "x": true,
-          },
-          "_hasPropsRequiringPrefix": false,
-          "_keepUnprefixed": false,
-          "_metaData": Object {
-            "browserName": "safari",
-            "browserVersion": NaN,
-            "cssPrefix": "-webkit-",
-            "jsPrefix": "Webkit",
-            "keepUnprefixed": false,
-            "requiresPrefix": Object {},
-          },
-          "_requiresPrefix": Object {},
-          "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
-          "prefixedKeyframes": "keyframes",
-        }
-      }
       primary="second"
       resizerStyle={
         Object {
@@ -604,38 +415,6 @@ exports[`manager.ui.components.layout.index with showLeftPanel=false should hide
     onChange={[Function]}
     onDragFinished={[Function]}
     onDragStarted={[Function]}
-    pane1ClassName=""
-    pane2ClassName=""
-    paneClassName=""
-    prefixer={
-      Prefixer {
-        "_browserInfo": Object {
-          "blink": true,
-          "browserName": "safari",
-          "browserVersion": NaN,
-          "cssPrefix": "-webkit-",
-          "jsPrefix": "Webkit",
-          "name": "Safari",
-          "osVersion": NaN,
-          "safari": true,
-          "x": true,
-        },
-        "_hasPropsRequiringPrefix": false,
-        "_keepUnprefixed": false,
-        "_metaData": Object {
-          "browserName": "safari",
-          "browserVersion": NaN,
-          "cssPrefix": "-webkit-",
-          "jsPrefix": "Webkit",
-          "keepUnprefixed": false,
-          "requiresPrefix": Object {},
-        },
-        "_requiresPrefix": Object {},
-        "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
-        "prefixedKeyframes": "keyframes",
-      }
-    }
-    primary="first"
     resizerStyle={
       Object {
         "cursor": undefined,
@@ -682,37 +461,6 @@ exports[`manager.ui.components.layout.index with showLeftPanel=false should hide
       onChange={[Function]}
       onDragFinished={[Function]}
       onDragStarted={[Function]}
-      pane1ClassName=""
-      pane2ClassName=""
-      paneClassName=""
-      prefixer={
-        Prefixer {
-          "_browserInfo": Object {
-            "blink": true,
-            "browserName": "safari",
-            "browserVersion": NaN,
-            "cssPrefix": "-webkit-",
-            "jsPrefix": "Webkit",
-            "name": "Safari",
-            "osVersion": NaN,
-            "safari": true,
-            "x": true,
-          },
-          "_hasPropsRequiringPrefix": false,
-          "_keepUnprefixed": false,
-          "_metaData": Object {
-            "browserName": "safari",
-            "browserVersion": NaN,
-            "cssPrefix": "-webkit-",
-            "jsPrefix": "Webkit",
-            "keepUnprefixed": false,
-            "requiresPrefix": Object {},
-          },
-          "_requiresPrefix": Object {},
-          "_userAgent": "Node.js (darwin; U; rv:v8.7.0) AppleWebKit/537.36 (KHTML, like Gecko)",
-          "prefixedKeyframes": "keyframes",
-        }
-      }
       primary="second"
       resizerStyle={
         Object {
diff --git a/lib/ui/src/modules/ui/components/layout/index.test.js b/lib/ui/src/modules/ui/components/layout/index.test.js
index 808bfd4419ce..42a40b985afc 100755
--- a/lib/ui/src/modules/ui/components/layout/index.test.js
+++ b/lib/ui/src/modules/ui/components/layout/index.test.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Layout from './index';
 
+jest.mock('react-split-pane', () => function SplitPane() {});
+
 describe('manager.ui.components.layout.index', () => {
   describe('with default options', () => {
     test('should render provided components', () => {

From ef947ad1e9e5e0b5e95689db97bc51a6c9cf6d67 Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Thu, 23 Nov 2017 19:44:23 +0300
Subject: [PATCH 3/4] Update test snapshot

---
 .../ui/components/layout/__snapshots__/index.test.js.snap       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap b/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap
index 4bcfa34972f0..b11515569690 100644
--- a/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap
+++ b/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap
@@ -220,6 +220,7 @@ exports[`manager.ui.components.layout.index with goFullScreen=true should render
         <div
           style={
             Object {
+              "WebkitOverflowScrolling": "touch",
               "backgroundColor": "#FFF",
               "border": 0,
               "height": "100%",
@@ -230,7 +231,6 @@ exports[`manager.ui.components.layout.index with goFullScreen=true should render
               "position": "fixed",
               "right": "0px",
               "top": "0px",
-              "webkitOverflowScrolling": "touch",
               "width": "100%",
               "zIndex": 1,
             }

From 2af6fa103af9b19fd1b6b56c594d333a568619f6 Mon Sep 17 00:00:00 2001
From: hypnos <Filipp.Riabchun@jetbrains.com>
Date: Fri, 24 Nov 2017 01:51:30 +0300
Subject: [PATCH 4/4] Test styles directly instead of using snapshots

---
 .../layout/__snapshots__/index.test.js.snap   | 529 ------------------
 .../ui/components/layout/index.test.js        |  60 +-
 2 files changed, 43 insertions(+), 546 deletions(-)
 delete mode 100644 lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap

diff --git a/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap b/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap
deleted file mode 100644
index b11515569690..000000000000
--- a/lib/ui/src/modules/ui/components/layout/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,529 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`manager.ui.components.layout.index with default options should render provided components 1`] = `
-<div
-  style={
-    Object {
-      "backgroundColor": "#F7F7F7",
-      "height": "100vh",
-    }
-  }
->
-  <SplitPane
-    allowResize={true}
-    defaultSize={250}
-    maxSize={-400}
-    minSize={150}
-    onChange={[Function]}
-    onDragFinished={[Function]}
-    onDragStarted={[Function]}
-    resizerStyle={
-      Object {
-        "cursor": "col-resize",
-        "height": "auto",
-        "width": 10,
-        "zIndex": 1,
-      }
-    }
-    size={250}
-    split="vertical"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "stretch",
-          "display": "flex",
-          "flexDirection": "row",
-          "paddingRight": 0,
-          "width": "100%",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "flexGrow": 1,
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      >
-        LeftPanel
-      </div>
-      <USplit
-        shift={5}
-        split="vertical"
-      />
-    </div>
-    <SplitPane
-      allowResize={true}
-      defaultSize={200}
-      maxSize={-200}
-      minSize={100}
-      onChange={[Function]}
-      onDragFinished={[Function]}
-      onDragStarted={[Function]}
-      primary="second"
-      resizerStyle={
-        Object {
-          "cursor": "row-resize",
-          "height": 10,
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-      size={200}
-      split="horizontal"
-    >
-      <div
-        style={
-          Object {
-            "boxSizing": "border-box",
-            "height": "100%",
-            "padding": "10px 10px 2px 0",
-            "paddingTop": 10,
-            "position": "absolute",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "backgroundColor": "#FFF",
-              "border": "1px solid #ECECEC",
-              "borderRadius": 4,
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-        >
-          Preview
-        </div>
-        <Dimensions
-          height={0}
-          width={0}
-        />
-      </div>
-      <div
-        style={
-          Object {
-            "alignItems": "stretch",
-            "boxSizing": "border-box",
-            "display": "flex",
-            "flexDirection": "column",
-            "height": "100%",
-            "padding": "0px 10px 10px 0",
-            "position": "absolute",
-            "width": "100%",
-          }
-        }
-      >
-        <USplit
-          shift={-5}
-          split="horizontal"
-        />
-        DownPanel
-      </div>
-    </SplitPane>
-  </SplitPane>
-</div>
-`;
-
-exports[`manager.ui.components.layout.index with goFullScreen=true should render preview in fullscreen mode 1`] = `
-<div
-  style={
-    Object {
-      "backgroundColor": "#F7F7F7",
-      "height": "100vh",
-    }
-  }
->
-  <SplitPane
-    allowResize={false}
-    defaultSize={250}
-    maxSize={-400}
-    minSize={150}
-    onChange={[Function]}
-    onDragFinished={[Function]}
-    onDragStarted={[Function]}
-    resizerStyle={
-      Object {
-        "cursor": undefined,
-        "height": "auto",
-        "width": 10,
-        "zIndex": 1,
-      }
-    }
-    size={1}
-    split="vertical"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "stretch",
-          "display": "none",
-          "flexDirection": "row",
-          "paddingRight": 0,
-          "width": "100%",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "flexGrow": 1,
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      >
-        LeftPanel
-      </div>
-      <USplit
-        shift={5}
-        split="vertical"
-      />
-    </div>
-    <SplitPane
-      allowResize={false}
-      defaultSize={200}
-      maxSize={-200}
-      minSize={100}
-      onChange={[Function]}
-      onDragFinished={[Function]}
-      onDragStarted={[Function]}
-      primary="second"
-      resizerStyle={
-        Object {
-          "cursor": undefined,
-          "height": 10,
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-      size={1}
-      split="horizontal"
-    >
-      <div
-        style={
-          Object {
-            "boxSizing": "border-box",
-            "height": "100%",
-            "padding": "10px 10px 2px 0",
-            "paddingTop": 10,
-            "position": "absolute",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "WebkitOverflowScrolling": "touch",
-              "backgroundColor": "#FFF",
-              "border": 0,
-              "height": "100%",
-              "left": "0px",
-              "margin": 0,
-              "overflow": "auto",
-              "padding": 0,
-              "position": "fixed",
-              "right": "0px",
-              "top": "0px",
-              "width": "100%",
-              "zIndex": 1,
-            }
-          }
-        >
-          Preview
-        </div>
-        <Dimensions
-          height={0}
-          width={0}
-        />
-      </div>
-      <div
-        style={
-          Object {
-            "alignItems": "stretch",
-            "boxSizing": "border-box",
-            "display": "none",
-            "flexDirection": "column",
-            "height": "100%",
-            "padding": "0px 10px 10px 0",
-            "position": "absolute",
-            "width": "100%",
-          }
-        }
-      >
-        <USplit
-          shift={-5}
-          split="horizontal"
-        />
-        DownPanel
-      </div>
-    </SplitPane>
-  </SplitPane>
-</div>
-`;
-
-exports[`manager.ui.components.layout.index with showDownPanel=false should hide the downPanel 1`] = `
-<div
-  style={
-    Object {
-      "backgroundColor": "#F7F7F7",
-      "height": "100vh",
-    }
-  }
->
-  <SplitPane
-    allowResize={true}
-    defaultSize={250}
-    maxSize={-400}
-    minSize={150}
-    onChange={[Function]}
-    onDragFinished={[Function]}
-    onDragStarted={[Function]}
-    resizerStyle={
-      Object {
-        "cursor": "col-resize",
-        "height": "auto",
-        "width": 10,
-        "zIndex": 1,
-      }
-    }
-    size={250}
-    split="vertical"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "stretch",
-          "display": "flex",
-          "flexDirection": "row",
-          "paddingRight": 0,
-          "width": "100%",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "flexGrow": 1,
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      >
-        LeftPanel
-      </div>
-      <USplit
-        shift={5}
-        split="vertical"
-      />
-    </div>
-    <SplitPane
-      allowResize={false}
-      defaultSize={200}
-      maxSize={-200}
-      minSize={100}
-      onChange={[Function]}
-      onDragFinished={[Function]}
-      onDragStarted={[Function]}
-      primary="second"
-      resizerStyle={
-        Object {
-          "cursor": undefined,
-          "height": 10,
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-      size={1}
-      split="horizontal"
-    >
-      <div
-        style={
-          Object {
-            "boxSizing": "border-box",
-            "height": "100%",
-            "padding": "10px 10px 2px 0",
-            "paddingTop": 10,
-            "position": "absolute",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "backgroundColor": "#FFF",
-              "border": "1px solid #ECECEC",
-              "borderRadius": 4,
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-        >
-          Preview
-        </div>
-        <Dimensions
-          height={0}
-          width={0}
-        />
-      </div>
-      <div
-        style={
-          Object {
-            "alignItems": "stretch",
-            "boxSizing": "border-box",
-            "display": "none",
-            "flexDirection": "column",
-            "height": "100%",
-            "padding": "0px 10px 10px 0",
-            "position": "absolute",
-            "width": "100%",
-          }
-        }
-      >
-        <USplit
-          shift={-5}
-          split="horizontal"
-        />
-        DownPanel
-      </div>
-    </SplitPane>
-  </SplitPane>
-</div>
-`;
-
-exports[`manager.ui.components.layout.index with showLeftPanel=false should hide the leftPanel 1`] = `
-<div
-  style={
-    Object {
-      "backgroundColor": "#F7F7F7",
-      "height": "100vh",
-    }
-  }
->
-  <SplitPane
-    allowResize={false}
-    defaultSize={250}
-    maxSize={-400}
-    minSize={150}
-    onChange={[Function]}
-    onDragFinished={[Function]}
-    onDragStarted={[Function]}
-    resizerStyle={
-      Object {
-        "cursor": undefined,
-        "height": "auto",
-        "width": 10,
-        "zIndex": 1,
-      }
-    }
-    size={1}
-    split="vertical"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "stretch",
-          "display": "none",
-          "flexDirection": "row",
-          "paddingRight": 0,
-          "width": "100%",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "flexGrow": 1,
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      >
-        LeftPanel
-      </div>
-      <USplit
-        shift={5}
-        split="vertical"
-      />
-    </div>
-    <SplitPane
-      allowResize={true}
-      defaultSize={200}
-      maxSize={-200}
-      minSize={100}
-      onChange={[Function]}
-      onDragFinished={[Function]}
-      onDragStarted={[Function]}
-      primary="second"
-      resizerStyle={
-        Object {
-          "cursor": "row-resize",
-          "height": 10,
-          "width": "100%",
-          "zIndex": 1,
-        }
-      }
-      size={200}
-      split="horizontal"
-    >
-      <div
-        style={
-          Object {
-            "boxSizing": "border-box",
-            "height": "100%",
-            "padding": "10px 10px 2px 0",
-            "paddingTop": 10,
-            "position": "absolute",
-            "width": "100%",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "backgroundColor": "#FFF",
-              "border": "1px solid #ECECEC",
-              "borderRadius": 4,
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-        >
-          Preview
-        </div>
-        <Dimensions
-          height={0}
-          width={0}
-        />
-      </div>
-      <div
-        style={
-          Object {
-            "alignItems": "stretch",
-            "boxSizing": "border-box",
-            "display": "flex",
-            "flexDirection": "column",
-            "height": "100%",
-            "padding": "0px 10px 10px 0",
-            "position": "absolute",
-            "width": "100%",
-          }
-        }
-      >
-        <USplit
-          shift={-5}
-          split="horizontal"
-        />
-        DownPanel
-      </div>
-    </SplitPane>
-  </SplitPane>
-</div>
-`;
diff --git a/lib/ui/src/modules/ui/components/layout/index.test.js b/lib/ui/src/modules/ui/components/layout/index.test.js
index 42a40b985afc..caa2a1ba4e56 100755
--- a/lib/ui/src/modules/ui/components/layout/index.test.js
+++ b/lib/ui/src/modules/ui/components/layout/index.test.js
@@ -2,7 +2,15 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Layout from './index';
 
-jest.mock('react-split-pane', () => function SplitPane() {});
+const LeftPanel = () => null;
+const DownPanel = () => null;
+const Preview = () => null;
+
+const hides = (wrap, Component) =>
+  wrap
+    .find(Component)
+    .parents('[style]')
+    .someWhere(parent => parent.prop('style').display === 'none');
 
 describe('manager.ui.components.layout.index', () => {
   describe('with default options', () => {
@@ -13,13 +21,15 @@ describe('manager.ui.components.layout.index', () => {
           showDownPanel
           goFullScreen={false}
           downPanelInRight={false}
-          leftPanel={() => 'LeftPanel'}
-          downPanel={() => 'DownPanel'}
-          preview={() => 'Preview'}
+          leftPanel={() => <LeftPanel />}
+          downPanel={() => <DownPanel />}
+          preview={() => <Preview />}
         />
       );
 
-      expect(wrap).toMatchSnapshot();
+      expect(hides(wrap, LeftPanel)).toBe(false);
+      expect(hides(wrap, DownPanel)).toBe(false);
+      expect(hides(wrap, Preview)).toBe(false);
     });
   });
 
@@ -31,13 +41,25 @@ describe('manager.ui.components.layout.index', () => {
           showDownPanel={false}
           showLeftPanel={false}
           downPanelInRight={false}
-          leftPanel={() => 'LeftPanel'}
-          downPanel={() => 'DownPanel'}
-          preview={() => 'Preview'}
+          leftPanel={() => <LeftPanel />}
+          downPanel={() => <DownPanel />}
+          preview={() => <Preview />}
         />
       );
 
-      expect(wrap).toMatchSnapshot();
+      expect(hides(wrap, Preview)).toBe(false);
+
+      const previewParentStyle = wrap
+        .find(Preview)
+        .parent()
+        .prop('style');
+      expect(previewParentStyle).toMatchObject({
+        position: 'fixed',
+        left: '0px',
+        right: '0px',
+        top: '0px',
+        zIndex: 1,
+      });
     });
   });
 
@@ -49,13 +71,15 @@ describe('manager.ui.components.layout.index', () => {
           showDownPanel
           downPanelInRight={false}
           goFullScreen={false}
-          leftPanel={() => 'LeftPanel'}
-          downPanel={() => 'DownPanel'}
-          preview={() => 'Preview'}
+          leftPanel={() => <LeftPanel />}
+          downPanel={() => <DownPanel />}
+          preview={() => <Preview />}
         />
       );
 
-      expect(wrap).toMatchSnapshot();
+      expect(hides(wrap, LeftPanel)).toBe(true);
+      expect(hides(wrap, DownPanel)).toBe(false);
+      expect(hides(wrap, Preview)).toBe(false);
     });
   });
 
@@ -67,13 +91,15 @@ describe('manager.ui.components.layout.index', () => {
           showDownPanel={false}
           goFullScreen={false}
           downPanelInRight={false}
-          leftPanel={() => 'LeftPanel'}
-          downPanel={() => 'DownPanel'}
-          preview={() => 'Preview'}
+          leftPanel={() => <LeftPanel />}
+          downPanel={() => <DownPanel />}
+          preview={() => <Preview />}
         />
       );
 
-      expect(wrap).toMatchSnapshot();
+      expect(hides(wrap, LeftPanel)).toBe(false);
+      expect(hides(wrap, DownPanel)).toBe(true);
+      expect(hides(wrap, Preview)).toBe(false);
     });
   });
 });