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

exports[`approves comment in rejected queue: count should be 1 1`] = `
<span
  className="Counter-root Counter-colorInherit"
  data-testid="moderate-navigation-reported-count"
>
  <span
    className="Counter-text"
  >
    1
  </span>
</span>
`;

exports[`approves comment in rejected queue: dangling 1`] = `
<div
  className="Card-root ModerateCard-root ModerateCard-dangling ModerateCard-selected"
  data-testid="moderate-comment-comment-0"
  id="moderate-comment-comment-0"
  onClick={[Function]}
  tabIndex={0}
>
  <div
    className="Box-root Flex-root Flex-flex"
  >
    <div
      className="ModerateCard-mainContainer"
    >
      <div
        className="ModerateCard-topBar"
      >
        <div
          className="Box-root Flex-root Flex-flex Flex-alignCenter"
        >
          <button
            className="BaseButton-root ModerateCard-usernameButton"
            onBlur={[Function]}
            onClick={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="button"
          >
            <span
              className="Username-root"
            >
              Isabelle
            </span>
          </button>
          <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"
              dateTime="2018-07-06T18:24:00.000Z"
              title="2018-07-06T18:24:00.000Z"
            >
              2018-07-06T18:24:00.000Z
            </time>
          </button>
          <button
            className="BaseButton-root FeatureButton-root"
            disabled={false}
            onBlur={[Function]}
            onClick={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="button"
          >
            <span>
              Feature
            </span>
          </button>
        </div>
      </div>
      <div
        className="ModerateCard-contentArea"
      >
        <div
          className="ModerateCard-content CommentContent-root"
          dangerouslySetInnerHTML={
            Object {
              "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
            }
          }
        />
        <div
          className="ModerateCard-viewContext"
        >
          <a
            className="TextLink-root ModerateCard-link"
            href="http://localhost/comment/0"
            target="_blank"
          >
            View Context
            <i
              aria-hidden="true"
              className="Icon-root Icon-xs TextLink-icon"
            >
              open_in_new
            </i>
          </a>
        </div>
        <div
          className="ModerateCard-separator ModerateCard-ruledSeparator"
        />
      </div>
      <div
        className="ModerateCard-footer"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
        >
          <div>
            <div
              className="ModerateCard-storyLabel"
            >
              <span>
                Comment On
              </span>
              <span>
                :
              </span>
            </div>
            <div
              className="ModerateCard-storyTitle"
            >
              Finally a Cure for Cancer
            </div>
            <div>
              <a
                className="TextLink-root ModerateCard-link"
                href="/admin/moderate/story-1"
                onClick={[Function]}
              >
                Moderate Story
              </a>
            </div>
          </div>
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-full"
          >
            <div
              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
            >
              <span
                className="Marker-root Marker-colorReported Marker-variantRegular"
              >
                <span>
                  Spam
                </span>
                 
                <span
                  className="Count-root"
                >
                  2
                </span>
              </span>
              <button
                aria-controls="uuid-0"
                aria-expanded={false}
                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                data-color="mono"
                data-variant="text"
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                <span
                  className="Markers-detailsText"
                >
                  Details
                </span>
                <i
                  aria-hidden="true"
                  className="Icon-root Icon-sm ButtonIcon-root"
                >
                  arrow_drop_down
                </i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
    >
      <div
        className="ModerateCard-decision"
      >
        Decision
      </div>
      <div
        className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
      >
        <button
          aria-label="Reject"
          className="BaseButton-root RejectButton-root"
          disabled={true}
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          type="button"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-lg RejectButton-icon"
          >
            close
          </i>
        </button>
        <button
          aria-label="Approve"
          className="BaseButton-root ApproveButton-root ApproveButton-invert"
          disabled={true}
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          type="button"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-lg ApproveButton-icon"
          >
            done
          </i>
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`renders rejected queue with comments 1`] = `
<div
  className="MainLayout-root"
  data-testid="moderate-main-container"
