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

exports[`post a reply: open reply form 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 Button-active coral coral-comment-replyButton"
                  data-active={true}
                  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"
              >
                <div
                  className="Popover-root"
                >
                  <button
                    aria-controls="report-popover-comment-with-deepest-replies-3"
                    className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                    data-active={false}
                    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
                    aria-hidden={true}
                    aria-labelledby="report-popover-comment-with-deepest-replies-3-ariainfo"
                    id="report-popover-comment-with-deepest-replies-3"
                    role="dialog"
                  >
                    <div
                      className="AriaInfo-root"
                      id="report-popover-comment-with-deepest-replies-3-ariainfo"
                    >
                      A dialog for reporting comments
                    </div>
                  </div>
                </div>
              </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>
    <form
      autoComplete="off"
      className="coral coral-createReplyComment"
      id="comments-replyCommentForm-form-comment-with-deepest-replies-3"
      onSubmit={[Function]}
    >
      <div
        className="Box-root HorizontalGutter-root HorizontalGutter-full"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-half"
        >
          <div>
            <label
              className="AriaInfo-root"
              htmlFor="comments-replyCommentForm-rte-comment-with-deepest-replies-3"
            >
              Write a reply
            </label>
            <div
              className="Box-root Flex-root ReplyTo-root coral coral-createReplyComment-replyTo Flex-flex Flex-alignCenter"
            >
              <i
                aria-hidden="true"
                className="Icon-root Icon-sm"
              >
                reply
              </i>
              <span>
                 
              </span>
              <span
                className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary ReplyTo-text coral coral-createReplyComment-replyToText"
              >
                Replying to: 
                <span
                  className="Box-root Typography-root Typography-heading4 Typography-colorTextPrimary ReplyTo-username coral coral-createReplyComment-replyToUsername"
                >
                  Markus
                </span>
              </span>
            </div>
            <div>
              <div
                className="$root content placeholder toolbar"
                onBlur={[Function]}
                onFocus={[Function]}
              >
                <div
                  className="RTE-contentEditableContainer"
                >
                  <div
                    aria-placeholder="Write a reply"
                    className="RTE-contentEditable coral coral-rte-content RTE-content"
                    contentEditable={true}
                    dangerouslySetInnerHTML={
                      Object {
                        "__html": "",
                      }
                    }
                    disabled={false}
                    id="comments-replyCommentForm-rte-comment-with-deepest-replies-3"
                    onBlur={[Function]}
                    onChange={[Function]}
                    onCut={[Function]}
                    onFocus={[Function]}
                    onInput={[Function]}
                    onKeyDown={[Function]}
                    onPaste={[Function]}
                    onSelect={[Function]}
                  />
                  <div
                    aria-hidden="true"
                    className="RTE-placeholder coral coral-rte-placholder RTE-placeholder"
                  >
                    Write a reply
                  </div>
                </div>
                <div
                  className="coral coral-rte-toolbar RTE-toolbar RTE-toolbarBottom Toolbar-toolbar"
                >
                  <button
                    className="Button-button"
                    disabled={false}
                    onClick={[Function]}
                    title="Bold"
                    type="button"
                  >
                    <i
                      aria-hidden="true"
                      className="Icon-root Icon-md"
                    >
                      format_bold
                    </i>
                  </button>
                  <button
                    className="Button-button"
                    disabled={false}
                    onClick={[Function]}
                    title="Italic"
                    type="button"
                  >
                    <i
                      aria-hidden="true"
                      className="Icon-root Icon-md"
                    >
                      format_italic
                    </i>
                  </button>
                  <button
                    className="Button-button"
                    disabled={false}
                    onClick={[Function]}
                    title="Blockquote"
                    type="button"
                  >
                    <i
                      aria-hidden="true"
                      className="Icon-root Icon-md"
                    >
                      format_quote
                    </i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          className="Box-root Flex-root Flex-flex Flex-halfItemGutter Flex-justifyFlexEnd Flex-directionRow gutter"
        >
          <button
            className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantOutlined coral coral-createReplyComment-cancel"
            data-color="regular"
            data-variant="outlined"
            disabled={false}
            onBlur={[Function]}
            onClick={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="button"
          >
            Cancel
          </button>
          <button
            className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-disabled coral coral-createReplyComment-submit"
            data-color="primary"
            data-variant="filled"
            disabled={true}
            onBlur={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="submit"
          >
            Submit
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`post a reply: optimistic response 1`] = `
<div
  className="Box-root HorizontalGutter-root HorizontalGutter-full"
  data-testid="commentReplyList-comment-with-deepest-replies-3"
  id="coral-comments-replyList-log--comment-with-deepest-replies-3"
  role="log"
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-full"
  >
    <div
      className="coral coral-comment"
      data-testid="comment-uuid-0"
    >
      <div
        className="Box-root HorizontalGutter-root HorizontalGutter-full"
      >
        <div
          className="IndentedComment-blur 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-uuid-0"
                        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-uuid-0-ariainfo"
                        id="username-popover-uuid-0"
                        role="dialog"
                      >
                        <div
                          className="AriaInfo-root"
                          id="username-popover-uuid-0-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"
                  >
                    <button
                      className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined coral coral-comment-editButton"
                      data-color="primary"
                      data-variant="underlined"
                      onBlur={[Function]}
                      onClick={[Function]}
                      onFocus={[Function]}
                      onMouseOut={[Function]}
                      onMouseOver={[Function]}
                      onTouchEnd={[Function]}
                      type="button"
                    >
                      Edit
                    </button>
                  </div>
                </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": "<b>Hello world!</b>",
                    }
                  }
                />
                <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>
                    <div
                      className="Popover-root"
                    >
                      <button
                        aria-controls="permalink-popover-uuid-0"
                        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-uuid-0-ariainfo"
                        id="permalink-popover-uuid-0"
                        role="dialog"
                      >
                        <div
                          className="AriaInfo-root"
                          id="permalink-popover-uuid-0-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"
                  >
                    <div
                      className="Popover-root"
                    >
                      <button
                        aria-controls="report-popover-uuid-0"
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                        data-active={false}
                        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
                        aria-hidden={true}
                        aria-labelledby="report-popover-uuid-0-ariainfo"
                        id="report-popover-uuid-0"
                        role="dialog"
                      >
                        <div
                          className="AriaInfo-root"
                          id="report-popover-uuid-0-ariainfo"
                        >
                          A dialog for reporting comments
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders comment stream 1`] = `
<div
  aria-live="polite"
  className="Box-root HorizontalGutter-root AllCommentsTabContainer-stream HorizontalGutter-oneAndAHalf"
  data-testid="comments-allComments-log"
  id="comments-allComments-log"
  role="log"
