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

252 lines
18 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/badge/demo/basic.vue correctly 1`] = `
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span>
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
<!----></span>
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><span role="img" aria-label="clock-circle" style="color: rgb(245, 34, 45);" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
<!----></span>
`;
exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
<div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span>
<div class="ant-btn-group"><button class="ant-btn ant-btn-default" type="button">
<!----><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span>
</button><button class="ant-btn ant-btn-default" type="button">
<!----><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span>
</button></div>
</div>
<div class="ant-divider ant-divider-horizontal" role="separator">
<!---->
</div>
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
<!----></span>
<button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
<div class="ant-switch-handle">
<!---->
</div><span class="ant-switch-inner"><span class="ant-switch-inner-checked"><!----></span><span class="ant-switch-inner-unchecked"><!----></span></span>
</button>
`;
exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
<h4 style="margin-bottom: 16px;">Presets:</h4>
<div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-pink"></span><span class="ant-badge-status-text">pink</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-red"></span><span class="ant-badge-status-text">red</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-yellow"></span><span class="ant-badge-status-text">yellow</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-orange"></span><span class="ant-badge-status-text">orange</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-cyan"></span><span class="ant-badge-status-text">cyan</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-green"></span><span class="ant-badge-status-text">green</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-blue"></span><span class="ant-badge-status-text">blue</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-purple"></span><span class="ant-badge-status-text">purple</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-geekblue"></span><span class="ant-badge-status-text">geekblue</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-magenta"></span><span class="ant-badge-status-text">magenta</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-volcano"></span><span class="ant-badge-status-text">volcano</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-gold"></span><span class="ant-badge-status-text">gold</span></span></div>
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
</div>
<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Custom</span></div>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0); color: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(45, 183, 245); color: rgb(45, 183, 245);"></span><span class="ant-badge-status-text">#2db7f5</span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(135, 208, 104); color: rgb(135, 208, 104);"></span><span class="ant-badge-status-text">#87d068</span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(16, 142, 233); color: rgb(16, 142, 233);"></span><span class="ant-badge-status-text">#108ee9</span></span>
`;
exports[`renders ./components/badge/demo/dot.vue correctly 1`] = `
<span class="ant-badge"><span role="img" aria-label="notification" style="font-size: 16px;" class="anticon anticon-notification"><svg focusable="false" class="" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
<!----></span>
<span class="ant-badge"><a href="#">Link something</a><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup><!----></span>
`;
exports[`renders ./components/badge/demo/link.vue correctly 1`] = `
<a href="#"><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span>
</a>
`;
exports[`renders ./components/badge/demo/no-wrapper.vue correctly 1`] = `
<span class="ant-badge ant-badge-not-a-wrapper"><!----><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="25"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">2</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span>
<span class="ant-badge ant-badge-not-a-wrapper"><!----><sup style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); box-shadow: 0 0 0 1px #d9d9d9 inset;" data-show="true" class="ant-scroll-number ant-badge-count" title="4"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">4</p></span></sup>
<!----></span>
<span class="ant-badge ant-badge-not-a-wrapper"><!----><sup style="background-color: rgb(82, 196, 26);" data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="109">99+</sup><!----></span>
`;
exports[`renders ./components/badge/demo/overflow.vue correctly 1`] = `
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
<!----></span>
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup>
<!----></span>
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup>
<!----></span>
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup>
<!----></span>
`;
exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
<div class="ant-ribbon-wrapper ">
<div class="ant-card ant-card-bordered ant-card-small">
<div class="ant-card-head">
<div class="ant-card-head-wrapper">
<div class="ant-card-head-title">Pushes open the window</div>
<!---->
</div>
<!---->
</div>
<!---->
<div class="ant-card-body">and raises the spyglass.</div>
<!---->
</div>
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"><span class="ant-ribbon-text">Hippies</span>
<div class="ant-ribbon-corner"></div>
</div>
</div>
`;
exports[`renders ./components/badge/demo/status.vue correctly 1`] = `
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text"><!----></span></span>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text"><!----></span></span>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text"><!----></span></span>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text"><!----></span></span>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text"><!----></span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">Success</span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">Error</span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text">Default</span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Processing</span></span>
<br>
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">warning</span></span>
`;
exports[`renders ./components/badge/demo/title.vue correctly 1`] = `
<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
<!----></span>
`;