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

exports[`renders comment stream with community guidelines 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 StreamContainer-root coral 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="CallOut-root CallOut-colorPrimary CallOut-fullWidth coral coral-guidelines"
    >
      <div
        className="CallOut-inner"
      >
        <div
          className="Markdown-root"
          dangerouslySetInnerHTML={
            Object {
              "__html": "<h2 id=\\"community-guidelines\\">Community Guidelines</h2>
",
            }
          }
        />
      </div>
    </div>
    <div
      className="coral coral-createComment"
    >
      <div
        className="Box-root HorizontalGutter-root PostCommentFormFake-root HorizontalGutter-full"
      >
        <div>
          <div>
            <div
              className="$root content placeholder toolbar"
              onBlur={[Function]}
              onFocus={[Function]}
            >
              <div
                className="RTE-contentEditableContainer"
              >
                <div
                  aria-placeholder="Post a comment"
                  className="RTE-contentEditable coral coral-rte-content RTE-content"
                  contentEditable={true}
                  dangerouslySetInnerHTML={
                    Object {
                      "__html": "",
                    }
                  }
                  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"
                >
                  Post a comment
                </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>
        <button
          className="BaseButton-root Button-root Button-sizeRegular Button-colorPrimary Button-variantFilled Button-fullWidth coral coral-createComment-signIn"
          data-color="primary"
          data-variant="filled"
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          type="submit"
        >
          Sign in and Join the Conversation
        </button>
      </div>
    </div>
    <div
      className="Box-root HorizontalGutter-root StreamContainer-tabBarContainer HorizontalGutter-spacing-4"
    >
      <div
        className="Box-root Flex-root StreamContainer-tabBarRow Flex-flex Flex-justifySpaceBetween Flex-alignFlexEnd Flex-directionRowReverse"
      >
        <div
          className="Box-root Flex-root StreamContainer-sortMenu coral coral-sortMenu Flex-flex Flex-itemGutter Flex-justifyFlexEnd Flex-alignCenter gutter"
        >
          <label
            className="Box-root Typography-root Typography-bodyCopyBold Typography-colorTextPrimary"
            htmlFor="coral-comments-sortMenu"
          >
            Sort By
          </label>
          <span
            className="SelectField-root"
          >
            <select
              className="SelectField-select undefined"
              id="coral-comments-sortMenu"
              onBlur={[Function]}
              onChange={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
              value="CREATED_AT_DESC"
            >
              <option
                value="CREATED_AT_DESC"
              >
                Newest
              </option>
              <option
                value="CREATED_AT_ASC"
              >
                Oldest
              </option>
              <option
                value="REPLIES_DESC"
              >
                Most Replies
              </option>
              <option
                value="REACTION_DESC"
              >
                Most Respected
              </option>
            </select>
            <span
              aria-hidden={true}
              className="SelectField-afterWrapper undefined"
            >
              <i
                aria-hidden="true"
                className="Icon-root Icon-sm"
              >
                expand_more
              </i>
            </span>
          </span>
        </div>
        <ul
          className="TabBar-root TabBar-secondary coral coral-tabBarSecondary coral-tabBarComments StreamContainer-tabBarRoot"
          role="tablist"
        >
          <li
            className="Tab-root"
            id="tab-ALL_COMMENTS"
            role="presentation"
          >
            <button
              aria-controls="tabPane-ALL_COMMENTS"
              aria-selected={true}
              className="BaseButton-root Tab-button Tab-secondary Tab-active coral coral-tabBarSecondary-tab coral-tabBarComments-allComments"
              onBlur={[Function]}
              onClick={[Function]}
              onFocus={[Function]}
              onMouseOut={[Function]}
              onMouseOver={[Function]}
              onTouchEnd={[Function]}
              role="tab"
              type="button"
            >
              <div
                className="Box-root Flex-root Flex-flex Flex-alignCenter gutter Flex-spacing-1"
              >
                <span>
                  All Comments
                </span>
                <span
                  className="Counter-root Counter-colorPrimary Counter-sizeSmall coral coral-counter"
                >
                  <span
                    className="Counter-text"
                  >
                    2
                  </span>
                </span>
              </div>
            </button>
          </li>
        </ul>
      </div>
      <section
        aria-labelledby="tab-ALL_COMMENTS"
        className="coral coral-allComments"
        id="tabPane-ALL_COMMENTS"
        role="tabpanel"
      >
        <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-0"
            >
              <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-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-comment-0-ariainfo"
                                id="username-popover-comment-0"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="username-popover-comment-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"
                          />
                        </div>
                      </div>
                      <div
                        className="Box-root HorizontalGutter-root HorizontalGutter-oneAndAHalf"
                      >
                        <div
                          className="HTMLContent-root coral coral-content coral-comment-content"
                          dangerouslySetInnerHTML={
                            Object {
                              "__html": "Joining Too",
                            }
                          }
                        />
                        <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-0"
                              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-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-comment-0-ariainfo"
                                id="permalink-popover-comment-0"
                                role="dialog"
                              >
                                <div
                                  className="AriaInfo-root"
                                  id="permalink-popover-comment-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"
                          >
                            <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-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>
      </section>
    </div>
  </div>
</section>
`;
