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

exports[`renders permalink view 1`] = `
<section
  aria-labelledby="tab-COMMENTS"
  className="App-tabContent coral coral-comments"
  data-testid="current-tab-pane"
  id="tabPane-COMMENTS"
  role="tabpanel"
>
  <div
    className="Box-root HorizontalGutter-root PermalinkView-root coral coral-permalink coral-unauthenticated HorizontalGutter-double"
  >
    <div
      className="Box-root Flex-root coral coral-viewerBox Flex-flex Flex-itemGutter Flex-alignCenter gutter"
    >
      <button
        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantUnderlined coral coral-viewerBox-signInButton"
        data-color="primary"
        data-variant="underlined"
        onBlur={[Function]}
        onClick={[Function]}
        onFocus={[Function]}
        onMouseOut={[Function]}
        onMouseOver={[Function]}
        onTouchEnd={[Function]}
        type="button"
      >
        Sign in
      </button>
      <button
        className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantOutlined coral coral-viewerBox-registerButton"
        data-color="primary"
        data-variant="outlined"
        onBlur={[Function]}
        onClick={[Function]}
        onFocus={[Function]}
        onMouseOut={[Function]}
        onMouseOver={[Function]}
        onTouchEnd={[Function]}
        type="button"
      >
        Register
      </button>
    </div>
    <div
      className="Box-root Flex-root Flex-flex Flex-justifyCenter Flex-alignCenter Flex-directionColumn"
    >
      <p
        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title1"
      >
        You are currently viewing a
      </p>
      <p
        className="Box-root Typography-root Typography-bodyCopy Typography-colorTextPrimary PermalinkView-title2"
      >
        SINGLE CONVERSATION
      </p>
      <a
        className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantUnderlined coral coral-permalink-viewFullDiscussionButton"
        data-color="primary"
        data-variant="underlined"
        href="http://localhost/"
        onBlur={[Function]}
        onClick={[Function]}
        onFocus={[Function]}
        onMouseOut={[Function]}
        onMouseOver={[Function]}
        onTouchEnd={[Function]}
        target="_parent"
        type="button"
      >
        View Full Discussion
      </a>
    </div>
    <div
      className="Box-root HorizontalGutter-root HorizontalGutter-full"
    >
      <div
        className="coral coral-conversationThread ConversationThreadContainer-root"
        data-testid="comments-permalinkView-conversationThread"
      >
        <div
          className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full Line-dotted"
        />
        <div
          className="Line-root Box-root HorizontalGutter-root HorizontalGutter-full"
        >
          <div
            className="Circle-circleContainer"
          >
            <div
              className="Circle-circleSubContainer"
            >
              <svg
                className="Circle-circle"
                viewBox="0 0 100 100"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="50"
                  cy="50"
                  r="50"
                />
              </svg>
            </div>
            <div
              className="coral coral-comment"
              data-testid="comment-comment-1"
            >
              <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-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"
                                >
                                  Lukas
                                </span>
                              </button>
                              <div
                                aria-hidden={true}
                                aria-labelledby="username-popover-comment-1-ariainfo"
                                id="username-popover-comment-1"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="username-popover-comment-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="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                      >
                        <div
                          className="HTMLContent-root coral coral-content coral-comment-content"
                          dangerouslySetInnerHTML={
                            Object {
                              "__html": "What's up?",
                            }
                          }
                        />
                        <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-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-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-1-ariainfo"
                                id="permalink-popover-comment-1"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="permalink-popover-comment-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"
                          >
                            <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>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="Circle-circleContainer"
          >
            <div
              className="Circle-circleSubContainer"
            >
              <svg
                className="Circle-circle"
                viewBox="0 0 100 100"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="50"
                  cy="50"
                  fill="none"
                  r="40"
                  strokeWidth="8"
                />
              </svg>
            </div>
            <div
              className="coral coral-comment"
              data-testid="comment-comment-2"
            >
              <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-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"
                                >
                                  Isabelle
                                </span>
                              </button>
                              <div
                                aria-hidden={true}
                                aria-labelledby="username-popover-comment-2-ariainfo"
                                id="username-popover-comment-2"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="username-popover-comment-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="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                      >
                        <div
                          className="HTMLContent-root coral coral-content coral-comment-content"
                          dangerouslySetInnerHTML={
                            Object {
                              "__html": "Hey!",
                            }
                          }
                        />
                        <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-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-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-2-ariainfo"
                                id="permalink-popover-comment-2"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="permalink-popover-comment-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"
                          >
                            <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>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="Circle-circleContainer"
          >
            <div
              className="Circle-circleSubContainer Circle-end"
            >
              <svg
                className="Circle-circle"
                viewBox="0 0 100 100"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="50"
                  cy="50"
                  r="50"
                />
              </svg>
            </div>
            <div
              className="coral coral-comment coral coral-conversationThread-highlighted"
              data-testid="comment-comment-with-replies"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-full"
              >
                <div
                  className="Indent-root"
                >
                  <div
                    className=""
                  >
                    <div
                      className="Box-root HorizontalGutter-root Comment-root Comment-highlight 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-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-replies-ariainfo"
                                id="username-popover-comment-with-replies"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="username-popover-comment-with-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": "I like yoghurt",
                            }
                          }
                        />
                        <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-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-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-replies-ariainfo"
                                id="permalink-popover-comment-with-replies"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="permalink-popover-comment-with-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"
                          >
                            <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>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        className="PermalinkView-replyList"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-full"
          data-testid="commentReplyList-comment-with-replies"
          id="coral-comments-replyList-log--comment-with-replies"
          role="log"
        >
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-full"
          >
            <div
              className="coral coral-comment"
              data-testid="comment-comment-3"
            >
              <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-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"
                                >
                                  Isabelle
                                </span>
                              </button>
                              <div
                                aria-hidden={true}
                                aria-labelledby="username-popover-comment-3-ariainfo"
                                id="username-popover-comment-3"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="username-popover-comment-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": "Comment 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-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-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-3-ariainfo"
                                id="permalink-popover-comment-3"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="permalink-popover-comment-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>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-full"
          >
            <div
              className="coral coral-comment"
              data-testid="comment-comment-4"
            >
              <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-4"
                                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"
                                >
                                  Isabelle
                                </span>
                              </button>
                              <div
                                aria-hidden={true}
                                aria-labelledby="username-popover-comment-4-ariainfo"
                                id="username-popover-comment-4"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="username-popover-comment-4-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": "Comment Body 4",
                            }
                          }
                        />
                        <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-4"
                              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-4"
                                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-4-ariainfo"
                                id="permalink-popover-comment-4"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="permalink-popover-comment-4-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>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
`;
