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

exports[`renders deepest comment with link 1`] = `
<div
  className="coral coral-comment"
  data-testid="comment-comment-with-deepest-replies-3"
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-full"
  >
    <div
      className="Indent-root"
    >
      <div
        className="Indent-level3 coral coral-indent-3"
      >
        <div
          className="Box-root HorizontalGutter-root Comment-root HorizontalGutter-half"
          role="article"
        >
          <div
            className="Box-root Flex-root coral coral-comment-topBar Flex-flex Flex-justifySpaceBetween Flex-directionRow"
          >
            <div
              className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn gutter"
            >
              <div
                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
              >
                <div
                  className="Popover-root"
                >
                  <button
                    aria-controls="username-popover-comment-with-deepest-replies-3"
                    className="BaseButton-root coral coral-username coral-comment-username"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    <span
                      className="Box-root Typography-root Typography-heading3 Typography-colorTextDark Username-root"
                    >
                      Markus
                    </span>
                  </button>
                  <div
                    aria-hidden={true}
                    aria-labelledby="username-popover-comment-with-deepest-replies-3-ariainfo"
                    id="username-popover-comment-with-deepest-replies-3"
                    role="dialog"
                  >
                    <div
                      className="AriaInfo-root"
                      id="username-popover-comment-with-deepest-replies-3-ariainfo"
                    >
                      A popover with more user information
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignBaseline Flex-directionRow gutter"
              >
                <button
                  className="BaseButton-root Timestamp-root"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <time
                    className="RelativeTime-root Timestamp-text coral coral-timestamp coral-comment-timestamp"
                    dateTime="2018-07-06T18:24:00.000Z"
                    title="2018-07-06T18:24:00.000Z"
                  >
                    2018-07-06T18:24:00.000Z
                  </time>
                </button>
              </div>
            </div>
            <div>
              <div
                className="Box-root Flex-root Flex-flex Flex-itemGutter Flex-alignCenter gutter"
              />
            </div>
          </div>
          <div
            className="Comment-subBar"
          >
            <div
              className="Box-root Flex-root coral coral-comment-inReplyTo Flex-flex Flex-alignCenter"
            >
              <i
                aria-hidden="true"
                className="Icon-root Icon-sm InReplyTo-icon"
              >
                reply
              </i>
              <span>
                 
              </span>
              <span
                className="Box-root Typography-root Typography-timestamp Typography-colorTextPrimary InReplyTo-inReplyTo coral coral-comment-inReplyToText"
              >
                In reply to 
                <span
                  className="Box-root Typography-root Typography-heading4 Typography-colorTextDark InReplyTo-username coral coral-comment-inReplyToUsername"
                >
                  Markus
                </span>
              </span>
            </div>
          </div>
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
          >
            <div
              className="HTMLContent-root coral coral-content coral-comment-content"
              dangerouslySetInnerHTML={
                Object {
                  "__html": "body 3",
                }
              }
            />
            <div
              className="Box-root Flex-root coral coral-comment-actionBar Flex-flex Flex-justifySpaceBetween"
            >
              <div
                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
              >
                <button
                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-reactButton coral-comment-reactButton ReactionButton-button"
                  data-color="primary"
                  data-variant="textUnderlined"
                  disabled={false}
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span>
                    Respect
                  </span>
                </button>
                <button
                  className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-replyButton"
                  data-active={false}
                  data-color="primary"
                  data-variant="textUnderlined"
                  disabled={false}
                  id="comments-commentContainer-replyButton-comment-with-deepest-replies-3"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span>
                    Reply
                  </span>
                </button>
                <div
                  className="Popover-root"
                >
                  <button
                    aria-controls="permalink-popover-comment-with-deepest-replies-3"
                    className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantTextUnderlined coral coral-comment-shareButton"
                    data-active={false}
                    data-color="primary"
                    data-variant="textUnderlined"
                    onBlur={[Function]}
                    onClick={[Function]}
                    onFocus={[Function]}
                    onMouseOut={[Function]}
                    onMouseOver={[Function]}
                    onTouchEnd={[Function]}
                    type="button"
                  >
                    <span>
                      Share
                    </span>
                  </button>
                  <div
                    aria-hidden={true}
                    aria-labelledby="permalink-popover-comment-with-deepest-replies-3-ariainfo"
                    id="permalink-popover-comment-with-deepest-replies-3"
                    role="dialog"
                  >
                    <div
                      className="AriaInfo-root"
                      id="permalink-popover-comment-with-deepest-replies-3-ariainfo"
                    >
                      A dialog showing a permalink to the comment
                    </div>
                  </div>
                </div>
              </div>
              <div
                className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-alignCenter Flex-directionRow gutter"
              >
                <button
                  className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                  data-color="error"
                  data-variant="textUnderlined"
                  disabled={false}
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span>
                    Report
                  </span>
                </button>
              </div>
            </div>
            <a
              className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined coral coral-comment-readMoreOfConveration"
              data-color="primary"
              data-variant="underlined"
              href="http://localhost/stories/story-with-replies?commentID=comment-with-deepest-replies-3"
              id="comments-commentContainer-showConversation-comment-with-deepest-replies-3"
              onBlur={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
              onMouseOut={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              target="_parent"
              type="button"
            >
              Read More of this Conversation &gt;
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
