// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`LegacyTreeComponent renders a simple tree 1`] = `
<div
  className="treeComponent tree"
  role="tree"
>
  <LegacyTreeNodeComponent
    generation={0}
    node={
      {
        "children": [
          {
            "children": [
              {
                "label": "ZgrandChild11",
              },
              {
                "label": "AgrandChild12",
              },
            ],
            "label": "Bchild1",
          },
          {
            "label": "2child2",
          },
        ],
        "label": "root",
      }
    }
    paddingLeft={0}
  />
</div>
`;

exports[`LegacyTreeNodeComponent does not render children by default 1`] = `
<div
  className=" main2 nodeItem "
  data-test="Tree/TreeNode:label"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="treeitem"
>
  <div
    className="treeNodeHeader "
    data-test="Tree/TreeNode/Header:label"
    style={
      {
        "paddingLeft": 9,
      }
    }
    tabIndex={-1}
  >
    <img
      alt="label branch is collapsed"
      className="expandCollapseIcon"
      onKeyPress={[Function]}
      role="button"
      src={{}}
      tabIndex={0}
    />
    <span
      className="nodeLabel"
      title="label"
    >
      label
    </span>
  </div>
  <div
    className="loadingIconContainer"
  >
    <img
      className="loadingIcon"
      hidden={true}
      src=""
    />
  </div>
  <AnimateHeight
    animateOpacity={false}
    animationStateClasses={
      {
        "animating": "rah-animating",
        "animatingDown": "rah-animating--down",
        "animatingToHeightAuto": "rah-animating--to-height-auto",
        "animatingToHeightSpecific": "rah-animating--to-height-specific",
        "animatingToHeightZero": "rah-animating--to-height-zero",
        "animatingUp": "rah-animating--up",
        "static": "rah-static",
        "staticHeightAuto": "rah-static--height-auto",
        "staticHeightSpecific": "rah-static--height-specific",
        "staticHeightZero": "rah-static--height-zero",
      }
    }
    applyInlineTransitions={true}
    delay={0}
    duration={200}
    easing="ease"
    height={0}
    style={{}}
  >
    <div
      className="nodeChildren"
      data-test="label"
      role="group"
    >
      <LegacyTreeNodeComponent
        generation={3}
        key="Bchild1-3-undefined"
        node={
          {
            "children": [
              {
                "label": "ZgrandChild11",
              },
              {
                "label": "AgrandChild12",
              },
            ],
            "label": "Bchild1",
          }
        }
        paddingLeft={32}
      />
      <LegacyTreeNodeComponent
        generation={3}
        key="2child2-3-undefined"
        node={
          {
            "label": "2child2",
          }
        }
        paddingLeft={54}
      />
    </div>
  </AnimateHeight>
</div>
`;

exports[`LegacyTreeNodeComponent renders a simple node (sorted children, expanded) 1`] = `
<div
  className="nodeClassname main12 nodeItem "
  data-test="Tree/TreeNode:label"
  id="id"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="treeitem"
>
  <div
    className="treeNodeHeader "
    data-test="Tree/TreeNode/Header:label"
    style={
      {
        "paddingLeft": 23,
      }
    }
    tabIndex={-1}
  >
    <img
      alt="label branch is expanded"
      className="expandCollapseIcon"
      onKeyPress={[Function]}
      role="button"
      src={{}}
      tabIndex={0}
    />
    <span
      className="nodeLabel"
      title="label"
    >
      label
    </span>
    <div
      onContextMenu={[Function]}
      onKeyPress={[Function]}
    >
      <CustomizedIconButton
        ariaLabel="More options"
        className="treeMenuEllipsis"
        menuIconProps={
          {
            "iconName": "More",
            "styles": {
              "root": {
                "fontSize": "18px",
                "fontWeight": "bold",
              },
            },
          }
        }
        menuProps={
          {
            "contextualMenuItemAs": [Function],
            "coverTarget": true,
            "directionalHint": 3,
            "isBeakVisible": false,
            "items": [
              {
                "className": undefined,
                "disabled": true,
                "key": "menuLabel",
                "onClick": [Function],
                "onRenderIcon": [Function],
                "text": "menuLabel",
              },
            ],
            "onMenuDismissed": [Function],
            "onMenuOpened": [Function],
          }
        }
        name="More"
        styles={
          {
            "rootFocused": {
              "outline": "1px dashed undefined",
            },
          }
        }
        title="More"
      />
    </div>
  </div>
  <div
    className="loadingIconContainer"
  >
    <img
      className="loadingIcon"
      hidden={true}
      src=""
    />
  </div>
  <AnimateHeight
    animateOpacity={false}
    animationStateClasses={
      {
        "animating": "rah-animating",
        "animatingDown": "rah-animating--down",
        "animatingToHeightAuto": "rah-animating--to-height-auto",
        "animatingToHeightSpecific": "rah-animating--to-height-specific",
        "animatingToHeightZero": "rah-animating--to-height-zero",
        "animatingUp": "rah-animating--up",
        "static": "rah-static",
        "staticHeightAuto": "rah-static--height-auto",
        "staticHeightSpecific": "rah-static--height-specific",
        "staticHeightZero": "rah-static--height-zero",
      }
    }
    applyInlineTransitions={true}
    delay={0}
    duration={200}
    easing="ease"
    height="auto"
    style={{}}
  >
    <div
      className="nodeChildren"
      data-test="label"
      role="group"
    >
      <LegacyTreeNodeComponent
        generation={13}
        key="2child2-13-undefined"
        node={
          {
            "label": "2child2",
          }
        }
        paddingLeft={214}
      />
      <LegacyTreeNodeComponent
        generation={13}
        key="Bchild1-13-undefined"
        node={
          {
            "children": [
              {
                "label": "ZgrandChild11",
              },
              {
                "label": "AgrandChild12",
              },
            ],
            "label": "Bchild1",
          }
        }
        paddingLeft={192}
      />
    </div>
  </AnimateHeight>
