ant-design/components/badge/__tests__/__snapshots__/index.test.js.snap
xrkffgg 955fa520f1
fix: badge offset in rtl (#24724)
* fix: badge offset in rtl

* fix: update snap

* add test

* fix: offset

* fix: snap
2020-06-06 13:20:09 +08:00

3163 lines
71 KiB
Plaintext

// 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>
`;