github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: slider marks class error

pull/2682/head
tangjinzhou 2020-08-03 22:38:35 +08:00
parent 64147e7744
commit 0a728ff8d3
5 changed files with 52 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
antdv-demo

@ -1 +1 @@
Subproject commit d76dd882c7b266a479533515b428c90b5630a92a
Subproject commit fc551d5148a4b72ca5a8c119d3d141ec6190ffd9

54
components/slider/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,22 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Slider should show tooltip when hovering slider handler 1`] = `
<div>
<div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top" style="left: -999px; top: -1003px; transform-origin: 50% 4px;">
<div class="ant-tooltip-content">
<div class="ant-tooltip-arrow"></div>
<div role="tooltip" class="ant-tooltip-inner">30</div>
<div id="app" data-v-app=""></div>
<div id="app" data-v-app="">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
<div class="ant-slider-step"></div>
<!--teleport start-->
<!--teleport end-->
<div class="ant-tooltip-open ant-slider-handle" style="left: 30%; transform: translateX(-50%);" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" aria-disabled="false"></div>
<div class=""></div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
<div>
<!---->
<div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top" style="left: -999px; top: -1003px;">
<div class="ant-tooltip-content">
<div class="ant-tooltip-arrow">
<!---->
</div>
<div class="ant-tooltip-inner" role="tooltip">30</div>
</div>
</div>
</div>
</div>
`;
exports[`Slider should show tooltip when hovering slider handler 2`] = `
<div>
<div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top" style="display: none;">
<div class="ant-tooltip-content">
<div class="ant-tooltip-arrow"></div>
<div role="tooltip" class="ant-tooltip-inner">30</div>
<div id="app" data-v-app=""></div>
<div id="app" data-v-app="">
<div tabindex="-1" class="ant-slider">
<div class="ant-slider-rail"></div>
<div class="ant-slider-track" style="left: 0%; width: 30%;"></div>
<div class="ant-slider-step"></div>
<!--teleport start-->
<!--teleport end-->
<div class="ant-slider-handle" style="left: 30%; transform: translateX(-50%);" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30" aria-disabled="false"></div>
<div class=""></div>
</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; width: 100%;">
<div>
<!---->
<div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top zoom-down-leave" style="left: -999px; top: -1003px;">
<div class="ant-tooltip-content">
<div class="ant-tooltip-arrow">
<!---->
</div>
<div class="ant-tooltip-inner" role="tooltip">30</div>
</div>
</div>
</div>
</div>

36
components/slider/__tests__/index.test.js
View File

@ -11,43 +11,17 @@ describe('Slider', () => {
defaultValue: 30,
},
sync: false,
attachTo: 'body',
});
await asyncExpect(() => {
wrapper
.findAll('.ant-slider-handle')
.at(0)
.trigger('mouseenter');
});
let dropdownWrapper = null;
await asyncExpect(() => {
dropdownWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
wrapper.findAll('.ant-slider-handle')[0].trigger('mouseenter');
});
await asyncExpect(() => {
expect(dropdownWrapper.html()).toMatchSnapshot();
wrapper
.findAll('.ant-slider-handle')
.at(0)
.trigger('mouseleave');
expect(document.body.innerHTML).toMatchSnapshot();
wrapper.findAll('.ant-slider-handle')[0].trigger('mouseleave');
});
await asyncExpect(() => {
dropdownWrapper = mount(
{
render() {
return wrapper.find({ name: 'Trigger' }).vm.getComponent();
},
},
{ sync: false },
);
});
await asyncExpect(() => {
expect(dropdownWrapper.html()).toMatchSnapshot();
expect(document.body.innerHTML).toMatchSnapshot();
});
});
});

2
components/vc-slider/src/common/Marks.jsx
View File

@ -3,7 +3,7 @@ import { isValidElement } from '../../../_util/props-util';
const Marks = (_, { attrs }) => {
const {
className,
class: className,
vertical,
reverse,
marks,

2
examples/App.vue
View File

@ -4,7 +4,7 @@
</div>
</template>
<script>
import demo from '../antdv-demo/docs/spin/demo/index';
import demo from '../antdv-demo/docs/slider/demo/index';
export default {
components: {