ant-design/components/badge/__tests__/__snapshots__/index.test.js.snap

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

exports[`Badge badge should support float number 1`] = `
<span
  class="ant-badge ant-badge-not-a-wrapper"
>
  <sup
    class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
    data-show="true"
    title="3.5"
  >
    3.5
  </sup>
</span>
`;

exports[`Badge badge should support float number 2`] = `
<Badge
  count="3.5"
>
  <span
    className="ant-badge ant-badge-not-a-wrapper"
  >
    <Animate
      animation={Object {}}
      component=""
      componentProps={Object {}}
      onAppear={[Function]}
      onEnd={[Function]}
      onEnter={[Function]}
      onLeave={[Function]}
      showProp="data-show"
      transitionAppear={true}
      transitionEnter={true}
      transitionLeave={true}
      transitionName=""
    >
      <AnimateChild
        animation={Object {}}
        key="scrollNumber"
        transitionAppear={true}
        transitionEnter={true}
        transitionLeave={true}
        transitionName=""
      >
        <ScrollNumber
          className="ant-badge-count ant-badge-multiple-words"
          count="3.5"
          data-show={true}
          key="scrollNumber"
          prefixCls="ant-scroll-number"
          title="3.5"
        >
          <sup
            className="ant-scroll-number ant-badge-count ant-badge-multiple-words"
            data-show={true}
            title="3.5"
          >
            3.5
          </sup>
        </ScrollNumber>
      </AnimateChild>
    </Animate>
  </span>
</Badge>
`;

exports[`Badge render Badge status/color when contains children 1`] = `
Array [
  <span
    class="ant-badge ant-badge-status"
  >
    <a />
    <sup
      class="ant-scroll-number ant-badge-dot ant-badge-status-success"
      data-show="true"
      title="5"
    />
  </span>,
  <span
    class="ant-badge ant-badge-status"
  >
    <a />
    <sup
      class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
      data-show="true"
      title="5"
    />
  </span>,
  <span
    class="ant-badge ant-badge-status"
  >
    <a />
    <sup
      class="ant-scroll-number ant-badge-dot"
      data-show="true"
      style="background:#08c"
      title="5"
    />
  </span>,
]
`;

exports[`Badge render correct with negative number 1`] = `
<div>
  <span
    class="ant-badge ant-badge-not-a-wrapper"
  >
    <sup
      class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
      data-show="true"
      title="-10"
    >
      <span
        class="ant-scroll-number-symbol"
      >
        -
      </span>
      <span
        class="ant-scroll-number-only"
        style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
      >
        <p
          class="ant-scroll-number-only-unit"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit current"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
      </span>
      <span
        class="ant-scroll-number-only"
        style="transition:none;-ms-transform:translateY(-1000%);-webkit-transform:translateY(-1000%);transform:translateY(-1000%)"
      >
        <p
          class="ant-scroll-number-only-unit"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
        <p
          class="ant-scroll-number-only-unit current"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
      </span>
    </sup>
  </span>
  <span
    class="ant-badge ant-badge-not-a-wrapper"
  >
    <sup
      class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
      data-show="true"
      title="-10"
    >
      <span
        class="ant-scroll-number-symbol"
      >
        -
      </span>
      <span
        class="ant-scroll-number-only"
        style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
      >
        <p
          class="ant-scroll-number-only-unit"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit current"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
      </span>
      <span
        class="ant-scroll-number-only"
        style="transition:none;-ms-transform:translateY(-1000%);-webkit-transform:translateY(-1000%);transform:translateY(-1000%)"
      >
        <p
          class="ant-scroll-number-only-unit"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
        <p
          class="ant-scroll-number-only-unit current"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          0
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          1
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          2
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          3
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          4
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          5
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          6
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          7
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          8
        </p>
        <p
          class="ant-scroll-number-only-unit"
        >
          9
        </p>
      </span>
    </sup>
  </span>
</div>
`;