>
  <main
    className="Moderate-main"
  >
    <div
      className="Box-root HorizontalGutter-root Queue-root HorizontalGutter-double"
    >
      <div
        className="Card-root ModerateCard-root ModerateCard-selected"
        data-testid="moderate-comment-comment-0"
        id="moderate-comment-comment-0"
        onClick={[Function]}
        tabIndex={0}
      >
        <div
          className="Box-root Flex-root Flex-flex"
        >
          <div
            className="ModerateCard-mainContainer"
          >
            <div
              className="ModerateCard-topBar"
            >
              <div
                className="Box-root Flex-root Flex-flex Flex-alignCenter"
              >
                <button
                  className="BaseButton-root ModerateCard-usernameButton"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span
                    className="Username-root"
                  >
                    Isabelle
                  </span>
                </button>
                <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"
                    dateTime="2018-07-06T18:24:00.000Z"
                    title="2018-07-06T18:24:00.000Z"
                  >
                    2018-07-06T18:24:00.000Z
                  </time>
                </button>
                <button
                  className="BaseButton-root FeatureButton-root"
                  disabled={false}
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span>
                    Feature
                  </span>
                </button>
              </div>
            </div>
            <div
              className="ModerateCard-contentArea"
            >
              <div
                className="ModerateCard-content CommentContent-root"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "This is the last random sentence I will be writing and I am going to stop mid-sent",
                  }
                }
              />
              <div
                className="ModerateCard-viewContext"
              >
                <a
                  className="TextLink-root ModerateCard-link"
                  href="http://localhost/comment/0"
                  target="_blank"
                >
                  View Context
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-xs TextLink-icon"
                  >
                    open_in_new
                  </i>
                </a>
              </div>
              <div
                className="ModerateCard-separator ModerateCard-ruledSeparator"
              />
            </div>
            <div
              className="ModerateCard-footer"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
              >
                <div>
                  <div
                    className="ModerateCard-storyLabel"
                  >
                    <span>
                      Comment On
                    </span>
                    <span>
                      :
                    </span>
                  </div>
                  <div
                    className="ModerateCard-storyTitle"
                  >
                    Finally a Cure for Cancer
                  </div>
                  <div>
                    <a
                      className="TextLink-root ModerateCard-link"
                      href="/admin/moderate/story-1"
                      onClick={[Function]}
                    >
                      Moderate Story
                    </a>
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
                >
                  <div
                    className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                  >
                    <span
                      className="Marker-root Marker-colorReported Marker-variantRegular"
                    >
                      <span>
                        Spam
                      </span>
                       
                      <span
                        className="Count-root"
                      >
                        2
                      </span>
                    </span>
                    <button
                      aria-controls="uuid-0"
                      aria-expanded={false}
                      className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                      data-color="mono"
                      data-variant="text"
                      onBlur={[Function]}
                      onClick={[Function]}
                      onFocus={[Function]}
                      onMouseOut={[Function]}
                      onMouseOver={[Function]}
                      onTouchEnd={[Function]}
                      type="button"
                    >
                      <span
                        className="Markers-detailsText"
                      >
                        Details
                      </span>
                      <i
                        aria-hidden="true"
                        className="Icon-root Icon-sm ButtonIcon-root"
                      >
                        arrow_drop_down
                      </i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
          >
            <div
              className="ModerateCard-decision"
            >
              Decision
            </div>
            <div
              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
            >
              <button
                aria-label="Reject"
                className="BaseButton-root RejectButton-root RejectButton-invert"
                disabled={true}
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                <i
                  aria-hidden="true"
                  className="Icon-root Icon-lg RejectButton-icon"
                >
                  close
                </i>
              </button>
              <button
                aria-label="Approve"
                className="BaseButton-root ApproveButton-root"
                disabled={false}
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                <i
                  aria-hidden="true"
                  className="Icon-root Icon-lg ApproveButton-icon"
                >
                  done
                </i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        className="Card-root ModerateCard-root"
        data-testid="moderate-comment-comment-1"
        id="moderate-comment-comment-1"
        onClick={[Function]}
        tabIndex={0}
      >
        <div
          className="Box-root Flex-root Flex-flex"
        >
          <div
            className="ModerateCard-mainContainer"
          >
            <div
              className="ModerateCard-topBar"
            >
              <div
                className="Box-root Flex-root Flex-flex Flex-alignCenter"
              >
                <button
                  className="BaseButton-root ModerateCard-usernameButton"
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span
                    className="Username-root"
                  >
                    Ngoc
                  </span>
                </button>
                <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"
                    dateTime="2018-07-06T18:24:00.000Z"
                    title="2018-07-06T18:24:00.000Z"
                  >
                    2018-07-06T18:24:00.000Z
                  </time>
                </button>
                <button
                  className="BaseButton-root FeatureButton-root"
                  disabled={false}
                  onBlur={[Function]}
                  onClick={[Function]}
                  onFocus={[Function]}
                  onMouseOut={[Function]}
                  onMouseOver={[Function]}
                  onTouchEnd={[Function]}
                  type="button"
                >
                  <span>
                    Feature
                  </span>
                </button>
              </div>
            </div>
            <div
              className="ModerateCard-contentArea"
            >
              <div
                className="ModerateCard-content CommentContent-root"
                dangerouslySetInnerHTML={
                  Object {
                    "__html": "Don't fool with me",
                  }
                }
              />
              <div
                className="ModerateCard-viewContext"
              >
                <a
                  className="TextLink-root ModerateCard-link"
                  href="http://localhost/comment/1"
                  target="_blank"
                >
                  View Context
                  <i
                    aria-hidden="true"
                    className="Icon-root Icon-xs TextLink-icon"
                  >
                    open_in_new
                  </i>
                </a>
              </div>
              <div
                className="ModerateCard-separator ModerateCard-ruledSeparator"
              />
            </div>
            <div
              className="ModerateCard-footer"
            >
              <div
                className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
              >
                <div>
                  <div
                    className="ModerateCard-storyLabel"
                  >
                    <span>
                      Comment On
                    </span>
                    <span>
                      :
                    </span>
                  </div>
                  <div
                    className="ModerateCard-storyTitle"
                  >
                    Finally a Cure for Cancer
                  </div>
                  <div>
                    <a
                      className="TextLink-root ModerateCard-link"
                      href="/admin/moderate/story-1"
                      onClick={[Function]}
                    >
                      Moderate Story
                    </a>
                  </div>
                </div>
                <div
                  className="Box-root HorizontalGutter-root HorizontalGutter-full"
                >
                  <div
                    className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
                  >
                    <span
                      className="Marker-root Marker-colorReported Marker-variantRegular"
                    >
                      <span>
                        Offensive
                      </span>
                       
                      <span
                        className="Count-root"
                      >
                        3
                      </span>
                    </span>
                    <button
                      aria-controls="uuid-1"
                      aria-expanded={false}
                      className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                      data-color="mono"
                      data-variant="text"
                      onBlur={[Function]}
                      onClick={[Function]}
                      onFocus={[Function]}
                      onMouseOut={[Function]}
                      onMouseOver={[Function]}
                      onTouchEnd={[Function]}
                      type="button"
                    >
                      <span
                        className="Markers-detailsText"
                      >
                        Details
                      </span>
                      <i
                        aria-hidden="true"
                        className="Icon-root Icon-sm ButtonIcon-root"
                      >
                        arrow_drop_down
                      </i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
          >
            <div
              className="ModerateCard-decision"
            >
              Decision
            </div>
            <div
              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
            >
              <button
                aria-label="Reject"
                className="BaseButton-root RejectButton-root RejectButton-invert"
                disabled={true}
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                <i
                  aria-hidden="true"
                  className="Icon-root Icon-lg RejectButton-icon"
                >
                  close
                </i>
              </button>
              <button
                aria-label="Approve"
                className="BaseButton-root ApproveButton-root"
                disabled={false}
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                <i
                  aria-hidden="true"
                  className="Icon-root Icon-lg ApproveButton-icon"
                >
                  done
                </i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