</div>
`;

exports[`LegacyTreeNodeComponent renders loading icon 1`] = `
<div
  className=" main2 nodeItem "
  data-test="Tree/TreeNode:label"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="treeitem"
>
  <div
    className="treeNodeHeader "
    data-test="Tree/TreeNode/Header:label"
    style={
      {
        "paddingLeft": 9,
      }
    }
    tabIndex={-1}
  >
    <img
      alt="label branch is expanded"
      className="expandCollapseIcon"
      onKeyPress={[Function]}
      role="button"
      src={{}}
      tabIndex={0}
    />
    <span
      className="nodeLabel"
      title="label"
    >
      label
    </span>
  </div>
  <div
    className="loadingIconContainer"
  >
    <img
      className="loadingIcon"
      hidden={true}
      src=""
    />
  </div>
  <AnimateHeight
    animateOpacity={false}
    animationStateClasses={
      {
        "animating": "rah-animating",
        "animatingDown": "rah-animating--down",
        "animatingToHeightAuto": "rah-animating--to-height-auto",
        "animatingToHeightSpecific": "rah-animating--to-height-specific",
        "animatingToHeightZero": "rah-animating--to-height-zero",
        "animatingUp": "rah-animating--up",
        "static": "rah-static",
        "staticHeightAuto": "rah-static--height-auto",
        "staticHeightSpecific": "rah-static--height-specific",
        "staticHeightZero": "rah-static--height-zero",
      }
    }
    applyInlineTransitions={true}
    delay={0}
    duration={200}
    easing="ease"
    height="auto"
    style={{}}
  >
    <div
      className="nodeChildren"
      data-test="label"
      role="group"
    />
  </AnimateHeight>
</div>
`;

exports[`LegacyTreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
<div
  className="nodeClassname main12 nodeItem "
  data-test="Tree/TreeNode:label"
  id="id"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="treeitem"
