test: update tour test
tangjinzhou
parent
28263bbe33
commit
1c7b7a35f6
|
|
@ -1,478 +0,0 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders ./components/tour/demo/basic.tsx extend context correctly 1`] = `
|
|
||||||
Array [
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Begin Tour
|
|
||||||
</span>
|
|
||||||
</button>,
|
|
||||||
<div
|
|
||||||
class="ant-divider ant-divider-horizontal"
|
|
||||||
role="separator"
|
|
||||||
/>,
|
|
||||||
<div
|
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
style="margin-right:8px"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Upload
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
style="margin-right:8px"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Save
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="ellipsis"
|
|
||||||
class="anticon anticon-ellipsis"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="ellipsis"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
]
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./components/tour/demo/non-modal.tsx extend context correctly 1`] = `
|
|
||||||
Array [
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Begin non-modal Tour
|
|
||||||
</span>
|
|
||||||
</button>,
|
|
||||||
<div
|
|
||||||
class="ant-divider ant-divider-horizontal"
|
|
||||||
role="separator"
|
|
||||||
/>,
|
|
||||||
<div
|
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
style="margin-right:8px"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Upload
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
style="margin-right:8px"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Save
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="ellipsis"
|
|
||||||
class="anticon anticon-ellipsis"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="ellipsis"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
]
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./components/tour/demo/placement.tsx extend context correctly 1`] = `
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Begin Tour
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./components/tour/demo/render-panel.tsx extend context correctly 1`] = `
|
|
||||||
<div
|
|
||||||
style="display:flex;flex-direction:column;row-gap:16px;background:rgba(50,0,0,0.65);padding:8px"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-arrow"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
role="tooltip"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="close"
|
|
||||||
class="anticon anticon-close ant-tour-close"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="close"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
class="ant-tour-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-title"
|
|
||||||
>
|
|
||||||
Hello World!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-description"
|
|
||||||
>
|
|
||||||
Hello World?!
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-footer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-sliders"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider-active ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-buttons"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Next
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-arrow"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
role="tooltip"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="close"
|
|
||||||
class="anticon anticon-close ant-tour-close"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="close"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
class="ant-tour-cover"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
alt="tour.png"
|
|
||||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-title"
|
|
||||||
>
|
|
||||||
Hello World!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-description"
|
|
||||||
>
|
|
||||||
Hello World?!
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-footer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-sliders"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider-active ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-buttons"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-prev-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Previous
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Next
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure ant-tour-primary"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-arrow"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
role="tooltip"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-primary ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="close"
|
|
||||||
class="anticon anticon-close ant-tour-close"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="close"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
class="ant-tour-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-title"
|
|
||||||
>
|
|
||||||
Hello World!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-description"
|
|
||||||
>
|
|
||||||
Hello World?!
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-footer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-sliders"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider-active ant-tour-slider"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-buttons"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Previous
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Finish
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`renders ./components/tour/demo/basic.vue correctly 1`] = `
|
||||||
|
<button class="ant-btn ant-btn-primary" type="button">
|
||||||
|
<!----><span>Begin Tour</span>
|
||||||
|
</button>
|
||||||
|
<div class="ant-divider ant-divider-horizontal" role="separator">
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="ant-space ant-space-horizontal ant-space-align-center">
|
||||||
|
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
|
||||||
|
<!----><span>Upload</span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
|
||||||
|
<!----><span>Save</span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button">
|
||||||
|
<!----><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/tour/demo/indicator.vue correctly 1`] = `
|
||||||
|
<button class="ant-btn ant-btn-primary" type="button">
|
||||||
|
<!----><span>Begin Tour</span>
|
||||||
|
</button>
|
||||||
|
<div class="ant-divider ant-divider-horizontal" role="separator">
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="ant-space ant-space-horizontal ant-space-align-center">
|
||||||
|
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
|
||||||
|
<!----><span>Upload</span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
|
||||||
|
<!----><span>Save</span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button">
|
||||||
|
<!----><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/tour/demo/mask.vue correctly 1`] = `
|
||||||
|
<button class="ant-btn ant-btn-primary" type="button">
|
||||||
|
<!----><span>Begin Tour</span>
|
||||||
|
</button>
|
||||||
|
<div class="ant-divider ant-divider-horizontal" role="separator">
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="ant-space ant-space-horizontal ant-space-align-center">
|
||||||
|
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
|
||||||
|
<!----><span>Upload</span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
|
||||||
|
<!----><span>Save</span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button">
|
||||||
|
<!----><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/tour/demo/non-modal.vue correctly 1`] = `
|
||||||
|
<button class="ant-btn ant-btn-primary" type="button">
|
||||||
|
<!----><span>Begin Tour</span>
|
||||||
|
</button>
|
||||||
|
<div class="ant-divider ant-divider-horizontal" role="separator">
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
<div class="ant-space ant-space-horizontal ant-space-align-center">
|
||||||
|
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-default" type="button">
|
||||||
|
<!----><span>Upload</span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
|
||||||
|
<!----><span>Save</span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button">
|
||||||
|
<!----><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span>
|
||||||
|
</button></div>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/tour/demo/placement.vue correctly 1`] = `
|
||||||
|
<button class="ant-btn ant-btn-primary" type="button">
|
||||||
|
<!----><span>Begin Tour</span>
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
|
@ -1,478 +0,0 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders ./components/tour/demo/basic.tsx correctly 1`] = `
|
|
||||||
Array [
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Begin Tour
|
|
||||||
</span>
|
|
||||||
</button>,
|
|
||||||
<div
|
|
||||||
class="ant-divider ant-divider-horizontal"
|
|
||||||
role="separator"
|
|
||||||
/>,
|
|
||||||
<div
|
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
style="margin-right:8px"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Upload
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
style="margin-right:8px"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Save
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="ellipsis"
|
|
||||||
class="anticon anticon-ellipsis"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="ellipsis"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
]
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./components/tour/demo/non-modal.tsx correctly 1`] = `
|
|
||||||
Array [
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Begin non-modal Tour
|
|
||||||
</span>
|
|
||||||
</button>,
|
|
||||||
<div
|
|
||||||
class="ant-divider ant-divider-horizontal"
|
|
||||||
role="separator"
|
|
||||||
/>,
|
|
||||||
<div
|
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
style="margin-right:8px"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Upload
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
style="margin-right:8px"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Save
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-space-item"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="ellipsis"
|
|
||||||
class="anticon anticon-ellipsis"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="ellipsis"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
]
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./components/tour/demo/placement.tsx correctly 1`] = `
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Begin Tour
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./components/tour/demo/render-panel.tsx correctly 1`] = `
|
|
||||||
<div
|
|
||||||
style="display:flex;flex-direction:column;row-gap:16px;background:rgba(50,0,0,0.65);padding:8px"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-arrow"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
role="tooltip"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="close"
|
|
||||||
class="anticon anticon-close ant-tour-close"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="close"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
class="ant-tour-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-title"
|
|
||||||
>
|
|
||||||
Hello World!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-description"
|
|
||||||
>
|
|
||||||
Hello World?!
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-footer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-sliders"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider-active ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-buttons"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Next
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-arrow"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
role="tooltip"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="close"
|
|
||||||
class="anticon anticon-close ant-tour-close"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="close"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
class="ant-tour-cover"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
alt="tour.png"
|
|
||||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-title"
|
|
||||||
>
|
|
||||||
Hello World!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-description"
|
|
||||||
>
|
|
||||||
Hello World?!
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-footer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-sliders"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider-active ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-buttons"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-prev-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Previous
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Next
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour ant-tour-pure ant-tour-placement-top ant-tour-pure ant-tour-primary"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-arrow"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
role="tooltip"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-primary ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="close"
|
|
||||||
class="anticon anticon-close ant-tour-close"
|
|
||||||
role="img"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="close"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
class="ant-tour-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-title"
|
|
||||||
>
|
|
||||||
Hello World!
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-description"
|
|
||||||
>
|
|
||||||
Hello World?!
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-footer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-sliders"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider-active ant-tour-slider"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-buttons"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Previous
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Finish
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
@ -1,706 +0,0 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Tour Primary 1`] = `
|
|
||||||
<body>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
disabled=""
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Cover
|
|
||||||
</button>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="ant-tour"
|
|
||||||
style="z-index: 1090; opacity: 0;"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-primary ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-arrow"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="close"
|
|
||||||
class="anticon anticon-close ant-tour-close"
|
|
||||||
role="img"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="close"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
class="ant-tour-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-title"
|
|
||||||
>
|
|
||||||
primary title
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-description"
|
|
||||||
>
|
|
||||||
primary description.
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-footer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-sliders"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-buttons"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Finish
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-target-placeholder"
|
|
||||||
style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-mask"
|
|
||||||
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
style="width: 100%; height: 100%;"
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<mask
|
|
||||||
id="ant-tour-mask-test-id"
|
|
||||||
>
|
|
||||||
<rect
|
|
||||||
fill="white"
|
|
||||||
height="100%"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
class="ant-tour-placeholder-animated"
|
|
||||||
fill="black"
|
|
||||||
height="12"
|
|
||||||
rx="2"
|
|
||||||
width="12"
|
|
||||||
x="-6"
|
|
||||||
y="-6"
|
|
||||||
/>
|
|
||||||
</mask>
|
|
||||||
</defs>
|
|
||||||
<rect
|
|
||||||
fill="rgba(0,0,0,0.5)"
|
|
||||||
height="100%"
|
|
||||||
mask="url(#ant-tour-mask-test-id)"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="-6"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="100%"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="-6"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="calc(100vh - 6px)"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="6"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="100%"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="calc(100vw - 6px)"
|
|
||||||
x="6"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
</body>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Tour basic 1`] = `
|
|
||||||
<body>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Show
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
disabled=""
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Cover
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
disabled=""
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Placement
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
</body>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Tour button props onClick 1`] = `
|
|
||||||
<body>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<span
|
|
||||||
id="btnName"
|
|
||||||
>
|
|
||||||
finishButton
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
disabled=""
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
target
|
|
||||||
</button>
|
|
||||||
<div />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
</body>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Tour custom step pre btn & next btn className & style 1`] = `
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="ant-tour"
|
|
||||||
style="z-index: 1090; opacity: 0;"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="close"
|
|
||||||
class="anticon anticon-close ant-tour-close"
|
|
||||||
role="img"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="close"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
class="ant-tour-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-title"
|
|
||||||
>
|
|
||||||
Show in Center
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-description"
|
|
||||||
>
|
|
||||||
Here is the content of Tour.
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-footer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-sliders"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider-active ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-buttons"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn customClassName"
|
|
||||||
style="background-color: rgb(69, 69, 255);"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Next
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`;
|
|
||||||
|
|
||||||
exports[`Tour single 1`] = `
|
|
||||||
<body>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
disabled=""
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Cover
|
|
||||||
</button>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="ant-tour"
|
|
||||||
style="z-index: 1090; opacity: 0;"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-arrow"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="close"
|
|
||||||
class="anticon anticon-close ant-tour-close"
|
|
||||||
role="img"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="close"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
class="ant-tour-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-title"
|
|
||||||
>
|
|
||||||
cover title
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-description"
|
|
||||||
>
|
|
||||||
cover description.
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-footer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-sliders"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-buttons"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Finish
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-target-placeholder"
|
|
||||||
style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-mask"
|
|
||||||
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
style="width: 100%; height: 100%;"
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<mask
|
|
||||||
id="ant-tour-mask-test-id"
|
|
||||||
>
|
|
||||||
<rect
|
|
||||||
fill="white"
|
|
||||||
height="100%"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
class="ant-tour-placeholder-animated"
|
|
||||||
fill="black"
|
|
||||||
height="12"
|
|
||||||
rx="2"
|
|
||||||
width="12"
|
|
||||||
x="-6"
|
|
||||||
y="-6"
|
|
||||||
/>
|
|
||||||
</mask>
|
|
||||||
</defs>
|
|
||||||
<rect
|
|
||||||
fill="rgba(0,0,0,0.5)"
|
|
||||||
height="100%"
|
|
||||||
mask="url(#ant-tour-mask-test-id)"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="-6"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="100%"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="-6"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="calc(100vh - 6px)"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="6"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="100%"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="calc(100vw - 6px)"
|
|
||||||
x="6"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
</body>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Tour step support Primary 1`] = `
|
|
||||||
<body>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
disabled=""
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Cover
|
|
||||||
</button>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="ant-tour"
|
|
||||||
style="z-index: 1090; opacity: 0;"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-primary ant-tour-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-arrow"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="ant-tour-inner"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
aria-label="close"
|
|
||||||
class="anticon anticon-close ant-tour-close"
|
|
||||||
role="img"
|
|
||||||
tabindex="-1"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
data-icon="close"
|
|
||||||
fill="currentColor"
|
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div
|
|
||||||
class="ant-tour-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-title"
|
|
||||||
>
|
|
||||||
primary title
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-description"
|
|
||||||
>
|
|
||||||
primary description.
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-footer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-tour-sliders"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="ant-tour-slider-active ant-tour-slider"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-buttons"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-tour-prev-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Previous
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="ant-btn ant-btn-default ant-btn-sm ant-tour-next-btn"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
Finish
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-target-placeholder"
|
|
||||||
style="left: -6px; top: -6px; width: 12px; height: 12px; position: fixed; pointer-events: none;"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="ant-tour-mask"
|
|
||||||
style="position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 900; pointer-events: none;"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
style="width: 100%; height: 100%;"
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<mask
|
|
||||||
id="ant-tour-mask-test-id"
|
|
||||||
>
|
|
||||||
<rect
|
|
||||||
fill="white"
|
|
||||||
height="100%"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
class="ant-tour-placeholder-animated"
|
|
||||||
fill="black"
|
|
||||||
height="12"
|
|
||||||
rx="2"
|
|
||||||
width="12"
|
|
||||||
x="-6"
|
|
||||||
y="-6"
|
|
||||||
/>
|
|
||||||
</mask>
|
|
||||||
</defs>
|
|
||||||
<rect
|
|
||||||
fill="rgba(0,0,0,0.5)"
|
|
||||||
height="100%"
|
|
||||||
mask="url(#ant-tour-mask-test-id)"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="-6"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="100%"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="-6"
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="calc(100vh - 6px)"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="100%"
|
|
||||||
x="0"
|
|
||||||
y="6"
|
|
||||||
/>
|
|
||||||
<rect
|
|
||||||
fill="transparent"
|
|
||||||
height="100%"
|
|
||||||
pointer-events="auto"
|
|
||||||
width="calc(100vw - 6px)"
|
|
||||||
x="6"
|
|
||||||
y="0"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
</body>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Tour steps is empty 1`] = `
|
|
||||||
<body>
|
|
||||||
<div
|
|
||||||
style="position: absolute; top: 0px; left: 0px; width: 100%;"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
disabled=""
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Cover
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
`;
|
|
||||||
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
import { extendTest } from '../../../tests/shared/demoTest';
|
|
||||||
|
|
||||||
extendTest('tour');
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
|
||||||
|
|
||||||
describe('Tooltip tour', () => {
|
|
||||||
imageDemoTest('tour');
|
|
||||||
});
|
|
||||||
|
|
@ -1,287 +0,0 @@
|
||||||
import React, { useRef, useEffect } from 'react';
|
|
||||||
import Tour from '..';
|
|
||||||
import mountTest from '../../../tests/shared/mountTest';
|
|
||||||
import rtlTest from '../../../tests/shared/rtlTest';
|
|
||||||
import { fireEvent, render, screen } from '../../../tests/utils';
|
|
||||||
import panelRender from '../panelRender';
|
|
||||||
|
|
||||||
describe('Tour', () => {
|
|
||||||
mountTest(Tour);
|
|
||||||
rtlTest(Tour);
|
|
||||||
|
|
||||||
it('single', () => {
|
|
||||||
const App: React.FC = () => {
|
|
||||||
const coverBtnRef = useRef<HTMLButtonElement>(null);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<button disabled ref={coverBtnRef} type="button">
|
|
||||||
Cover
|
|
||||||
</button>
|
|
||||||
<Tour
|
|
||||||
steps={[
|
|
||||||
{
|
|
||||||
title: 'cover title',
|
|
||||||
description: 'cover description.',
|
|
||||||
target: () => coverBtnRef.current!,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const { getByText, baseElement } = render(<App />);
|
|
||||||
expect(getByText('cover title')).toBeTruthy();
|
|
||||||
expect(getByText('cover description.')).toBeTruthy();
|
|
||||||
expect(baseElement).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('steps is empty', () => {
|
|
||||||
const App: React.FC = () => {
|
|
||||||
const coverBtnRef = useRef<HTMLButtonElement>(null);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<button disabled ref={coverBtnRef} type="button">
|
|
||||||
Cover
|
|
||||||
</button>
|
|
||||||
<Tour steps={[]} />
|
|
||||||
<Tour />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const { baseElement } = render(<App />);
|
|
||||||
expect(baseElement).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('button props onClick', () => {
|
|
||||||
const App: React.FC = () => {
|
|
||||||
const coverBtnRef = useRef<HTMLButtonElement>(null);
|
|
||||||
const [btnName, steBtnName] = React.useState<string>('defaultBtn');
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<span id="btnName">{btnName}</span>
|
|
||||||
<button disabled ref={coverBtnRef} type="button">
|
|
||||||
target
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<Tour
|
|
||||||
steps={[
|
|
||||||
{
|
|
||||||
title: '',
|
|
||||||
description: '',
|
|
||||||
target: () => coverBtnRef.current!,
|
|
||||||
nextButtonProps: {
|
|
||||||
onClick: () => steBtnName('nextButton'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '',
|
|
||||||
target: () => coverBtnRef.current!,
|
|
||||||
prevButtonProps: {
|
|
||||||
onClick: () => steBtnName('prevButton'),
|
|
||||||
},
|
|
||||||
nextButtonProps: {
|
|
||||||
onClick: () => steBtnName('finishButton'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const { baseElement } = render(<App />);
|
|
||||||
expect(baseElement.querySelector('#btnName')).toHaveTextContent('defaultBtn');
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
|
||||||
expect(baseElement.querySelector('#btnName')).toHaveTextContent('nextButton');
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
|
|
||||||
expect(baseElement.querySelector('#btnName')).toHaveTextContent('prevButton');
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
|
|
||||||
expect(baseElement.querySelector('#btnName')).toHaveTextContent('finishButton');
|
|
||||||
expect(baseElement).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('Primary', () => {
|
|
||||||
const App: React.FC = () => {
|
|
||||||
const coverBtnRef = useRef<HTMLButtonElement>(null);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<button disabled ref={coverBtnRef} type="button">
|
|
||||||
Cover
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<Tour
|
|
||||||
type="primary"
|
|
||||||
steps={[
|
|
||||||
{
|
|
||||||
title: 'primary title',
|
|
||||||
description: 'primary description.',
|
|
||||||
target: () => coverBtnRef.current!,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const { getByText, baseElement } = render(<App />);
|
|
||||||
expect(getByText('primary description.')).toBeTruthy();
|
|
||||||
expect(baseElement.querySelector('.ant-tour-content')).toHaveClass('ant-tour-primary');
|
|
||||||
expect(baseElement).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('step support Primary', () => {
|
|
||||||
const App: React.FC = () => {
|
|
||||||
const coverBtnRef = useRef<HTMLButtonElement>(null);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<button disabled ref={coverBtnRef} type="button">
|
|
||||||
Cover
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<Tour
|
|
||||||
type="default"
|
|
||||||
steps={[
|
|
||||||
{
|
|
||||||
title: 'cover title',
|
|
||||||
description: 'cover description.',
|
|
||||||
target: () => coverBtnRef.current!,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'primary title',
|
|
||||||
description: 'primary description.',
|
|
||||||
target: () => coverBtnRef.current!,
|
|
||||||
type: 'primary',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const { getByText, container, baseElement } = render(<App />);
|
|
||||||
expect(getByText('cover description.')).toBeTruthy();
|
|
||||||
expect(container.querySelector('.ant-tour-content.ant-tour-primary')).toBeFalsy();
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
|
||||||
expect(getByText('primary description.')).toBeTruthy();
|
|
||||||
expect(container.querySelector('.ant-tour-content.ant-tour-primary')).toBeTruthy();
|
|
||||||
expect(baseElement).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('basic', () => {
|
|
||||||
const App: React.FC = () => {
|
|
||||||
const coverBtnRef = useRef<HTMLButtonElement>(null);
|
|
||||||
const placementBtnRef = useRef<HTMLButtonElement>(null);
|
|
||||||
|
|
||||||
const [show, setShow] = React.useState<boolean>();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (show === false) {
|
|
||||||
setShow(true);
|
|
||||||
}
|
|
||||||
}, [show]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setShow(false);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Show
|
|
||||||
</button>
|
|
||||||
<button disabled ref={coverBtnRef} type="button">
|
|
||||||
Cover
|
|
||||||
</button>
|
|
||||||
<button disabled ref={placementBtnRef} type="button">
|
|
||||||
Placement
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{show && (
|
|
||||||
<Tour
|
|
||||||
steps={[
|
|
||||||
{
|
|
||||||
title: 'Show in Center',
|
|
||||||
description: 'Here is the content of Tour.',
|
|
||||||
target: null,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'With Cover',
|
|
||||||
description: 'Here is the content of Tour.',
|
|
||||||
target: () => coverBtnRef.current!,
|
|
||||||
cover: (
|
|
||||||
<img
|
|
||||||
alt="tour.png"
|
|
||||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Adjust Placement',
|
|
||||||
description: 'Here is the content of Tour which show on the right.',
|
|
||||||
placement: 'right',
|
|
||||||
target: () => placementBtnRef.current!,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const { getByText, container, baseElement } = render(<App />);
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'Show' }));
|
|
||||||
expect(getByText('Show in Center')).toBeTruthy();
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
|
||||||
expect(getByText('Here is the content of Tour.')).toBeTruthy();
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
|
|
||||||
expect(getByText('Adjust Placement')).toBeTruthy();
|
|
||||||
fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
|
|
||||||
expect(container.querySelector('.ant-tour')).toBeFalsy();
|
|
||||||
expect(baseElement).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
it('panelRender should correct render when total is undefined', () => {
|
|
||||||
expect(() => {
|
|
||||||
panelRender({ total: undefined, title: <div>test</div> }, 0, 'default');
|
|
||||||
}).not.toThrow();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('custom step pre btn & next btn className & style', () => {
|
|
||||||
const App: React.FC = () => (
|
|
||||||
<Tour
|
|
||||||
steps={[
|
|
||||||
{
|
|
||||||
title: 'Show in Center',
|
|
||||||
description: 'Here is the content of Tour.',
|
|
||||||
nextButtonProps: {
|
|
||||||
className: 'customClassName',
|
|
||||||
style: {
|
|
||||||
backgroundColor: 'rgb(69,69,255)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'With Cover',
|
|
||||||
description: 'Here is the content of Tour.',
|
|
||||||
cover: (
|
|
||||||
<img
|
|
||||||
alt="tour.png"
|
|
||||||
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
|
|
||||||
const { container } = render(<App />);
|
|
||||||
// className
|
|
||||||
expect(
|
|
||||||
screen.getByRole('button', { name: 'Next' }).className.includes('customClassName'),
|
|
||||||
).toEqual(true);
|
|
||||||
// style
|
|
||||||
expect(screen.getByRole('button', { name: 'Next' }).style.backgroundColor).toEqual(
|
|
||||||
'rgb(69, 69, 255)',
|
|
||||||
);
|
|
||||||
expect(container.firstChild).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue