blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-07 21:19:45 +08:00
Code Issues Projects Releases Wiki Activity

test(NumberKeyboard): update test cases

Browse Source
This commit is contained in:
chenjiahan 2021-01-12 21:02:38 +08:00
parent 52a0e5a8c7
commit 246f79d86d
5 changed files with 273 additions and 701 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/number-keyboard/index.js
View File

@ -122,6 +122,7 @@ export default createComponent({
};
const onAnimationEnd = () => {
console.log('onAnimationEnd');
emit(props.show ? 'show' : 'hide');
};

442
src/number-keyboard/test/__snapshots__/index.legacy.js.snap
View File

@ -1,442 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`extra-key prop 1`] = `
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">foo</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
`;
exports[`extra-key slot 1`] = `
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">Custom Extra Key</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
`;
exports[`focus on key 1`] = `
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--active">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
</svg></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
`;
exports[`focus on key 2`] = `
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
</svg></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
`;
exports[`move and blur key 1`] = `
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--active">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
</svg></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
`;
exports[`move and blur key 2`] = `
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--active">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
</svg></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
`;
exports[`move and blur key 3`] = `
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
</svg></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
`;
exports[`render title 1`] = `
<div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__header">
<h2 class="van-number-keyboard__title">Title</h2><button type="button" class="van-number-keyboard__close">Close</button>
</div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
</svg></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
`;
exports[`title-left slot 1`] = `
<div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__header"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key"><svg viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg" class="van-key__collapse-icon">
<path d="M25.877 12.843h-1.502c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.5c.187 0 .187 0 .187-.188v-1.511c0-.19 0-.191-.185-.191zM17.999 10.2c0 .188 0 .188.188.188h1.687c.188 0 .188 0 .188-.188V8.688c0-.187.004-.187-.186-.19h-1.69c-.187 0-.187 0-.187.19V10.2zm2.25-3.967h1.5c.188 0 .188 0 .188-.188v-1.7c0-.19 0-.19-.188-.19h-1.5c-.189 0-.189 0-.189.19v1.7c0 .188 0 .188.19.188zm2.063 4.157h3.563c.187 0 .187 0 .187-.189V4.346c0-.19.004-.19-.185-.19h-1.69c-.187 0-.187 0-.187.188v4.155h-1.688c-.187 0-.187 0-.187.189v1.514c0 .19 0 .19.187.19zM14.812 24l2.812-3.4H12l2.813 3.4zm-9-11.157H4.31c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h1.502c.187 0 .187 0 .187-.188v-1.511c0-.19.01-.191-.189-.191zm15.937 0H8.25c-.188 0-.188 0-.188.19v1.512c0 .188 0 .188.188.188h13.5c.188 0 .188 0 .188-.188v-1.511c0-.19 0-.191-.188-.191zm-11.438-2.454h1.5c.188 0 .188 0 .188-.188V8.688c0-.187 0-.187-.188-.189h-1.5c-.187 0-.187 0-.187.189V10.2c0 .188 0 .188.187.188zM27.94 0c.563 0 .917.21 1.313.567.518.466.748.757.748 1.51v14.92c0 .567-.188 1.134-.562 1.512-.376.378-.938.566-1.313.566H2.063c-.563 0-.938-.188-1.313-.566-.562-.378-.75-.945-.75-1.511V2.078C0 1.51.188.944.562.567.938.189 1.5 0 1.875 0zm-.062 2H2v14.92h25.877V2zM5.81 4.157c.19 0 .19 0 .19.189v1.762c-.003.126-.024.126-.188.126H4.249c-.126-.003-.126-.023-.126-.188v-1.7c-.187-.19 0-.19.188-.19zm10.5 2.077h1.503c.187 0 .187 0 .187-.188v-1.7c0-.19 0-.19-.187-.19h-1.502c-.188 0-.188.001-.188.19v1.7c0 .188 0 .188.188.188zM7.875 8.5c.187 0 .187.002.187.189V10.2c0 .188 0 .188-.187.188H4.249c-.126-.002-.126-.023-.126-.188V8.625c.003-.126.024-.126.188-.126zm7.875 0c.19.002.19.002.19.189v1.575c-.003.126-.024.126-.19.126h-1.563c-.126-.002-.126-.023-.126-.188V8.625c.002-.126.023-.126.189-.126zm-6-4.342c.187 0 .187 0 .187.189v1.7c0 .188 0 .188-.187.188H8.187c-.126-.003-.126-.023-.126-.188V4.283c.003-.126.024-.126.188-.126zm3.94 0c.185 0 .372 0 .372.189v1.762c-.002.126-.023.126-.187.126h-1.75C12 6.231 12 6.211 12 6.046v-1.7c0-.19.187-.19.187-.19z" fill="currentColor"></path>
</svg></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></div>
</div>
</div>
</div>
</div>
`;