exports[`Badge rtl render component should be rendered correctly in RTL direction 1`] = `
<span
  class="ant-badge ant-badge-not-a-wrapper ant-badge-rtl"
/>
`;

exports[`Badge rtl render component should be rendered correctly in RTL direction 2`] = `
<span
  class="ant-badge ant-badge-rtl"
>
  <a
    class="head-example"
    href="#"
  >
    head
  </a>
  <sup
    class="ant-scroll-number ant-badge-count"
    data-show="true"
    style="left:10px;margin-top:10px"
    title="5"
  >
    <span
      class="ant-scroll-number-only"
      style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
    >
      <p
        class="ant-scroll-number-only-unit"
      >
        0
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        1
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        2
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        3
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        4
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        5
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        6
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        7
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        8
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        9
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        0
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        1
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        2
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        3
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        4
      </p>
      <p
        class="ant-scroll-number-only-unit current"
      >
        5
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        6
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        7
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        8
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        9
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        0
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        1
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        2
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        3
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        4
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        5
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        6
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        7
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        8
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        9
      </p>
    </span>
  </sup>
</span>
`;

exports[`Badge should be compatible with borderColor style 1`] = `
<span
  class="ant-badge ant-badge-not-a-wrapper"
>
  <sup
    class="ant-scroll-number ant-badge-count"
    data-show="true"
    style="background-color:#fff;color:#999;border-color:#d9d9d9;box-shadow:0 0 0 1px #d9d9d9 inset"
    title="4"
  >
    <span
      class="ant-scroll-number-only"
      style="transition:none;-ms-transform:translateY(-1400%);-webkit-transform:translateY(-1400%);transform:translateY(-1400%)"
    >
      <p
        class="ant-scroll-number-only-unit"
      >
        0
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        1
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        2
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        3
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        4
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        5
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        6
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        7
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        8
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        9
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        0
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        1
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        2
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        3
      </p>
      <p
        class="ant-scroll-number-only-unit current"
      >
        4
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        5
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        6
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        7
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        8
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        9
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        0
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        1
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        2
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        3
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        4
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        5
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        6
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        7
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        8
      </p>
      <p
        class="ant-scroll-number-only-unit"
      >
        9
      </p>
    </span>
  </sup>
</span>
`;

exports[`Badge should render when count is changed 1`] = `
<Badge
  count={10}
>
  <span
    className="ant-badge ant-badge-not-a-wrapper"
  >
    <Animate
      animation={Object {}}
      component=""
      componentProps={Object {}}
      onAppear={[Function]}
      onEnd={[Function]}
      onEnter={[Function]}
      onLeave={[Function]}
      showProp="data-show"
      transitionAppear={true}
      transitionEnter={true}
      transitionLeave={true}
      transitionName=""
    >
      <AnimateChild
        animation={Object {}}
        key="scrollNumber"
        transitionAppear={true}
        transitionEnter={true}
        transitionLeave={true}
        transitionName=""
      >
        <ScrollNumber
          className="ant-badge-count ant-badge-multiple-words"
          count={10}
          data-show={true}
          key="scrollNumber"
          prefixCls="ant-scroll-number"
          title={10}
        >
          <sup
            className="ant-scroll-number ant-badge-count ant-badge-multiple-words"
            data-show={true}
            title={10}
          >
            <span
              className="ant-scroll-number-only"
              key="0"
              style={
                Object {
                  "WebkitTransform": "translateY(-1900%)",
                  "msTransform": "translateY(-1900%)",
                  "transform": "translateY(-1900%)",
                  "transition": "none",
                }
              }
            >
              <p
                className="ant-scroll-number-only-unit"
                key="0"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="1"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="2"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="3"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="4"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="5"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="6"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="7"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="8"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="9"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="10"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="11"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="12"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="13"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="14"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="15"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="16"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="17"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="18"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit current"
                key="19"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="20"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="21"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="22"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="23"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="24"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="25"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="26"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="27"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="28"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="29"
              >
                9
              </p>
            </span>
          </sup>
        </ScrollNumber>
      </AnimateChild>
    </Animate>
  </span>
</Badge>
`;

