Skip to content

Commit

Permalink
test: pagination test (#44)
Browse files Browse the repository at this point in the history 
* test: steps test

* test: swipe test

* test: list test

* test: dialog test

* test: pagination test
  • Loading branch information
@wangKBweb
wangKBweb authored Mar 20, 2022
1 parent b05f028 commit b688380
Show file tree
Hide file tree
Showing 2 changed files with 570 additions and 186 deletions.
382 changes: 382 additions & 0 deletions packages/varlet-vue2-ui/src/pagination/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,387 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Size related props 1`] = `
"<ul class=\\"var-pagination\\">
<li class=\\"var-pagination__item var-pagination__prev var-pagination__item-disabled var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__simple\\">
<div class=\\"var-input var--box\\" var-pagination-cover=\\"\\">
<div class=\\"var-input__controller\\">
<div class=\\"var-input__icon\\"></div>
<div class=\\"var-input__wrap\\">
<!----> <input autocomplete=\\"new-password\\" id=\\"var-input-127\\" type=\\"text\\" class=\\"var-input__input\\"> <label for=\\"var-input-127\\" class=\\"var--ellipsis var-input__placeholder var-input--placeholder-hint\\">
</label></div>
<div class=\\"var-input__icon\\">
<!---->
</div>
</div>
<div class=\\"var-input__line\\">
<div class=\\"var-input__dot\\"></div>
</div>
<transition-stub name=\\"var-form-details\\">
<!---->
</transition-stub>
</div> <span>/ 6</span>
</li>
<li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__size\\">
<div class=\\"var-menu\\">
<div class=\\"var-pagination__size-open\\" style=\\"display: flex;\\"><span>20条 / 页</span> <i class=\\"var-icon var-pagination__size-open-icon var-icon--set var-icon-menu-down\\" style=\\"transition: transform 0ms;\\" var-pagination-cover=\\"\\"></i></div>
<div class=\\"var-teleport\\"></div>
</div>
</li>
<!---->
<!---->
</ul>"
`;
exports[`Size related props 2`] = `
"<ul class=\\"var-pagination\\">
<li class=\\"var-pagination__item var-pagination__prev var-pagination__item-disabled var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__simple\\">
<div class=\\"var-input var--box\\" var-pagination-cover=\\"\\">
<div class=\\"var-input__controller\\">
<div class=\\"var-input__icon\\"></div>
<div class=\\"var-input__wrap\\">
<!----> <input autocomplete=\\"new-password\\" id=\\"var-input-127\\" type=\\"text\\" class=\\"var-input__input\\"> <label for=\\"var-input-127\\" class=\\"var--ellipsis var-input__placeholder var-input--placeholder-hint\\">
</label></div>
<div class=\\"var-input__icon\\">
<!---->
</div>
</div>
<div class=\\"var-input__line\\">
<div class=\\"var-input__dot\\"></div>
</div>
<transition-stub name=\\"var-form-details\\">
<!---->
</transition-stub>
</div> <span>/ 6</span>
</li>
<li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
<!---->
<!---->
<!---->
</ul>"
`;
exports[`basic mode disabled prop 1`] = `
"<ul class=\\"var-pagination\\">
<li class=\\"var-pagination__item var-pagination__prev var-pagination__item-disabled var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__item var-pagination__next var-pagination__item-disabled var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__size var-pagination__item-disabled\\">
<div class=\\"var-menu\\">
<div class=\\"var-pagination__size-open\\" style=\\"display: flex;\\"><span>10条 / 页</span> <i class=\\"var-icon var-pagination__size-open-icon var-icon--set var-icon-menu-down\\" style=\\"transition: transform 0ms;\\" var-pagination-cover=\\"\\"></i></div>
<transition-stub name=\\"var-menu\\">
<div class=\\"var-menu__menu var-elevation--3\\" style=\\"top: calc(0px + 0px); left: calc(0px + -4px); z-index: 2000; display: none;\\">
<div class=\\"var-cell var-pagination__list var-pagination__list-active\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
10条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
20条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
50条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
100条 / 页
</div>
<!---->
</div>
<!---->
</div>
</div>
</transition-stub>
</div>
</li>
<!---->
<!---->
</ul>"
`;
exports[`basic mode mount 1`] = `
"<ul class=\\"var-pagination\\">
<li class=\\"var-pagination__item var-pagination__prev var-pagination__item-disabled var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></li>
<li item-mode=\\"basic\\" class=\\"var-pagination__item var-elevation--2 var-pagination__item-active\\">
1
</li>
<li item-mode=\\"head\\" class=\\"var-pagination__item var-elevation--2 var-pagination__item-hide\\">
...
</li>
<li item-mode=\\"basic\\" class=\\"var-pagination__item var-elevation--2\\">
2
</li>
<li item-mode=\\"basic\\" class=\\"var-pagination__item var-elevation--2\\">
3
</li>
<li item-mode=\\"basic\\" class=\\"var-pagination__item var-elevation--2\\">
4
</li>
<li item-mode=\\"tail\\" class=\\"var-pagination__item var-elevation--2\\">
...
</li>
<li item-mode=\\"basic\\" class=\\"var-pagination__item var-elevation--2\\">
13
</li>
<li class=\\"var-pagination__item var-pagination__next var-elevation--2\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__size\\">
<div class=\\"var-menu\\">
<div class=\\"var-pagination__size-open\\" style=\\"display: flex;\\"><span>10条 / 页</span> <i class=\\"var-icon var-pagination__size-open-icon var-icon--set var-icon-menu-down\\" style=\\"transition: transform 0ms;\\" var-pagination-cover=\\"\\"></i></div>
<transition-stub name=\\"var-menu\\">
<div class=\\"var-menu__menu var-elevation--3\\" style=\\"top: calc(0px + 0px); left: calc(0px + -4px); z-index: 2000; display: none;\\">
<div class=\\"var-cell var-pagination__list var-pagination__list-active\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
10条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
20条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
50条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
100条 / 页
</div>
<!---->
</div>
<!---->
</div>
</div>
</transition-stub>
</div>
</li>
<li class=\\"var-pagination__quickly\\">
前往
<div class=\\"var-input var--box\\" var-pagination-cover=\\"\\">
<div class=\\"var-input__controller\\">
<div class=\\"var-input__icon\\"></div>
<div class=\\"var-input__wrap\\">
<!----> <input autocomplete=\\"new-password\\" id=\\"var-input-90\\" type=\\"text\\" class=\\"var-input__input\\"> <label for=\\"var-input-90\\" class=\\"var--ellipsis var-input__placeholder\\">
</label></div>
<div class=\\"var-input__icon\\">
<!---->
</div>
</div>
<div class=\\"var-input__line\\">
<div class=\\"var-input__dot\\"></div>
</div>
<transition-stub name=\\"var-form-details\\">
<!---->
</transition-stub>
</div>
</li>
<li class=\\"var-pagination__total\\">
1-10 of 123 items
</li>
</ul>"
`;
exports[`simple mode disabled prop 1`] = `
"<ul class=\\"var-pagination\\">
<li class=\\"var-pagination__item var-pagination__prev var-pagination__item-disabled var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__simple var-pagination__item-disabled\\">
<div class=\\"var-input var--box var-input--disabled\\" var-pagination-cover=\\"\\">
<div class=\\"var-input__controller var-input--disabled\\">
<div class=\\"var-input__icon\\"></div>
<div class=\\"var-input__wrap\\">
<!----> <input autocomplete=\\"new-password\\" id=\\"var-input-68\\" disabled=\\"disabled\\" type=\\"text\\" class=\\"var-input__input var-input--disabled\\"> <label for=\\"var-input-68\\" class=\\"var--ellipsis var-input__placeholder var-input--placeholder-hint\\">
</label></div>
<div class=\\"var-input__icon\\">
<!---->
</div>
</div>
<div class=\\"var-input__line var-input--line-disabled\\">
<div class=\\"var-input__dot var-input--line-disabled\\"></div>
</div>
<transition-stub name=\\"var-form-details\\">
<!---->
</transition-stub>
</div> <span>/ 0</span>
</li>
<li class=\\"var-pagination__item var-pagination__next var-pagination__item-disabled var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__size var-pagination__item-disabled\\">
<div class=\\"var-menu\\">
<div class=\\"var-pagination__size-open\\" style=\\"display: flex;\\"><span>10条 / 页</span> <i class=\\"var-icon var-pagination__size-open-icon var-icon--set var-icon-menu-down\\" style=\\"transition: transform 0ms;\\" var-pagination-cover=\\"\\"></i></div>
<transition-stub name=\\"var-menu\\">
<div class=\\"var-menu__menu var-elevation--3\\" style=\\"top: calc(0px + 0px); left: calc(0px + -4px); z-index: 2000; display: none;\\">
<div class=\\"var-cell var-pagination__list var-pagination__list-active\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
10条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
20条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
50条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
100条 / 页
</div>
<!---->
</div>
<!---->
</div>
</div>
</transition-stub>
</div>
</li>
<!---->
<!---->
</ul>"
`;
exports[`simple mode mount 1`] = `
"<ul class=\\"var-pagination\\">
<li class=\\"var-pagination__item var-pagination__prev var-pagination__item-disabled var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__simple\\">
<div class=\\"var-input var--box\\" var-pagination-cover=\\"\\">
<div class=\\"var-input__controller\\">
<div class=\\"var-input__icon\\"></div>
<div class=\\"var-input__wrap\\">
<!----> <input autocomplete=\\"new-password\\" id=\\"var-input-54\\" type=\\"text\\" class=\\"var-input__input\\"> <label for=\\"var-input-54\\" class=\\"var--ellipsis var-input__placeholder var-input--placeholder-hint\\">
</label></div>
<div class=\\"var-input__icon\\">
<!---->
</div>
</div>
<div class=\\"var-input__line\\">
<div class=\\"var-input__dot\\"></div>
</div>
<transition-stub name=\\"var-form-details\\">
<!---->
</transition-stub>
</div> <span>/ 13</span>
</li>
<li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: transform 0ms;\\"></i></li>
<li class=\\"var-pagination__size\\">
<div class=\\"var-menu\\">
<div class=\\"var-pagination__size-open\\" style=\\"display: flex;\\"><span>10条 / 页</span> <i class=\\"var-icon var-pagination__size-open-icon var-icon--set var-icon-menu-down\\" style=\\"transition: transform 0ms;\\" var-pagination-cover=\\"\\"></i></div>
<transition-stub name=\\"var-menu\\">
<div class=\\"var-menu__menu var-elevation--3\\" style=\\"top: calc(0px + 0px); left: calc(0px + -4px); z-index: 2000; display: none;\\">
<div class=\\"var-cell var-pagination__list var-pagination__list-active\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
10条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
20条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
50条 / 页
</div>
<!---->
</div>
<!---->
</div>
<div class=\\"var-cell var-pagination__list\\">
<!---->
<div class=\\"var-cell__content\\">
<div class=\\"var-cell__title\\">
100条 / 页
</div>
<!---->
</div>
<!---->
</div>
</div>
</transition-stub>
</div>
</li>
<!---->
<li class=\\"var-pagination__total\\">
1-10 of 123 items
</li>
</ul>"
`;
exports[`test pagination example 1`] = `
"<div class=\\"var-pagination-example\\">
<div class=\\"app-type\\">基本使用</div>
Expand Down
Loading

0 comments on commit b688380

Please sign in to comment.