40
src/number-keyboard/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,40 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render extra key correctly when using extra-key prop 1`] = `
<div role="button"
tabindex="0"
class="van-key"
>
foo
</div>
`;
exports[`should render extra-key slot correctly 1`] = `
<div role="button"
tabindex="0"
class="van-key"
>
Custom Extra Key
</div>
`;
exports[`should render title and close button correctly 1`] = `
<div class="van-number-keyboard__header">
<h2 class="van-number-keyboard__title">
Title
</h2>
<button type="button"
class="van-number-keyboard__close"
>
Close
</button>
</div>
`;
exports[`should render title-left slot correctly 1`] = `
<div class="van-number-keyboard__header">
<span class="van-number-keyboard__title-left">
Custom Title Left
</span>
</div>
`;

259
src/number-keyboard/test/index.legacy.js
View File

@ -1,259 +0,0 @@
import NumberKeyboard from '..';
import { mount, trigger } from '../../../test';
function clickKey(key) {
trigger(key, 'touchstart');
trigger(key, 'touchend');
}
test('click number key', () => {
const wrapper = mount(NumberKeyboard, {
props: {
theme: 'custom',
closeButtonText: 'close',
},
});
clickKey(wrapper.findAll('.van-key')[0]);
expect(wrapper.emitted('input')[0][0]).toEqual(1);
wrapper.unmount();
});
test('click delete key', () => {
const wrapper = mount(NumberKeyboard);
clickKey(wrapper.findAll('.van-key').at(11));
expect(wrapper.emitted('delete')).toBeTruthy();
});
test('click collapse key', () => {
const wrapper = mount(NumberKeyboard);
clickKey(wrapper.findAll('.van-key').at(9));
expect(wrapper.emitted('input')).toBeFalsy();
expect(wrapper.emitted('blur')).toBeFalsy();
wrapper.setProps({ show: true });
clickKey(wrapper.findAll('.van-key').at(9));
expect(wrapper.emitted('blur')).toBeTruthy();
});
test('click close button', () => {
const wrapper = mount(NumberKeyboard, {
props: {
theme: 'custom',
closeButtonText: 'close',
},
});
clickKey(wrapper.findAll('.van-key').at(12));
expect(wrapper.emitted('close')).toBeTruthy();
});
test('listen to show/hide event when has transtion', () => {
const wrapper = mount(NumberKeyboard);
wrapper.vm.show = true;
wrapper.trigger('animationend');
wrapper.vm.show = false;
wrapper.trigger('animationend');
expect(wrapper.emitted('show')).toBeTruthy();
expect(wrapper.emitted('hide')).toBeTruthy();
});
test('listen to show event when no transtion', () => {
const wrapper = mount(NumberKeyboard, {
props: {
transition: false,
},
});
wrapper.vm.show = true;
wrapper.vm.show = false;
expect(wrapper.emitted('show')).toBeTruthy();
expect(wrapper.emitted('hide')).toBeTruthy();
});
test('render title', () => {
const wrapper = mount(NumberKeyboard, {
props: {
title: 'Title',
closeButtonText: 'Close',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('title-left slot', () => {
const wrapper = mount(NumberKeyboard, {
slots: {
'title-left': () => 'Custom Title Left',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('extra-key prop', () => {
const wrapper = mount(NumberKeyboard, {
props: {
extraKey: 'foo',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('extra-key slot', () => {
const wrapper = mount(NumberKeyboard, {
slots: {
'extra-key': () => 'Custom Extra Key',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('hideOnClickOutside', () => {
const wrapper = mount(NumberKeyboard, {
props: {
show: true,
},
});
trigger(document.body, 'touchstart');
expect(wrapper.emitted('blur')).toBeTruthy();
});
test('disable hideOnClickOutside', () => {
const wrapper = mount(NumberKeyboard, {
props: {
show: true,
hideOnClickOutside: false,
},
});
trigger(document.body, 'touchstart');
expect(wrapper.emitted('blur')).toBeFalsy();
});
test('focus on key', () => {
const wrapper = mount(NumberKeyboard);
const key = wrapper.find('.van-key');
trigger(key, 'touchstart');
expect(wrapper.html()).toMatchSnapshot();
trigger(key, 'touchend');
expect(wrapper.html()).toMatchSnapshot();
});
test('move and blur key', () => {
const wrapper = mount(NumberKeyboard);
const key = wrapper.find('.van-key');
trigger(key, 'touchstart');
expect(wrapper.html()).toMatchSnapshot();
trigger(key, 'touchmove', 0, 0);
expect(wrapper.html()).toMatchSnapshot();
trigger(key, 'touchmove', 100, 0);
expect(wrapper.html()).toMatchSnapshot();
trigger(key, 'touchend');
expect(wrapper.emitted('input')).toBeFalsy();
});
test('bind value', () => {
const wrapper = mount(NumberKeyboard, {
props: {
value: '',
},
listeners: {
'update:value': (value) => {
wrapper.setProps({ value });
},
},
});
const keys = wrapper.findAll('.van-key');
clickKey(keys[0]);
clickKey(keys[1]);
expect(wrapper.vm.value).toEqual('12');
clickKey(keys.at(11));
expect(wrapper.vm.value).toEqual('1');
});
test('maxlength', () => {
const onInput = jest.fn();
const wrapper = mount(NumberKeyboard, {
props: {
value: '',
maxlength: 1,
},
listeners: {
input: onInput,
'update:value': (value) => {
wrapper.setProps({ value });
},
},
});
const keys = wrapper.findAll('.van-key');
clickKey(keys[0]);
clickKey(keys[1]);
expect(wrapper.vm.value).toEqual('1');
expect(onInput).toHaveBeenCalledTimes(1);
});
test('show-delete-key prop', () => {
const wrapper = mount(NumberKeyboard, {
props: {
showDeleteKey: true,
},
});
expect(wrapper.contains('.van-key--delete')).toBeTruthy();
wrapper.setData({ showDeleteKey: false });
expect(wrapper.contains('.van-key--delete')).toBeFalsy();
wrapper.setData({
theme: 'custom',
showDeleteKey: true,
});
expect(wrapper.contains('.van-key--delete')).toBeTruthy();
wrapper.setData({ showDeleteKey: false });
expect(wrapper.contains('.van-key--delete')).toBeFalsy();
});
test('close-button-loading prop', () => {
const wrapper = mount(NumberKeyboard, {
props: {
show: true,
theme: 'custom',
closeButtonLoading: true,
},
});
expect(wrapper.contains('.van-key__loading-icon')).toBeTruthy();
});
test('random-key-order prop', () => {
const wrapper = mount(NumberKeyboard, {
propsData: {
show: true,
randomKeyOrder: true,
},
});
const keys = [];
const clickKeys = [];
for (let i = 0; i < 9; i++) {
keys.push(i + 1);
clickKey(wrapper.findAll('.van-key').at(i));
clickKeys.push(wrapper.emitted('input')[i][0]);
}
expect(keys.every((v, k) => keys[k] === clickKeys[k])).toEqual(false);
});

232
src/number-keyboard/test/index.spec.js Normal file
View File

@ -0,0 +1,232 @@
import NumberKeyboard from '..';
import { mount, trigger, later } from '../../../test';
function clickKey(key) {
trigger(key, 'touchstart');
trigger(key, 'touchend');
}
test('should emit input event after clicking number key', () => {
const wrapper = mount(NumberKeyboard);
clickKey(wrapper.findAll('.van-key')[0]);
expect(wrapper.emitted('input')[0][0]).toEqual(1);
wrapper.unmount();
});
test('should emit delete event after clicking delete key', () => {
const wrapper = mount(NumberKeyboard);
clickKey(wrapper.findAll('.van-key')[11]);
expect(wrapper.emitted('delete')).toBeTruthy();
});
test('should emit blur event after clicking collapse key', () => {
const wrapper = mount(NumberKeyboard, {
props: {
show: true,
},
});
clickKey(wrapper.findAll('.van-key')[9]);
expect(wrapper.emitted('blur')).toBeTruthy();
});
test('should should emit blur event when hidden', () => {
const wrapper = mount(NumberKeyboard);
clickKey(wrapper.findAll('.van-key')[9]);
expect(wrapper.emitted('input')).toBeFalsy();
expect(wrapper.emitted('blur')).toBeFalsy();
});
test('should emit close event after clicking close button', () => {
const wrapper = mount(NumberKeyboard, {
props: {
theme: 'custom',
},
});
clickKey(wrapper.findAll('.van-key')[12]);
expect(wrapper.emitted('close')).toBeTruthy();
});
test('should emit show/blur event when visibility changed and transition is disabled', async () => {
const wrapper = mount(NumberKeyboard, {
props: {
transition: false,
},
});
wrapper.setProps({ show: true });
await later();
expect(wrapper.emitted('show')).toBeTruthy();
wrapper.setProps({ show: false });
await later();
expect(wrapper.emitted('hide')).toBeTruthy();
});
test('should render title and close button correctly', () => {
const wrapper = mount(NumberKeyboard, {
props: {
title: 'Title',
closeButtonText: 'Close',
},
});
expect(wrapper.find('.van-number-keyboard__header').html()).toMatchSnapshot();
});
test('should render title-left slot correctly', () => {
const wrapper = mount(NumberKeyboard, {
slots: {
'title-left': () => 'Custom Title Left',
},
});
expect(wrapper.find('.van-number-keyboard__header').html()).toMatchSnapshot();
});
test('should render extra key correctly when using extra-key prop', () => {
const wrapper = mount(NumberKeyboard, {
props: {
extraKey: 'foo',
},
});
expect(wrapper.findAll('.van-key')[9].html()).toMatchSnapshot();
});
test('should render extra-key slot correctly', () => {
const wrapper = mount(NumberKeyboard, {
slots: {
'extra-key': () => 'Custom Extra Key',
},
});
expect(wrapper.findAll('.van-key')[9].html()).toMatchSnapshot();
});
test('should emit blur event after clicking outside', () => {
const wrapper = mount(NumberKeyboard, {
props: {
show: true,
},
});
trigger(document.body, 'touchstart');
expect(wrapper.emitted('blur')).toBeTruthy();
});
test('should not emit blur event after clicking outside when hideOnClickOutside is false', () => {
const wrapper = mount(NumberKeyboard, {
props: {
show: true,
hideOnClickOutside: false,
},
});
trigger(document.body, 'touchstart');
expect(wrapper.emitted('blur')).toBeFalsy();
});
test('should add "van-key--active" className to key when focused', async () => {
const wrapper = mount(NumberKeyboard);
const key = wrapper.find('.van-key');
await trigger(key, 'touchstart');
expect(key.classes()).toContain('van-key--active');
await trigger(key, 'touchend');
expect(key.classes()).not.toContain('van-key--active');
expect(wrapper.emitted('input')).toBeTruthy();
});
test('should remove "van-key--active" className from key when touch moved', async () => {
const wrapper = mount(NumberKeyboard);
const key = wrapper.find('.van-key');
await trigger(key, 'touchstart');
expect(key.classes()).toContain('van-key--active');
await trigger(key, 'touchmove', 0, 0);
expect(key.classes()).toContain('van-key--active');
await trigger(key, 'touchmove', 100, 0);
expect(key.classes()).not.toContain('van-key--active');
await trigger(key, 'touchend');
expect(wrapper.emitted('input')).toBeFalsy();
});
test('should emit "update:modelValue" event after clicking key', () => {
const wrapper = mount(NumberKeyboard);
const keys = wrapper.findAll('.van-key');
clickKey(keys[0]);
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1');
clickKey(keys[1]);
expect(wrapper.emitted('update:modelValue')[1][0]).toEqual('2');
});
test('should limit max length of modelValue when using maxlength prop', async () => {
const onInput = jest.fn();
const wrapper = mount(NumberKeyboard, {
props: {
onInput,
maxlength: 1,
},
});
const keys = wrapper.findAll('.van-key');
clickKey(keys[0]);
expect(onInput).toHaveBeenCalledTimes(1);
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1');
await wrapper.setProps({ modelValue: '1' });
clickKey(keys[1]);
expect(onInput).toHaveBeenCalledTimes(1);
expect(wrapper.emitted('update:modelValue').length).toEqual(1);
});
test('should not render delete key when show-delete-key prop is false', async () => {
const wrapper = mount(NumberKeyboard, {
props: {
showDeleteKey: true,
},
});
expect(wrapper.find('.van-key--delete').exists()).toBeTruthy();
await wrapper.setProps({ showDeleteKey: false });
expect(wrapper.find('.van-key--delete').exists()).toBeFalsy();
});
test('should render loading icon when using close-button-loading prop', () => {
const wrapper = mount(NumberKeyboard, {
props: {
show: true,
theme: 'custom',
closeButtonLoading: true,
},
});
expect(wrapper.find('.van-key__loading-icon').exists()).toBeTruthy();
});
test('should shuffle key order when using random-key-order prop', () => {
const wrapper = mount(NumberKeyboard, {
propsData: {
show: true,
randomKeyOrder: true,
},
});
const keys = [];
const clickKeys = [];
for (let i = 0; i < 9; i++) {
keys.push(i + 1);
clickKey(wrapper.findAll('.van-key')[i]);
clickKeys.push(wrapper.emitted('input')[i][0]);
}
expect(keys.every((v, k) => keys[k] === clickKeys[k])).toEqual(false);
});