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

exports[`renders app with 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-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="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=""
          >
            <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="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>
`;