exports[`Badge should render when count is changed 2`] = `
<Badge
  count={11}
>
  <span
    className="ant-badge ant-badge-not-a-wrapper"
  >
    <Animate
      animation={Object {}}
      component=""
      componentProps={Object {}}
      onAppear={[Function]}
      onEnd={[Function]}
      onEnter={[Function]}
      onLeave={[Function]}
      showProp="data-show"
      transitionAppear={true}
      transitionEnter={true}
      transitionLeave={true}
      transitionName=""
    >
      <AnimateChild
        animation={Object {}}
        key="scrollNumber"
        transitionAppear={true}
        transitionEnter={true}
        transitionLeave={true}
        transitionName=""
      >
        <ScrollNumber
          className="ant-badge-count ant-badge-multiple-words"
          count={11}
          data-show={true}
          key="scrollNumber"
          prefixCls="ant-scroll-number"
          title={11}
        >
          <sup
            className="ant-scroll-number ant-badge-count ant-badge-multiple-words"
            data-show={true}
            title={11}
          >
            <span
              className="ant-scroll-number-only"
              key="1"
              style={
                Object {
                  "WebkitTransform": "translateY(-1100%)",
                  "msTransform": "translateY(-1100%)",
                  "transform": "translateY(-1100%)",
                  "transition": "none",
                }
              }
            >
              <p
                className="ant-scroll-number-only-unit"
                key="0"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="1"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="2"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="3"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="4"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="5"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="6"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="7"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="8"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="9"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="10"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit current"
                key="11"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="12"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="13"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="14"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="15"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="16"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="17"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="18"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="19"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="20"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="21"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="22"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="23"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="24"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="25"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="26"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="27"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="28"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="29"
              >
                9
              </p>
            </span>
            <span
              className="ant-scroll-number-only"
              key="0"
              style={
                Object {
                  "WebkitTransform": "translateY(-1000%)",
                  "msTransform": "translateY(-1000%)",
                  "transform": "translateY(-1000%)",
                  "transition": "none",
                }
              }
            >
              <p
                className="ant-scroll-number-only-unit"
                key="0"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="1"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="2"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="3"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="4"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="5"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="6"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="7"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="8"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="9"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit current"
                key="10"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="11"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="12"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="13"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="14"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="15"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="16"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="17"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="18"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="19"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="20"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="21"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="22"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="23"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="24"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="25"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="26"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="27"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="28"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="29"
              >
                9
              </p>
            </span>
          </sup>
        </ScrollNumber>
      </AnimateChild>
    </Animate>
  </span>
</Badge>
`;

exports[`Badge should render when count is changed 3`] = `
<Badge
  count={11}
>
  <span
    className="ant-badge ant-badge-not-a-wrapper"
  >
    <Animate
      animation={Object {}}
      component=""
      componentProps={Object {}}
      onAppear={[Function]}
      onEnd={[Function]}
      onEnter={[Function]}
      onLeave={[Function]}
      showProp="data-show"
      transitionAppear={true}
      transitionEnter={true}
      transitionLeave={true}
      transitionName=""
    >
      <AnimateChild
        animation={Object {}}
        key="scrollNumber"
        transitionAppear={true}
        transitionEnter={true}
        transitionLeave={true}
        transitionName=""
      >
        <ScrollNumber
          className="ant-badge-count ant-badge-multiple-words"
          count={11}
          data-show={true}
          key="scrollNumber"
          prefixCls="ant-scroll-number"
          title={11}
        >
          <sup
            className="ant-scroll-number ant-badge-count ant-badge-multiple-words"
            data-show={true}
            title={11}
          >
            <span
              className="ant-scroll-number-only"
              key="1"
              style={
                Object {
                  "WebkitTransform": "translateY(-1100%)",
                  "msTransform": "translateY(-1100%)",
                  "transform": "translateY(-1100%)",
                  "transition": undefined,
                }
              }
            >
              <p
                className="ant-scroll-number-only-unit"
                key="0"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="1"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="2"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="3"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="4"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="5"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="6"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="7"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="8"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="9"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="10"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit current"
                key="11"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="12"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="13"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="14"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="15"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="16"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="17"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="18"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="19"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="20"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="21"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="22"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="23"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="24"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="25"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="26"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="27"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="28"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="29"
              >
                9
              </p>
            </span>
            <span
              className="ant-scroll-number-only"
              key="0"
              style={
                Object {
                  "WebkitTransform": "translateY(-1100%)",
                  "msTransform": "translateY(-1100%)",
                  "transform": "translateY(-1100%)",
                  "transition": undefined,
                }
              }
            >
              <p
                className="ant-scroll-number-only-unit"
                key="0"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="1"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="2"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="3"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="4"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="5"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="6"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="7"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="8"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="9"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="10"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit current"
                key="11"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="12"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="13"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="14"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="15"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="16"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="17"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="18"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="19"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="20"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="21"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="22"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="23"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="24"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="25"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="26"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="27"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="28"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="29"
              >
                9
              </p>
            </span>
          </sup>
        </ScrollNumber>
      </AnimateChild>
    </Animate>
  </span>
</Badge>
`;