>
  <div
    className="treeNodeHeader "
    data-test="Tree/TreeNode/Header:label"
    style={
      {
        "paddingLeft": 23,
      }
    }
    tabIndex={-1}
  >
    <img
      alt="label branch is expanded"
      className="expandCollapseIcon"
      onKeyPress={[Function]}
      role="button"
      src={{}}
      tabIndex={0}
    />
    <span
      className="nodeLabel"
      title="label"
    >
      label
    </span>
    <div
      onContextMenu={[Function]}
      onKeyPress={[Function]}
    >
      <CustomizedIconButton
        ariaLabel="More options"
        className="treeMenuEllipsis"
        menuIconProps={
          {
            "iconName": "More",
            "styles": {
              "root": {
                "fontSize": "18px",
                "fontWeight": "bold",
              },
            },
          }
        }
        menuProps={
          {
            "contextualMenuItemAs": [Function],
            "coverTarget": true,
            "directionalHint": 3,
            "isBeakVisible": false,
            "items": [],
            "onMenuDismissed": [Function],
            "onMenuOpened": [Function],
          }
        }
        name="More"
        styles={
          {
            "rootFocused": {
              "outline": "1px dashed undefined",
            },
          }
        }
        title="More"
      />
    </div>
  </div>
  <div
    className="loadingIconContainer"
  >
    <img
      className="loadingIcon"
      hidden={true}
      src=""
    />
  </div>
  <AnimateHeight
    animateOpacity={false}
    animationStateClasses={
      {
        "animating": "rah-animating",
        "animatingDown": "rah-animating--down",
        "animatingToHeightAuto": "rah-animating--to-height-auto",
        "animatingToHeightSpecific": "rah-animating--to-height-specific",
        "animatingToHeightZero": "rah-animating--to-height-zero",
        "animatingUp": "rah-animating--up",
        "static": "rah-static",
        "staticHeightAuto": "rah-static--height-auto",
        "staticHeightSpecific": "rah-static--height-specific",
        "staticHeightZero": "rah-static--height-zero",
      }
    }
    applyInlineTransitions={true}
    delay={0}
    duration={200}
    easing="ease"
    height="auto"
    style={{}}
  >
    <div
      className="nodeChildren"
      data-test="label"
      role="group"
    >
      <LegacyTreeNodeComponent
        generation={13}
        key="bchild-13-undefined"
        node={
          {
            "children": [
              {
                "label": "ZgrandChild11",
              },
              {
                "label": "AgrandChild12",
              },
            ],
            "label": "bchild",
          }
        }
        paddingLeft={192}
      />
      <LegacyTreeNodeComponent
        generation={13}
        key="dchild-13-undefined"
        node={
          {
            "children": [
              {
                "label": "ZgrandChild11",
              },
              {
                "label": "AgrandChild12",
              },
            ],
            "label": "dchild",
          }
        }
        paddingLeft={192}
      />
      <LegacyTreeNodeComponent
        generation={13}
        key="aChild-13-undefined"
        node={
          {
            "label": "aChild",
          }
        }
        paddingLeft={214}
      />
      <LegacyTreeNodeComponent
        generation={13}
        key="cchild-13-undefined"
        node={
          {
            "label": "cchild",
          }
        }
        paddingLeft={214}
      />
    </div>
  </AnimateHeight>
</div>
`;

exports[`LegacyTreeNodeComponent renders unsorted children by default 1`] = `
<div
  className=" main2 nodeItem "
  data-test="Tree/TreeNode:label"
  onClick={[Function]}
  onKeyPress={[Function]}
  role="treeitem"
>
  <div
    className="treeNodeHeader "
    data-test="Tree/TreeNode/Header:label"
    style={
      {
        "paddingLeft": 9,
      }
    }
    tabIndex={-1}
  >
    <img
      alt="label branch is expanded"
      className="expandCollapseIcon"
      onKeyPress={[Function]}
      role="button"
      src={{}}
      tabIndex={0}
    />
    <span
      className="nodeLabel"
      title="label"
    >
      label
    </span>
  </div>
  <div
    className="loadingIconContainer"
  >
    <img
      className="loadingIcon"
      hidden={true}
      src=""
    />
  </div>
  <AnimateHeight
    animateOpacity={false}
    animationStateClasses={
      {
        "animating": "rah-animating",
        "animatingDown": "rah-animating--down",
        "animatingToHeightAuto": "rah-animating--to-height-auto",
        "animatingToHeightSpecific": "rah-animating--to-height-specific",
        "animatingToHeightZero": "rah-animating--to-height-zero",
        "animatingUp": "rah-animating--up",
        "static": "rah-static",
        "staticHeightAuto": "rah-static--height-auto",
        "staticHeightSpecific": "rah-static--height-specific",
        "staticHeightZero": "rah-static--height-zero",
      }
    }
    applyInlineTransitions={true}
    delay={0}
    duration={200}
    easing="ease"
    height="auto"
    style={{}}
  >
    <div
      className="nodeChildren"
      data-test="label"
      role="group"
    >
      <LegacyTreeNodeComponent
        generation={3}
        key="Bchild1-3-undefined"
        node={
          {
            "children": [
              {
                "label": "ZgrandChild11",
              },
              {
                "label": "AgrandChild12",
              },
            ],
            "label": "Bchild1",
          }
        }
        paddingLeft={32}
      />
      <LegacyTreeNodeComponent
        generation={3}
        key="2child2-3-undefined"
        node={
          {
            "label": "2child2",
          }
        }
        paddingLeft={54}
      />
    </div>
  </AnimateHeight>
</div>
`;