`;

exports[`renders rejected queue with comments and load more 1`] = `
<div
  className="Card-root ModerateCard-root"
  data-testid="moderate-comment-comment-2"
  id="moderate-comment-comment-2"
  onClick={[Function]}
  tabIndex={0}
>
  <div
    className="Box-root Flex-root Flex-flex"
  >
    <div
      className="ModerateCard-mainContainer"
    >
      <div
        className="ModerateCard-topBar"
      >
        <div
          className="Box-root Flex-root Flex-flex Flex-alignCenter"
        >
          <button
            className="BaseButton-root ModerateCard-usernameButton"
            onBlur={[Function]}
            onClick={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="button"
          >
            <span
              className="Username-root"
            >
              Max
            </span>
          </button>
          <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"
              dateTime="2018-07-06T18:24:00.000Z"
              title="2018-07-06T18:24:00.000Z"
            >
              2018-07-06T18:24:00.000Z
            </time>
          </button>
          <button
            className="BaseButton-root FeatureButton-root"
            disabled={false}
            onBlur={[Function]}
            onClick={[Function]}
            onFocus={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
            onTouchEnd={[Function]}
            type="button"
          >
            <span>
              Feature
            </span>
          </button>
        </div>
      </div>
      <div
        className="ModerateCard-contentArea"
      >
        <div
          className="ModerateCard-content CommentContent-root"
          dangerouslySetInnerHTML={
            Object {
              "__html": "I think I deserve better",
            }
          }
        />
        <div
          className="ModerateCard-viewContext"
        >
          <a
            className="TextLink-root ModerateCard-link"
            href="http://localhost/comment/2"
            target="_blank"
          >
            View Context
            <i
              aria-hidden="true"
              className="Icon-root Icon-xs TextLink-icon"
            >
              open_in_new
            </i>
          </a>
        </div>
        <div
          className="ModerateCard-separator ModerateCard-ruledSeparator"
        />
      </div>
      <div
        className="ModerateCard-footer"
      >
        <div
          className="Box-root HorizontalGutter-root HorizontalGutter-spacing-3"
        >
          <div>
            <div
              className="ModerateCard-storyLabel"
            >
              <span>
                Comment On
              </span>
              <span>
                :
              </span>
            </div>
            <div
              className="ModerateCard-storyTitle"
            >
              Finally a Cure for Cancer
            </div>
            <div>
              <a
                className="TextLink-root ModerateCard-link"
                href="/admin/moderate/story-1"
                onClick={[Function]}
              >
                Moderate Story
              </a>
            </div>
          </div>
          <div
            className="Box-root HorizontalGutter-root HorizontalGutter-full"
          >
            <div
              className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
            >
              <span
                className="Marker-root Marker-colorReported Marker-variantRegular"
              >
                <span>
                  Offensive
                </span>
                 
                <span
                  className="Count-root"
                >
                  1
                </span>
              </span>
              <span
                className="Marker-root Marker-colorReported Marker-variantRegular"
              >
                <span>
                  Spam
                </span>
                 
                <span
                  className="Count-root"
                >
                  1
                </span>
              </span>
              <button
                aria-controls="uuid-2"
                aria-expanded={false}
                className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
                data-color="mono"
                data-variant="text"
                onBlur={[Function]}
                onClick={[Function]}
                onFocus={[Function]}
                onMouseOut={[Function]}
                onMouseOver={[Function]}
                onTouchEnd={[Function]}
                type="button"
              >
                <span
                  className="Markers-detailsText"
                >
                  Details
                </span>
                <i
                  aria-hidden="true"
                  className="Icon-root Icon-sm ButtonIcon-root"
                >
                  arrow_drop_down
                </i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      className="Box-root Flex-root ModerateCard-aside ModerateCard-asideWithoutReplyTo Flex-flex Flex-itemGutter Flex-alignCenter Flex-directionColumn gutter"
    >
      <div
        className="ModerateCard-decision"
      >
        Decision
      </div>
      <div
        className="Box-root Flex-root Flex-flex Flex-itemGutter gutter"
      >
        <button
          aria-label="Reject"
          className="BaseButton-root RejectButton-root RejectButton-invert"
          disabled={true}
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          type="button"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-lg RejectButton-icon"
          >
            close
          </i>
        </button>
        <button
          aria-label="Approve"
          className="BaseButton-root ApproveButton-root"
          disabled={false}
          onBlur={[Function]}
          onClick={[Function]}
          onFocus={[Function]}
          onMouseOut={[Function]}
          onMouseOver={[Function]}
          onTouchEnd={[Function]}
          type="button"
        >
          <i
            aria-hidden="true"
            className="Icon-root Icon-lg ApproveButton-icon"
          >
            done
          </i>
        </button>
      </div>
    </div>
  </div>
</div>
`;