exports[`Badge should render when count is changed 4`] = `
<Badge
  count={111}
>
  <span
    className="ant-badge ant-badge-not-a-wrapper"
  >
    <Animate
      animation={Object {}}
      component=""
      componentProps={Object {}}
      onAppear={[Function]}
      onEnd={[Function]}
      onEnter={[Function]}
      onLeave={[Function]}
      showProp="data-show"
      transitionAppear={true}
      transitionEnter={true}
      transitionLeave={true}
      transitionName=""
    >
      <AnimateChild
        animation={Object {}}
        key="scrollNumber"
        transitionAppear={true}
        transitionEnter={true}
        transitionLeave={true}
        transitionName=""
      >
        <ScrollNumber
          className="ant-badge-count ant-badge-multiple-words"
          count="99+"
          data-show={true}
          key="scrollNumber"
          prefixCls="ant-scroll-number"
          title={111}
        >
          <sup
            className="ant-scroll-number ant-badge-count ant-badge-multiple-words"
            data-show={true}
            title={111}
          >
            <span
              className="ant-scroll-number-only"
              key="1"
              style={
                Object {
                  "WebkitTransform": "translateY(-1100%)",
                  "msTransform": "translateY(-1100%)",
                  "transform": "translateY(-1100%)",
                  "transition": "none",
                }
              }
            >
              <p
                className="ant-scroll-number-only-unit"
                key="0"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="1"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="2"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="3"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="4"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="5"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="6"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="7"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="8"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="9"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="10"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit current"
                key="11"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="12"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="13"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="14"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="15"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="16"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="17"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="18"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="19"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="20"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="21"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="22"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="23"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="24"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="25"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="26"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="27"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="28"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="29"
              >
                9
              </p>
            </span>
            <span
              className="ant-scroll-number-only"
              key="0"
              style={
                Object {
                  "WebkitTransform": "translateY(-1100%)",
                  "msTransform": "translateY(-1100%)",
                  "transform": "translateY(-1100%)",
                  "transition": "none",
                }
              }
            >
              <p
                className="ant-scroll-number-only-unit"
                key="0"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="1"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="2"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="3"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="4"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="5"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="6"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="7"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="8"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="9"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="10"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit current"
                key="11"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="12"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="13"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="14"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="15"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="16"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="17"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="18"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="19"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="20"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="21"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="22"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="23"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="24"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="25"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="26"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="27"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="28"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="29"
              >
                9
              </p>
            </span>
          </sup>
        </ScrollNumber>
      </AnimateChild>
    </Animate>
  </span>
</Badge>
`;