>
  <div
    className="Box-root HorizontalGutter-root HorizontalGutter-full"
  >
    <div
      className="coral coral-comment"
      data-testid="comment-comment-with-deepest-replies"
    >
      <div
        className="Box-root HorizontalGutter-root HorizontalGutter-full"
      >
        <div
          className="Indent-root"
        >
          <div
            className=""
          >
            <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"
                        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-ariainfo"
                        id="username-popover-comment-with-deepest-replies"
                        role="dialog"
                      >
                        <div
                          className="AriaInfo-root"
                          id="username-popover-comment-with-deepest-replies-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="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
              >
                <div
                  className="HTMLContent-root coral coral-content coral-comment-content"
                  dangerouslySetInnerHTML={
                    Object {
                      "__html": "body 0",
                    }
                  }
                />
                <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"
                      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"
                        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-ariainfo"
                        id="permalink-popover-comment-with-deepest-replies"
                        role="dialog"
                      >
                        <div
                          className="AriaInfo-root"
                          id="permalink-popover-comment-with-deepest-replies-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"
                  >
                    <div
                      className="Popover-root"
                    >
                      <button
                        aria-controls="report-popover-comment-with-deepest-replies"
                        className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                        data-active={false}
                        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
                        aria-hidden={true}
                        aria-labelledby="report-popover-comment-with-deepest-replies-ariainfo"
                        id="report-popover-comment-with-deepest-replies"
                        role="dialog"
                      >
                        <div
                          className="AriaInfo-root"
                          id="report-popover-comment-with-deepest-replies-ariainfo"
                        >
                          A dialog for reporting comments
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root HorizontalGutter-full"
      data-testid="commentReplyList-comment-with-deepest-replies"
      id="coral-comments-replyList-log--comment-with-deepest-replies"
      role="log"
    >
      <div
        className="Box-root HorizontalGutter-root HorizontalGutter-full"
      >
        <div
          className="coral coral-comment"
          data-testid="comment-comment-with-deepest-replies-1"
        >
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-full"
          >
            <div
              className="Indent-root"
            >
              <div
                className="Indent-level1 coral coral-indent-1"
              >
                <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-1"
                            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-1-ariainfo"
                            id="username-popover-comment-with-deepest-replies-1"
                            role="dialog"
                          >
                            <div
                              className="AriaInfo-root"
                              id="username-popover-comment-with-deepest-replies-1-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 1",
                        }
                      }
                    />
                    <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-1"
                          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-1"
                            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-1-ariainfo"
                            id="permalink-popover-comment-with-deepest-replies-1"
                            role="dialog"
                          >
                            <div
                              className="AriaInfo-root"
                              id="permalink-popover-comment-with-deepest-replies-1-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"
                      >
                        <div
                          className="Popover-root"
                        >
                          <button
                            aria-controls="report-popover-comment-with-deepest-replies-1"
                            className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                            data-active={false}
                            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
                            aria-hidden={true}
                            aria-labelledby="report-popover-comment-with-deepest-replies-1-ariainfo"
                            id="report-popover-comment-with-deepest-replies-1"
                            role="dialog"
                          >
                            <div
                              className="AriaInfo-root"
                              id="report-popover-comment-with-deepest-replies-1-ariainfo"
                            >
                              A dialog for reporting comments
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-full"
          data-testid="commentReplyList-comment-with-deepest-replies-1"
          id="coral-comments-replyList-log--comment-with-deepest-replies-1"
          role="log"
        >
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-full"
          >
            <div
              className="coral coral-comment"
              data-testid="comment-comment-with-deepest-replies-2"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-full"
              >
                <div
                  className="Indent-root"
                >
                  <div
                    className="Indent-level2 coral coral-indent-2"
                  >
                    <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-2"
                                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-2-ariainfo"
                                id="username-popover-comment-with-deepest-replies-2"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="username-popover-comment-with-deepest-replies-2-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 2",
                            }
                          }
                        />
                        <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-2"
                              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-2"
                                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-2-ariainfo"
                                id="permalink-popover-comment-with-deepest-replies-2"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="permalink-popover-comment-with-deepest-replies-2-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"
                          >
                            <div
                              className="Popover-root"
                            >
                              <button
                                aria-controls="report-popover-comment-with-deepest-replies-2"
                                className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                                data-active={false}
                                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
                                aria-hidden={true}
                                aria-labelledby="report-popover-comment-with-deepest-replies-2-ariainfo"
                                id="report-popover-comment-with-deepest-replies-2"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="report-popover-comment-with-deepest-replies-2-ariainfo"
                                >
                                  A dialog for reporting comments
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              className="Box-root HorizontalGutter-root HorizontalGutter-full"
              data-testid="commentReplyList-comment-with-deepest-replies-2"
              id="coral-comments-replyList-log--comment-with-deepest-replies-2"
              role="log"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-full"
              >
                <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"
                              >
                                <div
                                  className="Popover-root"
                                >
                                  <button
                                    aria-controls="report-popover-comment-with-deepest-replies-3"
                                    className="BaseButton-root Button-root Button-sizeSmall Button-colorError Button-variantTextUnderlined coral coral-reportButton coral-comment-reportButton"
                                    data-active={false}
                                    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
                                    aria-hidden={true}
                                    aria-labelledby="report-popover-comment-with-deepest-replies-3-ariainfo"
                                    id="report-popover-comment-with-deepest-replies-3"
                                    role="dialog"
                                  >
                                    <div
                                      className="AriaInfo-root"
                                      id="report-popover-comment-with-deepest-replies-3-ariainfo"
                                    >
                                      A dialog for reporting comments
                                    </div>
                                  </div>
                                </div>
                              </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>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