exports[`Badge should render when count is changed 5`] = `
<Badge
  count={10}
>
  <span
    className="ant-badge ant-badge-not-a-wrapper"
  >
    <Animate
      animation={Object {}}
      component=""
      componentProps={Object {}}
      onAppear={[Function]}
      onEnd={[Function]}
      onEnter={[Function]}
      onLeave={[Function]}
      showProp="data-show"
      transitionAppear={true}
      transitionEnter={true}
      transitionLeave={true}
      transitionName=""
    >
      <AnimateChild
        animation={Object {}}
        key="scrollNumber"
        transitionAppear={true}
        transitionEnter={true}
        transitionLeave={true}
        transitionName=""
      >
        <ScrollNumber
          className="ant-badge-count ant-badge-multiple-words"
          count={10}
          data-show={true}
          key="scrollNumber"
          prefixCls="ant-scroll-number"
          title={10}
        >
          <sup
            className="ant-scroll-number ant-badge-count ant-badge-multiple-words"
            data-show={true}
            title={10}
          >
            99+
          </sup>
        </ScrollNumber>
      </AnimateChild>
    </Animate>
  </span>
</Badge>
`;

exports[`Badge should render when count is changed 6`] = `
<Badge
  count={9}
>
  <span
    className="ant-badge ant-badge-not-a-wrapper"
  >
    <Animate
      animation={Object {}}
      component=""
      componentProps={Object {}}
      onAppear={[Function]}
      onEnd={[Function]}
      onEnter={[Function]}
      onLeave={[Function]}
      showProp="data-show"
      transitionAppear={true}
      transitionEnter={true}
      transitionLeave={true}
      transitionName=""
    >
      <AnimateChild
        animation={Object {}}
        key="scrollNumber"
        transitionAppear={true}
        transitionEnter={true}
        transitionLeave={true}
        transitionName=""
      >
        <ScrollNumber
          className="ant-badge-count"
          count={9}
          data-show={true}
          key="scrollNumber"
          prefixCls="ant-scroll-number"
          title={9}
        >
          <sup
            className="ant-scroll-number ant-badge-count"
            data-show={true}
            title={9}
          >
            <span
              className="ant-scroll-number-only"
              key="1"
              style={
                Object {
                  "WebkitTransform": "translateY(-1100%)",
                  "msTransform": "translateY(-1100%)",
                  "transform": "translateY(-1100%)",
                  "transition": "none",
                }
              }
            >
              <p
                className="ant-scroll-number-only-unit"
                key="0"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="1"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="2"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="3"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="4"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="5"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="6"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="7"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="8"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="9"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="10"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit current"
                key="11"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="12"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="13"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="14"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="15"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="16"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="17"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="18"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="19"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="20"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="21"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="22"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="23"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="24"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="25"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="26"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="27"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="28"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="29"
              >
                9
              </p>
            </span>
            <span
              className="ant-scroll-number-only"
              key="0"
              style={
                Object {
                  "WebkitTransform": "translateY(-1000%)",
                  "msTransform": "translateY(-1000%)",
                  "transform": "translateY(-1000%)",
                  "transition": "none",
                }
              }
            >
              <p
                className="ant-scroll-number-only-unit"
                key="0"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="1"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="2"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="3"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="4"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="5"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="6"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="7"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="8"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="9"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit current"
                key="10"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="11"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="12"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="13"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="14"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="15"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="16"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="17"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="18"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="19"
              >
                9
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="20"
              >
                0
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="21"
              >
                1
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="22"
              >
                2
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="23"
              >
                3
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="24"
              >
                4
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="25"
              >
                5
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="26"
              >
                6
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="27"
              >
                7
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="28"
              >
                8
              </p>
              <p
                className="ant-scroll-number-only-unit"
                key="29"
              >
                9
              </p>
            </span>
          </sup>
        </ScrollNumber>
      </AnimateChild>
    </Animate>
  </span>
</Badge>
`;

exports[`Badge should support offset when count is a ReactNode 1`] = `
<span
  class="ant-badge"
>
  <a
    class="head-example"
    href="#"
  >
    head
  </a>
  <span
    class="ant-scroll-number-custom-component custom"
    style="right:-10px;margin-top:20px;color:#f5222d"
  />
</span>
`;